Компонент Отточие Leader

Точечный пунктир. Создание оглавления с отточиями. Создавайте оформление, которое выглядит как оглавление в книге, или как меню с ценами (ресторана, кафе). Точечный пунктир для списка свойств / характеристик товара, где варианты и их значения разделены точками.

Отточие в содержании

Отточие — пространство между позициями элементов, заполненное повторяющимися точками или другими символами. Отточие облегчает просмотр содержания от одного элемента к другому (например, от названия блюда к его стоимости) и используется для того, чтобы улучшить восприятие текста и взгляд пользователя фиксировался на нужной строке.

Пример созданного списка характеристик с отточием

Ширина изделия
250 см
Высота изделия
3 м
Глубина изделия
50 мм

Оформление содержания

Точечный пунктир

Чтобы применить компонент Точечный пунктир добавьте атрибут uk-leader к элементу слева. Строка из символов с точками по умолчанию заполнит оставшееся пространство между элементом и смежным элементом.

<div uk-leader></div>

Примеры. Строки с пунктирной линией

  • Точечный пунктир
  • <div uk-leader>Точечный пунктир</div>
  • Ботинок кожаный (только левый)
    44.95 $
  • <div class="uk-grid-small" uk-grid>
        <div class="uk-width-expand" uk-leader>Ботинок кожаный (только левый)</div>
        <div>44.95 $</div>
    </div>

Отточие часто используется для меню ресторана, между питанием и ценами, а также для оглавления, между заголовками и номерами страниц.

Пример. Отточие. Точки в содержании

  • Блинчики с лососем
    180, 00
    Блинчики с мясом и грибами
    210 руб. 00 коп.
    Блинчики с курицей и грибами
    1 400 руб. 54 коп.
    Блинчики на выбор 250 г
    20 руб.
  • <div class="uk-grid-small uk-child-width" uk-grid>
        <div class="uk-width-expand" uk-leader>Блинчики с лососем</div>
        <div class="uk-width-auto">180, 00</div>
    </div>
    <div class="uk-grid-small uk-child-width" uk-grid>
        <div class="uk-width-expand" uk-leader>Блинчики с мясом и грибами</div>
        <div class="uk-width-auto">210 руб. 00 коп.</div>
    </div>
    <div class="uk-grid-small uk-child-width" uk-grid>
        <div class="uk-width-expand" uk-leader>Блинчики с курицей и грибами</div>
        <div class="uk-width-auto">1 400 руб. 54 коп.</div>
    </div>
    <div class="uk-grid-small uk-child-width" uk-grid>
        <div class="uk-width-expand" uk-leader>Блинчики на выбор 250 г</div>
        <div class="uk-width-auto">20 руб.</div>
    </div>

Произвольный символ

Чтобы изменить точку на любой пользовательский символ, просто добавьте в атрибут опцию fill: STRING.

<div uk-leader="fill: —"></div>
  • html оглавление с точками
    156 00
  • <style>
        .color-blue .uk-leader-fill::after {
            color: blue;
        }
    </style>
    <div class="uk-grid-small" uk-grid>
        <div class="uk-width-expand color-blue" uk-leader="fill: —">html оглавление с точками</div>
        <div>156 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>

Параметры для атрибута

При использовании компонента Leader к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опции компонента

Опция Значение По умолчанию Описание
fill String Дополнительный, необязательный символ заполнения.
media Boolean, Number, String false Условие для заполнения пространства - ширина в виде целого числа (например, 640) или точка останова (например, @s, @m, @l, @xl) или любой допустимый медиа-запрос (например, (min-width: 900px)).

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

Инициализация

UIkit.leader(element, options);