SelectableTile для выбора

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

Импорт и базовое подключение

Для начала работы с SelectableTile необходимо импортировать компонент из пакета carbon-components-svelte:

<script>
  import { SelectableTile } from 'carbon-components-svelte';
  let selected = false;
</script>

<SelectableTile bind:selected>
  Текст плитки
</SelectableTile>

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

bind:selected — двусторонняя привязка состояния выбора. Позволяет отслеживать, выбрана плитка или нет.
Внутри компонента можно разместить любой текст или HTML-контент, включая иконки и изображения.

Работа с несколькими плитками

Чтобы реализовать группу плиток, где можно выбрать только одну плитку, используют переменную для хранения выбранного значения и атрибут value:

<script>
  import { SelectableTile } from 'carbon-components-svelte';
  let selectedValue = '';
</script>

<SelectableTile value="option1" bind:selected={selectedValue}>
  Опция 1
</SelectableTile>
<SelectableTile value="option2" bind:selected={selectedValue}>
  Опция 2
</SelectableTile>
<SelectableTile value="option3" bind:selected={selectedValue}>
  Опция 3
</SelectableTile>

<p>Выбрано: {selectedValue}</p>

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

value задает уникальный идентификатор плитки. При выборе одной плитки переменная selectedValue принимает значение выбранной плитки.
Такой подход позволяет строить радио-подобные группы плиток без использования отдельного RadioButtonGroup.

Множественный выбор

Для реализации множественного выбора используется массив для хранения выбранных плиток:

<script>
  import { SelectableTile } from 'carbon-components-svelte';
  let selectedItems = [];
  
  function toggleSelection(value) {
    if (selectedItems.includes(value)) {
      selectedItems = selectedItems.filter(item => item !== value);
    } else {
      selectedItems = [...selectedItems, value];
    }
  }
</script>

<SelectableTile selected={selectedItems.includes('option1')} on:click={() => toggleSelection('option1')}>
  Опция 1
</SelectableTile>
<SelectableTile selected={selectedItems.includes('option2')} on:click={() => toggleSelection('option2')}>
  Опция 2
</SelectableTile>
<SelectableTile selected={selectedItems.includes('option3')} on:click={() => toggleSelection('option3')}>
  Опция 3
</SelectableTile>

<p>Выбраны: {selectedItems.join(', ')}</p>

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

Для множественного выбора нельзя использовать bind:selected напрямую с массивом, поэтому применяется явная функция toggleSelection.
Состояние плитки определяется через selected={selectedItems.includes('value')}.

Стилизация и размеры плиток

SelectableTile поддерживает несколько стилей и размеров:

light — светлая плитка на темном фоне: <SelectableTile light>.
disabled — плитка неактивна: <SelectableTile disabled>.
tile-size — можно контролировать размер плитки через CSS-классы:

<SelectableTile class="bx--tile--small">
  Маленькая плитка
</SelectableTile>
<SelectableTile class="bx--tile--large">
  Большая плитка
</SelectableTile>

Совет: для сложного интерфейса рекомендуется использовать сетку Grid или Row/Column для выравнивания плиток по макету.

Встраивание контента в плитку

SelectableTile поддерживает любые вложенные элементы:

<SelectableTile value="info" bind:selected>
  <h3>Заголовок плитки</h3>
  <p>Описание функционала или опции</p>
  <img src="icon.svg" alt="Иконка">
</SelectableTile>

Поддерживаются заголовки, абзацы, изображения и иконки.
Можно комбинировать плитки с другими компонентами Carbon, например, Button или Checkbox, для расширенного взаимодействия.

События

SelectableTile генерирует стандартные события Svelte:

click — вызывается при нажатии на плитку.
mouseenter и mouseleave — для кастомного hover-эффекта.
Можно подписываться на изменение состояния selected через привязку:

<SelectableTile bind:selected on:click={() => console.log('Плитка выбрана')}>
  Опция
</SelectableTile>

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

Плитки автоматически поддерживают управление через клавиатуру (Tab, Enter, Space).
aria-checked и role="checkbox" или role="radio" назначаются автоматически при использовании привязки selected и значения value.
Для экранных читалок важно использовать текстовые метки внутри плитки.