iter(g67): tag 支持 checkable 筛选片,选中态与 aria-pressed 同步

This commit is contained in:
HIsheR
2026-10-26 12:36:14 +08:00
parent 173c3d520a
commit cc3c649b80
7 changed files with 101 additions and 9 deletions
+7
View File
@@ -165,6 +165,7 @@ const drawerOpen = signal(false);
// —— 标签列表:关闭即写回信号,容器按信号重渲染 ——
const tags = signal(['设计', '前端', '组件库']);
const chipOn = { 全部: signal(true), 进行中: signal(false), 已完成: signal(false), 已归档: signal(false) }; // 筛选片选中态:每片独立信号,供 tag 双向绑定
// —— 滑块:音量与禁用态演示 ——
const volume = signal(40);
@@ -306,6 +307,12 @@ const content = h(
renderList(box, () => tags().map((t) => tag({ label: t, variant: 'info', closable: true, onClose: () => tags(tags().filter((x) => x !== t)) })));
return box;
})(),
(() => {
const chips = h('div', { class: 'row' });
renderList(chips, () => Object.entries(chipOn).map(([name, on]) => tag({ label: name, checkable: true, checked: on })));
const out = h('span', { class: 'out' }, () => `已选:${Object.entries(chipOn).filter(([, on]) => on()).map(([name]) => name).join(' / ') || '无'}`);
return h('div', {}, chips, out);
})(),
),
section(
'sec-avatar',