Search и поле поиска

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

Компонент Search обладает рядом свойств, позволяющих тонко настроить его поведение:

  • placeholder — строка, отображаемая внутри поля ввода до ввода данных. Используется для подсказки пользователю.

  • labelText — текстовая подпись поля поиска. Отображается над полем ввода, что улучшает доступность.

  • value — текущее значение поля поиска. Поддерживает двустороннюю привязку через Svelte bind:value.

  • size — задает размер компонента. Поддерживаются значения sm, md, lg. Влияет на высоту поля и размер текста.

  • closeButtonLabel — текст кнопки очистки поля, используемый для доступности.

  • disabled — булевое значение, отключающее возможность ввода текста.

Двусторонняя привязка и обработка событий

В Svelte компоненты Carbon используют стандартные механизмы работы с данными и событиями. Для поиска ключевыми являются события input и change.

Пример с привязкой значения и обработкой события input:

event.detail.value содержит актуальный текст, введенный пользователем. Это позволяет реализовать динамическую фильтрацию данных в реальном времени.

Настройка кнопки очистки

Компонент Search по умолчанию содержит кнопку для очистки введенного текста. Ее можно кастомизировать через свойства:

  • closeButtonLabel — текст для кнопки очистки, критичен для доступности.
  • showClearButton — логическое значение, определяющее, отображать ли кнопку очистки.

Пример:

Использование и стилизация через CSS

Carbon Components Svelte использует CSS-модули и классы IBM Carbon для стилизации. Основные классы поля поиска:

  • .bx--search — контейнер всего компонента.
  • .bx--search-input — текстовое поле.
  • .bx--search-close — кнопка очистки.
  • .bx--search-magnifier — иконка лупы.

Пример добавления кастомного класса:

Интеграция с формами и другими компонентами

Компонент Search легко интегрируется с формами и другими элементами интерфейса. Он поддерживает стандартные события Svelte, что позволяет обрабатывать ввод данных в связке с кнопками или фильтрами:

Такое сочетание позволяет реализовать поиск с кнопкой подтверждения или поиск «по мере ввода» через обработку события input.

Доступность (Accessibility)

Search соответствует требованиям WCAG:

  • Поддержка атрибутов aria-label, aria-labelledby.
  • Кнопка очистки снабжена aria-label через closeButtonLabel.
  • Поле поиска может быть использовано с клавиатуры без мыши.

Пример улучшенной доступности:

Комбинирование с Autocomplete

Для реализации автодополнения поле поиска можно объединять с компонентами ListBox или создавать кастомные списки предложений. Компонент Search при этом используется как контроллер ввода:


{#if query.length > 0}
  
    
    {#each suggestions.filter(s => s.includes(query)) as suggestion}
      
  • {suggestion}
    • 
    {/each}
  

{/if}

Такой подход позволяет строить динамический интерфейс поиска без внешних библиотек.

Оглавление