Breadcrumb 面包屑
用于定位页面在层次结构内的位置,并根据需要可以返回上级页面。
组件构成
- 文字标签:用以表示页面名称,文字标签可替换为
图标
; - 分隔符:用以分隔每级页面,默认为
/
。
基础面包屑
广泛的基础用法,系统拥有超过两级以上的层级结构,用于切换向上任意层级的内容。
如果标题长度超过「12个字符」或者「160px」时,出现省略号。
文本标题可以用「图标」来替代,也可以「图标」+「文本」。
交互规则
默认情况下,父级页面均可为点击跳转链接。当鼠标悬浮于父级页面标题时高亮显示「#8C8C8C → #262626」,并且底部出现悬停背景色「#F5F5F5」,继续点击则跳转至该页面。
当鼠标悬浮于带省略的标题时,用tooltip展示全部的内容。