2015-09-27 16:30:35 +08:00
|
|
|
# 按钮形状
|
|
|
|
|
|
|
|
|
|
- order: 1
|
|
|
|
|
|
|
|
|
|
通过设置 `shape` 为 `circle` `circle-outline`，可以把按钮形状设为圆形，并且 `circle-outline` 在 hover 时会有动画效果。
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
````jsx
|
2015-10-28 20:55:49 +08:00
|
|
|
import { Button, Icon } from 'antd';
|
2015-09-27 16:30:35 +08:00
|
|
|
|
2015-10-20 16:47:55 +08:00
|
|
|
ReactDOM.render(<div>
|
2015-10-26 11:02:48 +08:00
|
|
|
<Button type="primary" shape="circle" size="large">
|
2015-09-27 16:30:35 +08:00
|
|
|
<Icon type="search" />
|
|
|
|
|
</Button>
|
|
|
|
|
<Button type="primary" shape="circle">
|
|
|
|
|
<Icon type="search" />
|
|
|
|
|
</Button>
|
2015-10-26 11:02:48 +08:00
|
|
|
<Button type="primary" shape="circle" size="small">
|
2015-09-27 16:30:35 +08:00
|
|
|
<Icon type="search" />
|
|
|
|
|
</Button>
|
|
|
|
|
<br />
|
2015-10-26 11:02:48 +08:00
|
|
|
<Button type="ghost" shape="circle-outline" size="large">
|
2015-09-27 16:30:35 +08:00
|
|
|
<Icon type="search" />
|
|
|
|
|
</Button>
|
|
|
|
|
<Button type="ghost" shape="circle-outline">
|
|
|
|
|
<Icon type="search" />
|
|
|
|
|
</Button>
|
2015-10-26 11:02:48 +08:00
|
|
|
<Button type="ghost" shape="circle-outline" size="small">
|
2015-09-27 16:30:35 +08:00
|
|
|
<Icon type="search" />
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
, document.getElementById('components-button-demo-shape'));
|
|
|
|
|
````
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
#components-button-demo-shape .ant-btn {
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
