Отображение данных
Список свойств
Пары «имя — значение» одного объекта. Настоящий <dl>: связь имени со
значением живёт в разметке, а не только в раскладке.
- Модель
- opus
- Начат
- 14:32:07
- Файлов
- 4
Разметка
<dl class="inst-kv">
<dt>Модель</dt><dd>opus</dd>
<dt>Начат</dt><dd>14:32:07</dd>
<dt>Файлов</dt><dd>4</dd>
</dl>
Использование
<dl class="inst-kv">
<dt>Модель</dt><dd>opus</dd>
<dt>Начат</dt><dd>14:32:07</dd>
</dl>
| Что | Обязательно | Почему |
|---|---|---|
Настоящий <dl> с <dt>/<dd> |
да | Связь имени со значением даёт разметка. Два <div> в две колонки выглядят так же и не связаны ничем |
title на inst-prop-label |
да, в инспекторе | Имя обрезается по ширине колонки — без полного текста значение остаётся без имени |
<label for> вместо <div> в инспекторе |
да | Иначе поле безымянно |
Когда использовать
| Используйте | Возьмите другое |
|---|---|
| Свойства одного объекта | Много объектов с одинаковыми полями — таблица: там колонки сравнивают |
| Значения только для чтения | Редактируемые свойства — инспектор (inst-props), см. ниже |
| 3–15 пар | Две-три пары — обычный текст читается лучше списка |
Варианты
Инспектор
inst-kv показывает значения, inst-props — редактирует их.
Разметка
<div class="inst-props">
<div class="inst-prop">
<label class="inst-prop-label" title="Максимум токенов" for="mx">Максимум токенов</label>
<div class="inst-prop-control">
<input class="inst-input inst-input--sm" id="mx" value="500000">
</div>
</div>
<div class="inst-prop">
<label class="inst-prop-label" title="Параллельных агентов" for="pa">Параллельных агентов</label>
<div class="inst-prop-control">
<input class="inst-input inst-input--sm" id="pa" value="6">
</div>
</div>
</div>
Колонка имён у обоих — один и тот же --label-col: два способа показать пару
«имя — значение» не имеют права разъезжаться по метрике.
Узкий контейнер
- Отправлено
- 1
- Подавлено
- 0
Разметка
<div style="max-width: 235px">
<div class="inst-card">
<div class="inst-card-head"><span class="inst-card-title">email</span></div>
<dl class="inst-kv inst-kv--tight">
<dt>Отправлено</dt><dd>1</dd>
<dt>Подавлено</dt><dd>0</dd>
</dl>
</div>
</div>
Общая колонка — это обещание, что строки выровнены между контейнерами, и
она стоит своей ширины. В карточке на 235px фиксированные --label-col
съедали четыре десятых, и значение «1» оказывалось посреди пустоты. Внутри
карточки такого обещания нет: сравнивают строки внутри неё, а не с соседней.
Обратная сторона честная: две карточки рядом не выровняются между собой.
Если это нужно — берите обычный inst-kv и мирьтесь с шириной.
inst-kv |
inst-props |
|
|---|---|---|
| Значения | Только чтение | Редактируемые |
| Носитель | <dl> / <dt> / <dd> |
<div> + <label for> |
| Имя связано | Разметкой списка | Ярлыком контрола |
Правила
Так Настоящий dl для чтения
Связь имени со значением попадает в разметку, а не только в сетку.
Не так Два div в две колонки
Выглядит идентично и не связано ничем: скринридер прочитает шесть независимых строк.
Так title у обрезанного имени
inst-prop-label обрезается по ширине колонки. Без title значение остаётся
без имени.
Не так Список свойств вместо таблицы
Много объектов с одинаковыми полями сравнивают колонками — таблица.
Доступность
| Связь имени и значения | Даёт <dl>/<dt>/<dd>. Два <div> в две колонки выглядят так же и не связаны ничем |
| Обрезанное имя | inst-prop-label обрезается по ширине колонки, поэтому обязан нести title с полным текстом — иначе значение остаётся без имени |
| Подпись контрола | В инспекторе inst-prop-label — настоящий <label for>, а не <div>: иначе поле безымянно |
| Порядок чтения | Совпадает с разметкой. Раскладка гридом не меняет порядок озвучивания, и менять его визуально не следует |
API
| Имя | Значение | Что делает |
|---|---|---|
| класс | ||
inst-kv | — | Список только для чтения, на <dl> |
inst-kv--tight | — | Колонка имён по содержимому. Для узких контейнеров |
inst-props | — | Инспектор: контейнер редактируемых свойств |
inst-prop | — | Одна строка инспектора |
inst-prop-label | — | Имя свойства. Обрезается — нужен title |
inst-prop-control | — | Ячейка контрола |
| токен | ||
--label-col | 92px | |
--pad-panel | var(--space-5) | |
--pad-cell-x | var(--space-4) | |
--gap-inline | var(--space-4) | |
--space-2 | 4px | |
--space-3 | 6px | |
--text-sm | 0.8125rem | |
--text-muted | light-dark(var(--n-8), var(--n-6)) | |
--surface-hover | light-dark(oklch(0 0 0 / 0.035), oklch(1 0 0 / 0.045)) | |
--control-h-sm | 26px | |
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument