面包屑

Breadcrumb s 是一系列链接,代表服务结构中从根页面到当前页面的路径,允许用户导航到介于两者之间的任何页面。它们帮助用户确定他们所处的服务的哪个部分,并快速浏览一个或多个关卡。

Example

何时使用

  • 对嵌套页面使用 Breadcrumbs 组件。
  • 无需在主页上使用面包屑。
  • 面包屑通常放在页面最顶部的操作栏中。

结构

Structure

1- 当前页面。

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

3-服务的 根页面。

4- 分频器。 默认使用 “/”,但是 “>” 也是可以接受的。

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

尺码

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

Sizes

国家

States

默认 -默认状态。

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

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

加载 -组件可以通过传递一个函数来通过 renderItemContent 参数来显示元素的内容。例如,如果尚未加载 crumbs 元素的数据,则显示骨架。

修改

Modifications

面包屑可能包含以下其他元素:

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

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

Modifications

定制

您可以更改颜色、分隔线和悬停样式。记住要在当前页面上保持更亮的亮点,并在元素之间保持足够的对比度。

Customization

以前警报
下一步按钮