Leader

为价目单或目录创建点线引导符。

引导符（leader），也叫点线引导符或制表引导符，是一种重复的图案，用于在水平空间上把内容在视觉上连接起来。它最常用于餐厅菜单中菜品与价格之间，以及目录中标题与页码之间。

用法

要应用该组件，为左侧元素添加 uk-leader 属性。一串字符（默认是点）会填充该项与其相邻元素之间的剩余空间。

<div uk-leader></div>

<div class="uk-grid-small" uk-grid>
    <div class="uk-width-expand" uk-leader>Lorem ipsum dolor sit amet</div>
    <div>$20.90</div>
</div>

填充字符

要把点换成任意自定义字符，只需为属性添加 fill: STRING 选项。

<div uk-leader="fill: -"></div>

<div class="uk-grid-small" uk-grid>
    <div class="uk-width-expand" uk-leader="fill: -">Lorem ipsum dolor sit amet</div>
    <div>$20.90</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>

组件选项

这些选项都可以应用于组件属性。多个选项之间用分号分隔。了解更多

JavaScript

了解更多关于 JavaScript 组件的信息。

初始化

UIkit.leader(element, options);