@rax-ui/button NPM

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"` 的图标样式