2020-08-13 15:18:26 +08:00
## 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 >
```
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
### 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 >
```
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
### Breadcrumb atributos
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
| 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
2021-09-04 19:29:28 +08:00
| 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 |