FilterableMultiSelect

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

Основные свойства

items Массив объектов, представляющих элементы списка. Каждый объект должен содержать как минимум уникальный идентификатор и отображаемое имя. Пример структуры:

const items = [
  { id: '1', label: 'Первый элемент' },
  { id: '2', label: 'Второй элемент' },
  { id: '3', label: 'Третий элемент' }
];

selectedItems Массив объектов, которые были выбраны пользователем. Обновляется автоматически при выборе или удалении элементов из списка.

let selectedItems = [];

placeholder Текст подсказки для пустого поля фильтра:

<FilterableMultiSelect placeholder="Выберите элементы" />

disabled Флаг, который делает компонент неактивным:

<FilterableMultiSelect disabled={true} />

Работа с фильтром

Фильтрация осуществляется на клиенте, и компонент автоматически обновляет список опций при вводе текста. Ключевые моменты:

  • Реактивное связывание: значение фильтра можно привязать к переменной Svelte, что позволяет синхронизировать состояние фильтра с внешней логикой.
  • Кастомная функция фильтрации: можно задать собственную функцию фильтрации через проп itemToString или через filterItems.

Пример кастомной фильтрации по части текста:

<FilterableMultiSelect
  {items}
  bind:selectedItems
  itemToString={item => item.label.toLowerCase().includes(filterText.toLowerCase()) ? item.label : ''}
/>

События компонента

on:change Срабатывает при изменении выбранных элементов. Передает массив текущих выбранных объектов.

<FilterableMultiSelect
  {items}
  bind:selectedItems
  on:change={(event) => console.log(event.detail)}
/>

on:input Срабатывает при вводе текста в поле фильтра. Позволяет отслеживать каждое изменение фильтруемого значения.

<FilterableMultiSelect
  {items}
  bind:selectedItems
  on:input={(event) => console.log('Фильтр:', event.detail)}
/>

Настройка отображения

titleText Заголовок компонента, выводится над полем выбора:

<FilterableMultiSelect
  {items}
  titleText="Выберите элементы"
/>

helperText Подсказка под полем выбора:

<FilterableMultiSelect
  {items}
  helperText="Можно выбрать несколько элементов"
/>

light Светлая тема компонента для темного фона интерфейса:

<FilterableMultiSelect {items} light />

Продвинутые возможности

Асинхронная загрузка опций Можно использовать реактивные переменные Svelte для загрузки элементов динамически при вводе текста. Например, фильтрация с API:

let filterText = '';
let items = [];

$: if (filterText.length > 2) {
  fetch(`/api/items?query=${filterText}`)
    .then(res => res.json())
    .then(data => items = data);
}

Кастомизация элементов списка Компонент поддерживает использование слотов для кастомного рендеринга каждой опции.

<FilterableMultiSelect {items} bind:selectedItems let:item>
  <div class="custom-item">
    <strong>{item.label}</strong> — дополнительная информация
  </div>
</FilterableMultiSelect>

Ограничение количества выбираемых элементов Можно контролировать максимальное количество выбранных элементов:

function handleChange(event) {
  if (event.detail.length > 3) {
    selectedItems = event.detail.slice(0, 3);
  } else {
    selectedItems = event.detail;
  }
}

Стилизация и интеграция

  • CSS-классы: каждый элемент компонента имеет собственные классы Carbon (bx--multi-select, bx--list-box__menu, bx--list-box__selection) для гибкой кастомизации.
  • Тема: компоненты Svelte полностью совместимы с темой Carbon Design System, что позволяет использовать глобальные переменные для цветов, отступов и шрифтов.
  • Адаптивность: FilterableMultiSelect корректно отображается на мобильных устройствах, поддерживая касания и клавиатурную навигацию.

Примеры типичного использования

<script>
  import { FilterableMultiSelect } from 'carbon-components-svelte';
  
  let items = [
    { id: '1', label: 'React' },
    { id: '2', label: 'Svelte' },
    { id: '3', label: 'Vue' },
    { id: '4', label: 'Angular' }
  ];
  
  let selectedItems = [];
</script>

<FilterableMultiSelect
  {items}
  bind:selectedItems
  placeholder="Выберите фреймворки"
  titleText="Фреймворки"
  helperText="Можно выбрать несколько вариантов"
/>

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

Эта реализация FilterableMultiSelect в Svelte демонстрирует богатый набор возможностей для управления множественным выбором с фильтром, динамической загрузкой данных и гибкой кастомизацией внешнего вида.

Оглавление