REAL SHOWCASE SOURCEbutton-states
1 个文件 · 38 行 · TypeScript
// ===== showcase/src/examples/components/button.ts ===== import { RenderButton, RenderPageHeader, RenderStackPanel, RenderText, RenderWrapPanel,} from 'ds-ui' export function createButtonExample(): RenderStackPanel { const status = new RenderText('点击任意按钮查看事件反馈') const actions = new RenderWrapPanel({ spacing: 10, runSpacing: 10 }) const add = (label: string, variant: 'default' | 'primary' | 'danger' | 'text' | 'link' = 'default') => { actions.addChild(new RenderButton({ label, variant, onClick: () => { status.text = `${label} 已触发 · 事件只更新当前组件状态` }, })) } add('默认操作') add('保存变更', 'primary') add('删除记录', 'danger') add('文本按钮', 'text') add('查看文档', 'link') actions.addChild(new RenderButton({ label: '不可用', disabled: true })) actions.addChild(new RenderButton({ label: '正在提交', loading: true })) const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 18, crossAxisAlignment: 'stretch' }) panel.addChild(new RenderPageHeader({ title: 'Button 按钮状态', description: '同一公共组件覆盖语义变体、禁用态、加载态和点击反馈。', })) panel.addChild(actions) panel.addChild(status) panel.padding = 24 return panel}