@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

    Keywords

    none

    Install

    npm i @beisen-phoenix/button

    DownloadsWeekly Downloads

    723

    Version

    3.3.55

    License

    ISC

    Unpacked Size

    89.2 kB

    Total Files

    43

    Last publish

    Collaborators

    • beisencorp