cjd-parkball
Version:
> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用
225 lines (219 loc) • 6.84 kB
Markdown
---
title: 按钮
title_en: button
category: 2
---
```jsx
import { Button } from 'parkball'
import { Row, Col, Menu, Icon, Dropdown } from 'parkball'
function handleMenuClick(e) {
message.info('Click on menu item.');
console.log('click', e);
}
const menu = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1">1st menu item</Menu.Item>
<Menu.Item key="2">2nd menu item</Menu.Item>
<Menu.Item key="3">3rd item</Menu.Item>
</Menu>
);
class Demo extends React.Component {
render() {
return (
<section>
<Row>
<Col offset={1} span={6}>主按钮</Col>
<Col span={6}>次按钮</Col>
<Col span={6}>更次按钮</Col>
<Col span={3}>危险按钮</Col>
<Col span={2}>失效按钮</Col>
</Row>
<Row>
<Col span={1}>
小号
</Col>
<Col span={6}>
<Row>
<Col span={8}>
<Button type='primary' size='small'>主按钮</Button>
</Col>
<Col span={8}>
<Button type='primary' size='small'><Icon type="save" />上传</Button>
</Col>
<Col span={8}>
<Button type='primary' size='small' shape='circle' icon='save' />
</Col>
</Row>
</Col>
<Col span={6}>
<Row>
<Col span={8}>
<Button type='secondary' size='small'>次按钮</Button>
</Col>
<Col span={8}>
<Button type='secondary' size='small'><Icon type="save" />上传</Button>
</Col>
<Col span={8}>
<Button type='secondary' size='small' shape='circle' icon='save' />
</Col>
</Row>
</Col>
<Col span={6}>
<Row>
<Col span={8}>
<Button size='small'>次按钮</Button>
</Col>
<Col span={8}>
<Button size='small'><Icon type="save" />上传</Button>
</Col>
<Col span={8}>
<Button size='small' shape='circle' icon='save' />
</Col>
</Row>
</Col>
<Col span={3}>
<Button type='danger' size='small'>危险按钮</Button>
</Col>
<Col span={2}>
<Button disabled size='small'>失效按钮</Button>
</Col>
</Row>
<br/>
<Row>
<Col span={1}>
常规
</Col>
<Col span={6}>
<Row>
<Col span={8}>
<Button type='primary'>主按钮</Button>
</Col>
<Col span={8}>
<Button type='primary'><Icon type="save" />上传</Button>
</Col>
<Col span={8}>
<Button type='primary' shape='circle' icon='save' />
</Col>
</Row>
</Col>
<Col span={6}>
<Row>
<Col span={8}>
<Button type='secondary'>次按钮</Button>
</Col>
<Col span={8}>
<Button type='secondary'><Icon type="save" />上传</Button>
</Col>
<Col span={8}>
<Button type='secondary' shape='circle' icon='save' />
</Col>
</Row>
</Col>
<Col span={6}>
<Row>
<Col span={8}>
<Button>次按钮</Button>
</Col>
<Col span={8}>
<Button><Icon type="save" />上传</Button>
</Col>
<Col span={8}>
<Button shape='circle' icon='save' />
</Col>
</Row>
</Col>
<Col span={3}>
<Button type='danger'>危险按钮</Button>
</Col>
<Col span={2}>
<Button disabled>失效按钮</Button>
</Col>
</Row>
<br/>
<Row>
<Col span={1}>
大号
</Col>
<Col span={6}>
<Row>
<Col span={8}>
<Button type='primary' size='large'>主按钮</Button>
</Col>
<Col span={8}>
<Button type='primary' size='large'><Icon type="save" />上传</Button>
</Col>
<Col span={8}>
<Button type='primary' size='large' shape='circle' icon='save' />
</Col>
</Row>
</Col>
<Col span={6}>
<Row>
<Col span={8}>
<Button type='secondary' size='large'>次按钮</Button>
</Col>
<Col span={8}>
<Button type='secondary' size='large'><Icon type="save" />上传</Button>
</Col>
<Col span={8}>
<Button type='secondary' size='large' shape='circle' icon='save' />
</Col>
</Row>
</Col>
<Col span={6}>
<Row>
<Col span={8}>
<Button size='large'>次按钮</Button>
</Col>
<Col span={8}>
<Button size='large'><Icon type="save" />上传</Button>
</Col>
<Col span={8}>
<Button size='large' shape='circle' icon='save' />
</Col>
</Row>
</Col>
<Col span={3}>
<Button type='danger' size='large'>危险按钮</Button>
</Col>
<Col span={2}>
<Button disabled size='large'>失效按钮</Button>
</Col>
</Row>
<br/>
<Row gutter={24}>
<Col span={6}>
<label>一级菜单按钮</label>
<Dropdown overlay={menu}>
<Button type='primary'>
菜单按钮 <Icon type="down" />
</Button>
</Dropdown>
</Col>
<Col span={6}>
<label>次级菜单按钮</label>
<Dropdown overlay={menu}>
<Button type='secondary'>
菜单按钮 <Icon type="down" />
</Button>
</Dropdown>
</Col>
<Col span={6}>
<label style={{ overflow: 'hidden', textOverflow: 'hidden' }}>更次级菜单按钮</label>
<Dropdown overlay={menu}>
<Button>
菜单按钮 <Icon type="down" />
</Button>
</Dropdown>
</Col>
<Col span={6}>
<label>文字链按钮</label>
<Button icon='plus-circle' type="link">创建消息</Button>
</Col>
</Row>
</section>
)
}
}
ReactDOM.render(<Demo />, mountNode)
```