Отображение данных
Список свойств
Пары «имя — значение» одного объекта. Настоящий <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> с <dt>/<dd> |
да | Связь имени со значением даёт разметка. Два <div> в две колонки выглядят так же и не связаны ничем |
title на inst-prop-label |
да, в инспекторе | Имя обрезается по ширине колонки — без полного текста значение остаётся без имени |
<label for> вместо <div> в инспекторе |
да | Иначе поле безымянно |
Доступность
| Связь имени и значения | Даёт <dl>/<dt>/<dd>. Два <div> в две колонки выглядят так же и не связаны ничем |
| Обрезанное имя | inst-prop-label обрезается по ширине колонки, поэтому обязан нести title с полным текстом — иначе значение остаётся без имени |
| Подпись контрола | В инспекторе inst-prop-label — настоящий <label for>, а не <div>: иначе поле безымянно |
| Порядок чтения | Совпадает с разметкой. Раскладка гридом не меняет порядок озвучивания, и менять его визуально не следует |
Варианты
Инспектор
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> |
| Имя связано | Разметкой списка | Ярлыком контрола |
API
| Имя | Что делает |
|---|---|
| класс | |
inst-kv | Список только для чтения, на <dl> |
inst-kv--tight | Колонка имён по содержимому. Для узких контейнеров |
inst-props | Инспектор: контейнер редактируемых свойств |
inst-prop | Одна строка инспектора |
inst-prop-label | Имя свойства. Обрезается — нужен title |
inst-prop-control | Ячейка контрола |
| Имя | Значение | Откуда |
|---|---|---|
| токен | ||
--label-col | 104px | база +4: масштаб |
--pad-panel | var(--space-5) | база +14: плотность · масштаб |
--pad-cell-x | var(--space-4) | база +14: плотность · масштаб |
--gap-inline | var(--space-4) | база +14: плотность · масштаб |
--space-2 | 4px | одно на все ячейки |
--space-3 | 6px | одно на все ячейки |
--text-sm | 0.875rem | база +4: масштаб |
--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 | 24px | база +14: плотность · масштаб |
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument