Browse Source

fix: button group

pull/19837/head
ycjcl868 5 years ago
committed by GitHub Action
parent
commit
ec0dba9323
  1. 81
      components/button/demo/button-group.md
  2. 4
      components/button/demo/loading.md
  3. 2
      components/form/demo/advanced-search.md

81
components/button/demo/button-group.md

@ -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>

4
components/button/demo/loading.md

@ -51,10 +51,6 @@ class App extends React.Component {
>
Click me!
</Button>
<br />
<Button type="primary" loading />
<Button type="primary" shape="circle" loading />
<Button type="danger" shape="round" loading />
</div>
);
}

2
components/form/demo/advanced-search.md

@ -80,7 +80,7 @@ const AdvancedSearchForm = () => {
setExpand(!expand);
}}
>
Collapse {expand ? <Up /> : <Down />}
{expand ? <Up /> : <Down />} Collapse
</a>
</Col>
</Row>

Loading…
Cancel
Save