Icon-only компоненты

Icon-only компоненты представляют собой специализированные элементы пользовательского интерфейса, которые содержат только иконку без текста. Они широко используются для компактного размещения действий, навигации или статуса в приложениях, сохраняя визуальную лёгкость и интуитивность интерфейса.

Основные особенности

  • Минималистичность: отсутствует текстовое сопровождение, что делает интерфейс более чистым.
  • Интерактивность: такие компоненты чаще всего реагируют на события click, hover и focus.
  • Доступность: крайне важно использовать атрибуты aria-label или title для корректного озвучивания экранными читалками.

Подключение и использование

В Svelte компонент иконки подключается через пакет carbon-components-svelte. Простейший пример:

<script>
  import { Button, Add16 } from 'carbon-components-svelte';
</script>

<Button kind="ghost" hasIcon={true} icon={Add16} ariaLabel="Добавить элемент" />

Пояснения к коду:

  • kind="ghost" — определяет визуальный стиль кнопки. Для icon-only часто используются стили ghost или secondary.
  • hasIcon={true} — указывает, что кнопка содержит только иконку.
  • icon={Add16} — передаётся сам компонент иконки.
  • ariaLabel="Добавить элемент" — текстовая подсказка для вспомогательных технологий.

Размеры и адаптивность

Carbon Components Svelte поддерживает несколько стандартных размеров иконок:

  • 16px — для компактных панелей и toolbar’ов.
  • 20px и 24px — для основных действий в интерфейсе.
  • 32px — для выделенных действий или больших кнопок.

Размер задаётся компонентом иконки, например Add16 или Add20. Подбор подходящего размера влияет на читаемость и баланс интерфейса.

Состояния и визуальная обратная связь

Icon-only компоненты имеют несколько состояний:

  • Default — обычное отображение.
  • Hover — при наведении изменяется оттенок фона или иконки.
  • Focus — появляется рамка фокуса для клавиатурной навигации.
  • Disabled — компонент становится неактивным и полупрозрачным.

Пример реализации состояний:

<Button kind="ghost" hasIcon={true} icon={Add16} ariaLabel="Добавить элемент" disabled={true} />

Для hover и focus часто применяются CSS-переменные Carbon, чтобы сохранять консистентность стиля:

:global(.bx--btn--ghost:hover) {
  background-color: var(--cds-hover-ui);
}

Сочетание с другими компонентами

Icon-only компоненты идеально интегрируются в Toolbar, DataTable, Modal и Pagination. Например, кнопки для сортировки столбцов или закрытия модальных окон часто оформляются именно как icon-only.

Пример в DataTable:

<DataTable>
  <TableHead>
    <TableRow>
      <TableHeader>
        Имя
        <Button kind="ghost" hasIcon={true} icon={ChevronDown16} ariaLabel="Сортировка по имени" />
      </TableHeader>
    </TableRow>
  </TableHead>
</DataTable>

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

  • aria-label: обязательный для всех icon-only кнопок.
  • tabindex: все интерактивные элементы должны быть доступны с клавиатуры.
  • role=“button”: если элемент не является стандартной кнопкой, роль нужно указать явно.

Практические рекомендации

  • Использовать icon-only компоненты для действий, которые интуитивно понятны без текста (например, «закрыть», «добавить», «поиск»).
  • Не перегружать интерфейс иконками без пояснения — важно сохранять контекст действия.
  • Проверять читаемость и визуальный контраст в разных состояниях (hover, focus, disabled).
  • Поддерживать единый стиль и размеры для всех icon-only элементов в приложении.

Настройка и кастомизация

Carbon Components Svelte позволяет менять цвета, размеры иконок и кнопок через CSS-переменные и пропсы:

<Button
  kind="ghost"
  hasIcon={true}
  icon={Add16}
  ariaLabel="Добавить элемент"
  style="--cds-button-ghost-hover-bg: #e0f0ff;"
/>

Примеры и комбинации

  • Закрытие модального окна:
<Button kind="ghost" hasIcon={true} icon={Close16} ariaLabel="Закрыть окно" />
  • Добавление элемента в список:
<Button kind="primary" hasIcon={true} icon={Add20} ariaLabel="Добавить элемент" />
  • Интерактивные панели фильтров:
<Button kind="ghost" hasIcon={true} icon={Filter16} ariaLabel="Фильтры" />

Icon-only компоненты являются ключевым инструментом для создания компактного и современного интерфейса в Carbon Components Svelte. Они обеспечивают визуальную лёгкость, интерактивность и соответствие стандартам доступности, если правильно применять размеры, состояния и описательные атрибуты.

Оглавление