TileGroup для группировки

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

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

  • legend (string) — текст заголовка группы плиток. Отображается как подпись над набором плиток и используется для семантической группировки в формах.

  • valueSelected (string | undefined) — значение выбранной плитки. Работает как двусторонняя привязка, позволяя контролировать выбор программно.

  • name (string) — имя группы, которое используется при отправке формы, если плитки работают как радио-кнопки.

  • disabled (boolean) — блокирует все плитки внутри группы, предотвращая их выбор.

  • on:change (event) — событие, срабатывающее при изменении выбора в группе. Возвращает объект события, содержащий значение выбранной плитки.

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

<script>
  import { TileGroup, RadioTile } from 'carbon-components-svelte';

  let selectedValue = 'option1';
</script>

<TileGroup
  legend="Выберите вариант"
  bind:valueSelected={selectedValue}
  name="options"
>
  <RadioTile value="option1">Вариант 1</RadioTile>
  <RadioTile value="option2">Вариант 2</RadioTile>
  <RadioTile value="option3">Вариант 3</RadioTile>
</TileGroup>

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

Особенности работы TileGroup

  1. Управление выбором TileGroup поддерживает как одиночный выбор (RadioTile), так и множественный (CheckboxTile). Для одиночного выбора используется свойство valueSelected, а для множественного — связываются массивы значений через bind:valueSelected.

  2. События изменения Событие on:change позволяет отслеживать изменения выбора. В обработчике можно получить текущее значение выбранной плитки и выполнять дальнейшие действия.

  3. Доступность и семантика Использование свойства legend делает группу плиток доступной для экранных читалок, обеспечивая правильное объявление группы как fieldset с подписью. Это важно для форм и интерфейсов, ориентированных на пользователей с ограничениями зрения.

  4. Отключение элементов Свойство disabled может применяться к всей группе или к отдельным плиткам. При отключении группы все вложенные плитки становятся недоступными для выбора, но сохраняют визуальное отображение.

Вложенные компоненты Tile

  • RadioTile — используется для одиночного выбора. Внутри TileGroup гарантирует, что выбран будет только один элемент.
  • CheckboxTile — позволяет выбирать несколько плиток одновременно. Значения выбираемых плиток собираются в массив.

Пример использования CheckboxTile с TileGroup:

<script>
  import { TileGroup, CheckboxTile } from 'carbon-components-svelte';
  
  let selectedValues = [];
</script>

<TileGroup legend="Выберите опции" bind:valueSelected={selectedValues}>
  <CheckboxTile value="apple">Яблоко</CheckboxTile>
  <CheckboxTile value="banana">Банан</CheckboxTile>
  <CheckboxTile value="orange">Апельсин</CheckboxTile>
</TileGroup>

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

Визуальные и стилевые особенности

  • Вертикальная и горизонтальная ориентация — плитки по умолчанию располагаются в ряд или колонку в зависимости от ширины контейнера. Для точной настройки внешнего вида можно использовать CSS-классы или Svelte стили.

  • Размер плитки — можно использовать модификаторы light, small или кастомные классы для изменения визуального веса плитки.

  • Интерактивные состояния — плитки поддерживают hover, focus и selected, что позволяет создавать понятные интерфейсы с визуальной обратной связью.

Интеграция с формами

TileGroup отлично интегрируется с нативными HTML-формами. Если использовать имя группы (name) и вложенные RadioTile, выбранное значение отправляется как часть формы при сабмите:

<form on:submit|preventDefault={() => console.log(selectedValue)}>
  <TileGroup legend="Выберите уровень" name="level" bind:valueSelected={selectedValue}>
    <RadioTile value="beginner">Начинающий</RadioTile>
    <RadioTile value="intermediate">Средний</RadioTile>
    <RadioTile value="advanced">Продвинутый</RadioTile>
  </TileGroup>
  <button type="submit">Отправить</button>
</form>

Лучшие практики

  • Использовать legend для каждой группы плиток для доступности.
  • Для одиночного выбора всегда применять RadioTile, для множественного — CheckboxTile.
  • При управлении состоянием через bind:valueSelected избегать прямого изменения внутреннего состояния плиток, чтобы не нарушить синхронизацию.
  • Для больших наборов плиток можно группировать их по логическим блокам через несколько TileGroup, улучшая восприятие интерфейса.

TileGroup является ключевым инструментом для создания аккуратных и доступных интерфейсов с плитками в Svelte-приложениях на базе Carbon Components. Он упрощает управление выбором, поддерживает события, доступность и визуальную консистентность.

Оглавление