zent
Version:
一套前端设计语言和基于React的实现
72 lines (59 loc) • 2.88 kB
JavaScript
import React from 'react';
import Button from '../src';
import '../assets/index.scss';
/*
按钮的一般使用规范及状态
*/
const Example = function () {
return (
<div>
<p>各种一、二、三级按钮的样式</p>
<Button type="primary">一级按钮</Button>
<Button type="primary" outline>二级按钮</Button>
<Button type="danger">一级按钮</Button>
<Button type="danger" outline>二级按钮</Button>
<Button type="success">一级按钮</Button>
<Button type="success" outline>二级按钮</Button>
<Button>三级按钮</Button>
<hr />
<p>各种按钮的 disabled 状态</p>
<Button type="primary" disabled>一级按钮</Button>
<Button type="primary" outline disabled>二级按钮</Button>
<Button type="danger" disabled>一级按钮</Button>
<Button type="danger" outline disabled>二级按钮</Button>
<Button type="success" disabled>一级按钮</Button>
<Button type="success" outline disabled>二级按钮</Button>
<Button disabled>三级按钮</Button>
<hr />
<p>各种按钮的 loading 状态</p>
<Button type="primary" loading>一级按钮</Button>
<Button type="primary" outline loading>二级按钮</Button>
<Button type="danger" loading>一级按钮</Button>
<Button type="danger" outline loading>二级按钮</Button>
<Button type="success" loading>一级按钮</Button>
<Button type="success" outline loading>二级按钮</Button>
<Button loading>三级按钮</Button>
<hr />
<p>无边框按钮,一般在背景色比较深的地方使用</p>
<div style={{ marginBottom: 20, padding: 10, background: '#FFF5CB' }}>
<Button type="primary" bordered={false}>一级按钮</Button>
<Button type="primary" outline bordered={false}>二级按钮</Button>
<Button type="danger" bordered={false}>一级按钮</Button>
<Button type="danger" outline bordered={false}>二级按钮</Button>
<Button type="success" bordered={false}>一级按钮</Button>
<Button type="success" outline bordered={false}>二级按钮</Button>
<Button bordered={false}>三级按钮</Button>
</div>
<div style={{ marginBottom: 20, padding: 10, background: '#FF4343' }}>
<Button type="primary" bordered={false}>一级按钮</Button>
<Button type="primary" outline bordered={false}>二级按钮</Button>
<Button type="danger" bordered={false}>一级按钮</Button>
<Button type="danger" outline bordered={false}>二级按钮</Button>
<Button type="success" bordered={false}>一级按钮</Button>
<Button type="success" outline bordered={false}>二级按钮</Button>
<Button bordered={false}>三级按钮</Button>
</div>
</div>
);
};
export default Example;