mirror of
https://github.com/element-plus/element-plus.git
synced 2024-12-27 03:01:14 +08:00
50 lines
1.8 KiB
Markdown
50 lines
1.8 KiB
Markdown
|
## Breadcrumb
|
|||
|
|
|
|||
|
|
Displays the location of the current page, making it easier to browser back.
|
|||
|
|
|
|||
|
|
### Basic usage
|
|||
|
|
|
|||
|
|
|
|||
|
|
:::demo In `el-breadcrumb`, each `el-breadcrumb-item` is a tag that stands for every level starting from homepage. This component has a `String` attribute `separator`, and it determines the separator. Its default value is '/'.
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<el-breadcrumb separator="/">
|
|||
|
|
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
|
|||
|
|
<el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
|
|||
|
|
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
|
|||
|
|
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
|
|||
|
|
</el-breadcrumb>
|
|||
|
|
```
|
|||
|
|
:::
|
|||
|
|
|
|||
|
|
### Icon separator
|
|||
|
|
|
|||
|
|
:::demo Set `separator-class` to use `iconfont` as the separator，it will cover `separator`
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
|||
|
|
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
|
|||
|
|
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
|
|||
|
|
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
|
|||
|
|
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
|
|||
|
|
</el-breadcrumb>
|
|||
|
|
```
|
|||
|
|
:::
|
|||
|
|
|
|||
|
|
### Breadcrumb Attributes
|
|||
|
|
| Attribute | Description | Type | Accepted Values | Default|
|
|||
|
|
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
|||
|
|
| separator | separator character | string | — | / |
|
|||
|
|
| separator-class | class name of icon separator | string | — | - |
|
|||
|
|
|
|||
|
|
### Breadcrumb Item Attributes
|
|||
|
|
| Attribute | Description | Type | Accepted Values | Default|
|
|||
|
|
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
|||
|
|
| to | target route of the link, same as `to` of `vue-router` | string/object | — | — |
|
|||
|
|
| replace | if `true`, the navigation will not leave a history record | boolean | — | false |
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|