面包屑 Breadcrumb - Ant Design

何时使用

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

代码演示

API

通用属性参考：通用属性

参数	说明	类型	默认值	版本	全局配置
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-	6.0.0	6.0.0
dropdownIcon	自定义下拉图标	ReactNode	`<DownOutlined />`	6.2.0	6.2.0
items	路由栈信息（>=5.3.0 推荐使用，旧版请使用 `Breadcrumb.Item` 子组件方式）	ItemType[]	-	5.3.0	×
itemRender	自定义链接函数，和 react-router 配合使用，详见示例	(route, params, routes, paths) => ReactNode	-		×
params	路由的参数	object	-		×
separator	分隔符自定义	ReactNode	`/`		6.0.0
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-	6.0.0	6.0.0

ItemType

type ItemType = Omit<RouteItemType, 'title' | 'path'> | SeparatorType

RouteItemType

参数	说明	类型	默认值	版本
className	自定义类名	string	-
dropdownProps	弹出下拉菜单的自定义配置	Dropdown	-
href	链接的目的地，不能和 `path` 共用	string	-
path	拼接路径，每一层都会拼接前一个 `path` 信息。不能和 `href` 共用	string	-
menu	菜单配置项	MenuProps	-	4.24.0
onClick	单击事件	(e:MouseEvent) => void	-
title	名称	ReactNode	-	5.3.0

SeparatorType

ts

const item = {
  type: 'separator', // Must have
  separator: '/',
};

参数	说明	类型	默认值	版本
type	标记为分隔符	`separator`		5.3.0
separator	要显示的分隔符	ReactNode	`/`	5.3.0

和 browserHistory 配合

和 react-router 一起使用时，默认生成的 url 路径是带有 # 的，如果和 browserHistory 一起使用的话，你可以使用 itemRender 属性定义面包屑链接。

jsx

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} />;

Semantic DOM

主题变量（Design Token）

组件 Token如何定制？

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

全局 Token如何定制？

Token 名称	描述	类型	默认值
colorBgTextHover	控制文本在悬停状态下的背景色。	string	rgba(0,0,0,0.06)
colorPrimaryBorder	主色梯度下的描边用色，用在 Slider 等组件的描边上。	string	#91caff
colorText	最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。	string	rgba(0,0,0,0.88)
borderRadiusSM	SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角	number	4
fontFamily	Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。	number	14
fontSizeIcon	控制选择器、级联选择器等中的操作图标字体大小。正常情况下与 fontSizeSM 相同。	number	12
lineHeight	文本行高	number	1.5714285714285714
lineWidthFocus	控制线条的宽度，当组件处于聚焦态时。	number	3
marginXXS	控制元素外边距，最小尺寸。	number	4
motionDurationMid	动效播放速度，中速。用于中型元素动画交互	string	0.2s
paddingXXS	控制元素的极小内间距。	number	4