Button

按钮组件

  • 按钮组件提供所有properties中内置的颜色及字体大小样式供选择。
  • 也可以自定义行内样式和className名字定义UI展示。
  • 通过phSize设置大小, 可选sm、md、lg。
  • 通过phStyle选择按钮颜色，可选primary、info、error、warning、danger、link、gray、success。
  • 支持disabled, active属性定义。

主要属性和接口：

  • phSize:按钮大小, 默认sm
    如: <Button phSize="lg">button</Button>
  • phStyle:按钮颜色, 默认primary
    如: <Button phStyle="info">button</Button>
  • block:是否块级显示，默认false
    如: <Button block>button</Button>
Extends Component
Defined in: src/Button.js:6
Module: 基础组件

Available since 0.1.0

Constructor

Button

Button ()

Defined in src/Button.js:6

Available since 0.1.0

Example:

import React, { Component } from "react";
import {Button} from "phoenix-ui";
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>
                    <Button phSize="md">md</Button>
                    <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>hollow</Button>
                </div>
                <Code target="button-phstyle" />

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

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

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

                <h3 className="comp-type">phIcon属性</h3>
                <div className="content">
                    <Button phIcon="search">phIcon</Button>
                </div>
                <Code target="button-phicon" />
            </div>
        );
    }
}

属性

active

Boolean

Defined in src/Button.js:88

激活状态

Default:

false

block

Boolean

Defined in src/Button.js:60

块级显示

Default:

false

classPrefix

String

Defined in src/Button.js:47

样式前缀

Default:

'button'

componentTag

String

Defined in src/Button.js:54

标签tagName

disabled

Boolean

Defined in src/Button.js:81

不可点状态

Default:

false

hollow

Boolean

Defined in src/Button.js:74

空背景

Default:

false

phSize

String

Defined in src/Button.js:33

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

Default:

'sm'

phStyle

Boolean

Defined in src/Button.js:40

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

Default:

'primary'

radius

Boolean

Defined in src/Button.js:67

圆角

Default:

false