zarm

# Button 按钮 ## 基本用法 ```jsx import { Button } from 'zarm'; ReactDOM.render( <> <Button>default</Button> <Button theme="primary">primary</Button> </>, mountNode, ); ``` ## 块级按钮 ```jsx import { Button } from 'zarm'; ReactDOM.render( <> <Button block>default</Button> <Button block disabled> default disabled </Button> <Button block theme="primary"> primary </Button> <Button block disabled theme="primary"> primary disabled </Button> </>, mountNode, ); ``` ## 按钮主题 ```jsx import { Button } from 'zarm'; ReactDOM.render( <> <Button>default</Button> <Button theme="primary">primary</Button> <Button theme="danger">danger</Button> </>, mountNode, ); ``` ## 按钮尺寸 ```jsx import { Button } from 'zarm'; ReactDOM.render( <> <Button size="lg">lg</Button> <Button>md</Button> <Button size="sm">sm</Button> <Button size="xs">xs</Button> </>, mountNode, ); ``` ## 按钮形状 ```jsx import { Button } from 'zarm'; import { Success } from '@zarm-design/icons'; ReactDOM.render( <> <Button shape="rect" theme="primary"> rect </Button> <Button theme="primary">radius</Button> <Button shape="round" theme="primary"> round </Button> <Button shape="circle" theme="primary"> circle </Button> <Button shape="circle" icon={<Success />} /> </>, mountNode, ); ``` ## 带阴影 ```jsx import { Button } from 'zarm'; ReactDOM.render( <> <Button shadow>default</Button> <Button shadow theme="primary"> primary </Button> <Button shadow theme="danger"> danger </Button> </>, mountNode, ); ``` ## 图标按钮 ```jsx import { Button, Icon } from 'zarm'; import { SuccessCircle, CloseCircle } from '@zarm-design/icons'; ReactDOM.render( <> <Button icon={<SuccessCircle theme="success" />}>success</Button> <Button icon={<CloseCircle theme="danger" />}>danger</Button> </>, mountNode, ); ``` ## 加载状态 ```jsx import { Button, Icon } from 'zarm'; ReactDOM.render( <> <Button loading>loading</Button> <Button loading theme="primary"> loading </Button> <Button loading disabled theme="primary"> disabled </Button> </>, mountNode, ); ``` ## 链接按钮 ```jsx import { Button } from 'zarm'; ReactDOM.render( <> <Button href="https://zarm.design">default</Button> <Button theme="primary" href="https://zarm.design"> primary </Button> <Button theme="danger" href="https://zarm.design"> danger </Button> <Button disabled theme="primary" href="https://zarm.design"> disabled </Button> </>, mountNode, ); ``` ## 幽灵按钮 ```jsx import { Button } from 'zarm'; ReactDOM.render( <> <Button block ghost> default </Button> <Button block ghost theme="primary"> primary </Button> <Button block ghost theme="danger"> danger </Button> <Button block ghost disabled> disabled </Button> </>, mountNode, ); ``` ## API | 属性 | 类型 | 默认值 | 说明 | | :------- | :------------------------------- | :-------- | :------------------------------------------------------------------------------- | | theme | string | 'default' | 按钮主题，可选值为 `default` `primary` `danger` | | size | string | 'md' | 按钮大小，可选值为 `md` `lg` `sm` `xs` | | shape | string | 'radius' | 按钮形状，可选值为 `rect` `radius` `round` `circle` | | block | boolean | false | 是否块级元素 | | ghost | boolean | false | 是否幽灵按钮 | | shadow | boolean | false | 是否带阴影 | | disabled | boolean | false | 是否禁用 | | loading | boolean | false | 是否加载中状态 | | icon | ReactNode | - | 设置图标 | | onClick | MouseEventHandler<Element> | - | 点击后触发的回调函数 | | htmlType | string | 'button' | 设置原生 button 的 `type` 值，可选值为 `button` `submit` `reset` | | href | string | - | 点击跳转的地址，指定此属性 `button` 的行为和 a 标签一致 | | target | string | - | 规定在何处打开链接文档，相当于 a 标签的 `target` 属性，`href` 属性存在时生效 | | mimeType | string | - | 链接中指向的文档的 mime 类型，相当于 a 标签的 `type` 属性，`href` 属性存在时生效 | ## CSS 变量 | 属性 | 默认值 | 说明 | | :--------------------- | :-------------------------------------- | :------------------- | | --height | 'var(--za-height-md)' | 高度 | | --border-radius | 0 | 圆角大小 | | --border-width | '1PX' | 边框粗细 | | --padding-horizontal | 'var(--za-padding-h-md)' | 内部横向边距 | | --font-size | 'var(--za-font-size-md)' | 字体大小 | | --icon-size | '22px' | 图标大小 | | --background | '#fff' | 背景色 | | --border-color | 'var(--za-theme-default)' | 边框颜色 | | --text-color | 'var(--za-color-text)' | 字体颜色 | | --loading-color | 'var(--za-theme-primary)' | 加载状态图标颜色 | | --active-background | '#e6e6e6' | 激活状态背景色 | | --active-border-color | '#e6e6e6' | 激活状态边框色 | | --active-text-color | 'var(--za-color-text)' | 激活状态字体颜色 | | --active-loading-color | 'var(--za-theme-primary-dark)' | 激活加载状态图标颜色 | | --shadow | '0 3px 3px 0 rgba(230, 230, 230, 0.3))' | 阴影样式 |