侧边导航
Sidebar / Sidenav
组织页面层级、功能区域和当前选中位置。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'navigation'
);
// view.update({ ...nextProps });
// view.destroy();什么时候用
页面存在多个稳定目的地或同一对象的不同视图。
什么时候不用
少量内容不要为了布局制造多层导航。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "示例导航" |
items | [{"label":"组件目录","url":"/"},{"label":"我的收藏","url":"/?q=收藏"},{"label":"最近浏览","url":"/?q=历史"}] |
active | 0 |
事件
展示组件；通过 update(props) 更新内容。
INTERACTION NOTES
交互与可访问性
- 使用 nav 与当前页标记。
- 折叠按钮暴露展开状态；内容切换保持焦点可预期。
和相似组件的区别
Sidebar 切换目的地；Tabs 通常切换同一上下文内的视图。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt、Angular · 来源核验