element/examples/docs/es/breadcrumb.md

2.1 KiB
Raw Blame History

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 separadorel 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