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}