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}