UIkit3.x文档

引导线

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

引导线(也称为点引导线或制表符引导线)是一种重复模式,用于在水平空间中可视地连接内容。它通常用于餐厅菜单的菜品名和价格之间、以及书籍的目录中标题和页码之间连接。


用法

要应用此组件,请将uk-leader属性添加到左侧的元素。将在项目与其相邻元素之间的空间填充一行字符(默认为点状)。

<div uk-leader></div>
  • Lorem ipsum dolor sit amet
    $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>
  • Lorem ipsum dolor sit amet
    $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);