REAL SHOWCASE SOURCEstatus-indicators
1 个文件 · 69 行 · TypeScript
// ===== showcase/src/examples/components/status_indicators.ts ===== import { RenderBadge, RenderButton, RenderChip, RenderDivider, RenderPageHeader, RenderProgressBar, RenderStackPanel, RenderText, RenderWrapPanel,} from 'ds-ui' export function createStatusIndicatorsExample(): RenderStackPanel { const status = new RenderText('点击标签或更新进度,观察状态反馈', { role: 'secondary' }) const badges = new RenderWrapPanel({ spacing: 10, runSpacing: 10 }) badges.addChild(new RenderBadge({ value: '门诊', status: 'primary' })) badges.addChild(new RenderBadge({ value: '已完成', status: 'success' })) badges.addChild(new RenderBadge({ value: '待复核', status: 'warning' })) badges.addChild(new RenderBadge({ value: '危急值', status: 'danger', appearance: 'filled' })) badges.addChild(new RenderBadge({ value: 128, max: 99, status: 'danger' })) badges.addChild(new RenderBadge({ dot: true, status: 'success' })) const chips = new RenderWrapPanel({ spacing: 10, runSpacing: 10 }) const diagnosisChip = new RenderChip({ label: '原发性高血压', selected: true, removable: true, onClick: () => { diagnosisChip.selected = !diagnosisChip.selected; status.text = diagnosisChip.selected ? '已选中主要诊断' : '已取消主要诊断' }, onRemove: () => { diagnosisChip.disabled = true; status.text = '诊断标签已移除' }, }) chips.addChild(diagnosisChip) chips.addChild(new RenderChip({ label: '2 型糖尿病', removable: true, onRemove: () => { status.text = '已移除次要诊断' } })) chips.addChild(new RenderChip({ label: '药物过敏', disabled: true })) const progress = new RenderProgressBar({ value: 0.68, label: '病历完成度 68%' }) const syncing = new RenderProgressBar({ value: -1, label: '正在同步医嘱' }) syncing.startIndeterminate() const actions = new RenderWrapPanel({ spacing: 10, runSpacing: 10 }) actions.addChild(new RenderButton({ label: '完成病历', variant: 'primary', onClick: () => { progress.setValue(1); progress.label = '病历完成度 100%'; status.text = '病历已完成' }, })) actions.addChild(new RenderButton({ label: '停止同步', onClick: () => { syncing.stopIndeterminate(1); syncing.label = '医嘱同步完成'; status.text = '医嘱已同步' }, })) const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' }) panel.addChild(new RenderPageHeader({ title: 'Badge / Chip / Divider / ProgressBar', description: '组合状态徽标、可操作标签、内容分隔线和确定或不确定进度反馈。', })) panel.addChild(new RenderText('状态徽标', { role: 'title', weight: 'semibold' })) panel.addChild(badges) panel.addChild(new RenderDivider()) panel.addChild(new RenderText('诊断标签', { role: 'title', weight: 'semibold' })) panel.addChild(chips) panel.addChild(new RenderDivider()) panel.addChild(progress) panel.addChild(syncing) panel.addChild(actions) panel.addChild(status) panel.padding = 24 return panel}