mirror of https://github.com/ElemeFE/element
2.1 KiB
2.1 KiB
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 caracter separador. El valor por defecto es '/'.
<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
<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 | caracter 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 |