iter(g63): card 支持标题操作区、底部操作区与悬停态

This commit is contained in:
HIsheR
2026-10-26 12:28:56 +08:00
parent fd1de1a5c8
commit 835967e507
7 changed files with 125 additions and 11 deletions
+10 -1
View File
@@ -1083,8 +1083,17 @@ const content = h(
section(
'sec-card',
'卡片容器',
'card 组件:标题 + 任意子内容,样式全部来自设计令牌。',
'card 组件:标题行(可带右侧操作区)+ 任意子内容 + 可选底部操作区;bordered / hoverable 控制外观,样式全部来自设计令牌。',
card({ title: '令牌驱动' }, h('p', { class: 'desc' }, '这里没有硬编码颜色 —— 全部消费 --ua-* CSS 变量,暗色模式自动切换。')),
card(
{
title: '带操作区的卡片',
extra: h('span', { class: 'desc' }, '共 3 项'),
hoverable: true,
footer: h('div', { class: 'row' }, button({ label: '取消', variant: 'ghost', onClick: () => toast.info('已取消') }), button({ label: '保存', onClick: () => toast.success('已保存') })),
},
h('p', { class: 'desc' }, '标题行右侧放操作或统计,底部 footer 放主次按钮;hoverable 时整卡悬停浮起。'),
),
),
);