50 lines
2.1 KiB
Markdown
50 lines
2.1 KiB
Markdown
|
## Breadcrumb
|
|||
|
|
|
|||
|
|
Muestra la localización de la página actual, haciendo más fácil el poder ir a la página anterior.
|
|||
|
|
|
|||
|
|
### Uso básico
|
|||
|
|
|
|||
|
|
|
|||
|
|
:::demo En `el-breadcrumb`, cada `el-breadcrumb-item` es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo `String` llamado `separator`, el mismo determina el carácter separador. El valor por defecto es '/'.
|
|||
|
|
|
|||
|
|
```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>
|
|||
|
|
```
|
|||
|
|
:::
|
|||
|
|
|
|||
|
|
### Icono separador
|
|||
|
|
|
|||
|
|
:::demo Setee `separator-class` para que utilice `iconfont` como separador，el mismo va a cubrir `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 atributos
|
|||
|
|
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
|||
|
|
| --------------- | -------------------------------------- | ------ | ----------------- | ----------- |
|
|||
|
|
| separator | carácter separador | string | — | / |
|
|||
|
|
| separator-class | nombre de la clase del icono separador | string | — | - |
|
|||
|
|
|
|||
|
|
### Breadcrumb Item atributos
|
|||
|
|
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
|||
|
|
| -------- | ---------------------------------------- | ------------- | ----------------- | ----------- |
|
|||
|
|
| to | ruta del link, lo mismo que `to` de `vue-router` | string/object | — | — |
|
|||
|
|
| replace | si `true`, la navegación no dejara una entrada en la historia | boolean | — | false |
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|