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

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

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

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

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

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

Чтобы применить компонент Точечный пунктир добавьте атрибут 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>

.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 к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

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

JavaScript

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

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

UIkit.leader(element, options);