Button

按钮组件

  • 按钮组件提供所有properties中内置的颜色及字体大小样式供选择。
  • 也可以自定义行内样式和className名字定义UI展示。
  • 通过phSize设置大小, 可选sm、md、lg。
  • 通过phStyle选择按钮颜色，可选primary、info、error、warning、danger、link、gray、success。
  • 支持disabled, active属性定义。
  • 按钮内容默认居中，可通过stable属性设置按钮不占位，只有内容部分居中，适用于动态添加icon且不希望文字移位的情况。

主要属性和接口：

  • phSize:按钮大小, 默认sm
    如: <Button phSize='lg'>button</Button>
  • phStyle:按钮颜色, 默认primary
    如: <Button phStyle='info'>button</Button>
  • block:是否块级显示，默认false
    如: <Button block>button</Button>
  • phIcon:icon符号类型,默认没有符号
    如: <Button phIcon='search'>button</Button>
  • stable: icon不占位
    如: <Button phIcon='search' stable>button</Button>
Extends Component
Defined in: src/button/index.js:11
Module: 基础组件

Available since 0.1.0

Constructor

Button

Button ()

Defined in src/button/index.js:11

Available since 0.1.0

Example:

import React, { Component } from "react"

import Button from "phoenix-ui/lib/button"
import Code from "./code/code"

export default class button extends Component{
    render(){
        return(
            <div>
                <h2 className="comp-title">Button</h2>
                <h3 className="comp-type">phSize(默认sm) 按钮大小</h3>
                <div className="content">
                    <Button>默认sm</Button>
                    <br/>
                    <Button phSize="md">md 按钮</Button>
                    <br/>
                    <Button phSize="lg">lg 按钮</Button>
                </div>
                <Code target="button-phsize" />

                <h3 className="comp-type">phStyle(默认primary) 按钮颜色</h3>
                <div className="content">
                    <Button>默认Primary</Button>
                    <Button phStyle="info">Info</Button>
                    <Button phStyle="success">Success</Button>
                    <Button phStyle="error">Error</Button>
                    <Button phStyle="danger">Danger</Button>
                    <Button phStyle="warning">Warning</Button>
                    <Button phStyle="gray">Gray</Button>
                    <Button phStyle="link">Link</Button>
                </div>
                <Code target="button-phstyle" />

                <h3 className="comp-type">hollow属性</h3>
                <div className="content">
                    <Button hollow>按钮</Button>
                </div>
                <Code target="button-hollow" />

                <h3 className="comp-type">block属性</h3>
                <div className="content">
                    <Button block>按钮</Button>
                </div>
                <Code target="button-block" />

                <h3 className="comp-type">disabled</h3>
                <div className="content">
                    <Button hollow disabled>按钮</Button>
                    <Button disabled>按钮</Button>
                </div>
                <Code target="button-disabled" />

                <h3 className="comp-type">await</h3>
                <div className="content">
                    <Button await>按钮</Button>
                </div>
                <Code target="button-disabled" />

                <h3 className="comp-type">active属性</h3>
                <div className="content">
                    <Button phStyle="gray" hollow active>按钮</Button>
                    <Button hollow active>按钮</Button>
                    <Button active>按钮</Button>
                </div>
                <Code target="button-active" />

                <h3 className="comp-type">phIcon属性</h3>
                <div className="content">
                    <Button phIcon="search" block>整体居中</Button>
                    <br/>
                    <Button phIcon="loading-white" block>整体居中</Button>
                </div>
                <Code target="button-phicon" />

                <h3 className="comp-type">stable属性</h3>
                <div className="content">
                    <Button phIcon="search" block stable>文字居中</Button>
                    <br/>
                    <Button phIcon="loading-white" block stable>文字居中</Button>
                </div>
                <Code target="button-stable" />
            </div>
        );
    }
}

属性

active

Boolean

Defined in src/button/index.js:98

激活状态

Default:

false

await

Boolean

Defined in src/button/index.js:91

待唤起状态

Default:

false

block

Boolean

Defined in src/button/index.js:70

块级显示

Default:

false

classPrefix

String

Defined in src/button/index.js:57

样式前缀

Default:

'button'

componentTag

String

Defined in src/button/index.js:64

标签tagName

disabled

Boolean

Defined in src/button/index.js:84

不可点状态

Default:

false

hollow

Boolean

Defined in src/button/index.js:77

空背景

Default:

false

phIcon

String

Defined in src/button/index.js:105

icon符号类型

Default:

''

phSize

String

Defined in src/button/index.js:43

按钮尺寸[sm、md、lg], 默认为sm

Default:

'sm'

phStyle

Boolean

Defined in src/button/index.js:50

按钮颜色[primary、warning、danger、info、error、success、link、gray], 默认primary

Default:

'primary'

stable

Boolean

Defined in src/button/index.js:112

icon占位情况，默认占位，设置之后不影响文字居中

Default:

false