ElementPlus Breadcrumb 面包屑

Breadcrumb 面包屑

顯示當(dāng)前頁面的路徑，快速返回之前的任意頁面。

基礎(chǔ)用法

適用廣泛的基礎(chǔ)用法。

在el-breadcrumb中使用el-breadcrumb-item標(biāo)簽表示從首頁開始的每一級(jí)。Element Plus 提供了一個(gè)separator屬性，在el-breadcrumb標(biāo)簽中設(shè)置它來決定分隔符，它只能是字符串，默認(rèn)為斜杠/。

<template>
  <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">活動(dòng)管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>活動(dòng)列表</el-breadcrumb-item>
  <el-breadcrumb-item>活動(dòng)詳情</el-breadcrumb-item>
</el-breadcrumb>
</template>

圖標(biāo)分隔符

通過設(shè)置 separator-class 可使用相應(yīng)的 iconfont 作為分隔符，注意這將使 separator 設(shè)置失效

<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
  <el-breadcrumb-item>活動(dòng)管理</el-breadcrumb-item>
  <el-breadcrumb-item>活動(dòng)列表</el-breadcrumb-item>
  <el-breadcrumb-item>活動(dòng)詳情</el-breadcrumb-item>
</el-breadcrumb>
</template>

Breadcrumb Attributes

Breadcrumb Item Attributes