docs: improve button dropdown demo

This commit is contained in:
afc163 2020-10-21 11:47:59 +08:00
parent 07506792fc
commit b383c14114
2 changed files with 37 additions and 33 deletions

View File

@ -976,34 +976,43 @@ Array [
secondary
</span>
</button>,
<button
class="ant-btn ant-dropdown-trigger"
type="button"
<div
class="ant-btn-group ant-dropdown-button"
>
<span>
Actions
</span>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
<button
class="ant-btn ant-btn-default"
type="button"
>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span>
Actions
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
type="button"
>
<span
aria-label="ellipsis"
class="anticon anticon-ellipsis"
role="img"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</button>,
<svg
aria-hidden="true"
class=""
data-icon="ellipsis"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</span>
</button>
</div>,
]
`;

View File

@ -7,15 +7,14 @@ title:
## zh-CN
按钮组合使用时,推荐使用 1 个主操作 + n 个次操作3 个以上操作时把更多操作放到 `Dropdown.Button` 中组合使用。
按钮组合使用时,推荐使用 1 个主操作 + n 个次操作3 个以上操作时把更多操作放到 [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button) 中组合使用。
## en-US
If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into `Dropdown.Button`.
If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button).
```jsx
import { Button, Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
function handleMenuClick(e) {
console.log('click', e);
@ -33,11 +32,7 @@ ReactDOM.render(
<>
<Button type="primary">primary</Button>
<Button>secondary</Button>
<Dropdown overlay={menu}>
<Button>
Actions <DownOutlined />
</Button>
</Dropdown>
<Dropdown.Button overlay={menu}>Actions</Dropdown.Button>
</>,
mountNode,
);