ant-design/components/button/demo/shape.md

43 lines
997 B
Markdown
Raw Normal View History

2015-09-27 16:30:35 +08:00
# 按钮形状
- order: 1
通过设置 `shape``circle` `circle-outline`,可以把按钮形状设为圆形,并且 `circle-outline` 在 hover 时会有动画效果。
---
````jsx
var Button = antd.Button;
var Icon = antd.Icon;
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>