REAL SHOWCASE SOURCEtooltip-clinical-help

1 个文件 · 52 行 · TypeScript

// ===== showcase/src/examples/components/tooltip.ts ===== import {  RenderButton,  RenderIconButton,  RenderPageHeader,  RenderStackPanel,  RenderText,  RenderWrapPanel,} from 'ds-ui' export function createTooltipExample(): RenderStackPanel {  const status = new RenderText('将鼠标停留在按钮或图标上,Tooltip 会在短暂延迟后显示。', { role: 'secondary' })  const actions = new RenderWrapPanel({ spacing: 10, runSpacing: 10 })   actions.addChild(new RenderButton({    label: '查看审核规则',    tooltip: '审核前必须确认患者身份、过敏史与诊断信息。',    onClick: () => { status.text = '已打开审核规则入口。' },  }))  actions.addChild(new RenderButton({    label: '多行提示',    tooltip: '快捷键:Ctrl+S\n作用范围:当前病历\n保存后自动生成审计记录',    onClick: () => { status.text = '多行 Tooltip 使用换行符组织短文本。' },  }))  actions.addChild(new RenderIconButton({    icon: 'refresh',    tooltip: '刷新患者最新数据',    onClick: () => { status.text = '患者数据已刷新。' },  }))  actions.addChild(new RenderIconButton({    icon: 'lock',    tooltip: '当前病历已锁定,只有主治医师可以编辑。',    disabled: true,  }))   const keyboard = new RenderStackPanel({ orientation: 'vertical', spacing: 8, crossAxisAlignment: 'stretch' })  keyboard.addChild(new RenderText('适用边界', { role: 'title', weight: 'semibold' }))  keyboard.addChild(new RenderText('Tooltip 用于补充短说明,不承担必须阅读的业务信息,也不应包含需要点击的操作。'))  keyboard.addChild(new RenderText('复杂内容和快捷操作应改用 Popover;阻断式确认应改用 Modal。', { role: 'secondary' }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 18, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'Tooltip 悬停提示',    description: '展示普通文本、多行文本、图标按钮、禁用态以及统一的延迟显示与离开隐藏行为。',  }))  panel.addChild(actions)  panel.addChild(status)  panel.addChild(keyboard)  panel.padding = 24  return panel}