iter: d01 新增下拉菜单 menu 组件(弹层/键盘导航/reduced-motion)
This commit is contained in:
@@ -8,6 +8,7 @@ import {
|
||||
dataTable,
|
||||
form,
|
||||
formItem,
|
||||
menu,
|
||||
modal,
|
||||
pagination,
|
||||
progress,
|
||||
@@ -71,6 +72,9 @@ const formResult = signal('');
|
||||
// —— 分页联动状态:dataTable 与独立 pagination 共用同一页码信号 ——
|
||||
const tablePage = signal(1);
|
||||
|
||||
// —— 菜单选中结果:演示 onSelect 回调 ——
|
||||
const menuPick = signal('');
|
||||
|
||||
// —— 禁用态演示:开关信号同时绑定 switch 的 checked 与 checkbox 的 disabled ——
|
||||
const locked = signal(true);
|
||||
|
||||
@@ -191,6 +195,37 @@ const app = h(
|
||||
h('div', { class: 'row' }, button({ label: '知道了', onClick: () => modalOpen(false) }), badge({ label: 'modal', variant: 'success' })),
|
||||
),
|
||||
),
|
||||
section(
|
||||
'sec-menu',
|
||||
'下拉菜单',
|
||||
'menu 触发器 + 自绘弹层:条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部或 Esc 收起。',
|
||||
h(
|
||||
'div',
|
||||
{ class: 'row' },
|
||||
menu({
|
||||
label: '文件操作',
|
||||
items: [
|
||||
{ value: 'rename', label: '重命名' },
|
||||
{ value: 'copy', label: '创建副本' },
|
||||
{ value: 'archive', label: '归档', disabled: true },
|
||||
{ divider: true, value: '', label: '' },
|
||||
{ value: 'delete', label: '删除', danger: true },
|
||||
],
|
||||
onSelect: (v) => menuPick(v),
|
||||
}),
|
||||
menu({
|
||||
label: '右对齐',
|
||||
align: 'end',
|
||||
variant: 'primary',
|
||||
items: [
|
||||
{ value: 'profile', label: '个人资料' },
|
||||
{ value: 'settings', label: '偏好设置' },
|
||||
],
|
||||
onSelect: (v) => menuPick(v),
|
||||
}),
|
||||
h('span', { class: 'out' }, () => (menuPick() ? `已选:${menuPick()}` : '未选择')),
|
||||
),
|
||||
),
|
||||
section(
|
||||
'sec-table',
|
||||
'数据表格',
|
||||
|
||||
Reference in New Issue
Block a user