面包屑

面包屑组件用于显示当前页面在层级结构中的位置，帮助用户了解当前所在的位置。 面包屑通常用于多层级的页面导航，用户可以通过点击面包屑中的链接快速返回上一级或更高层级的页面。

参数

Props

名称	类型	默认值	描述
type	string	default	面包屑类型，支持 default 和 icon
items	BreadcrumbItem[]	[]	面包屑数据，包含每个面包屑项的文本和链接等信息
separator	string	/	分隔符，用于分隔面包屑项
separatorIcon	string	>	分隔符图标，用于分隔面包屑项，优先级高于 separator

Events

名称	描述	参数
click	点击事件	(item: BreadcrumbItem) => void

示例

基础用法

带图标的面包屑

自定义分隔符

使用图标分隔符

自定义点击事件

禁用状态

自定义样式

不同类型

TypeScript

// 基础颜色类型
export type ComponentType =
  | "default"
  | "primary"
  | "secondary"
  | "success"
  | "warning"
  | "error"
  | "info";

export interface BreadcrumbItem {
  /**
   * 显示的文本(必需)
   */
  label: string;
  /**
   * 跳转的路由路径
   */
  to?: string;
  /**
   * 点击事件
   */
  action?: () => void;
  /**
   * 是否禁用
   */
  disabled?: boolean;
  /**
   * 自定义图标
   */
  icon?: string;
  /**
   * 额外的类名
   */
  class?: string;
}