Tile и базовые плитки

Tile — это базовый строительный блок интерфейсов в Carbon Design System, который используется для группировки контента, создания визуальной иерархии и выделения интерактивных элементов. В Svelte-библиотеке Carbon Components Tile представлен как компонент с гибкой настройкой внешнего вида, поведения и состояния.

Основы использования Tile

Базовая плитка создается с помощью компонента <Tile>:

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

<Tile>
  Контент плитки
</Tile>

Ключевые свойства:

  • light – boolean, определяет светлую версию плитки. По умолчанию плитка использует стандартную цветовую схему.
  • href – string, если задан, плитка становится ссылкой (<a>).
  • class – string, позволяет добавлять пользовательские классы для кастомизации стилей.

Варианты плиток

  1. Default Tile Стандартная плитка без интерактивных элементов. Используется для отображения информации и визуального группирования элементов.
<Tile>
  Простая информация
</Tile>
  1. Clickable Tile Плитка, которая реагирует на клики. В Svelte это делается через on:click или с помощью свойства href.
<Tile on:click={() => console.log('Плитка нажата')}>
  Нажми на меня
</Tile>
  1. Selectable Tile Плитка, которая может быть выбрана пользователем, работает аналогично радиокнопке или чекбоксу. В Carbon Components Svelte для этого есть <TileSelectable>.
<script>
  import { TileSelectable } from 'carbon-components-svelte';
  let selected = false;
</script>

<TileSelectable bind:checked={selected}>
  Выбор плитки
</TileSelectable>
  • checked – boolean, состояние выбора плитки.
  • disabled – boolean, отключает возможность выбора.
  • name – string, используется для группирования плиток, как у радио-кнопок.

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

Для организации нескольких плиток в группе применяются контейнеры <TileGroup> и <TileSelectable>:

<script>
  import { TileGroup, TileSelectable } from 'carbon-components-svelte';
  let selectedTile;
</script>

<TileGroup bind:value={selectedTile} legend="Выберите плитку">
  <TileSelectable value="1">Плитка 1</TileSelectable>
  <TileSelectable value="2">Плитка 2</TileSelectable>
  <TileSelectable value="3">Плитка 3</TileSelectable>
</TileGroup>
  • legend – строка, задает подпись группы плиток.
  • value – текущее выбранное значение.
  • bind:value – двусторонняя привязка к переменной, позволяет отслеживать выбранную плитку.

Стилизация и кастомизация

Классы и стили можно использовать для изменения внешнего вида плитки:

<Tile class="custom-tile">
  Пользовательский стиль
</Tile>

<style>
  .custom-tile {
    border: 2px solid #0f62fe;
    border-radius: 12px;
    padding: 20px;
    transition: transform 0.2s ease;
  }

  .custom-tile:hover {
    transform: scale(1.05);
  }
</style>

Светлая версия плитки:

<Tile light>
  Светлая плитка
</Tile>

Интерактивные состояния плитки

Плитки поддерживают несколько визуальных состояний:

  • hover – при наведении мыши.
  • focus – при фокусе с клавиатуры.
  • selected – если плитка выбрана.
  • disabled – недоступна для взаимодействия.

Эти состояния можно использовать как для обычных <Tile>, так и для <TileSelectable>, сочетая их с CSS-переходами и классами.

Комбинирование плиток с другими компонентами

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

<Tile>
  <h3>Заголовок плитки</h3>
  <p>Описание плитки</p>
  <button on:click={() => alert('Действие выполнено')}>Действие</button>
</Tile>

Это позволяет создавать гибкие интерфейсы без нарушения принципов Carbon Design System.

Полезные советы

  • Использовать TileSelectable для форм и выбора опций, чтобы обеспечить доступность.
  • Для ссылок применять href, чтобы плитка могла вести на другую страницу.
  • Группировка плиток через <TileGroup> упрощает управление состоянием выбранной плитки.
  • Кастомизация через class и CSS-переходы позволяет создавать динамичные и отзывчивые плитки без изменения исходной логики компонента.

Хотите, я продолжу статью подробным разбором Expandable Tile и примеров их использования с динамическим контентом в Svelte? Это будет логическое продолжение базовых плиток.

Оглавление