Компонент Список описаний Description list
Создавайте красивые списки определений (описаний). Список определений состоит из термина и его описания. Дополнительный класс-модификатор позволяет добавить горизонтальную линию между элементами списка.
Список описаний состоит из термина и его описания. Сам список задается с помощью контейнера с тегом <dl>
,
термины распологаются внутри <dt>
, а описания терминов в тегах <dd>
.
Список описаний часто используют при создании глоссария или для отображения метаданных (список пар ключ-значение).
Применение
Добавьте класс .uk-description-list
к элементу <dl>
,
для отображения терминов и их определений (описаний) друг под другом.
<dl class="uk-description-list">
<dt></dt>
<dd></dd>
…
</dl>
Модификатор «Divider»
Добавьте класс-модификатор .uk-description-list-divider
,
чтобы добавить горизонтальную линию между элементами списка определений (описаний).
<dl class="uk-description-list uk-description-list-divider">
<dt></dt>
<dd></dd>
</dl>
-
- HTML
- Стандартизированный язык разметки документов во Всемирной паутине.
- CSS
- Формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
- JavaScript
- Мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили.
-
<dl class="uk-description-list uk-description-list-divider"> <dt>HTML</dt> <dd>Стандартизированный язык разметки документов во Всемирной паутине.</dd> <dt>CSS</dt> <dd>Формальный язык описания внешнего вида документа, написанного с использованием языка разметки.</dd> <dt>JavaScript</dt> <dd>Мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили.</dd> </dl>
-
- Термин 1
- Описание для термина 1
- Снова описание для термина 1
- Термин 2
- Описание термина 2
-
<dl class="uk-description-list uk-description-list-divider"> <dt>Термин 1</dt> <dd>Описание для термина 1</dd> <dd>Снова описание для термина 1</dd> <dt>Термин 2</dt> <dd>Описание термина 2</dd> </dl>
Термин-определение в div
WHATWG HTML
позволяет каждую группу «имя-значение» расположенную в элементе <dl>
оборачивать в элемент <div>
.
Данный вариант использования получит базовые стили по умолчанию для списка определений,
класс .uk-description-list
не влияет на внешний вид.
-
- Имя
- Весельчак
- Место рождения
- Долина Бур
- Рост
- 240см
-
<dl class="uk-description-list"> <div> <dt>Имя</dt> <dd>Весельчак</dd> </div> <div> <dt>Место рождения</dt> <dd>Долина Бур</dd> </div> <div> <dt>Рост</dt> <dd>240см</dd> </div> </dl>
-
- Дата творения
- 1998-08-13T17:31Z
- Авторы
- Редакторы
- Парамон Бублик
- София Кекси
-
<dl class="uk-description-list"> <div> <dt>Дата творения</dt> <dd>1998-08-13T17:31Z</dd> </div> <div> <dt>Авторы</dt> <dt>Редакторы</dt> <dd>Парамон Бублик</dd> <dd>София Кекси</dd> </div> </dl>