OrderedList и UnorderedList

Библиотека Carbon Components Svelte предоставляет набор компонентов для построения интерфейсов в стиле Carbon Design System. Среди ключевых элементов управления списками находятся OrderedList и UnorderedList, которые обеспечивают структурированное отображение информации в виде упорядоченных и неупорядоченных списков.

Основные возможности

OrderedList (<OrderedList>) позволяет создавать нумерованные списки с возможностью кастомизации нумерации и вложенности элементов. Компонент поддерживает следующие свойства:

  • nested – позволяет создать вложенные списки. Значение true включает визуальное смещение элементов для обозначения вложенности.
  • type – задает стиль нумерации. Возможные значения: "1" (цифры), "A" (латинские буквы в верхнем регистре), "a" (латинские буквы в нижнем регистре), "I" (римские цифры верхнего регистра), "i" (римские цифры нижнего регистра).
  • isExpressive – включает расширенный стиль визуализации элементов списка в стиле Carbon Expressive.

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

<script>
  import { OrderedList, ListItem } from 'carbon-components-svelte';
</script>

<OrderedList type="A">
  <ListItem>Первый элемент</ListItem>
  <ListItem>Второй элемент</ListItem>
  <ListItem>
    Третий элемент с вложенным списком
    <OrderedList nested type="1">
      <ListItem>Подэлемент 1</ListItem>
      <ListItem>Подэлемент 2</ListItem>
    </OrderedList>
  </ListItem>
</OrderedList>

Особенности:

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

UnorderedList (<UnorderedList>) предназначен для создания маркированных списков с разнообразными визуальными стилями.

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

  • nested – добавляет визуальное смещение для вложенных списков.
  • isExpressive – включает расширенный визуальный стиль Carbon Expressive.
  • size – задает размер маркеров и текста. Возможные значения: "sm", "md", "lg". По умолчанию "md".

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

<script>
  import { UnorderedList, ListItem } from 'carbon-components-svelte';
</script>

<UnorderedList>
  <ListItem>Элемент списка</ListItem>
  <ListItem>
    Элемент с вложенным списком
    <UnorderedList nested>
      <ListItem>Подэлемент A</ListItem>
      <ListItem>Подэлемент B</ListItem>
    </UnorderedList>
  </ListItem>
  <ListItem>Еще один элемент</ListItem>
</UnorderedList>

Особенности:

  • Вложенные списки автоматически получают отступы, соответствующие уровню вложенности.
  • Свойство isExpressive позволяет визуально выделять элементы для важных информационных блоков.
  • Возможность комбинировать OrderedList и UnorderedList внутри одного компонента, создавая гибкие структуры контента.

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

Оба компонента поддерживают:

  • Кастомные CSS-классы через атрибут class, что позволяет подключать собственные стили.
  • ARIA-атрибуты для повышения доступности: aria-label, role="list", role="listitem" автоматически применяются к спискам и элементам.
  • События: элементы списков могут реагировать на клики и другие действия, благодаря обработчикам Svelte (on:click).

Пример применения кастомного класса и обработчика события:

<UnorderedList class="custom-list">
  <ListItem on:click={() => console.log('Элемент выбран')}>
    Кликабельный элемент
  </ListItem>
</UnorderedList>

Рекомендации по использованию

  • Для структурированных документов с упорядоченной информацией лучше использовать OrderedList.
  • Для списков функций, пунктов меню или простых элементов подходит UnorderedList.
  • Вложенные списки не должны превышать 2–3 уровня глубины для сохранения читаемости.
  • Свойство isExpressive эффективно при создании визуально насыщенных интерфейсов, например, панелей с предупреждениями или карточек контента.

Комбинирование OrderedList и UnorderedList

В сложных интерфейсах часто требуется смешивать нумерованные и маркированные списки. В Carbon Components Svelte это реализуется естественным образом:

<OrderedList>
  <ListItem>
    Основной пункт
    <UnorderedList nested>
      <ListItem>Подпункт A</ListItem>
      <ListItem>Подпункт B</ListItem>
    </UnorderedList>
  </ListItem>
  <ListItem>Следующий основной пункт</ListItem>
</OrderedList>

Особенности:

  • Вложенные списки корректно наследуют отступы.
  • Маркеры и нумерация не конфликтуют благодаря встроенным стилям Carbon.

Эти возможности делают OrderedList и UnorderedList гибкими инструментами для построения интерфейсов в Svelte, позволяя создавать структурированные, визуально аккуратные и доступные списки любой сложности.

Оглавление