Списки

Создавайте красивые списки с различной стилизацией.

Как использовать компонент List в UIkit 3. Различные варианты списков.

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

<ul class="uk-list uk-list-bullet">...</ul>
    • Элемент списка 1
    • Элемент списка 2
    • Элемент списка 3
  • <ul class="uk-list uk-list-bullet">
    <li>Элемент списка 1</li>
    <li>Элемент списка 2</li>
    <li>Элемент списка 3</li>
</ul>

Модификатор разделителя

Добавьте класс .uk-list-divider для разделения элементов списка линиями Точки отображаться не будут.

<ul class="uk-list uk-list-divider">...</ul>
    • Элемент 1
    • Элемент 2
    • Элемент 3
  • <ul class="uk-list uk-list-divider">
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
</ul>

Модификатор полосатого списка

Для использования списка с фоновым чередованием (стиль характеристик в интернет-магазинах) добавьте класс .uk-list-striped.

<ul class="uk-list uk-list-striped">...</ul>
    • Элемент 1
    • Элемент 2
    • Элемент 3
  • <ul class="uk-list uk-list-striped">
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
</ul>

Модификатор размеров

Добавьте класс .uk-list-large для увеличения расстояния между элементами списка. Комбинируется с другими модификаторами списка:

<ul class="uk-list uk-list-large">...</ul>

  • Стандартно

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

    Разделитель

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

    Полосатый

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

    Буллеты

    • Элемент 1
    • Элемент 2
    • Элемент 3
  • <div class="uk-child-width-expand@s" uk-grid>

    <div>
        <h4>Стандартно</h4>
        <ul class="uk-list uk-list-large">
            <li>Элемент 1</li>
            <li>Элемент 2</li>
            <li>Элемент 3</li>
        </ul>
    </div>

    <div>
        <h4>Разделитель</h4>
        <ul class="uk-list uk-list-large uk-list-divider">
            <li>Элемент 1</li>
            <li>Элемент 2</li>
            <li>Элемент 3</li>
        </ul>
    </div>

    <div>
        <h4>Полосатый</h4>
        <ul class="uk-list uk-list-large uk-list-striped">
            <li>Элемент 1</li>
            <li>Элемент 2</li>
            <li>Элемент 3</li>
        </ul>
    </div>

    <div>
        <h4>Буллеты</h4>
        <ul class="uk-list uk-list-large uk-list-bullet">
            <li>Элемент 1</li>
            <li>Элемент 2</li>
            <li>Элемент 3</li>
        </ul>
    </div>

</div>