Breadcrumb面包屑
Breadcrumb
面包屑
显示当前页面在系统层级结构中的位置,并能向上返回。
使用import{ Breadcrumb }from"antd"; |
文档编辑此页 |
// >=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 = Omit<RouteItemType, 'title' | 'path'> | 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(currentRoute, params, items, paths) {const isLast = currentRoute?.path === items[items.length - 1]?.path;return isLast ? (<span>{currentRoute.title}</span>) : (<Link to={`/${paths.join("/")}`}>{currentRoute.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 |