折叠面板
Accordion
把可展开的相关内容组织成一列标题。
什么时候使用？
让用户按需展开次要信息。
什么时候避免？
重要结论不应只藏在折叠项里。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'accordion'
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
设置分组、常见问题或可选细节。
什么时候不用
用户必须同时比较多个内容时，避免强制只展开一项。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
items | [{"label":"什么时候使用？","content":"让用户按需展开次要信息。","open":true},{"label":"什么时候避免？","content":"重要结论不应只藏在折叠项里。"}] |
事件
ui:change
INTERACTION NOTES
交互与可访问性
- 标题内使用按钮，并表达展开状态。
- 内容的标题层级保持正确。
和相似组件的区别
Accordion 允许内容显隐；Tabs 在相同位置切换面板。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt · 来源核验