引导线

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

引导线，也称为点引导线或制表符引导线，是一种重复模式，用于在水平空间中以视觉方式连接内容。它最常用于餐厅菜单（在餐点和价格之间）以及目录（在标题和页码之间）。

用法

要应用此组件，请将 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);