Компонент Список : 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>

Модификатор «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-expand@m uk-grid-small" 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>
Документация
Компоненты