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}