Компонент Select

Select (Guide Selection)

Selected=Oll guide

Selected=Guide 1

Selected=Guide more

Selected=Conditions and Route

Select Location

Device=Mob

Device=Desk

Various States

State=Active (Link)

State=Active (Tabs language)

State=Active (Social media and phone)

Размеры

Small

Medium

Big

Темы

Light Theme

Dark Theme

Интерактивное демо

Размер:

Тема:

Устройство:

Иконка слева:

Выбранное значение: Ничего не выбрано

Использование в коде

Базовый селект

<Select 
  v-model="selectedValue" 
  :options="options" 
  placeholder="Выберите опцию" 
/>

С иконками и аватаром

<Select 
  v-model="selectedGuide" 
  :options="guideOptions" 
  placeholder="Выберите гида"
  iconLeft="user"
  :avatar="{ initials: 'АС' }"
/>

Темная тема

<Select 
  v-model="selectedLocation" 
  :options="locationOptions" 
  placeholder="Выберите локацию"
  theme="dark"
  iconRight="map-pin"
/>

Кастомные опции

<Select v-model="selected">
  <template #options>
    <div class="custom-option">
      Кастомная опция
    </div>
  </template>
</Select>

Спецификации

Props

modelValue - текущее значение
options - массив опций
placeholder - плейсхолдер
size - размер (small, medium, big)
theme - тема (light, dark)
device - устройство (mobile, desktop)
iconLeft - иконка слева
avatar - аватар пользователя
disabled - отключенное состояние

Размеры

small - 32px высота, 12px шрифт
medium - 40px высота, 14px шрифт
big - 48px высота, 16px шрифт

Темы

light - белый фон, черный текст
dark - темный фон, белый текст

События

update:modelValue - изменение значения
change - выбор опции