iter(g116): 抽屉支持非模态模式
This commit is contained in:
@@ -185,6 +185,7 @@ const tablePage = signal(1);
|
||||
|
||||
// —— 抽屉开关 ——
|
||||
const drawerOpen = signal(false);
|
||||
const inspectorOpen = signal(false); // 非模态抽屉:无遮罩,页面仍可操作
|
||||
|
||||
// —— 标签列表:关闭即写回信号,容器按信号重渲染 ——
|
||||
const tags = signal(['设计', '前端', '组件库']);
|
||||
@@ -304,6 +305,7 @@ const content = h(
|
||||
h('div', { class: 'row' },
|
||||
button({ label: '从右侧打开', onClick: () => drawerOpen(true) }),
|
||||
button({ label: '从底部打开', variant: 'ghost', onClick: () => sheetOpen(true) }),
|
||||
button({ label: '非模态打开', variant: 'ghost', onClick: () => inspectorOpen(true) }),
|
||||
),
|
||||
drawer(
|
||||
{
|
||||
@@ -320,6 +322,17 @@ const content = h(
|
||||
{ title: '快捷操作', open: sheetOpen, placement: 'bottom', width: 220, onClose: () => sheetOpen(false) },
|
||||
h('p', null, '从底部滑出的操作面板:适合移动端底部弹层,宽度自动铺满、高度由 width 指定。'),
|
||||
),
|
||||
drawer(
|
||||
{
|
||||
title: '非模态检查器',
|
||||
open: inspectorOpen,
|
||||
modal: false,
|
||||
width: 300,
|
||||
onClose: () => inspectorOpen(false),
|
||||
footer: h('div', { class: 'row' }, button({ label: '关闭', variant: 'ghost', onClick: () => inspectorOpen(false) })),
|
||||
},
|
||||
h('p', null, 'modal: false —— 没有遮罩、不锁背景滚动、不困焦点:左边页面照常能点能滚,适合「一边看一边改」的检查器 / 详情面板。'),
|
||||
),
|
||||
),
|
||||
section(
|
||||
'sec-tag',
|
||||
|
||||
Reference in New Issue
Block a user