Компонент Список

Создавайте красивые списки используя разные стили. Добавьте зебра-чередование в список элементов. Стиль «Линия». Модификатор «Large».

List: Руководство по использованию

Чтобы применить компонент Список, добавьте класс .uk-list в неупорядоченный или упорядоченный список. Список теперь будет отображаться без стандартных маркеров.

<ul class="uk-list">
    <li>Элемент маркированного списка</li>
    <li></li>
    <li></li>
</ul>

Элемент списка 1
Элемент списка 2
Элемент списка 3

<ul class="uk-list">
    <li>Элемент списка 1</li>
    <li>Элемент списка 2</li>
    <li>Элемент списка 3</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>

Disc

Элемент 1
Элемент 2
Элемент 3

Circle

Элемент 1
Элемент 2
Элемент 3

Square

Элемент 1
Элемент 2
Элемент 3

Decimal

Элемент 1
Элемент 2
Элемент 3

Hyphen

Элемент 1
Элемент 2
Элемент 3

<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>

Muted

Элемент 1
Элемент 2
Элемент 3

Emphasis

Элемент 1
Элемент 2
Элемент 3

Primary

Элемент 1
Элемент 2
Элемент 3

Secondary

Элемент 1
Элемент 2
Элемент 3

<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>

Стилизация маркеров списка - стиль «Ядро». Добавьте класс .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>