test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-14 01:11:25 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity
70ebeaaedc
element-plus/website/docs/en-US/breadcrumb.md
三咲智子 55348b30b6
style: use prettier (#3228) 
* style: use prettier

* style: just prettier format, no code changes

* style: eslint fix
object-shorthand, prefer-const

* style: fix no-void

* style: no-console
2021-09-04 19:29:28 +08:00

2.0 KiB
Raw Blame History

Breadcrumb

Displays the location of the current page, making it easier to browser back.

Basic usage

:::demo In el-breadcrumb, each el-breadcrumb-item is a tag that stands for every level starting from homepage. This component has a String attribute separator, and it determines the separator. Its default value is '/'.

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

:::

Icon separator

:::demo Set separator-class to use iconfont as the separator，it will cover 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 Attributes

Attribute Description Type Accepted Values Default
separator separator character string — /
separator-class class name of icon separator string — -

Breadcrumb Item Attributes

Attribute Description Type Accepted Values Default
to target route of the link, same as to of vue-router string/object — —
replace if true, the navigation will not leave a history record boolean — false