REAL SHOWCASE SOURCEuniform-grid-clinical-actions
1 个文件 · 28 行 · TypeScript
// ===== showcase/src/examples/components/uniform_grid.ts ===== import { RenderBorder, RenderButton, RenderPageHeader, RenderStackPanel, RenderText, RenderUniformGrid, RenderWrapPanel } from 'ds-ui' const modules = ['门诊接诊', '住院管理', '检验查询', '影像阅片', '护理记录', '药品库存'] export function createUniformGridExample(): RenderStackPanel { const status = new RenderText('当前使用 3 列,每个业务入口获得完全相同的单元格尺寸。', { role: 'secondary' }) const grid = new RenderUniformGrid({ columns: 3, columnGap: 10, rowGap: 10 }) for (const [index, title] of modules.entries()) { const content = new RenderStackPanel({ orientation: 'vertical', spacing: 6 }) content.addChild(new RenderText(title, { role: 'title', weight: 'semibold' })) content.addChild(new RenderText(`今日待处理 ${8 + index * 3} 项`, { role: 'secondary' })) grid.addChild(new RenderBorder({ background: index === 0 ? 'selected' : 'panel', padding: 14, child: content })) } const actions = new RenderWrapPanel({ spacing: 8 }) for (const columns of [2, 3, 4]) actions.addChild(new RenderButton({ label: `${columns} 列`, variant: columns === 3 ? 'primary' : 'default', onClick: () => { grid.columns = columns status.text = `已切换为 ${columns} 列;行列仍保持等宽等高。` } })) const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 16, crossAxisAlignment: 'stretch' }) panel.addChild(new RenderPageHeader({ title: 'UniformGrid 等分业务入口', description: '只声明列数,布局器自动计算一致的单元格尺寸。' })) panel.addChild(actions) panel.addChild(grid) panel.addChild(status) panel.padding = 24 return panel}