Пунктир

Создавайте пунктирные линии для цен в магазинах или оглавлений.

Компонент используется для визуального объединения контента через горизонтальные пространства. Вы постоянно сталкиваетесь с пунктарами чаще в меню ресторанов, где точки вставляются между блюдом и ценаой, а также для оглавления книг, между заголовками и номерами страниц.

Как использовать компонент 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);