@beisen-phoenix/button

按钮

@beisen-phoenix/button

概述

按钮控件的作用是引发即时操作，即当用户单击后，触发即时操作，作为基础控件之一，按钮广泛应用于不同平台的产品中。

完整的按钮视觉体系包含强、中、弱3个层次。按钮的状态分为Normal、Hover、Click3种常会状态和Disabled、Loading2中非常规状态。

由以下几个子组件构成

Button 比较常见的button

DropdownTextButton 相对于DropdownButton而言,该组件是点击文字触发点击事件

IconButton 点击icon触发事件

TextButton 文字按钮,点击触发事件

ButtonGroup 普通的按钮组,类似单选效果

IconButtonGroup iconButton的组合

Button API

参数	说明	类型	默认值	是否必传
width	按钮的宽度	string	--	否
maxWidth	按钮的最大宽度	string	--	否
margin	按钮的外边距,需要按照css margin 规范来赋值	string	--	否
size	按钮的大小	可选值包括 super、big、middle、small	small	否
type	按钮的类型	可选值包括 primary、secondary、normal	primary	否
disable	是否禁用	boolean	false	否
extraCls	扩展的class名称,一般用于样式扩展	string	--	否
preIcon	前置icon	JSX.Element	--	否
suffixIcon	后置icon	JSX.Element	--	否
loading	是否处于loading状态(loading图标为内置图标,不可替换)	boolean	false	否
onClick	点击按钮的回调函数	function	(e) => void	否

IconButton API

参数	说明	类型	默认值	是否必传
type	按钮类型	primary、secondary	primary	否
disable	是否禁用	boolean	false	否
tipInfo	按钮hover时显示的提示信息	string	--	否
children	子组件,是一个Icon的组件	React.ReactNode	--	否
loading	是否处于loading状态(loading图标为内置图标,不可替换)	boolean	false	否
hasBorder	是否显示边框	boolean	false	否
radius	边框的的圆角	string		否
ref	用来获取button的dom实例的引用	(dom) =>	--	否
onClick	点击按钮的回调函数	function	(e) => void	否

TextButton API

参数	说明	类型	默认值	是否必传
maxWidth	按钮的最大宽度	string	--	否
margin	按钮的外边距,需要按照css margin 规范来赋值	string	--	否
type	按钮类型	primary、secondary	primary	否
size	按钮的大小	可选值包括 big、small	big	否
disable	是否禁用	boolean	false	否
loading	是否处于loading状态(loading图标为内置图标,不可替换)	boolean	false	否
text	按钮的显示文字	string	--	否
icon	自定义的icon	JSX.Element	--	否
onClick	点击按钮的回调函数	function	(e) => void	否

ButtonGroup API

参数	说明	类型	默认值	是否必传
type	按钮类型	primary、secondary	primary	否
size	按钮的大小	可选值包括 big、small	big	否
initialIndex	默认激活第几个	number	0	否
items	按钮组的数据	object {disable?: boolean, text: string}	[]	否
onClick	点击按钮的回调函数	function	(item,e) => void	否

IconButtonGroup API

参数	说明	类型	默认值	是否必传
icons	按钮组的自定义icon	[{ icon?: JSX.Element, tipInfo?: string, direct?: string, disable?: boolean }]	[]	否
onClick	点击按钮的回调函数	function	(index,item,e) => void	否