Breadcrumb

代码演示

如何引入

import { Breadcrumb } from '@chenzy-design/svelte';

基本用法

带图标的

支持标题只显示图标或者同时显示图标和文本。

尺寸

默认为 compact，设置属性为 false 可使图标和文字尺寸增加。

自定义的分隔符

默认为 /。

截断逻辑

当级别名字溢出设定宽度后省略截断。可以通过 showTooltip 属性设置相关参数。默认宽度 150px，鼠标悬停时显示 Tooltip 完整显示级别名称。

当路径层级超过 4 个级别，则：第二层至倒数第三层省略，点击省略号展开显示全部级别；如果过长则自动换行。可以通过 maxItemCount 来控制超过多少个级别进行折叠。

routes 数据驱动与声明式 <Breadcrumb.Item> 两种写法都支持折叠。

自定义省略号区域

组件内部提供了两种省略号区域渲染的类型，可通过 moreType 来设置，moreType 的可选值为 default 和 popover。

如果想要为省略号区域自定义其他形式的渲染，则可以使用 renderMore() 方法。

renderMore 与 moveType="popover" 的折叠内容依赖父组件持有完整路由数据：仅 routes 数据驱动模式下 restItems 才有值；声明式 <Breadcrumb.Item> 子组件写法下父组件无法取得子组件内部数据（Svelte 无 React Children.toArray 等价能力），restItems 恒为空数组，折叠浮层内容会渲染为空。

路由对象

Breadcrumb 支持通过 routes 传入路由对象 route: { name, path, href, icon } 或字符串组成的数组。可以配合 renderItem 来渲染节点。通过这样实现的 Breadcrumb 同样会进行截断处理。

• name 为展示的名称，不传入时为空字符串。当 route 为字符串时，默认将字符串设置为名称。
• path 为路由路径
• href 为链接目的地，挂载在 a 标签上。
• icon 为标签的显示图标

API 参考

Breadcrumb

属性	说明	类型	默认值
activeIndex	受控使用，当前选择的导航序号	number	-
autoCollapse	是否超出 maxItemCount 后自动折叠	boolean	true
class	类名	string	-
compact	显示尺寸，是否紧凑	boolean	true
maxItemCount	超出多少个进行自动折叠	number	4
moreType	内置的 … 区域的渲染类型，可选值为 default、popover	string	default
renderItem	自定义路由项渲染组件，配合 routes 使用；组件引用直传，经 props.route 取数据	Component<{route: Route}>	-
renderMore	自定义 … 区域的渲染组件；组件引用直传，经 props.restItems 取被折叠项列表	Component<{restItems: Array<{route: Route; index: number}>}>	-
routes	router 的路由信息，由路由对象或字符串组成的数组	Array<Route \| string>	-
separator	自定义的分隔符，字符串或组件引用直传（如 separator={IconArrowRight}）	string | Component	/
showTooltip	是否展示 Tooltip 及相关配置：width，溢出宽度；ellipsisPos，截断方式（从中间/末尾截断）；opts，透传给 Tooltip 的属性	boolean \| ShowTooltipProps	{ width: 150, ellipsisPos: 'end' }
style	内联样式	string	-
onClick	单击事件	(item: Route, e: Event) => void	-

Breadcrumb.Item

属性	说明	类型	默认值
href	链接的目的地	string	-
icon	标签的显示图标，组件引用直传（如 icon={IconHome}）	Component	-
separator	分隔符，可以覆盖父级的分隔符	string	-
noLink	移除 hover 和 active 的样式	boolean	false
onClick	单击事件	(item: Route, e: Event) => void	-

Route

属性	说明	类型	默认值
href	链接目的地	string	-
icon	标签的显示图标，组件引用直传	Component	-
name	路由名	string	-
path	路由路径	string	-

无障碍

• Breadcrumb 支持传入 aria-label 来表示该 Breadcrumb 作用。
• Breadcrumb 会对当前项设置 aria-current='page'。

文案规范

• 每个页面链接都应该很简短，并且清楚地反映它链接到的位置或链接的实体。
• 按句子大小写书写。

设计变量

animation

color

font

spacing

变量	默认值	用法
--cd-transform-scale-breadcrumb-link-text	var(--cd-motion-scale-none)	面包屑文字-放大
--cd-transition-delay-breadcrumb-link-text	var(--cd-motion-duration-none)	面包屑文字-文字-延迟时间
--cd-transition-duration-breadcrumb-link-text	var(--cd-motion-duration-none)	面包屑文字-文字-动画持续时间
--cd-transition-function-breadcrumb-link-text	var(--cd-motion-ease-in)	面包屑文字-文字-过渡曲线

显示第 1 条-第 4 条，共 4 条

• 1