面包屑
Breadcrumbs
让用户知道对象处于哪一层级，并能返回上层。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'breadcrumb'
);
// view.update({ ...nextProps });
// view.destroy();什么时候用
多层目录、嵌套资源或深层页面。
什么时候不用
简单单页切换或操作历史不应伪造成层级。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "示例面包屑" |
items | [{"label":"组件目录","href":"/"},{"label":"导航","href":"/?q=导航"},{"label":"面包屑"}] |
事件
展示组件；通过 update(props) 更新内容。
INTERACTION NOTES
交互与可访问性
- 使用有名称的 nav 和有序结构。
- 当前页不必可点击，并标记 aria-current。
和相似组件的区别
面包屑表示层级；浏览历史记录实际访问顺序。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
Vue / Nuxt · 来源核验