引导线
为定价菜单或目录创建点状引导线。
引导线（也称为点引导线或制表符引导线）是一种重复模式，用于在水平空间中可视地连接内容。它通常用于餐厅菜单的菜品名和价格之间、以及书籍的目录中标题和页码之间连接。
用法
要应用此组件，请将uk-leader属性添加到左侧的元素。将在项目与其相邻元素之间的空间填充一行字符（默认为点状）。
<div uk-leader></div>
-
$20.90
-
<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>
-
$20.90
-
<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>
Note 可以通过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 属性的可用设置。 了解更多
| Option | Value | Default | Description |
|---|---|---|---|
fill |
String | `` | 可选的填充字符。 |
media |
Integer, String | false |
空间填充的条件-宽度为整数(例如640) 或断点(例如@s, @m, @l, @xl) 或任何有效的媒体查询(例如. (min-width: 900px)). |
JavaScript
了解有关 JavaScript组件的更多信息。
初始化
UIkit.leader(element, options);