display: Button family: general

Button

点击后会触发一个操作。

API

Button

|名称 | 说明 | 类型 | 默认值 | |:---------------|:--------|:----|:----------| | type | 按钮的强调程度类型 可选值： normal, primary, secondary, warning, light, dark | enum | normal | | size | 按钮大小 可选值： small, medium, large | enum | medium | | block | 按钮是否为占满一行 | bool | false | | text | 是否是纯文字按钮 | bool | false | | cell | 是否是单元格按钮 | bool | false | | prefixIcon | 前置图标 | string | | | suffixIcon | 后置图标 | string | | | disabled | 是否禁用 | bool | false | | onClick | 按钮被点击时回调 | func | | | platform | 组件的平台特有样式, 可选值有 iOS 或 Android, 由 ConfigPovider 传入 | enum | iOS | | style | 按钮的 style | object | {} | | className | 按钮的 className | string | | | children | 按钮的子元素，可以是 icon 或者文字 | any | |

Button.Group

|名称 | 说明 | 类型 | 默认值 | |:---------------|:--------|:----|:----------| | size | 按钮大小 可选值： small, medium, large | enum | medium | | cell | 是否是单元格按钮 | bool | false | | buttons | 按钮大小 | ButtonProps[] | medium | | onButtonClick | 按钮点击时的回调 | (index: number, e) => void |

CSS API

| 名称 | 说明 | |:---------------|:--------| | button | 默认样式 | | button__text | 文字默认样式 | | button__icon | 图标默认样式 | button--small | size="small" 的样式 | | button--small__text | size="small" 的文字样式 | | button--small__icon | size="small" 的图标样式 | | button--large | size="large" 的样式 | | button--large__text | size="large" 的文字样式 | | button--large__icon | size="large" 的图标样式 | | button--primary | type="primary" 的样式 | | button--primary__text | type="primary" 的文字样式 | | button--primary__icon | type="primary" 的图标样式 | | button--secondary | type="secondary" 的样式 | | button--secondary__text | type="secondary" 的文字样式 | | button--secondary__icon | type="secondary" 的图标样式 | | button--light | type="light" 的样式 | | button--light__text | type="light" 的文字样式 | | button--light__icon | type="light" 的图标样式 | | button--dark | type="dark" 的样式 | | button--dark__text | type="dark" 的文字样式 | | button--dark__icon | type="dark" 的图标样式 | | button--warning | type="warning" 的样式 | | button--warning__text | type="warning" 的文字样式 | | button--warning__icon | type="warning" 的图标样式 | | button--block | block={true} 的样式 | | button--press | 按下时的样式 | | button--press__text | 按下时的文字样式 | | button--press__icon | 按下时的图标样式 | | button--primary--press | type="primary" 按下时的样式 | | button--primary--press__text | type="primary" 按下时的文字样式 | | button--primary--press__icon | type="primary" 按下时的图标样式 | | button--secondary--press | type="secondary" 按下时的样式 | | button--secondary--press__text | type="secondary" 按下时的文字样式 | | button--secondary--press__icon | type="secondary" 按下时的图标样式 | | button--light--press | type="light" 按下时的样式 | | button--light--press__text | type="light" 按下时的文字样式 | | button--light--press__icon | type="light" 按下时的图标样式 | | button--dark--press | type="dark" 按下时的样式 | | button--dark--press__text | type="dark" 按下时的文字样式 | | button--dark--press__icon | type="dark" 按下时的图标样式 | | button--warning--press | type="warning" 按下时的样式 | | button--warning--press__text | type="warning" 按下时的文字样式 | | button--warning--press__icon | type="warning" 按下时的图标样式 | | button--disabled | disabled={true} 的样式 | | button--disabled__text | disabled={true} 的文字样式 | | button--disabled__icon | disabled={true} 的图标样式 | | button--primary--disabled | disabled={true} && type="primary" 的样式 | | button--primary--disabled__text | disabled={true} && type="primary" 的文字样式 | | button--primary--disabled__icon | disabled={true} && type="primary" 的图标样式 | | button--secondary--disabled | disabled={true} && type="secondary" 的样式 | | button--secondary--disabled__text | disabled={true} && type="secondary" 的文字样式 | | button--secondary--disabled__icon | disabled={true} && type="secondary" 的图标样式 | | button--light--disabled | disabled={true} && type="light" 的样式 | | button--light--disabled__text | disabled={true} && type="light" 的文字样式 | | button--light--disabled__icon | disabled={true} && type="light" 的图标样式 | | button--dark--disabled | disabled={true} && type="dark" 的样式 | | button--dark--disabled__text | disabled={true} && type="dark" 的文字样式 | | button--dark--disabled__icon | disabled={true} && type="dark" 的图标样式 | | button--warning--disabled | disabled={true} && type="warning" 的样式 | | button--warning--disabled__text | disabled={true} && type="warning" 的文字样式 | | button--warning--disabled__icon | disabled={true} && type="warning" 的图标样式 | | button--text | text={true} 的样式 | | button--text__icon | text={true} 的文字样式 | | button--text__text | text={true} 的图标样式 | | button--text--small__text | text={true} && size="small" 的文字样式 | | button--text--small__icon | text={true} && size="small" 的图标样式 | | button--text--primary__text | text={true} && type="primary" 的文字样式 | | button--text--primary__icon | text={true} && type="primary" 的图标样式 | | button--text--press__text | text={true} 按下时的文字样式 | | button--text--press__icon | text={true} 按下时的图标样式 | | button--text--disabled__text | text={true} && disabled={true} 的文字样式 | | button--text--disabled__icon | text={true} && disabled={true} 的图标样式 | | button--text--primary--press__text | text={true} && type="primary" 按下时的文字样式 | | button--text--primary--press__icon | text={true} && type="primary" 按下时的图标样式 | | button--text--primary--disabled__text | text={true} && disabled={true} && type="primary" 的文字样式 | | button--text--primary--disabled__icon | text={true} && disabled={true} && type="primary" 的图标样式 |