iter(g46): 新增 transfer 穿梭框组件
This commit is contained in:
@@ -17,6 +17,7 @@ import {
|
||||
card,
|
||||
checkbox,
|
||||
dataTable,
|
||||
transfer,
|
||||
descriptions,
|
||||
divider,
|
||||
drawer,
|
||||
@@ -181,6 +182,7 @@ const menuPick = signal('');
|
||||
const listPick = signal(''); // 列表点击选中的条目标题
|
||||
const slideIndex = signal(0); // 轮播当前下标(外部受控演示)
|
||||
const treePick = signal('core'); // 树形选中节点 key
|
||||
const transferKeys = signal<string[]>(['a11y']); // 穿梭框右侧集合(外部受控演示)
|
||||
const cityPick = signal(''); // 可搜索下拉的选中城市
|
||||
const pagerPage = signal(1); // 独立分页器当前页
|
||||
const pickedFiles = signal(''); // 文件选择结果(名称串)
|
||||
@@ -675,6 +677,30 @@ const content = h(
|
||||
button({ label: '错误(可关)', variant: 'danger', onClick: () => notification({ title: '保存失败', description: '服务端返回 500,请稍后重试', variant: 'danger' }) }),
|
||||
),
|
||||
),
|
||||
section(
|
||||
'sec-transfer',
|
||||
'穿梭框',
|
||||
'transfer:左右两栏由同一份 dataSource 按归属派生,勾选后点箭头整体搬运;两栏各自搜索、全选支持半选,禁用条目既不参与全选也不可搬运。',
|
||||
h(
|
||||
'div',
|
||||
{ class: 'col' },
|
||||
transfer({
|
||||
targetKeys: transferKeys,
|
||||
titles: ['待选能力', '已启用能力'],
|
||||
height: 180,
|
||||
onChange: (keys) => toast.info(`已启用 ${keys.length} 项`),
|
||||
dataSource: [
|
||||
{ key: 'a11y', label: '无障碍语义(aria)' },
|
||||
{ key: 'theme', label: '暗色主题令牌' },
|
||||
{ key: 'motion', label: '微交互动效' },
|
||||
{ key: 'virtual', label: '虚拟滚动' },
|
||||
{ key: 'ssr', label: 'SSR 水合(暂不可用)', disabled: true },
|
||||
{ key: 'i18n', label: '多语言文案' },
|
||||
],
|
||||
}),
|
||||
h('span', { class: 'out' }, () => `已启用 ${transferKeys().length} 项:${transferKeys().join(' / ') || '无'}`),
|
||||
),
|
||||
),
|
||||
section(
|
||||
'sec-result',
|
||||
'结果页',
|
||||
|
||||
Reference in New Issue
Block a user