组件 • 面包屑
面包屑
Breadcrumb s 是一系列链接,代表服务结构中从根页面到当前页面的路径,允许用户导航到介于两者之间的任何页面。它们帮助用户确定他们所处的服务的哪个部分,并快速浏览一个或多个关卡。
§何时使用
- 对嵌套页面使用 Breadcrumbs 组件。
- 无需在主页上使用面包屑。
- 面包屑通常放在页面最顶部的操作栏中。
§结构
1- 当前页面。
2- 上一页。 如果容器的宽度允许,最好先显示。
3-服务的 根页面。
4- 分频器。 默认使用 “/”,但是 “>” 也是可以接受的。
5- 溢出图标。 当页面标题不在容器的宽度内时出现。占用空间超过可用空间的页面可通过下拉菜单进行访问,单击省略号即可显示该下拉菜单。
§尺码
面包屑中的基本字体大小为 body-1。图标大小为 16x16 像素。
§国家
默认 -默认状态。
悬停 -将鼠标悬停在页面标题上。
禁用 -不可点击。可用于当前页面或未链接的页面。
加载 -组件可以通过传递一个函数来通过 renderItemContent 参数来显示元素的内容。例如,如果尚未加载 crumbs 元素的数据,则显示骨架。
§修改
面包屑可能包含以下其他元素:
1.操作图标- 例如添加到收藏夹、复制页面标题或快捷菜单。 2.标签 — 与页面相关的状态或其他属性。 3.选择 — 单击该元素可让您在各种选项之间进行选择。 4.其他文本—ID、数量计数器和其他页面属性
可以使用房屋图标代替 “Main” 一词来表示返回主页。
§定制
您可以更改颜色、分隔线和悬停样式。记住要在当前页面上保持更亮的亮点,并在元素之间保持足够的对比度。