You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

1.9 KiB

order title
5 按钮组合

可以将多个 Button 放入 Button.Group 的容器中。

通过设置 sizelarge small 分别把按钮组合设为大、小尺寸。若不设置 size,则尺寸为中。

import { Button, Icon } from 'antd';
const ButtonGroup = Button.Group;

ReactDOM.render(<div>
<h4>基本组合</h4>
<ButtonGroup>
  <Button type="primary">确定</Button>
  <Button type="primary">取消</Button>
</ButtonGroup>
<ButtonGroup>
  <Button disabled></Button>
  <Button disabled></Button>
  <Button disabled></Button>
</ButtonGroup>
<ButtonGroup>
  <Button type="primary"></Button>
  <Button type="ghost"></Button>
  <Button type="ghost"></Button>
  <Button></Button>
</ButtonGroup>

<h4>带图标按钮组合</h4>
<ButtonGroup>
  <Button type="primary">
    <Icon type="left" />后退
  </Button>
  <Button type="primary">
    前进<Icon type="right" />
  </Button>
</ButtonGroup>
<ButtonGroup>
  <Button type="primary" icon="cloud" />
  <Button type="primary" icon="cloud-download" />
</ButtonGroup>

<h4>尺寸</h4>
<ButtonGroup size="large">
  <Button type="ghost"></Button>
  <Button type="ghost"></Button>
  <Button type="ghost"></Button>
</ButtonGroup>
<ButtonGroup>
  <Button type="ghost">默认</Button>
  <Button type="ghost">默认</Button>
  <Button type="ghost">默认</Button>
</ButtonGroup>
<ButtonGroup size="small">
  <Button type="ghost"></Button>
  <Button type="ghost"></Button>
  <Button type="ghost"></Button>
</ButtonGroup>
</div>
, mountNode);