ExpandableTile для раскрывающихся плиток

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

Основная структура компонента

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

<ExpandableTile bind:expanded={expanded}>
  <div slot="above-the-fold">
    <p>Заголовок или краткая информация</p>
  </div>
  <div slot="below-the-fold">
    <p>Раскрытый контент, доступный после клика</p>
  </div>
</ExpandableTile>
  • slot="above-the-fold" — область, которая видна до расширения плитки.
  • slot="below-the-fold" — область, которая появляется только после раскрытия.
  • bind:expanded — двусторонняя привязка состояния расширения плитки.

Настройка состояния плитки

Компонент поддерживает управление состоянием через проп expanded и событие on:toggle:

<ExpandableTile bind:expanded={expanded} on:toggle={(e) => console.log(e.detail.expanded)}>
  <div slot="above-the-fold">Краткая информация</div>
  <div slot="below-the-fold">Подробности после раскрытия</div>
</ExpandableTile>
  • on:toggle срабатывает при каждом изменении состояния плитки.
  • e.detail.expanded возвращает текущее состояние (true — раскрыто, false — свернуто).

Это позволяет синхронизировать видимость плитки с другими компонентами интерфейса или внешними состояниями приложения.

Настройка размеров

ExpandableTile поддерживает несколько вариантов размеров через CSS-классы Carbon:

  • small — компактная плитка, подходит для краткого контента.
  • medium — стандартная плитка для большинства случаев.
  • large — позволяет разместить большое количество информации.

Применение класса осуществляется через проп size:

<ExpandableTile size="large">
  <div slot="above-the-fold">Крупный заголовок</div>
  <div slot="below-the-fold">Обширный раскрытый контент</div>
</ExpandableTile>

Анимация раскрытия

Раскрытие плитки сопровождается плавной анимацией высоты. Carbon Components Svelte использует CSS-переходы для обеспечения естественного эффекта.

Можно управлять продолжительностью и типом анимации через пользовательские стили:

<style>
  .bx--tile--expandable {
    transition: max-height 0.5s ease-in-out;
  }
</style>
  • transition позволяет настроить скорость и кривую анимации.
  • max-height рекомендуется использовать для плавного расширения без рывков.

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

ExpandableTile легко комбинируется с другими элементами Carbon:

<ExpandableTile>
  <div slot="above-the-fold">
    <Button kind="primary">Нажми для раскрытия</Button>
  </div>
  <div slot="below-the-fold">
    <DataTable>
      <!-- строки таблицы с данными -->
    </DataTable>
  </div>
</ExpandableTile>
  • Кнопки, таблицы, карточки и графики могут находиться внутри плитки.
  • Плитка адаптирует размер и структуру содержимого автоматически.

Доступность и семантика

ExpandableTile обеспечивает корректную семантику для вспомогательных технологий:

  • aria-expanded — автоматически обновляется в зависимости от состояния.
  • role=“button” — плитка воспринимается как интерактивный элемент.
  • keyboard navigation — поддерживает управление через клавиши Enter и Space.

Это делает компонент подходящим для интерфейсов с высокой степенью доступности.

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

  • Для больших объемов текста лучше использовать large размер плитки.
  • Если требуется управление раскрытием извне, использовать привязку bind:expanded.
  • Для анимации нестандартной длительности применять CSS-переходы.
  • Сочетание с другими компонентами Carbon повышает визуальную консистентность интерфейса.

ExpandableTile в Carbon Components Svelte является мощным инструментом для организации информации, позволяя создавать динамичные и компактные интерфейсы с минимальными усилиями.

Оглавление