ycjcl868
5 years ago
committed by
GitHub Action
3 changed files with 1 additions and 86 deletions
@ -1,81 +0,0 @@ |
|||
--- |
|||
order: 6 |
|||
title: |
|||
zh-CN: 按钮组合 |
|||
en-US: Button Group |
|||
--- |
|||
|
|||
## zh-CN |
|||
|
|||
可以将多个 `Button` 放入 `Button.Group` 的容器中。 |
|||
|
|||
通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`,则尺寸为中。 |
|||
|
|||
## en-US |
|||
|
|||
Buttons can be grouped by placing multiple `Button` components into a `Button.Group`. |
|||
|
|||
The `size` can be set to `large`, `small` or left unset resulting in a default size. |
|||
|
|||
```jsx |
|||
import { Button } from 'antd'; |
|||
import { Left, Right, Cloud, CloudDownload } from '@ant-design/icons'; |
|||
|
|||
const ButtonGroup = Button.Group; |
|||
|
|||
ReactDOM.render( |
|||
<div> |
|||
<h4>Basic</h4> |
|||
<ButtonGroup> |
|||
<Button>Cancel</Button> |
|||
<Button>OK</Button> |
|||
</ButtonGroup> |
|||
<ButtonGroup> |
|||
<Button disabled>L</Button> |
|||
<Button disabled>M</Button> |
|||
<Button disabled>R</Button> |
|||
</ButtonGroup> |
|||
<ButtonGroup> |
|||
<Button>L</Button> |
|||
<Button>M</Button> |
|||
<Button>R</Button> |
|||
</ButtonGroup> |
|||
|
|||
<h4>With Icon</h4> |
|||
<ButtonGroup> |
|||
<Button type="primary"> |
|||
<Left /> |
|||
Go back |
|||
</Button> |
|||
<Button type="primary"> |
|||
Go forward |
|||
<Right /> |
|||
</Button> |
|||
</ButtonGroup> |
|||
<ButtonGroup> |
|||
<Button type="primary" icon={<Cloud />} /> |
|||
<Button type="primary" icon={<CloudDownload />} /> |
|||
</ButtonGroup> |
|||
<ButtonGroup> |
|||
<Button type="primary" size="small" icon={<Cloud />} /> |
|||
<Button type="primary" size="small" icon={<CloudDownload />} /> |
|||
</ButtonGroup> |
|||
</div>, |
|||
mountNode, |
|||
); |
|||
``` |
|||
|
|||
<style> |
|||
#components-button-demo-button-group h4 { |
|||
margin: 16px 0; |
|||
font-size: 14px; |
|||
line-height: 1; |
|||
font-weight: normal; |
|||
} |
|||
#components-button-demo-button-group h4:first-child { |
|||
margin-top: 0; |
|||
} |
|||
#components-button-demo-button-group .ant-btn-group { |
|||
margin-right: 8px; |
|||
} |
|||
</style> |
Loading…
Reference in new issue