为定价菜单或目录创建点状引导线。
引导线(也称为点引导线或制表符引导线)是一种重复模式,用于在水平空间中可视地连接内容。它通常用于餐厅菜单的菜品名和价格之间、以及书籍的目录中标题和页码之间连接。
要应用此组件,请将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>
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组件的更多信息。
UIkit.leader(element, options);