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

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

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

Чтобы применить компонент Список, добавьте класс .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>

Модификатор «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>

Пример Список с линиями между строк, без отступов.

    • Список для примера
    • Строка с текстом и линиями между строк
    • Список с линиями и опять без отступов
  • <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>
Документация
Компоненты