@beisen-phoenix/button
TypeScript icon, indicating that this package has built-in type declarations

3.3.55 • Public • Published

按钮

@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

Dependencies (5)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i @beisen-phoenix/button

    Weekly Downloads

    31

    Version

    3.3.55

    License

    ISC

    Unpacked Size

    89.2 kB

    Total Files

    43

    Last publish

    Collaborators

    • beisencorp