Компонент Select

Компонент Select является ключевым элементом интерфейса для выбора одного или нескольких значений из предопределенного списка. В экосистеме SvelteKit он интегрируется с реактивностью фреймворка и предоставляет гибкие возможности кастомизации.

Основная структура

Базовая структура компонента Sel ect в SvelteKit выглядит следующим образом:

<script>
  import { onMount } fr om 'svelte';
  let selectedValue = '';
  let options = [
    { value: 'apple', label: 'Яблоко' },
    { value: 'banana', label: 'Банан' },
    { value: 'cherry', label: 'Вишня' }
  ];
</script>

<Sel ect bind:value={selectedValue} items={options} placeholder="Выберите фрукт" />

Ключевые моменты:

bind:value — реактивная привязка выбранного значения.
items — массив объектов { value, label }, определяющий варианты.
placeholder — текст, отображаемый до выбора значения.

Одновременный выбор нескольких значений

Для реализации мультиселекта используется массив для value:

<script>
  let selectedValues = [];
  let options = [
    { value: 'red', label: 'Красный' },
    { value: 'green', label: 'Зелёный' },
    { value: 'blue', label: 'Синий' }
  ];
</script>

<Select bind:value={selectedValues} items={options} multiple={true} placeholder="Выберите цвета" />

Особенности:

multiple={true} позволяет выбирать несколько значений.
selectedValues автоматически обновляется при изменении выбора.
Можно комбинировать с кастомными компонентами для отображения тегов выбранных элементов.

Кастомизация отображения элементов

Select поддерживает рендеринг пользовательских опций с помощью слотов:

<Select bind:value={selectedValue} items={options}>
  <span slot="item" let:item>
    {item.label} ({item.value.toUpperCase()})
  </span>
</Select>

Принципы работы слотов:

slot="item" — позволяет задать собственный шаблон отображения каждой опции.
let:item предоставляет доступ к объекту текущей опции.
Можно комбинировать с иконками, цветами и дополнительной информацией.

Работа с событиями

Select генерирует несколько событий, которые полезно обрабатывать для динамических интерфейсов:

on:change — срабатывает при изменении выбора.
on:focus / on:blur — события фокуса, полезные для валидации или стилей.
on:open / on:close — управление состоянием выпадающего списка.

Пример обработки изменения значения:

<Select bind:value={selectedValue} items={options} on:change={(e) => console.log('Выбрано:', e.detail)} />

e.detail содержит текущее выбранное значение или массив значений при мультиселекте.

Стилизация и темы

Компонент Select можно стилизовать как через глобальные CSS-классы, так и через props для темы:

<Select
  bind:value={selectedValue}
  items={options}
  class="custom-select"
  variant="outlined"
/>

<style>
  .custom-select {
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 0.5rem;
  }
</style>

Важные моменты:

variant — поддерживает стандартные стили, например, outlined или filled.
CSS-классы позволяют применять адаптивные стили и hover-эффекты.
Для интеграции с Tailwind или другими UI-библиотеками можно использовать class: директиву Svelte.

Асинхронная загрузка опций

Select может динамически получать данные, что важно для больших списков:

<script>
  import { onMount } fr om 'svelte';
  let options = [];
  let selectedValue = '';

  onMount(async () => {
    const res = await fetch('/api/fruits');
    const data = await res.json();
    options = data.map(fruit => ({ value: fruit.id, label: fruit.name }));
  });
</script>

<Select bind:value={selectedValue} items={options} placeholder="Выберите фрукт" />

Особенности:

Поддерживаются асинхронные массивы.
Select автоматически обновляет список при изменении items.
Можно добавлять индикаторы загрузки внутри слота или через дополнительный prop.

Дополнительные возможности

Фильтрация и поиск: встроенные или кастомные фильтры для больших списков.
Доступность (a11y): поддержка клавиатурной навигации и ARIA-атрибутов.
Группировка опций: использование структуры { label, options: [...] } для категорий.
Динамическая высота и виртуализация: полезно для оптимизации рендеринга длинных списков.

Пример группировки:

let groupedOptions = [
  { label: 'Фрукты', options: [{ value: 'apple', label: 'Яблоко' }] },
  { label: 'Овощи', options: [{ value: 'carrot', label: 'Морковь' }] }
];

<Select bind:value={selectedValue} items={groupedOptions} groupBy="label" />

groupBy указывает ключ, по которому элементы группируются в выпадающем списке.