Списки и списки описаний

Layout Primitive · Data Display

Список упорядочивает элементы, список описаний связывает термин со значением

Обычный список отвечает на вопрос «что входит?», а description list — «какое значение соответствует этой характеристике?».

01 · ПоследовательностьListПункты, шаги, меню и компактные группы 02 · Термин и значениеDescription ListХарактеристики, параметры и метаданные

01 · Sequence

Обычные списки задают направление и ритм

Базовый класс сбрасывает браузерные отступы. Модификаторы управляют направлением, переносом, gap, выравниванием и маркерами.

Профиль организации
Участники команды
Настройки доступа

.list.list-column.list-gap-sm

Направление, перенос и интервалы

Column подходит последовательностям, row — компактным группам. Row обычно дополняется переносом, чтобы содержимое не создавало горизонтальный скролл.

Дизайн
Разработка
Аналитика
Поддержка

.list.list-row.list-wrap

Начало
Центр
Конец

.list-between

.list-gap-sm.list-gap-lg

<ul class="list list-column list-gap-sm">
  <li>Первый пункт</li>
  <li>Второй пункт</li>
</ul>

<ul class="list list-row list-wrap list-gap-lg">...</ul>

Маркеры передают структуру

Disc используется для равноправных пунктов, decimal — когда порядок выполнения важен.

Ясность
Последовательность
Доступность

.list-disc

Установить пакет
Подключить стили
Запустить сборку

.list-decimal

02 · Term and value

Списки описаний показывают связанные пары

Используйте их для характеристик объекта, метаданных и кратких сводок. Каждая пара получает собственную обёртку.

Статус: Активен
Владелец: Команда продукта
Последнее изменение: Сегодня, 12:40

<x-ui.description-list>

<x-ui.description-list>
  <div>
    <dt>Статус</dt>
    <dd>Активен</dd>
  </div>
  <div>
    <dt>Владелец</dt>
    <dd>Команда продукта</dd>
  </div>
</x-ui.description-list>

Поверхность и плотность

Surface объединяет строки в контейнер, compact уменьшает вертикальные отступы.

Тариф: Команда
Участники: 12 человек
Хранилище: 48 из 100 ГБ

.ox-description-list-surface

Регион: Москва
Язык: Русский
Часовой пояс: UTC+3

.ox-description-list-compact

Stacked и адаптивное поведение

Обычный вариант автоматически складывается в одну колонку уже 40 rem. Inline сохраняет две колонки только там, где значения действительно короткие.

Описание: Значение находится под термином на любом размере экрана.
Применение: Длинные пояснения и узкие контейнеры.

.ox-description-list-stacked

ID: OKAUX-248
Версия: 1.0.0

.ox-description-list-inline

Выбор HTML-семантики

Визуальное направление списка не меняет смысл нативных элементов.

<ul>Набор равноправных элементов без обязательного порядка.
<ol>Шаги или рейтинг, где позиция имеет значение.
<dl>Общий контейнер списка терминов и значений.
<div>Обёртка одной логической пары внутри dl.
<dt>Термин, характеристика или название параметра.
<dd>Значение соответствующего термина.

Найдите нужное в OKAUX

Где ищем

Последние запросы

Быстрый доступ