element-plus/website/docs/jp/breadcrumb.md

Breadcrumb(パンくず)

現在のページの位置を表示し、ブラウザバックを容易にします。

基本的な使い方

:::demo el-breadcrumb では、el-breadcrumb-item はホームページから始まる各レベルを表すタグである。このコンポーネントは String 属性 separator を持ち、セパレータを決定する。デフォルト値は'/'である。

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

:::

アイコンセパレータ

:::demo separator-class を iconfont をセパレータとして使用するように設定します．

<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(パンくず)属性

Attribute	Description	Type	Accepted Values	Default
separator	セパレータ文字	string	—	/
separator-class	アイコンセパレータのクラス名	string	—	-

Breadcrumb(パンくず)項目属性

Attribute	Description	Type	Accepted Values	Default
to	リンクのターゲットルート、vue-router の to と同じ	string/object	—	—
replace	true の場合、ナビゲーションは履歴を残しません。	boolean	—	false