引导线／Leader

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

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

用法

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

<div uk-leader></div>
  • Lorem ipsum dolor sit amet
    .90
  • <div class="uk-grid-small" uk-grid>
    <div class="uk-width-expand" uk-leader>Lorem ipsum dolor sit amet</div>
    <div>.90</div>
</div>

填充字符

要将点更改为别的任意自定义字符，只需将 fill: STRING 选项添加到属性。

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

组件选项

下表列出了 uk-leader 属性的可用设置。 了解更多

选项 可用值 默认值 描述
fill String `` 可选的填充字符。
media Integer, String false 空间填充的条件-宽度为整数(例如640) 或断点(例如@s, @m, @l, @xl) 或任何有效的媒体查询(例如. (min-width: 900px))

JavaScript

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

初始化

UIkit.leader(element, options);

上一篇： Label

下一篇： Lightbox

leader.md

# 引导线／Leader

<p class="uk-text-lead">为定价菜单或目录创建点状引导线。</p>

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

***

## Usage-用法

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

```html
<div uk-leader></div>
```

```example
<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 character-填充字符

要将点更改为别的任意自定义字符，只需将 `fill: STRING` 选项添加到属性。

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

```example
<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变量设置默认填充字符。

```css
.uk-leader-fill-content::before { content: '.'; }
:root { --uk-leader-fill-content: '.'; }
```

```less
@leader-fill-content: '.';
```

***

## Responsive-响应式

通过将 `media` 选项应用于属性并添加适当的视口宽度，可以为不同的设备宽度禁用引导线。添加一个以像素为单位的数字（例如 `media: 640`,）或一个断点（例如 `media: @m`）。引导线将只在在指定的视口宽度或更高宽度中显示。

```html
<div uk-leader="media: @m"></div>
```

***

## Component options-组件选项

下表列出了 `uk-leader` 属性的可用设置。 [了解更多](javascript.md#component-configuration)

| 选项  | 可用值  | 默认值     | 描述                                                                                  |
|:--------|:-------|:------------|:----------------------------------------------------|
| `fill`  | String | ``          | 可选的填充字符。                                      |
| `media` | Integer, String | `false`     | 空间填充的条件-宽度为整数(例如640) 或断点(例如@s, @m, @l, @xl) 或任何有效的媒体查询(例如. (min-width: 900px)) |

***

## JavaScript

了解有关 [JavaScript 组件](javascript.md#programmatic-use)的更多信息。

### 初始化

```js
UIkit.leader(element, options);
```