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}