DescriptionList
Пари «назва — значення» для картки запису, з довільним рендером кожного значення.
Картка клієнта, деталі угоди, підсумок замовлення — усе, що в макеті
виглядає як два стовпчики тексту, а в розмітці має бути <dl>.
- Компанія
- ТОВ «Сігма Трейд»
- Статус
- Активний
- Менеджер
- Олена Ковальчук
- Сума угоди
- ₴420 000
- Створено
- 12 серпня 2026
- Джерело
- —
- Адреса
- м. Львів, вул. Городоцька 174, офіс 12
Дві колонки пар, а не назва плюс значення
grid-cols-2 просто на <dl> дає не те, чого від нього чекають: у першу
колонку йдуть усі <dt>, у другу — всі <dd>. Це inline-розкладка однієї
колонки пар, а не дві колонки.
Дві колонки ПАР вимагають, щоб кожна пара була обгорнута у <div> — усередині
<dl> це легально з HTML5 — а сітка стояла на самому <dl>. Компонент так і
робить; помітити різницю на око майже неможливо, тому вона зафіксована тут.
Поле з wide: true займає обидві колонки: адреса чи коментар не мають
ламати ритм решти.
Підписка
- Тариф
- Команда
- Місць
- 12 із 25
- Наступне списання
- 1 вересня
- Рахунок
- № 2026-0841
Значення складніші за текст
Статус — це чип, менеджер — посилання, сума — моноширинне число. Для цього
є слот value-<key>, названий за ключем поля, як cell-* у
UiTable:
<UiDescriptionList :items="items">
<template #value-status>
<UiChip tone="success" dot>Активний</UiChip>
</template>
</UiDescriptionList>
Порожні значення (null, undefined, порожній рядок) друкуються як
emptyText — типово тире. Порожня клітинка без символа читається як
недомальований інтерфейс, а не як «даних немає».
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
items* | DescriptionItem[] | — | Пари «назва — значення» у порядку показу. |
layout | stackedinline | "stacked" | `stacked` — назва над значенням; `inline` — назва ліворуч, значення праворуч. На мобільному `inline` лишається inline: саме заради цього вигляду пару «назва / значення» й не роблять таблицею. |
columns | 1 | 2 | 2 | Скільки колонок ПАР на десктопі. Нижче `md` завжди одна. |
size | smmd | "md" | Щільність рядків. |
emptyText | string | "—" | Що друкувати замість порожнього значення. |
divided | boolean | false | Лінія-роздільник між рядками. |
Слоти
| Назва | Опис |
|---|---|
empty | Показується замість списку, коли `items` порожній. |
Коли використовувати
- Картка запису: реквізити, контакти, метадані.
- Панель деталей збоку від таблиці.
- Підсумок форми перед підтвердженням.
Коли НЕ використовувати
- Для однорідних рядків з однаковими полями — це таблиця
(
UiTable), і сортування там теж знадобиться. - Для полів, які редагуються: подивіться на
UiInlineEdit. - Для однієї пари: абзац із жирною назвою простіший і чесніший.
Доступність
Розмітка — справжні <dl>, <dt>, <dd>. Скрінрідери оголошують такий
список як «список описів» і дозволяють переходити між парами; набір
<div>ів із класами цього не дає.
Обгортка кожної пари у <div> семантику не ламає: HTML5 явно дозволяє
групувати dt/dd таким чином.