Список

Cоздавайте красивые списки, добавляйте к ним зебра-чередование, применяйте дополнительные стили.

Использование

Чтобы применить компонент List, добавьте класс .uk-list в неупорядоченный (маркированный) или упорядоченный список. Список будет отображаться без пробелов и стиля списка *list-style:none.

Пример

Пункт списка 1
Пункт списка 2
Пункт списка 3

Разметка

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

Модификаторы

Чтобы отобразить список в другом стиле, добавьте класс-модификатор в к классу .uk-list. Модификаторы компонента List не комбинируются друг с другом.

Список - эффект «Линия»

Чтобы создать список с примененным стилем «Линия», добавьте класс .uk-list-line к тегу <ul> модификатор будет применен.

Пример

Пункт списка 1
Пункт списка 2
Пункт списка 3

Разметка

<ul class="uk-list uk-list-line">
    <li>...</li>
    ...
</ul>

Список - эффект «Зебра»

Чтобы создать список с чередованием Зебра, используйте класс .uk-list-striped. Добавится фоновый цвет ко всем четным (или нечетным) строкам списка.

Пример

Пункт списка 1
Пункт списка 2
Пункт списка 3

Разметка

<ul class="uk-list uk-list-striped">
    <li>...</li>
    ...
</ul>

Список - эффект «Пространство»

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

Пример

Далеко-далеко за словесными горами в стране гласных и согласных живут тексты.
Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми правилами.
Эта парадигматическая страна, в которой жаренные члены предложения.

Разметка

<ul class="uk-list uk-list-space">
    <li>...</li>
    ...
</ul>