REAL SHOWCASE SOURCEicon-actions

1 个文件 · 46 行 · TypeScript

// ===== showcase/src/examples/components/icon_actions.ts ===== import {  RenderBorder,  RenderIcon,  RenderIconButton,  RenderPageHeader,  RenderStackPanel,  RenderText,  RenderWrapPanel,} from 'ds-ui' export function createIconActionsExample(): RenderStackPanel {  const status = new RenderText('图标用于表达状态;图标按钮用于执行操作', { role: 'secondary' })   const icons = new RenderWrapPanel({ spacing: 18, runSpacing: 12 })  for (const name of ['person', 'clipboard-checkmark', 'document-search', 'warning', 'shield-checkmark', 'history'] as const) {    const item = new RenderStackPanel({ orientation: 'horizontal', spacing: 8, crossAxisAlignment: 'center' })    item.addChild(new RenderIcon({ name, size: 18 }))    item.addChild(new RenderText(name, { size: 'small', role: 'secondary' }))    icons.addChild(item)  }   const actions = new RenderWrapPanel({ spacing: 10, runSpacing: 10 })  actions.addChild(new RenderIconButton({ icon: 'refresh', tooltip: '刷新患者信息', onClick: () => { status.text = '患者信息已刷新' } }))  actions.addChild(new RenderIconButton({ icon: 'save', tooltip: '保存病历', onClick: () => { status.text = '病历草稿已保存' } }))  actions.addChild(new RenderIconButton({ icon: 'print', tooltip: '打印病历', onClick: () => { status.text = '已进入打印预览' } }))  actions.addChild(new RenderIconButton({ icon: 'share', tooltip: '共享会诊资料', onClick: () => { status.text = '会诊资料共享请求已创建' } }))  actions.addChild(new RenderIconButton({ icon: 'trash', tooltip: '删除记录', disabled: true }))   const content = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' })  content.addChild(new RenderText('只读图标', { role: 'title', weight: 'semibold' }))  content.addChild(icons)  content.addChild(new RenderText('可交互图标按钮', { role: 'title', weight: 'semibold' }))  content.addChild(actions)  content.addChild(status)   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 18, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'Icon / IconButton 图标操作',    description: '对比只读图标与可聚焦、可点击、带 Tooltip 和禁用状态的图标按钮。',  }))  panel.addChild(new RenderBorder({ background: 'panel', padding: 18, child: content }))  panel.padding = 24  return panel}