element/examples/docs/es/breadcrumb.md

50 lines
1.9 KiB
Markdown
Raw Normal View History

2017-11-06 11:22:02 +00:00
## Breadcrumb
Muestra la locación de la página actual, haciendo más fácil el poder ir a la página anterior.
2017-11-06 11:22:02 +00:00
### Uso básico
2017-11-06 11:22:02 +00:00
:::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 caracter separador. El valor por defecto es '/'.
2017-11-06 11:22:02 +00:00
```html
<el-breadcrumb separator="/">
<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>
```
:::
### Icono separador
2017-11-06 11:22:02 +00:00
:::demo Setea `separator-class` para que utilice `iconfont` como separadorel mismo va a cubrir `separator`
2017-11-06 11:22:02 +00:00
```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 | Default|
2017-11-06 11:22:02 +00:00
|---------- |-------------- |---------- |-------------------------------- |-------- |
| separator | caracter separador | string | — | / |
| separator-class | nombre de la clase del icono separador | string | — | - |
2017-11-06 11:22:02 +00:00
### Breadcrumb Item atributos
| Atributo | Descripción | Tipo | Valores aceptados | Default|
2017-11-06 11:22:02 +00:00
|---------- |-------------- |---------- |-------------------------------- |-------- |
| 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 |
2017-11-06 11:22:02 +00:00