Skip to content

Breadcrumb 面包屑

显示当前页面在系统层级结构中的位置,并能向上返回。

何时使用

  • 当系统拥有超过两级以上的层级结构时;
  • 当需要告知用户『你在哪里』时;
  • 当需要向上导航的功能时。

基本使用

最简单的用法。

带图标的

图标放在文字前面。如果使用icon指定的话只能使用Icon组件支持的图标。

自定义内容

可通过插槽item来自定义内容。

分隔符

可通过插槽separator来自定义分隔符。

Props 属性

属性说明类型默认值版本
items渲染元素数据BreadcrumbItem[]-
ts
interface BreadcrumbItem {
  title?: string
  path?: string
  icon?: IconName
  disabled?: boolean
}
interface BreadcrumbItem {
  title?: string
  path?: string
  icon?: IconName
  disabled?: boolean
}

Events 事件

事件说明类型
click点击事件MouseEventHandler<T> | undefined | null

Slots 插槽

事件说明
item自定义内容
separator自定义分隔符