# 按钮

> @beisen-phoenix/button

## 概述

> 按钮控件的作用是引发即时操作，即当用户单击后，触发即时操作，作为基础控件之一，按钮广泛应用于不同平台的产品中。
> 
> 完整的按钮视觉体系包含强、中、弱3个层次。按钮的状态分为Normal、Hover、Click3种常会状态和Disabled、Loading中非常规状态。

## 由以下几个子组件构成

> Button 比较常见的button
> 
> IconButton 点击icon触发事件
> 
> TextButton  文字按钮,点击触发事件
> 
> ButtonGroup 普通的按钮组,类似单选效果
> 
> IconButtonGroup iconButton的组合

## Button API

| 参数  | 说明  | 类型 | 默认值 | 是否必传 |
| ---- | ---- | ---- | ----- | ------- |
| size | 按钮的大小 | 可选值包括 super、big、middle、small   | middle | 否 |
| type | 按钮的类型 | 可选值包括 primary、secondary、normal   | primary | 否 |
| disabled | 是否禁用 | boolean   | false | 否 |
| loading  | 是否处于loading状态(loading图标为内置图标,不可替换) | boolean   | false | 否 |
| preIcon | 前置icon | JSX.Element | -- | 否 | 
| suffixIcon | 后置icon | JSX.Element | -- | 否 |
| ref  | 用来获取button的dom实例的引用 | (dom) =>   | -- | 否 |
| onClick  | 点击按钮的回调函数 | function   | (e) => void | 否 |
| extraCls | 扩展的class名称,一般用于样式扩展 | string | -- | 否 |


## IconButton API

| 参数  | 说明  | 类型 | 默认值 | 是否必传 |
| ---- | ---- | ---- | ----- | ------- |
| type | 按钮类型 |  primary（主）、secondary（次）、normal（弱，仅用于有边框时）   | primary | 否 |
| disable | 是否禁用 | boolean   | false | 否 |
| tipInfo  | 按钮hover时显示的提示信息 | string   | -- | 否 |
| children | 子组件,是一个Icon的组件| React.ReactNode | -- |  否 |
| loading  | 是否处于loading状态(loading图标为内置图标,不可替换) | boolean   | false | 否 |
| hasBorder | 是否显示边框 | boolean   | false | 否 |
| ref  | 用来获取button的dom实例的引用 | (dom) =>   | -- | 否 |
| onClick  | 点击按钮的回调函数 | function   | (e) => void | 否 |
| extraCls | 扩展的class名称,一般用于样式扩展 | string | -- | 否 |


## TextButton API

| 参数  | 说明  | 类型 | 默认值 | 是否必传 |
| ---- | ---- | ---- | ----- | ------- |
| type | 按钮类型 |  primary、secondary   | primary | 否 |
| size | 按钮的大小 | 可选值包括 big、small   | big | 否 |
| disable | 是否禁用 | boolean   | false | 否 |
| loading  | 是否处于loading状态(loading图标为内置图标,不可替换) | boolean   | false | 否 |
| text  | 按钮的显示文字 | string   | -- | 否 |
| preIcon | 前置icon | JSX.Element | -- | 否 | 
| suffixIcon | 后置icon | JSX.Element | -- | 否 |
| onClick  | 点击按钮的回调函数 | function   | (e) => void | 否 |
| extraCls | 扩展的class名称,一般用于样式扩展 | string | -- | 否 |


## ButtonGroup API
| 参数  | 说明  | 类型 | 默认值 | 是否必传 |
| ---- | ---- | ---- | ----- | ------- |
| type | 按钮类型 |  primary、secondary   | primary | 否 |
| size | 按钮的大小 | 可选值包括 big、small   | big | 否 |
| initialIndex | 默认激活第几个 | number   | 无 | 否 |
| items | 按钮组的数据 | object {disable?: boolean, text: string} | [] | 否 |
| onClick  | 点击按钮的回调函数 | function   | (item,e,index) => void | 否 |
| activeIndex | 指定当前激活第几个 | number   | 无 | 否 |
| extraCls | 扩展的class名称,一般用于样式扩展 | string | -- | 否 |


## IconButtonGroup API
| 参数  | 说明  | 类型 | 默认值 | 是否必传 |
| ---- | ---- | ---- | ----- | ------- |
| icons | 按钮组的自定义icon | [{ icon?: JSX.Element, tipInfo?: string, direct?: string, disable?: boolean }] | [] | 否 |
| onClick  | 点击按钮的回调函数 | function   | (index,item,e) => void | 否 |
| extraCls | 扩展的class名称,一般用于样式扩展 | string | -- | 否 |
| initialIndex | 默认激活第几个 | number   | 无 | 否 |
| activeIndex | 指定当前激活第几个 | number   | 无 | 否 |