组件

OneButton

OneButton 使用原生 button 元素呈现 primary、secondary 和 danger 操作。

查看代码收起代码

import { createComponent } from '@geektech/tsone';
import { OneButton } from '@geektech/one';

createComponent(OneButton, { variant: 'primary' }, ['Primary']);
createComponent(OneButton, { variant: 'secondary' }, ['Secondary']);
createComponent(OneButton, { variant: 'danger' }, ['Danger']);

变体与尺寸

import { createComponent } from '@geektech/tsone';
import { OneButton } from '@geektech/one';

createComponent(OneButton, { variant: 'primary', size: 'sm' }, ['Primary']);
createComponent(OneButton, { variant: 'secondary', size: 'md' }, ['Secondary']);
createComponent(OneButton, { variant: 'danger', size: 'lg' }, ['Danger']);

状态与事件

disabled 禁止交互；loading 同时禁用按钮、显示静态 spinner 并设置 aria-busy。启用状态下的原生点击会发出 click 事件。

import { OneButton } from '@geektech/one';

const button = new OneButton({ loading: false, children: ['保存'] });
button.on('click', (event) => {
  const mouseEvent = event as MouseEvent;
  console.log('clicked', mouseEvent);
});

API

OneButton 属性与事件
名称	签名	说明
`variant`	`variant?: OneButtonVariant`	视觉变体：'primary' \| 'secondary' \| 'danger'，默认 primary。
`size`	`size?: OneComponentSize`	组件尺寸：'sm' \| 'md' \| 'lg'，默认 md。
`type`	`type?: 'button' \| 'submit' \| 'reset'`	原生按钮类型，默认 button。
`disabled`	`disabled?: boolean`	禁用按钮。
`loading`	`loading?: boolean`	显示加载状态并禁用按钮。
`children`	`children?: Array<VNode \| string>`	按钮默认内容。
`click`	`(event: MouseEvent) => void`	按钮启用且未加载时发出。