Dropdown и расширенные выпадающие меню

Компонент Dropdown является ключевым элементом интерфейсов, предоставляемым библиотекой Carbon Components Svelte, позволяя пользователям выбирать значения из списка опций. В Svelte его реализация базируется на реактивных свойствах и слоте для кастомизации.

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

  • items — массив объектов с обязательными свойствами id и text.
  • bind:value позволяет автоматически синхронизировать выбранное значение с переменной.
  • label задаёт заголовок поля для пользователя.

Настройка поведения и стиля Dropdown

Компонент поддерживает несколько режимов отображения:

  • light / dark — визуальные темы, управляются через свойство theme.
  • disabled — отключение выбора элементов через disabled={true}.
  • helperText — добавляет поясняющий текст под полем выбора.

Пример с расширенной конфигурацией:

Обработка событий Dropdown

Компонент поддерживает стандартные события Svelte:

  • on:change — срабатывает при выборе элемента.
  • on:focus / on:blur — контроль фокуса для кастомного поведения.

Пример использования события change:

 {
    console.log("Выбран элемент:", event.detail);
  }}
/>

Свойство event.detail содержит объект выбранного элемента: { id, text }.

Многоуровневые и расширенные Dropdown

Carbon Components Svelte позволяет создавать расширенные меню, включая:

  • MultiSelect — выбор нескольких элементов.
  • Grouped Dropdown — группировка элементов по категориям.
  • Filterable Dropdown — поиск и фильтрация внутри списка.

MultiSelect пример:

Grouped Dropdown пример:

Особенности группировки:

  • Каждая группа содержит text и массив items.
  • Возможность добавления вложенных уровней при необходимости.

Фильтруемый Dropdown

Свойство type="inline" и реактивные переменные позволяют создавать фильтруемые списки.

Особенности фильтрации:

  • Используется реактивная переменная $: filteredItems.
  • Список обновляется автоматически при изменении фильтра.

Кастомизация элементов Dropdown через слоты

С помощью слотов можно изменять внешний вид элементов списка:


  
    
{item.text}

Особенности кастомного рендеринга:

  • slot="item" позволяет использовать HTML и стили для каждого элемента.
  • let:item даёт доступ к объекту элемента списка.

Производительность и оптимизация

  • Для больших списков рекомендуется использовать виртуализацию через сторонние библиотеки.
  • Своевременная фильтрация и сортировка массива снижает нагрузку на DOM.
  • Использование bind:value предотвращает лишние ререндеры компонента.

Взаимодействие Dropdown с формами

Dropdown легко интегрируется с формами Svelte и библиотеками валидации:
  • Свойства invalid и invalidText позволяют отображать ошибки валидации.
  • Реактивное управление состоянием упрощает интеграцию с динамическими формами.
Оглавление