StructuredList для структурированных списков

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

Основные элементы StructuredList

StructuredListWrapper Это контейнер для всего списка. Он управляет стилями и поведением всего компонента. Имеет следующие ключевые свойства:

  • selection (boolean) — включает режим выбора строки. Если true, каждая строка становится кликабельной и поддерживает радиокнопку для выбора.
  • border (boolean) — добавляет визуальное разделение между строками.
  • ariaLabel (string) — используется для доступности, описывает содержание списка.

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

<StructuredListWrapper selection={true} border={true} ariaLabel="Пример структурированного списка">
  ...
</StructuredListWrapper>

StructuredListHead Определяет заголовок списка. Заголовки обычно содержат StructuredListRow с ячейками StructuredListCell.

Свойства:

  • head (boolean) — обязательно для корректного форматирования заголовков.

Пример:

<StructuredListHead>
  <StructuredListRow head>
    <StructuredListCell head>Имя</StructuredListCell>
    <StructuredListCell head>Возраст</StructuredListCell>
    <StructuredListCell head>Должность</StructuredListCell>
  </StructuredListRow>
</StructuredListHead>

StructuredListBody Содержит все строки данных списка. Каждый элемент внутри StructuredListBody представляет собой строку StructuredListRow, которая может содержать несколько ячеек StructuredListCell.

Пример:

<StructuredListBody>
  <StructuredListRow>
    <StructuredListCell>Алексей</StructuredListCell>
    <StructuredListCell>29</StructuredListCell>
    <StructuredListCell>Разработчик</StructuredListCell>
  </StructuredListRow>
  <StructuredListRow>
    <StructuredListCell>Мария</StructuredListCell>
    <StructuredListCell>34</StructuredListCell>
    <StructuredListCell>Менеджер</StructuredListCell>
  </StructuredListRow>
</StructuredListBody>

Структурированная разметка

Компоненты StructuredList строятся по иерархии:

StructuredListWrapper
 ├─ StructuredListHead
 │    └─ StructuredListRow (head)
 │         └─ StructuredListCell (head)
 └─ StructuredListBody
      └─ StructuredListRow
           └─ StructuredListCell

Эта структура обеспечивает гибкость и соответствие стандартам Carbon Design System, сохраняя при этом семантическую правильность для экранных читалок.

Режим выбора строки

Когда включен параметр selection в StructuredListWrapper, каждая строка автоматически получает радиокнопку для выбора. В Svelte это реализуется через связывание состояния выбранной строки с переменной. Пример:

<script>
  let selectedRow = '';
</script>

<StructuredListWrapper selection={true}>
  <StructuredListHead>
    <StructuredListRow head>
      <StructuredListCell head>Имя</StructuredListCell>
      <StructuredListCell head>Возраст</StructuredListCell>
    </StructuredListRow>
  </StructuredListHead>
  <StructuredListBody>
    <StructuredListRow bind:selected={selectedRow} value="Алексей">
      <StructuredListCell>Алексей</StructuredListCell>
      <StructuredListCell>29</StructuredListCell>
    </StructuredListRow>
    <StructuredListRow bind:selected={selectedRow} value="Мария">
      <StructuredListCell>Мария</StructuredListCell>
      <StructuredListCell>34</StructuredListCell>
    </StructuredListRow>
  </StructuredListBody>
</StructuredListWrapper>

<p>Выбрана строка: {selectedRow}</p>

Здесь bind:selected автоматически связывает выбранную строку с переменной, что упрощает управление состоянием.

Стили и модификаторы

  • border — добавляет визуальные границы между строками.
  • condensed — уменьшает высоту строк для компактного отображения (иногда используется в комбинации с selection).
  • nowrap — предотвращает перенос текста внутри ячеек.

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

<StructuredListWrapper selection={true} border={true} condensed={true}>
  ...
</StructuredListWrapper>

Доступность

StructuredList в Carbon Components Svelte полностью совместим с ARIA. Использование атрибута ariaLabel на StructuredListWrapper обеспечивает поддержку экранных читалок. Кроме того, включение selection автоматически добавляет радиокнопки с правильными атрибутами для выбора строки.

Практические советы

  • Для списков с небольшим количеством колонок и строк StructuredList более удобен, чем <table>, так как проще вёрстка и поддержка стилей.
  • Для динамически генерируемых данных удобно использовать #each в Svelte для создания строк StructuredListRow.
  • При необходимости кастомизации визуального вида можно комбинировать классы Carbon с собственными стилями Svelte.

StructuredList — мощный инструмент для упорядочивания данных, который сохраняет семантику, доступность и визуальную консистентность с Carbon Design System. Использование всех ключевых элементов (Wrapper, Head, Body, Row, Cell) позволяет создавать как простые, так и интерактивные списки с выбором строк и расширенной стилизацией.

Оглавление