ClickableTile для интерактивных плиток

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

Импорт и базовое использование

Чтобы использовать ClickableTile, необходимо импортировать его из библиотеки:

<script>
  import { ClickableTile } from 'carbon-components-svelte';
</script>

<ClickableTile on:click={() => console.log('Tile clicked!')}>
  Содержимое плитки
</ClickableTile>

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

  • on:click — стандартное событие DOM для отслеживания клика.
  • Внутри плитки можно размещать любые элементы: текст, изображения, иконки, кнопки.

Свойства (props) ClickableTile

ClickableTile поддерживает набор свойств для настройки поведения и внешнего вида:

Свойство Тип Описание
light boolean Если true, плитка отображается в светлой теме.
disabled boolean Запрещает взаимодействие с плиткой.
href string Превращает плитку в ссылку.
target string Используется с href для указания, где открывать ссылку (_blank, _self).
selected boolean Задает состояние выбранной плитки.

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

<ClickableTile href="https://example.com" target="_blank">
  Переход на внешний сайт
</ClickableTile>

События

ClickableTile генерирует несколько событий:

  • click — срабатывает при клике мышью или нажатии клавиши Enter/Space при фокусе.
  • focus — при получении фокуса.
  • blur — при потере фокуса.

Эти события можно обрабатывать с помощью стандартного синтаксиса Svelte:

<ClickableTile
  on:click={() => console.log('Clicked')}
  on:focus={() => console.log('Focused')}
  on:blur={() => console.log('Blurred')}
>
  Плитка с событиями
</ClickableTile>

Стилизация

ClickableTile наследует стили Carbon Design System. Основные состояния плитки:

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

Для кастомизации можно использовать классы и слоты:

<ClickableTile class="custom-tile">
  <div slot="above">Заголовок</div>
  Основной контент
</ClickableTile>

<style>
  .custom-tile {
    border-radius: 12px;
    background-color: #f4f4f4;
    transition: transform 0.2s;
  }
  .custom-tile:hover {
    transform: scale(1.02);
  }
</style>

Работа с группой плиток

Часто плитки используются в коллекции. ClickableTile легко интегрируется в группы для создания интерфейсов выбора:

<script>
  import { ClickableTile } from 'carbon-components-svelte';
  let selectedTile = null;

  const tiles = ['Плитка 1', 'Плитка 2', 'Плитка 3'];
</script>

{#each tiles as tile, index}
  <ClickableTile
    selected={selectedTile === index}
    on:click={() => selectedTile = index}
  >
    {tile}
  </ClickableTile>
{/each}

Особенности этого подхода:

  • Управление выбранной плиткой через переменную состояния.
  • Можно реализовать множественный выбор, расширив логику массива выбранных индексов.

Интеграция с доступностью (a11y)

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

  • Enter или Space активируют плитку.
  • Фокус отображается визуально для пользователей клавиатуры.

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

Вложенные элементы и слоты

Слоты позволяют добавлять сложное содержимое:

<ClickableTile>
  <div slot="above">Заголовок плитки</div>
  <p>Основной текст плитки</p>
  <img src="image.png" alt="Иллюстрация">
</ClickableTile>
  • slot=“above” позволяет выводить контент в верхней части плитки (типично для заголовков или иконок).
  • Основной слот используется для текста, изображений, карточек или любых других компонентов.

Комбинация с другими компонентами Carbon

ClickableTile хорошо сочетается с:

  • TileGroup для создания коллекций плиток с единым состоянием.
  • Checkbox или RadioButton внутри плитки для сложных интерактивных сценариев.
  • Button внутри плитки для дополнительных действий, при этом избегая конфликта событий клика.

Пример плитки с кнопкой:

<ClickableTile>
  <div>Контент плитки</div>
  <Button on:click|stopPropagation={() => console.log('Button clicked')}>
    Действие
  </Button>
</ClickableTile>

Использование |stopPropagation предотвращает срабатывание клика самой плитки при нажатии на кнопку.

Итоговая структура ClickableTile

  • Содержимое через слот.
  • Состояния: hover, focus, selected, disabled.
  • События: click, focus, blur.
  • Аксессибельность встроена, поддержка клавиатуры и экранных читалок.
  • Гибкость кастомизации через классы, стили и слоты.

ClickableTile в Carbon Components Svelte представляет собой универсальный инструмент для создания интерактивных, доступных и визуально привлекательных плиток, легко интегрируемых в любые интерфейсы.

Оглавление