组件规范 前端代码

Button 按钮

按钮用于开始一个即时操作。

何时使用#

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

API#

  • 通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：type -> shape -> size -> loading -> disabled

Button#

属性说明类型默认值
prefix组件的品牌前缀Stringnext-
type按钮的强调程度类型，可选：normal secondary primary dark lightStringnormal
shape设置 button 的形状，可选：ghost text warningString无
htmlType设置 button 原生的 type 值，可选值请参考 HTML标准Stringbutton
component设置标签类型，可选：button a span divStringbutton
size设置按钮大小，可选： small medium largeStringmedium
loading设置按钮载入状态Booleanfalse
disabled设置按钮禁用状态Booleanfalse
onClickclick 事件的 handlerFunction无
className用于重写button样式的类名String无

Button.Group#

属性说明类型默认值
size设置按钮大小，可选：small medium largeStringmedium

Button.Split#

属性说明类型默认值
align位置，配置参考 DropdownStringtr br
offset偏移 DropdownArray[0, 4]
type类型，配置参考 ButtonStringnormal
size尺寸，配置参考 ButtonStringmedium
trigger触发事件，配置参考 DropdownStringclick
menu弹出的内容，配置参考 DropdownAny无

代码演示 

import 'blue/lib/button/index.scss';
import Button from 'blue/lib/button';

ReactDOM.render(<div>
    <Button type="primary" component="a" href="https://www.alibaba.com" target="_blank">
        <span>确定</span>
    </Button> &nbsp;&nbsp;
    <Button type="secondary" component="a" href="https://www.alibaba.com" target="_blank">次要按钮</Button> &nbsp;&nbsp;
    <Button type="normal" component="a" href="https://www.alibaba.com" target="_blank">普通按钮</Button>
</div>, mountNode);
按钮类型

按钮有三种视觉层次：主按钮、次按钮、普通按钮。

通过设置 type 为 primary secondary 可分别创建主按钮、次按钮，若不设置 type 值则为普通按钮。不同的样式可以用来区别其重要程度。

import 'blue/lib/button/index.scss';
import Button from 'blue/lib/button';
import Icon from 'blue/lib/icon';

const ButtonGroup = Button.Group;

ReactDOM.render(<div>
    <h4>基本组合</h4>
    <ButtonGroup>
        <Button type="primary">确定</Button>
        <Button type="primary">取消</Button>
    </ButtonGroup>
    <br />
    <br />
    <ButtonGroup>
        {false ? <Button disabled>左</Button> : null}
        <Button disabled>中</Button>
        <Button disabled>右</Button>
    </ButtonGroup>
    <br />
    <br />
    <ButtonGroup>
        <Button type="secondary">左</Button>
        <Button type="secondary">中</Button>
        <Button type="secondary">右</Button>
    </ButtonGroup>

    <h4>带图标按钮组合</h4>
    <ButtonGroup>
        <Button type="primary">
            <Icon type="arrow-left" /><span>后退</span>
        </Button>
        <Button type="primary">
            前进<Icon type="arrow-right" />
        </Button>
    </ButtonGroup>
    <br />
    <br />
    <ButtonGroup>
        <Button type="primary">
            <Icon type="arrow-left" />
        </Button>
        <Button type="primary">
            <Icon type="arrow-right" />
        </Button>
    </ButtonGroup>

    <h4>多个组合</h4>
    <ButtonGroup>
        <Button>1</Button>
        <Button>2</Button>
        <Button>3</Button>
        <Button>4</Button>
        <Button>
            <span>前进</span>
            <Icon type="arrow-right" />
        </Button>
    </ButtonGroup>

    <h4>尺寸</h4>
    <ButtonGroup size="large">
        <Button>大</Button>
        <Button>大</Button>
        <Button>大</Button>
    </ButtonGroup>
    <br />
    <br />
    <ButtonGroup>
        <Button>默认</Button>
        <Button>默认</Button>
        <Button>默认</Button>
    </ButtonGroup>
    <br />
    <br />
    <ButtonGroup size="small">
        <Button>小</Button>
        <Button>小</Button>
        <Button>小</Button>
    </ButtonGroup>
</div>, mountNode);
按钮组合

可以将多个 Button 放入 Button.Group 的容器中。

通过设置 size 为 large small 分别把按钮组合设为大、小尺寸。若不设置 size，则尺寸为中。

import 'blue/lib/button/index.scss';
import Button from 'blue/lib/button';
import Icon from 'blue/lib/icon';

class Demo extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            loading: false,
            iconLoading: false,
        };
    }
    enterLoading() {
        this.setState({ loading: true });
    }
    enterIconLoading() {
        this.setState({ iconLoading: true });
    }
    render() {
        return (<div>
            <h3>不同尺寸的加载按钮</h3>
            <Button type="primary" size="large" loading>
                加载中
            </Button>&nbsp;&nbsp;
            <Button type="secondary" loading>
                加载中
            </Button>&nbsp;&nbsp;
            <Button type="normal" size="small" loading>
                加载中
            </Button>
            <h3>点击变加载</h3>
            <Button type="primary" loading={this.state.loading} onClick={this.enterLoading.bind(this)}>
                点击变加载
            </Button>&nbsp;&nbsp;
            <Button type="primary" loading={this.state.iconLoading} onClick={this.enterIconLoading.bind(this)}>
                <Icon type="arrow-right" />点击变加载
            </Button>
        </div>);
    }
}

ReactDOM.render(<Demo/>, mountNode);
加载中

添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。

import 'blue/lib/button/index.scss';
import Button from 'blue/lib/button';
import Icon from 'blue/lib/icon';

ReactDOM.render(<div style={{clear: 'both'}}>
    <h3>幽灵按钮</h3>
    <div className="ghost-light-background">
        <Button type="light" shape="ghost">幽灵按钮（浅色）</Button>
    </div>
    <div className="ghost-dark-background">
        <Button type="dark" shape="ghost">幽灵按钮（深色）</Button>
    </div>
    <h3>文字按钮</h3>
    <Button type="primary" shape="text">
        <Icon type="atm" />点击我
    </Button>&nbsp;&nbsp;
    <Button type="secondary" shape="text">
        <Icon type="atm" />点击我
    </Button>&nbsp;&nbsp;
    <Button type="normal" shape="text">
        <Icon type="atm" />点击我
    </Button>
    <h3>警告按钮</h3>
    <Button type="primary" shape="warning">警告</Button>&nbsp;&nbsp;
    <Button type="normal" shape="warning">警告</Button>
</div>, mountNode);
.ghost-light-background {
    height: 100px;
    line-height: 100px;
    width: 50%;
    float: left;
    background: #E1F5C4;
    margin-bottom: 20px;
    padding-left:10px;
    box-sizing: border-box;
}
.ghost-dark-background {
    height: 100px;
    line-height: 100px;
    width: 50%;
    float: right;
    background: #F05053;
    margin-bottom: 20px;
    padding-left:10px;
    box-sizing: border-box;
}
按钮形状

通过设置 shape 为 ghost text warning

import 'blue/lib/button/index.scss';
import 'blue/lib/menu/index.scss';
import Button from 'blue/lib/button';
import Menu from 'blue/lib/menu';

const SplitButton = Button.Split;
const menu = (
    <Menu>
        <Menu.Item disabled>abc</Menu.Item>
        <Menu.Item key="abc">abc</Menu.Item>
        <Menu.Divider key="5"/>
        <Menu.Item key="1">abc</Menu.Item>
        <Menu.Item key="2">abc</Menu.Item>
    </Menu>
);

ReactDOM.render(<div style={{clear: 'both'}}>
    <h3>普通按钮</h3>
    <SplitButton menu={menu} type="primary" size="large" onClick={(e) => console.log(e)}>Upload</SplitButton>&nbsp;&nbsp;
    <SplitButton menu={menu} type="secondary">Upload</SplitButton>&nbsp;&nbsp;
    <SplitButton menu={menu} type="normal" size="small" disabled>Upload</SplitButton>

    <h3>幽灵按钮</h3>
    <div className="ghost-light-background">
        <SplitButton type="light" shape="ghost" menu={menu}>Ghost Light</SplitButton>
    </div>
    <div className="ghost-dark-background">
        <SplitButton type="dark" shape="ghost" menu={menu}>Ghost Dark</SplitButton>
    </div>

    <h3>文字按钮</h3>
    <SplitButton menu={menu} type="primary" size="large" shape="text">Upload</SplitButton>&nbsp;&nbsp;
    <SplitButton menu={menu} type="secondary" shape="text">Upload</SplitButton>&nbsp;&nbsp;
    <SplitButton menu={menu} type="normal" size="small" shape="text" disabled>Upload</SplitButton>
</div>, mountNode);
.ghost-light-background {
    height: 100px;
    line-height: 100px;
    width: 50%;
    float: left;
    background: #E1F5C4;
    margin-bottom: 20px;
    padding-left:10px;
    box-sizing: border-box;
}
.ghost-dark-background {
    height: 100px;
    line-height: 100px;
    width: 50%;
    float: right;
    background: #F05053;
    margin-bottom: 20px;
    padding-left:10px;
    box-sizing: border-box;
}
Split Button

SplitButton

import 'blue/lib/button/index.scss';
import Button from 'blue/lib/button';

ReactDOM.render(<div>
    <div style={{clear: 'both'}}>
        <div className="ghost-light-background">
            <Button type="light" shape="ghost" disabled>幽灵按钮（浅色）</Button>
        </div>
        <div className="ghost-dark-background">
            <Button type="dark" shape="ghost" disabled>幽灵按钮（深色）</Button>
        </div>
    </div>
    <Button type="primary">主按钮</Button>&nbsp;&nbsp;
    <Button type="primary" disabled>主按钮(失效)</Button>
    <br />
    <br />
    <Button type="secondary">次按钮</Button>&nbsp;&nbsp;
    <Button type="secondary" disabled>次按钮(失效)</Button>
    <br />
    <br />
    <Button type="normal">普通按钮</Button>&nbsp;&nbsp;
    <Button type="normal" disabled>普通按钮(失效)</Button>
    <br />
    <br />
</div>, mountNode);
.ghost-light-background {
    height: 100px;
    line-height: 100px;
    width: 50%;
    float: left;
    background: #E1F5C4;
    margin-bottom: 20px;
    padding-left:10px;
    box-sizing: border-box;
}
.ghost-dark-background {
    height: 100px;
    line-height: 100px;
    width: 50%;
    float: right;
    background: #F05053;
    margin-bottom: 20px;
    padding-left:10px;
    box-sizing: border-box;
}
不可用状态

添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。

import 'blue/lib/button/index.scss';
import Button from 'blue/lib/button';
import Icon from 'blue/lib/icon';

ReactDOM.render(<div>
    <Button type="primary">
        <Icon type="atm" />按钮
    </Button>&nbsp;&nbsp;
    <Button type="primary" shape="text">
        <Icon type="atm" />文字按钮
    </Button>
</div>, mountNode);
图标按钮

Button 可以嵌入 Icon

import 'blue/lib/button/index.scss';
import 'blue/lib/menu/index.scss';
import Button from 'blue/lib/button';
import Icon from 'blue/lib/icon';
import Dropdown from 'blue/lib/dropdown';
import Menu from 'blue/lib/menu';

const menu = (
    <Menu>
        <Menu.Item disabled>abc</Menu.Item>
        <Menu.Item key="abc">abc</Menu.Item>
        <Menu.Divider key="5"/>
        <Menu.Item key="1">abc</Menu.Item>
        <Menu.Item key="2">abc</Menu.Item>
    </Menu>
);
const trigger = (
    <Button type="primary">
        点击弹出MENU <Icon type="arrow-down" />
    </Button>
);

ReactDOM.render(<Dropdown trigger={trigger} triggerType="click"  align="tr br" offset={[0, 4]}>
    {menu}
</Dropdown>, mountNode);
Menu Button

Menu Button的示例代码

import 'blue/lib/button/index.scss';
import Button from 'blue/lib/button';
import Icon from 'blue/lib/icon';

ReactDOM.render(<div>
    <Button type="primary" size="large"><Icon type="atm" />大号按钮</Button>&nbsp;&nbsp;
    <Button type="primary"><Icon type="atm" />中号按钮(默认)</Button>&nbsp;&nbsp;
    <Button type="primary" size="small"><Icon type="atm" />小号按钮</Button>
</div>, mountNode);
按钮尺寸

按钮有大、中、小三种尺寸。

通过设置 size 为 large medium small 分别把按钮设为大、中、小尺寸。若不设置 size，则尺寸为中。