Компонент Список List
Создавайте красивые списки используя разные стили. Добавьте зебра-чередование в список элементов. Стиль «Линия». Модификатор «Large».
Применение
Руководство по использованию
Чтобы применить компонент Список, добавьте класс .uk-list
в неупорядоченный или упорядоченный список.
Список теперь будет отображаться без стандартных маркеров.
<ul class="uk-list">
<li>Элемент маркированного списка</li>
<li></li>
<li></li>
</ul>
Модификатор «Стиль»
Добавьте один из следующих классов, чтобы установить необходимый маркер элемента списка.
Класс | Описание |
---|---|
.uk-list-disc |
Используйте маркер в виде точки. |
.uk-list-circle |
Используйте маркер в виде кружка. |
.uk-list-square |
Используйте маркер в виде квадрата. |
.uk-list-decimal |
Используйте маркер в виде чисел. Начало с 1. |
.uk-list-hyphen |
Используйте маркер в виде дефиса. |
<ul class="uk-list uk-list-disc">...</ul>
-
-
<div class="uk-child-width-1-3@s uk-child-width-expand@xl uk-grid-small" uk-grid> <div> <h4>Disc</h4> <ul class="uk-list uk-list-disc"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ul> </div> <div> <h4>Circle</h4> <ul class="uk-list uk-list-circle"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ul> </div> <div> <h4>Square</h4> <ul class="uk-list uk-list-square"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ul> </div> <div> <h4>Decimal</h4> <ul class="uk-list uk-list-decimal"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ul> </div> <div> <h4>Hyphen</h4> <ul class="uk-list uk-list-hyphen"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ul> </div> </div>
Модификатор «Цвет»
Добавьте один из следующих классов, чтобы установить необходимый цвет маркера.
Класс | Описание |
---|---|
.uk-list-muted |
Добавьте этот класс, чтобы установить маркеру приглушенный цвет. |
.uk-list-emphasis |
Добавьте этот класс, чтобы установить маркеру выразительный цвет. |
.uk-list-primary |
Добавьте этот класс, чтобы маркер использовал основной цвет (primary color) . |
.uk-list-secondary |
Добавьте этот класс, чтобы маркер использовал второстепенный цвет (secondary) . |
<ul class="uk-list uk-list-disc">...</ul>
-
-
<div class="uk-child-width-1-2@s uk-child-width-expand@m uk-grid-small" uk-grid> <div> <h4>Muted</h4> <ul class="uk-list uk-list-disc uk-list-muted"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ul> </div> <div> <h4>Emphasis</h4> <ul class="uk-list uk-list-disc uk-list-emphasis"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ul> </div> <div> <h4>Primary</h4> <ul class="uk-list uk-list-disc uk-list-primary"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ul> </div> <div> <h4>Secondary</h4> <ul class="uk-list uk-list-disc uk-list-secondary"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ul> </div> </div>
Модификатор «Bullet»
Стилизация маркеров списка - стиль «Ядро».
Добавьте класс .uk-list-bullet
для отображения маркера в виде ядра, перед элементами списка.
Используется пользовательское изображение маркера. Не работает с модификаторами цвета.
<ul class="uk-list uk-list-bullet">...</ul>
-
- Золотая бледная полоса
- Сияние месяца там и там
- Какая ночь в вышине
-
<ul class="uk-list uk-list-bullet"> <li>Золотая бледная полоса</li> <li>Сияние месяца там и там</li> <li>Какая ночь в вышине</li> </ul>
Модификатор «Divider»
Стилизация списков - стиль «Линия». Добавьте класс .uk-list-divider
для разделения списка элементов линиями.
<ul class="uk-list uk-list-divider">...</ul>
-
- А добродетельный человек
- Занялся только одной дорогою
- Озаренные деревянные крыши
-
<ul class="uk-list uk-list-divider"> <li>А добродетельный человек</li> <li>Занялся только одной дорогою</li> <li>Озаренные деревянные крыши</li> </ul>
Модификатор «Striped»
Стиль списка «Зебра». Добавьте зебра-чередование в список элементов, используя класс .uk-list-striped
.
<ul class="uk-list uk-list-striped">...</ul>
-
- Название для примера
- Бричка между тем
- Толчок — и опять проснулся
-
<ul class="uk-list uk-list-striped"> <li>Название для примера</li> <li>Бричка между тем</li> <li>Толчок — и опять проснулся</li> </ul>
Модификатор «Large»
Стиль «Пространство». Добавьте класс .uk-list-large
, чтобы увеличить расстояние между элементами списка.
Вы можете комбинировать этот класс с любым другим модификатором компонента.
<ul class="uk-list uk-list-large">...</ul>
-
Default
- UIkit
- UIkit 2
- UIkit 3
Divider
- Стиль линия 1
- Элемент линия 2
- Элемент линия 3
Striped
- Стиль зебра 1
- Элемент зебра 2
- Элемент зебра 3
Bullet
- Стиль маркер
- Маркер 2
- Маркер 3
-
<div class="uk-child-width-1-2@m uk-grid-medium" uk-grid> <div> <h4>Default</h4> <ul class="uk-list uk-list-large"> <li>UIkit</li> <li>UIkit 2</li> <li>UIkit 3</li> </ul> </div> <div> <h4>Divider</h4> <ul class="uk-list uk-list-large uk-list-divider"> <li>Стиль линия 1</li> <li>Элемент линия 2</li> <li>Элемент линия 3</li> </ul> </div> <div> <h4>Striped</h4> <ul class="uk-list uk-list-large uk-list-striped"> <li>Стиль зебра 1</li> <li>Элемент зебра 2</li> <li>Элемент зебра 3</li> </ul> </div> <div> <h4>Bullet</h4> <ul class="uk-list uk-list-large uk-list-bullet"> <li>Стиль маркер</li> <li>Маркер 2</li> <li>Маркер 3</li> </ul> </div> </div>
Модификатор «Collapse»
Модификатор для списков «Collapse» позволяет убрать отступы между элементами неупорядоченных (маркированных) списков.
Чтобы убрать отступы между элементами списка используйте класс .uk-list-collapse
.
<ul class="uk-list uk-list-collapse">...</ul>
-
- Название для примера
- Строка с текстом между строк
- Список — и опять без отступов
-
<ul class="uk-list uk-list-collapse"> <li>Название для примера</li> <li>Строка с текстом между строк</li> <li>Список — и опять без отступов</li> </ul>
- Пример №1
- Список с линиями между строк, без отступов.
- Пример №2
- Список с зебра-чередованием, без отступов.
-
- Список для примера
- Строка с текстом и линиями между строк
- Список с линиями и опять без отступов
-
<ul class="uk-list uk-list-divider uk-list-collapse"> <li>Список для примера</li> <li>Строка с текстом и линиями между строк</li> <li>Список с линиями и опять без отступов</li> </ul>
-
- Тестовое название для примера
- Строка с текстом зебра-чередованием между строк
- Зебра-список без отступов
-
<ul class="uk-list uk-list-collapse uk-list-striped"> <li>Тестовое название для примера</li> <li>Строка с текстом зебра-чередованием между строк</li> <li>Зебра-список без отступов</li> </ul>
Доступность
Установите соответствующие роли, состояния и свойства WAI-ARIA для компонента List.
- Если используется элемент
<div>
, установите для списка рольlist
, а для элементов спискаlistitem
роль.
<div class="uk-list" role="list">
<div role="listitem">Элемент списка 1</div>
<div role="listitem">Элемент списка 2</div>
<div role="listitem">Элемент списка 3</div>
</div>