- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
显示当前页面在系统层级结构中的位置,并能向上返回。
// >=5.3.0 可用,推荐的写法 ✅return <Breadcrumb items={[{ title: 'sample' }]} />;// <5.3.0 可用,>=5.3.0 时不推荐 🙅🏻♀️return (<Breadcrumb><Breadcrumb.Item>sample</Breadcrumb.Item></Breadcrumb>);// 或return <Breadcrumb routes={[{ breadcrumbName: 'sample' }]} />;
通用属性参考:通用属性
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
itemRender | 自定义链接函数,和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - | |
params | 路由的参数 | object | - | |
items | 路由栈信息 | items[] | - | 5.3.0 |
separator | 分隔符自定义 | ReactNode | / |
type ItemType = RouteItemType | SeparatorType
const item = {type: 'separator', // Must haveseparator: '/',};
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
type | 标记为分隔符 | separator | 5.3.0 | |
separator | 要显示的分隔符 | ReactNode | / | 5.3.0 |
和 react-router 一起使用时,默认生成的 url 路径是带有 #
的,如果和 browserHistory 一起使用的话,你可以使用 itemRender
属性定义面包屑链接。
import { Link } from 'react-router';const items = [{path: 'index',title: 'home',},{path: 'first',title: 'first',children: [{path: '/general',title: 'General',},{path: '/layout',title: 'Layout',},{path: '/navigation',title: 'Navigation',},],},{path: 'second',title: 'second',},];function itemRender(item, params, items, paths) {const last = items.indexOf(item) === items.length - 1;return last ? <span>{item.title}</span> : <Link to={paths.join('/')}>{item.title}</Link>;}return <Breadcrumb itemRender={itemRender} items={items} />;
Token 名称 | 描述 | 类型 | 默认值 |
---|---|---|---|
iconFontSize | 图标大小 | number | 14 |
itemColor | 面包屑项文字颜色 | string | rgba(0, 0, 0, 0.45) |
lastItemColor | 最后一项文字颜色 | string | rgba(0, 0, 0, 0.88) |
linkColor | 链接文字颜色 | string | rgba(0, 0, 0, 0.45) |
linkHoverColor | 链接文字悬浮颜色 | string | rgba(0, 0, 0, 0.88) |
separatorColor | 分隔符颜色 | string | rgba(0, 0, 0, 0.45) |
separatorMargin | 分隔符外间距 | number | 8 |