Breadcrumb 面包屑

基础面包屑

适用于广泛的基础用法,系统拥有超过两级以上的层级结构,用于切换向上任意层级的内容。

页面1
页面2面包屑文案超长时悬浮显示文案全部信息
面包屑中文案过长时可缩略显示,鼠标hover时显示全部

带图标的面包屑

可自定义每项内容,统一图标加文字,图标放在文字前面。

页面1
页面2
页面3

自定义分隔符的面包屑

通过 separator 属性自定义分隔符,建议用图标而非文本符号。

页面1
页面2
页面3

使用 options 配置面包屑

使用 options 属性配置面包屑内容。

页面1
页面2

带省略的面包屑

使用 maxItemsitemsAfterCollapseitemsBeforeCollapse,配置省略。

DEMO (🚧建设中)...

自定义省略号

DEMO (🚧建设中)...

带跳转/点击的面包屑

自定义响应点击事件。

首页
页面1(覆盖路由)
页面3(disabled)
页面4自定义点击
点击计数器:0
名称类型默认值说明必传
maxItemWidthStringundefined单项最大宽度,超出后会以省略号形式呈现N
optionsArray-面包屑项,功能同 BreadcrumbItem。TS 类型:Array<TdBreadcrumbItemProps>N
separatorString / Slot / Function-自定义分隔符。TS 类型:string | TNode通用类型定义N
themeStringlight组件风格。可选项:lightN
名称类型默认值说明必传
contentString / Slot / Function-子元素。TS 类型:string | TNode通用类型定义N
defaultString / Slot / Function-子元素,同 content。TS 类型:string | TNode通用类型定义N
disabledBoolean-是否禁用当前项点击N
hrefString-跳转链接N
iconSlot / Function-面板屑项内的前置图标。TS 类型:TNode通用类型定义N
maxWidthStringundefined最大宽度,超出后会以省略号形式呈现。优先级高于 Breadcrumb 中的 maxItemWidthN
replaceBooleanfalse路由跳转是否采用覆盖的方式(覆盖后将没有浏览器历史记录)N
routerObject-路由对象。如果项目存在 Router,则默认使用 Router。TS 类型:anyN
targetString_self链接或路由跳转方式。可选项:_blank/_self/_parent/_topN
toString / Object-路由跳转目标,当且仅当 Router 存在时,该 API 有效。TS 类型:Route interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData } type RouteData = { [key: string]: string | string[] }详细类型定义N

何时使用

当系统超过两级以上层级结构;

当系统需要让用户了解自己所处位置时;

当需要有返回上一层级导航功能时。

组件常见用法

面包屑中文案过长时,可缩略显示,鼠标 hover 时显示全部。

推荐/慎用示例

面包屑为辅助导航,应避免过于强调导致成为页面视觉焦点。