iter: d14 新增抽屉 drawer 组件

This commit is contained in:
ui-arch-bot
2026-10-23 16:56:36 +08:00
parent 730ee1abde
commit d3fc754b33
11 changed files with 313 additions and 11 deletions
+21
View File
@@ -8,6 +8,7 @@ import {
card,
checkbox,
dataTable,
drawer,
form,
formItem,
menu,
@@ -99,6 +100,9 @@ const formResult = signal('');
// —— 分页联动状态:dataTable 与独立 pagination 共用同一页码信号 ——
const tablePage = signal(1);
// —— 抽屉开关 ——
const drawerOpen = signal(false);
// —— 标签列表:关闭即写回信号,容器按信号重渲染 ——
const tags = signal(['设计', '前端', '组件库']);
@@ -164,6 +168,23 @@ const content = h(
radioGroup({ options: [{ value: 'x', label: '静态禁用' }], value: size, disabled: true }),
),
),
section(
'sec-drawer',
'抽屉',
'drawer:open 信号驱动侧滑面板,保留主视图上下文;遮罩 / × / Esc 关闭。',
button({ label: '打开抽屉', onClick: () => drawerOpen(true) }),
drawer(
{
title: '订单详情',
open: drawerOpen,
width: 360,
onClose: () => drawerOpen(false),
footer: h('div', { class: 'row' }, button({ label: '关闭', variant: 'ghost', onClick: () => drawerOpen(false) })),
},
h('p', null, '这里是抽屉内容,可放任意 DOM。'),
h('div', { class: 'row' }, tag({ label: '#A1024', variant: 'info' }), badge({ label: '已发货', variant: 'success' })),
),
),
section(
'sec-tag',
'标签',