设计
设计指南
设计原则
样式指南
设计资源
Klein - Figma
Klein Font
官方图标库
开发
开发文档
React
Vue Web
敬请期待
开发资源
GitHub 代码仓库
生态产品
生态产品
Orion Fonts
敬请期待
Orio Market
敬请期待
Klein Pro
敬请期待
Klein Editor
敬请期待
面包屑 Breadcrumb
显示当前页面在系统层级结构中的位置，并能向上返回。
当系统拥有超过两级以上的层级结构时；当需要告知用户『你在哪里』时；当需要向上导航的功能时 进行使用。
基础示例
基础用法。
自定义分隔符
通过separator属性自定义分隔符。
分隔符
通过Breadcrumb.Separator来使用分隔符。
自定义icon
在每一项前添加icon。
Breadcrumb Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| routes | router 的路由栈信息 | any[] | - |
| params | 路由的参数 | any | - |
| itemRender | router 的路由栈信息 | ReactNode | - |
| separator | 自定义分隔符 | ReactNode | - |
Breadcrumb.item
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| className | 自定义类名 | string | - |
| href | 链接的目的地 | string | - |
| onClick | 点击事件 | (e:MouseEvent) => void | - |
Breadcrumb.Separator
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | 要显示的分隔符 | ReactNode | '/' |
贡献者
