标签页
Tabs
在同一上下文中切换互斥的内容面板。
先观察组件怎样回应用户。
再核对官方实现和适用边界。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'tabs'
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
同一对象的预览、设置、历史等视图。
什么时候不用
跨站点页面导航应使用链接和地址，不伪装成纯本地 Tabs。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "示例内容" |
value | "preview" |
items | [{"value":"preview","label":"预览","content":"先观察组件怎样回应用户。"},{"value":"source","label":"来源","content":"再核对官方实现和适用边界。"}] |
事件
ui:change
INTERACTION NOTES
交互与可访问性
- 标签和面板建立关系。
- 方向键移动焦点，按激活模式决定何时切换内容。
和相似组件的区别
Tabs 选择一个面板；Toggle Group 选择一个值或工具状态。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt · 来源核验