@beisen-phoenix/button

按钮

@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	无	否