文档

所有属性参数，可以随意组合，达到各种效果。

style

link

风格

type="primary"

var React = require('react')
var Button = require('button.react')
class Style extends React.Component {
    render () {
        return (
            <div>
                <Button>default</Button>
                {' '}
                <Button type="primary" >primary</Button>
                {' '}
                <Button type="danger" >danger</Button>
                {' '}
                <Button type="info" >info</Button>
                {' '}
                <Button type="warning" >warning</Button>
                {' '}
                <Button type="success" >success</Button>
                {' '}
                <Button type="link" href="#" >link</Button>
                {' '}
                <Button type="disabled" >diasbled</Button>
                <hr />
                <form action="">
                    <input type="text" name="name" defaultValue="nimo" />
                    <br />
                    <Button type="primary" htmlType="submit" >Submit</Button>
                    <Button htmlType="reset" >Reset</Button>
                </form>
            </div>
        )
    }
}

module.exports = Style

border

边框

ghost dashed

var React = require('react')
var Button = require('button.react')
class Border extends React.Component {
    render () {
        return (
            <div>
                <Button ghost >ghost</Button>
                {' '}
                <Button dashed >dashed</Button>
                {' '}
                <Button ghost dashed >ghost dashed</Button>
                {' '}
            </div>
        )
    }
}

module.exports = Border

icon

图标

var React = require('react')
var Button = require('button.react')
class Icon extends React.Component {
    render () {
        return (
            <div>
            <Button icon >&times;</Button>
            {' '}
            <Button icon type="primary" >&copy;</Button>
            {' '}
            <Button icon type="danger" >&cent;</Button>
            {' '}
            <Button prepend={(<span>&copy;</span>)}>
                prepend
            </Button>
            {' '}
            <Button append={(<span>&cent;</span>)}>
                append
            </Button>
            </div>
        )
    }
}

module.exports = Icon

loading

加载

loading={true}

var React = require('react')
var Button = require('button.react')
class Loading extends React.Component {
    render () {
        return (
            <div>
                <Button loading={true} >default</Button>
                {' '}
                <Button loading={true} type="primary" >primary</Button>
                {' '}
                <Button loading={true} type="danger" >danger</Button>
                {' '}
                <Button loading={true} type="info" >info</Button>
                {' '}
                <Button loading={true} type="warning" >warning</Button>
                {' '}
                <Button loading={true} type="success" >success</Button>
                {' '}
                <Button loading={true} type="disabled" >diasbled</Button>
            </div>
        )
    }
}

module.exports = Loading

group

默认

主要

icon

disabled

ghost

dashed

按钮组

var React = require('react')
var Button = require('button.react')
var { ButtonGroup } = Button
class Group extends React.Component {
    render () {
        return (
            <div>
                <ButtonGroup>
                    <Button>A</Button>
                    <Button>B</Button>
                    <Button>C</Button>
                </ButtonGroup> 默认
                <hr />
                <ButtonGroup>
                    <Button type="primary" >A</Button>
                    <Button type="primary" >B</Button>
                    <Button type="primary" >C</Button>
                </ButtonGroup> 主要
                <hr />
                <ButtonGroup>
                    <Button icon >&times;</Button>
                    <Button icon >&copy;</Button>
                    <Button icon >&cent;</Button>
                </ButtonGroup> icon
                <hr />
                <ButtonGroup>
                    <Button>A</Button>
                    <Button>B</Button>
                    <Button type="disabled" >C</Button>
                </ButtonGroup> disabled
                <hr />
                <ButtonGroup>
                    <Button ghost type="primary">A</Button>
                    <Button ghost type="primary">B</Button>
                    <Button ghost type="primary">C</Button>
                </ButtonGroup> ghost
                <hr />
                <ButtonGroup>
                    <Button dashed >A</Button>
                    <Button dashed >B</Button>
                    <Button dashed>C</Button>
                </ButtonGroup> dashed
            </div>
        )
    }
}

module.exports = Group

size

.face-btn--big {
    font-size:2em;
}

尺寸

size="small" size="large"

var React = require('react')
var Button = require('button.react')
class Size extends React.Component {
    render () {
        const self = this
        return (
            <div>
                <Button size="small" >small</Button>
                {' '}
                <Button>default</Button>
                {' '}
                <Button size="large">large</Button>
                <hr/>
                <Button style={{fontSize: "1.5em"}}>font-size: 1.5em</Button>
                {' '}
                <Button style={{fontSize: "2em"}}>font-size: 2em</Button>
                {' '}
                <Button size="big" >custom size</Button>
                {' '}
                <Button
                    style={{
                        fontSize: 30,
                        lineHeight: '30px',
                        padding: 10,
                        color: 'skyblue',
                        background: '#e6f7ff',
                        border: '1px solid #91d5ff',
                    }}
                >
                    custom size 2
                </Button>
            </div>
        )
    }
}

module.exports = Size

themes

/* 二次封装 */
.face-btn--themes-loose {
    letter-spacing: .3em;
    text-indent: .3em;
}
/* 三次封装 */
.face-btn--themes-import {
    font-weight: bold;
}

多次封装

var React = require('react')
var Button = require('button.react')
class ButtonLoose extends React.Component {
    render () {
        let themes = this.props.themes
        // 二次封装 night
        themes = themes + ' loose'
        return (
            <Button {...this.props} themes={themes} />
        )
    }
}
class ButtonLooseImport extends React.Component {
    render () {
        let themes = this.props.themes
        // 三次封装 light
        themes = themes + ' import'
        return (
            <ButtonLoose {...this.props} themes={themes} />
        )
    }
}
class Themes extends React.Component {
    render () {
        const self = this
        return (
            <div>
                <ButtonLoose size="large" >large</ButtonLoose>
                <hr />
                <ButtonLooseImport size="large" >large</ButtonLooseImport>
            </div>
        )
    }
}

module.exports = Themes

prefixClassName

<link rel="stylesheet" href="./prefixClassName.css" />

复制 lib/index.less 和 lib/less/ 下的文件，修改 border-radius 部分或者其他代码。配置 prefixClassName。

完全自定义样式

var React = require('react')
var Button = require('button.react')
class MyButton extends React.Component {
    render () {
        return (
            <Button prefixClassName="my-btn" {...this.props} />
        )
    }
}
class PrefixClassName extends React.Component {
    render () {
        const self = this
        return (
            <div>
                <MyButton size="small" >small</MyButton>
            </div>
        )
    }
}

module.exports = PrefixClassName

addStyle

如果你想要新增一种风格，只需要修改 less/style.less 和 less/settings.less 文件。比如找到这两个文件的 // dark 部分，取消注释，就可以使用 <Button type="dark">dark</Button>