面包屑

面包屑导航 是一系列链接,代表了从服务根页面到当前页面的路径,允许用户导航到中间的任何页面。它们帮助用户确定他们当前在服务的哪个部分,并能快速返回一个或多个层级。

示例

何时使用

  • 在嵌套页面中使用面包屑导航组件。
  • 主页不需要使用面包屑导航。
  • 面包屑导航通常放置在页面最顶部的操作栏中。

结构

结构

1 - 当前页面。

2 - 上一页。 如果容器宽度允许,最好先显示。

3 - 服务的根页面。

4 - 分隔符。 默认使用 "/",但 ">" 也是可接受的。

5 - 溢出图标。 当页面标题不适合容器宽度时出现。超出可用空间的页面可以通过点击省略号显示的下拉菜单进行访问。

尺寸

面包屑导航的基本字体大小为 body-1。图标尺寸为 16x16 像素。

尺寸

状态

状态

默认 - 默认状态。

悬停 - 鼠标悬停在页面标题上。

禁用 - 不可点击。可用于当前页面或未链接的页面。

加载中 - 组件可以通过 renderItemContent 参数传递一个函数来显示元素的内容。例如,当面包屑元素的 数据尚未加载时,显示 Skeleton。

修改

修改

面包屑导航可以包含以下附加元素:

  1. 操作图标 - 例如添加到收藏夹、复制页面标题或上下文菜单。
  2. 标签 与页面关联的状态或其他属性。
  3. 选择器 — 点击该元素可让你在各种选项之间进行选择。
  4. 附加文本—ID、数量计数器和其他页面属性。

可以使用房屋图标代替“主页”一词来指示返回主页。

修改

自定义

您可以更改颜色、分隔符和悬停样式。请记住,为当前页面保持更明亮的突出显示,并确保元素之间有足够的对比度。

自定义

上一页警告
下一页按钮