chenzy-design

如何引入

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

基础用法

通过 routes 数组配置面包屑路径，href 字段渲染为链接，末项为当前页不加链接。

自定义分隔符

用 separator 替换默认的 "/"，可传入任意字符串（如 >、·、→）。

带图标

声明式 <Breadcrumb.Item> 通过 icon snippet 在文本前渲染前置图标。

数据驱动与选中

routes 数据驱动渲染，配合 onClick 与受控 activeIndex 高亮当前选中项。

当前选中（activeIndex=1）：—

超长折叠

maxItemCount（默认 4）超出时中间折叠为三点图标；moreType 控制展开方式：default 点击就地展开，popover 悬浮弹出可点击菜单。

moreType="default"（默认）：点击三点图标就地展开全部

moreType="popover"：悬浮三点图标弹出可点击的折叠项菜单点击折叠项：—

截断与 Tooltip

showTooltip 令超长项截断，hover 显示完整名；对象配置 width（截断宽度）与 ellipsisPos（end 末尾省略 / middle 中间省略）。

默认行为：超出 150px 截断，hover 显示完整名

自定义宽度：showTooltip={ width: 220 }

从中间省略：showTooltip={ ellipsisPos: "middle" }

尺寸

默认 compact 紧凑；compact={false} 使图标与文字尺寸增大（对齐 Semi，仅 compact 布尔驱动，无独立 size）。

自定义省略号区域

renderMore 接管折叠 … 区域的渲染（对齐 Semi renderMore），参数为被折叠的路由列表；此处用 Popover 弹出完整折叠项。

路由对象

routes 支持 Route 对象 { name, path, href, icon } 或字符串组成的数组；字符串即 name，对象字段驱动链接/图标渲染。

API 参考

Breadcrumb

Props

属性	说明	类型	默认值
`routes`	数据驱动的路由项，元素为 Route 对象或纯字符串（字符串即 name）；最后一项为当前页（aria-current=page）	`(BreadcrumbRoute \| string)[]`	[]
`separator`	分隔符，字符串或 Snippet（对齐 Semi separator: ReactNode，支持传图标）	`string \| Snippet`	'/'
`maxItemCount`	超出时中间折叠（对齐 Semi；<=0 不折叠）	`number`	4
`showTooltip`	项文本超出 width（默认 150）被截断时，hover 用 Tooltip 展示完整名；对象配置 width/ellipsisPos（对齐 Semi showToolTipProps）	`boolean \| { width?: number\|string; ellipsisPos?: 'end'\|'middle'; opts?: object }`	false
`moreType`	折叠 … 的浮层类型（对齐 Semi）：default 点击三点图标就地展开全部；popover 悬浮弹出可点击跳转的折叠项菜单	`'default'\|'popover'`	'default'
`ariaLabel`	无障碍标签，默认取 i18n Breadcrumb.ariaLabel；传入覆盖（对齐 Semi aria-label）	`string`	undefined
`style`	根节点内联样式（对齐 Semi style）	`string`	undefined
`compact`	紧凑模式；false 时根元素附加 cd-breadcrumb--loose 类（更大字号/间距）	`boolean`	true
`autoCollapse`	超出 maxItemCount 时是否自动折叠；false 时始终展示全部项	`boolean`	true
`activeIndex`	受控选中项索引（配合 onClick 使用，令对应项高亮）	`number`	undefined
`renderItem`	自定义路由项渲染（routes 模式）；传入时替换默认的链接/文本/当前页渲染逻辑（对齐 Semi renderItem(route)）	`Snippet<[route: BreadcrumbRoute]>`	undefined
`renderMore`	自定义折叠 … 区域渲染；传入时接管折叠展示（替代 moreType 内置浮层），参数为被折叠路由列表	`(restItems: CollapsedRoute[]) => Snippet`	undefined
`class`	—	`string`	''
`children`	声明式 <Breadcrumb.Item> 列表；项间分隔符按 separator 纯 CSS 自动插入，最后一项后无分隔符	`Snippet`	undefined
`onClick`	单击事件（对齐 Semi onClick(route, event)）	`(route: BreadcrumbRoute, event: MouseEvent) => void`	undefined

BreadcrumbItem

声明式面包屑项；项间分隔符由父级纯 CSS 自动插入，最后一项自动渲染为当前页（不可点 + aria-current=page）

Props

属性	说明	类型	默认值
`href`	链接地址；最后一项忽略 href	`string`	undefined
`separator`	覆盖父级 separator，仅对本项末尾分隔符生效（通过内联 CSS 变量实现）	`string`	undefined
`noLink`	禁止链接/按钮行为，渲染为普通 span（不可点击）；忽略 href 和 onClick；末项始终无链接	`boolean`	false
`icon`	项前置图标 snippet，渲染在 children 之前	`Snippet`	undefined
`class`	—	`string`	''
`children`	—	`Snippet`	undefined
`onClick`	点击/键盘激活回调；最后一项及 noLink=true 时不触发	`(e: MouseEvent) => void`	undefined

Accessibility

设计变量

变量	默认值	用法
`--cd-breadcrumb-color`	`var(--cd-color-breadcrumb-default-text-default)`	面包屑根文字颜色（组件消费）
`--cd-breadcrumb-color-active`	`var(--cd-color-breadcrumb-active-text-default)`	当前页 / 选中项文字颜色（组件消费）
`--cd-breadcrumb-color-link`	`var(--cd-color-breadcrumb-default-text-default)`	可点击项文字颜色 - 常态（对齐 Semi item 常态灰，组件消费）
`--cd-breadcrumb-color-link-active`	`var(--cd-color-breadcrumb-default-text-active)`	可点击项文字颜色 - 按下（对齐 Semi item-link:active，组件消费）
`--cd-breadcrumb-color-link-hover`	`var(--cd-color-breadcrumb-default-text-hover)`	可点击项文字颜色 - 悬浮（对齐 Semi item-link:hover，组件消费）
`--cd-breadcrumb-restitem-color`	`var(--cd-color-breadcrumb-restitem-text-default)`	折叠 … 触发器 / restItem 文字颜色（对齐 Semi restItem，组件消费）
`--cd-breadcrumb-separator-color`	`var(--cd-color-breadcrumb-sepearator-default-icon-default)`	分割符颜色（组件消费）
`--cd-color-breadcrumb-active-text-active`	`var(--cd-color-text-0)`	面包屑文字颜色 - 选中激活
`--cd-color-breadcrumb-active-text-default`	`var(--cd-color-text-0)`	面包屑文字颜色 - 选中
`--cd-color-breadcrumb-default-text-active`	`var(--cd-color-link-hover)`	面包屑文字颜色 - 按下

ARIA role	`navigation`
键盘交互	`EnterSpace`