Создавайте пунктирные линии для цен в магазинах или оглавлений.
Компонент используется для визуального объединения контента через горизонтальные пространства. Вы постоянно сталкиваетесь с пунктарами чаще в меню ресторанов, где точки вставляются между блюдом и ценаой, а также для оглавления книг, между заголовками и номерами страниц.
Как использовать компонент Leader в UIkit 3
Для начала использования добавьте атрибут uk-leader
или data-uk-leader
к элементу слева.
Строка автоматически заполнится точками, займет все доступное пространство между элементами.
<div uk-leader></div>
-
200.00 р
<div class="uk-grid-small" uk-grid> <div class="uk-width-expand" uk-leader>Рыба-селедка</div> <div>200.00 р</div> </div>
Формат точек
Чтобы заменить точки на другой символ, добавьте опцию fill: STRING
к атрибуту.
<div uk-leader="fill: -"></div>
- 200.00 р
<div class="uk-grid-small" uk-grid> <div class="uk-width-expand" uk-leader="fill: -">Рыба-селедка</div> <div>200.00 р</div> </div>
Внимание Символ заполнения по умолчанию может быть установлен через CSS или переменную LESS.
.uk-leader-fill-content::before { content: '.'; }
:root { --uk-leader-fill-content: '.'; }
@leader-fill-content: '.';
Адаптивность
Можно отключить точечные элементы на устройствах различной ширины, применив опцию media-запросы
к атрибуту и добавив соответствующую ширину области просмотра.
Добавльте значение в пикселях, например, media: 640
, или контрольную точку — media: @m
.
Точки будут отображаться, начиная с указанной ширины области просмотра и выше, но не ниже.
<div uk-leader="media: @m"></div>
Опции компонента
В таблице ниже перечислены все доступные настройки для атрибута uk-leader
. Подробнее о конфигурировании компонентов.
Опция | Значение | По умолчанию | Описание |
---|---|---|---|
fill |
String | `` | Изменяет символ точек на что-нибудь другое. |
media |
Integer, String | false |
Условие для заполнения пространства - целое число, напрмер 640, или контрольная точка, т.е.. @s, @m, @l, @xl, а также любой валидный медиа-запрос — min-width: 900px). |
JavaScript
Все о компонентах JavaScript.
Инициализация
UIkit.leader(element, options);