mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
github-actions[bot]
GitHub
commit
6c6913c367
@ -7,39 +7,39 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
也可以直接传 `AutoComplete.Option` 作为 `AutoComplete` 的 `children`，而非使用 `options`。
|
||||
可以返回自定义的 `Option` label
|
||||
|
||||
## en-US
|
||||
|
||||
You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `options`。
|
||||
You could set custom `Option` label
|
||||
|
||||
```tsx
|
||||
import { AutoComplete } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const { Option } = AutoComplete;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [result, setResult] = useState<string[]>([]);
|
||||
const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
let res: string[] = [];
|
||||
let res: { value: string; label: string }[] = [];
|
||||
if (!value || value.indexOf('@') >= 0) {
|
||||
res = [];
|
||||
} else {
|
||||
res = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
|
||||
res = ['gmail.com', '163.com', 'qq.com'].map(domain => ({
|
||||
value,
|
||||
label: `${value}@${domain}`,
|
||||
}));
|
||||
}
|
||||
setResult(res);
|
||||
setOptions(res);
|
||||
};
|
||||
|
||||
return (
|
||||
<AutoComplete style={{ width: 200 }} onSearch={handleSearch} placeholder="input here">
|
||||
{result.map((email: string) => (
|
||||
<Option key={email} value={email}>
|
||||
{email}
|
||||
</Option>
|
||||
))}
|
||||
</AutoComplete>
|
||||
<AutoComplete
|
||||
style={{ width: 200 }}
|
||||
onSearch={handleSearch}
|
||||
placeholder="input here"
|
||||
options={options}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ Array [
|
||||
<strong
|
||||
class="site-back-top-basic"
|
||||
>
|
||||
gray
|
||||
gray
|
||||
</strong>,
|
||||
button.,
|
||||
]
|
||||
|
||||
@ -9,7 +9,7 @@ Array [
|
||||
<strong
|
||||
class="site-back-top-basic"
|
||||
>
|
||||
gray
|
||||
gray
|
||||
</strong>,
|
||||
button.,
|
||||
]
|
||||
|
||||
@ -559,6 +559,518 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/colorful-with-count-debug.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
pink
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-pink"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
red
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-red"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
yellow
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-yellow"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
orange
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-orange"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
cyan
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-cyan"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
green
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-green"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
blue
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-blue"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
purple
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-purple"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
geekblue
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-geekblue"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
magenta
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-magenta"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
volcano
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-volcano"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
gold
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-gold"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
lime
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-lime"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/dot.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
@ -643,7 +1155,7 @@ exports[`renders ./components/badge/demo/link.md extend context correctly 1`] =
|
||||
exports[`renders ./components/badge/demo/mix.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
class="ant-badge"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
@ -671,7 +1183,7 @@ Array [
|
||||
</sup>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
class="ant-badge"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
@ -699,7 +1211,7 @@ Array [
|
||||
</sup>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
class="ant-badge"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
@ -727,7 +1239,7 @@ Array [
|
||||
</sup>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
class="ant-badge"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
|
||||
@ -559,6 +559,518 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/colorful-with-count-debug.md correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
pink
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-pink"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
red
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-red"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
yellow
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-yellow"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
orange
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-orange"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
cyan
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-cyan"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
green
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-green"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
blue
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-blue"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
purple
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-purple"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
geekblue
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-geekblue"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
magenta
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-magenta"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
volcano
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-volcano"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
gold
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-gold"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
>
|
||||
lime
|
||||
</div>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-lime"
|
||||
data-show="true"
|
||||
title="44"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
@ -643,7 +1155,7 @@ exports[`renders ./components/badge/demo/link.md correctly 1`] = `
|
||||
exports[`renders ./components/badge/demo/mix.md correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
class="ant-badge"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
@ -671,7 +1183,7 @@ Array [
|
||||
</sup>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
class="ant-badge"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
@ -699,7 +1211,7 @@ Array [
|
||||
</sup>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
class="ant-badge"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
@ -727,7 +1239,7 @@ Array [
|
||||
</sup>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
class="ant-badge"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
exports[`Badge render Badge status/color when contains children 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
class="ant-badge"
|
||||
>
|
||||
<a />
|
||||
<sup
|
||||
@ -24,7 +24,7 @@ exports[`Badge render Badge status/color when contains children 1`] = `
|
||||
</sup>
|
||||
</span>
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
class="ant-badge"
|
||||
>
|
||||
<a />
|
||||
<sup
|
||||
@ -45,7 +45,7 @@ exports[`Badge render Badge status/color when contains children 1`] = `
|
||||
</sup>
|
||||
</span>
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
class="ant-badge"
|
||||
>
|
||||
<a />
|
||||
<sup
|
||||
|
||||
@ -166,6 +166,20 @@ describe('Badge', () => {
|
||||
expect(container.querySelectorAll('.ant-badge')).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('Badge should display count when color and count are both exist', () => {
|
||||
const { container } = render(
|
||||
<>
|
||||
<Badge className="badge1" text="badge" color="pink" count={44} />
|
||||
<Badge className="badge2" text="badge" color="pink" count={0} />
|
||||
<Badge className="badge3" text="badge" color="pink" />
|
||||
</>,
|
||||
);
|
||||
|
||||
expect(container.querySelectorAll('.ant-badge-count')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('[title="44"]')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('.ant-badge-status-dot')).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('Badge not render status-text when text is empty string', () => {
|
||||
const { container } = render(<Badge status="default" text={undefined} />);
|
||||
|
||||
|
||||
67
components/badge/demo/colorful-with-count-debug.md
Normal file
67
components/badge/demo/colorful-with-count-debug.md
Normal file
@ -0,0 +1,67 @@
|
||||
---
|
||||
order: 101
|
||||
title:
|
||||
zh-CN: 多彩徽标支持 count 显示 Debug
|
||||
en-US: Colorful Badge support count Debug
|
||||
debug: true
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
在使用多彩徽标的同时，支持 count 属性显示
|
||||
|
||||
## en-US
|
||||
|
||||
support `count` when use colorful badge
|
||||
|
||||
```tsx
|
||||
import { Badge } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const colors = [
|
||||
'pink',
|
||||
'red',
|
||||
'yellow',
|
||||
'orange',
|
||||
'cyan',
|
||||
'green',
|
||||
'blue',
|
||||
'purple',
|
||||
'geekblue',
|
||||
'magenta',
|
||||
'volcano',
|
||||
'gold',
|
||||
'lime',
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
{colors.map(color => (
|
||||
<div key={color} style={{ display: 'inline-block', verticalAlign: 'middle' }}>
|
||||
<Badge color={color} count={44}>
|
||||
<div
|
||||
style={{
|
||||
width: 90,
|
||||
height: 90,
|
||||
lineHeight: '90px',
|
||||
background: '#ccc',
|
||||
textAlign: 'center',
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
{color}
|
||||
</div>
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
```css
|
||||
.ant-tag {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
```
|
||||
@ -63,11 +63,14 @@ const Badge: CompoundedComponent = ({
|
||||
(count as number) > (overflowCount as number) ? `${overflowCount}+` : count
|
||||
) as string | number | null;
|
||||
|
||||
const hasStatus =
|
||||
(status !== null && status !== undefined) || (color !== null && color !== undefined);
|
||||
|
||||
const isZero = numberedDisplayCount === '0' || numberedDisplayCount === 0;
|
||||
|
||||
const ignoreCount = count === null || (count !== null && isZero);
|
||||
|
||||
const hasStatus =
|
||||
((status !== null && status !== undefined) || (color !== null && color !== undefined)) &&
|
||||
ignoreCount;
|
||||
|
||||
const showAsDot = dot && !isZero;
|
||||
|
||||
const mergedCount = showAsDot ? '' : numberedDisplayCount;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import DownOutlined from '@ant-design/icons/DownOutlined';
|
||||
import * as React from 'react';
|
||||
|
||||
import warning from '../_util/warning';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import type { DropdownProps } from '../dropdown/dropdown';
|
||||
import Dropdown from '../dropdown/dropdown';
|
||||
@ -9,30 +10,47 @@ export interface BreadcrumbItemProps {
|
||||
prefixCls?: string;
|
||||
separator?: React.ReactNode;
|
||||
href?: string;
|
||||
overlay?: DropdownProps['overlay'];
|
||||
menu?: DropdownProps['menu'];
|
||||
dropdownProps?: DropdownProps;
|
||||
onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
|
||||
// Deprecated
|
||||
/** @deprecated Please use `menu` instead */
|
||||
overlay?: DropdownProps['overlay'];
|
||||
}
|
||||
interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
|
||||
__ANT_BREADCRUMB_ITEM: boolean;
|
||||
}
|
||||
const BreadcrumbItem: BreadcrumbItemInterface = ({
|
||||
prefixCls: customizePrefixCls,
|
||||
separator = '/',
|
||||
children,
|
||||
overlay,
|
||||
dropdownProps,
|
||||
...restProps
|
||||
}) => {
|
||||
const BreadcrumbItem: BreadcrumbItemInterface = props => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
separator = '/',
|
||||
children,
|
||||
menu,
|
||||
overlay,
|
||||
dropdownProps,
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
|
||||
|
||||
// Warning for deprecated usage
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
warning(
|
||||
!('overlay' in props),
|
||||
'Breadcrumb.Item',
|
||||
'`overlay` is deprecated. Please use `menu` instead.',
|
||||
);
|
||||
}
|
||||
|
||||
/** If overlay is have Wrap a Dropdown */
|
||||
const renderBreadcrumbNode = (breadcrumbItem: React.ReactNode) => {
|
||||
if (overlay) {
|
||||
if (menu || overlay) {
|
||||
return (
|
||||
<Dropdown overlay={overlay} placement="bottom" {...dropdownProps}>
|
||||
<Dropdown menu={menu} overlay={overlay} placement="bottom" {...dropdownProps}>
|
||||
<span className={`${prefixCls}-overlay-link`}>
|
||||
{breadcrumbItem}
|
||||
<DownOutlined />
|
||||
|
||||
@ -33,6 +33,19 @@ describe('Breadcrumb', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('overlay deprecation warning', () => {
|
||||
render(
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item overlay={<div>menu</div>}>
|
||||
<a href="">General</a>
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb>,
|
||||
);
|
||||
expect(errorSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: Breadcrumb.Item] `overlay` is deprecated. Please use `menu` instead.',
|
||||
);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/5015
|
||||
it('should allow Breadcrumb.Item is null or undefined', () => {
|
||||
const { asFragment } = render(
|
||||
|
||||
@ -14,39 +14,35 @@ title:
|
||||
Breadcrumbs support drop down menu.
|
||||
|
||||
```tsx
|
||||
import { Breadcrumb, Menu } from 'antd';
|
||||
import { Breadcrumb } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
|
||||
General
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
|
||||
Layout
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
|
||||
Navigation
|
||||
</a>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items = [
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
|
||||
General
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
|
||||
Layout
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
|
||||
Navigation
|
||||
</a>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Breadcrumb>
|
||||
@ -54,7 +50,7 @@ const App: React.FC = () => (
|
||||
<Breadcrumb.Item>
|
||||
<a href="">Component</a>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item overlay={menu}>
|
||||
<Breadcrumb.Item menu={{ items }}>
|
||||
<a href="">General</a>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>Button</Breadcrumb.Item>
|
||||
|
||||
@ -13,6 +13,39 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
|
||||
- When you need to inform the user of where they are.
|
||||
- When the user may need to navigate back to a higher level.
|
||||
|
||||
### Usage upgrade after 4.24.0
|
||||
|
||||
```__react
|
||||
import Alert from '../alert';
|
||||
ReactDOM.render(<Alert message="After version 4.24.0, we provide a simpler usage <Breadcrumb.Item menu={{ items: [...] }}> with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 5.0." />, mountNode);
|
||||
```
|
||||
|
||||
```jsx
|
||||
// works when >=4.24.0, recommended ✅
|
||||
const items = [
|
||||
{ label: 'item 1', key: 'item-1' }, // remember to pass the key prop
|
||||
{ label: 'item 2', key: 'item-2' },
|
||||
];
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item menu={{ items }}>Ant Design</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
);
|
||||
|
||||
// works when <4.24.0, deprecated when >=4.24.0 🙅🏻♀️
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item>item 1</Menu.Item>
|
||||
<Menu.Item>item 2</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item overlay={menu}>Ant Design</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
);
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Breadcrumb
|
||||
@ -31,14 +64,14 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
|
||||
| className | The additional css class | string | - | |
|
||||
| dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - | |
|
||||
| href | Target of hyperlink | string | - | |
|
||||
| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
|
||||
| menu | The menu props | [MenuProps](/components/menu/#API) | - | 4.24.0 |
|
||||
| onClick | Set the handler to handle click event | (e:MouseEvent) => void | - | |
|
||||
|
||||
### Breadcrumb.Separator
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| children | Custom separator | ReactNode | `/` | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| -------- | ---------------- | --------- | ------- | ------- |
|
||||
| children | Custom separator | ReactNode | `/` | |
|
||||
|
||||
> When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear.
|
||||
|
||||
|
||||
@ -14,6 +14,39 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
|
||||
- 当需要告知用户『你在哪里』时；
|
||||
- 当需要向上导航的功能时。
|
||||
|
||||
### 4.24.0 用法升级
|
||||
|
||||
```__react
|
||||
import Alert from '../alert';
|
||||
ReactDOM.render(<Alert message="在 4.24.0 版本后，我们提供了 <Breadcrumb.Item menu={{ items: [...] }}> 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法，你还是可以在 4.x 继续使用，但会在控制台看到警告，并会在 5.0 后移除。" />, mountNode);
|
||||
```
|
||||
|
||||
```jsx
|
||||
// >=4.24.0 可用，推荐的写法 ✅
|
||||
const items = [
|
||||
{ label: '菜单项一', key: 'item-1' }, // 菜单项务必填写 key
|
||||
{ label: '菜单项二', key: 'item-2' },
|
||||
];
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item menu={{ items }}>Ant Design</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
);
|
||||
|
||||
// <4.24.0 可用，>=4.24.0 时不推荐 🙅🏻♀️
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item>菜单项一</Menu.Item>
|
||||
<Menu.Item>菜单项二</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item overlay={menu}>Ant Design</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
);
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Breadcrumb
|
||||
@ -27,19 +60,19 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
|
||||
|
||||
### Breadcrumb.Item
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| className | 自定义类名 | string | - | |
|
||||
| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - | |
|
||||
| href | 链接的目的地 | string | - | |
|
||||
| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - | |
|
||||
| onClick | 单击事件 | (e:MouseEvent) => void | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------------- | ------------------------ | ---------------------------------- | ------ | ------ |
|
||||
| className | 自定义类名 | string | - | |
|
||||
| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - | |
|
||||
| href | 链接的目的地 | string | - | |
|
||||
| menu | 菜单配置项 | [MenuProps](/components/menu/#API) | - | 4.24.0 |
|
||||
| onClick | 单击事件 | (e:MouseEvent) => void | - | |
|
||||
|
||||
### Breadcrumb.Separator
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| children | 要显示的分隔符 | ReactNode | `/` | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------- | -------------- | --------- | ------ | ---- |
|
||||
| children | 要显示的分隔符 | ReactNode | `/` | |
|
||||
|
||||
> 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。
|
||||
|
||||
|
||||
@ -1787,10 +1787,10 @@ Array [
|
||||
</span>
|
||||
</button>,
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1798,7 +1798,7 @@ Array [
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
|
||||
@ -1451,10 +1451,10 @@ Array [
|
||||
</span>
|
||||
</button>,
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1462,7 +1462,7 @@ Array [
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
|
||||
@ -7,6 +7,7 @@ import { ConfigContext } from '../config-provider';
|
||||
import DisabledContext from '../config-provider/DisabledContext';
|
||||
import type { SizeType } from '../config-provider/SizeContext';
|
||||
import SizeContext from '../config-provider/SizeContext';
|
||||
import { useCompactItemContext } from '../space/Compact';
|
||||
import { cloneElement, isFragment } from '../_util/reactNode';
|
||||
import { tuple } from '../_util/type';
|
||||
import warning from '../_util/warning';
|
||||
@ -159,14 +160,13 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
|
||||
const size = React.useContext(SizeContext);
|
||||
// ===================== Disabled =====================
|
||||
const disabled = React.useContext(DisabledContext);
|
||||
const mergedDisabled = customDisabled || disabled;
|
||||
const mergedDisabled = customDisabled ?? disabled;
|
||||
|
||||
const groupSize = React.useContext(GroupSizeContext);
|
||||
const [innerLoading, setLoading] = React.useState<Loading>(!!loading);
|
||||
const [hasTwoCNChar, setHasTwoCNChar] = React.useState(false);
|
||||
const { getPrefixCls, autoInsertSpaceInButton, direction } = React.useContext(ConfigContext);
|
||||
const buttonRef = (ref as any) || React.createRef<HTMLElement>();
|
||||
|
||||
const isNeedInserted = () =>
|
||||
React.Children.count(children) === 1 && !icon && !isUnBorderedButtonType(type);
|
||||
|
||||
@ -236,9 +236,10 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
|
||||
|
||||
const prefixCls = getPrefixCls('btn', customizePrefixCls);
|
||||
const autoInsertSpace = autoInsertSpaceInButton !== false;
|
||||
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
|
||||
|
||||
const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined };
|
||||
const sizeFullname = groupSize || customizeSize || size;
|
||||
const sizeFullname = compactSize || groupSize || customizeSize || size;
|
||||
const sizeCls = sizeFullname ? sizeClassNameMap[sizeFullname] || '' : '';
|
||||
|
||||
const iconType = innerLoading ? 'loading' : icon;
|
||||
@ -260,6 +261,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
[`${prefixCls}-disabled`]: linkButtonRestProps.href !== undefined && mergedDisabled,
|
||||
},
|
||||
compactItemClassnames,
|
||||
className,
|
||||
);
|
||||
|
||||
|
||||
@ -15,38 +15,33 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
|
||||
|
||||
```tsx
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Button, Dropdown, Menu } from 'antd';
|
||||
import { Button, Dropdown } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const onMenuClick: MenuProps['onClick'] = e => {
|
||||
console.log('click', e);
|
||||
};
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
onClick={onMenuClick}
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: '1st item',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: '2nd item',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: '3rd item',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items = [
|
||||
{
|
||||
key: '1',
|
||||
label: '1st item',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: '2nd item',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: '3rd item',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Button type="primary">primary</Button>
|
||||
<Button>secondary</Button>
|
||||
<Dropdown.Button overlay={menu}>Actions</Dropdown.Button>
|
||||
<Dropdown.Button menu={{ items, onClick: onMenuClick }}>Actions</Dropdown.Button>
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
@ -289,4 +289,5 @@ a.@{btn-prefix-cls} {
|
||||
}
|
||||
}
|
||||
|
||||
@import './space-compact';
|
||||
@import './rtl';
|
||||
|
||||
@ -1,2 +1,4 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
|
||||
// deps-lint-skip: space
|
||||
|
||||
88
components/button/style/space-compact.less
Normal file
88
components/button/style/space-compact.less
Normal file
@ -0,0 +1,88 @@
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@btn-prefix-cls: ~'@{ant-prefix}-btn';
|
||||
|
||||
// Button in Space.Compact
|
||||
.@{btn-prefix-cls} {
|
||||
.compact-item(@btn-prefix-cls);
|
||||
|
||||
// make `btn-icon-only` not too narrow
|
||||
&-icon-only&-compact-item {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
// Special styles for Primary Button
|
||||
&-compact-item.@{btn-prefix-cls}-primary {
|
||||
&:not([disabled]) + &:not([disabled]) {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: -@border-width-base;
|
||||
left: -@border-width-base;
|
||||
display: inline-block;
|
||||
width: @border-width-base;
|
||||
height: calc(100% + @border-width-base * 2);
|
||||
background-color: @btn-group-border;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------RTL----------
|
||||
&-compact-item-rtl {
|
||||
&.@{btn-prefix-cls}-compact-first-item&:not(.@{btn-prefix-cls}-compact-last-item) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&.@{btn-prefix-cls}-compact-last-item&:not(.@{btn-prefix-cls}-compact-first-item) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&.@{btn-prefix-cls}-sm {
|
||||
&.@{btn-prefix-cls}-compact-first-item&:not(.@{btn-prefix-cls}-compact-last-item) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&.@{btn-prefix-cls}-compact-last-item&:not(.@{btn-prefix-cls}-compact-first-item) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------RTL Special styles for Primary Button----------
|
||||
&.@{btn-prefix-cls}-primary {
|
||||
&:not([disabled]) + &:not([disabled]) {
|
||||
&::after {
|
||||
right: -@border-width-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button in Space.Compact when direction=vertical
|
||||
.compact-item-vertical(@btn-prefix-cls);
|
||||
|
||||
// Special styles for Primary Button
|
||||
&-compact-vertical-item {
|
||||
&.@{btn-prefix-cls}-primary {
|
||||
&:not([disabled]) + &:not([disabled]) {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: -@border-width-base;
|
||||
left: -@border-width-base;
|
||||
display: inline-block;
|
||||
width: calc(100% + @border-width-base * 2);
|
||||
height: @border-width-base;
|
||||
background-color: @btn-group-border;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -492,12 +492,12 @@ exports[`renders ./components/cascader/demo/custom-render.md extend context corr
|
||||
<span>
|
||||
Zhejiang
|
||||
<!-- -->
|
||||
/
|
||||
/
|
||||
</span>
|
||||
<span>
|
||||
Hangzhou
|
||||
<!-- -->
|
||||
/
|
||||
/
|
||||
</span>
|
||||
<span>
|
||||
West Lake
|
||||
|
||||
@ -210,12 +210,12 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
|
||||
<span>
|
||||
Zhejiang
|
||||
<!-- -->
|
||||
/
|
||||
/
|
||||
</span>
|
||||
<span>
|
||||
Hangzhou
|
||||
<!-- -->
|
||||
/
|
||||
/
|
||||
</span>
|
||||
<span>
|
||||
West Lake
|
||||
|
||||
@ -19,6 +19,8 @@ import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
|
||||
import DisabledContext from '../config-provider/DisabledContext';
|
||||
import type { SizeType } from '../config-provider/SizeContext';
|
||||
import SizeContext from '../config-provider/SizeContext';
|
||||
import { useCompactItemContext } from '../space/Compact';
|
||||
|
||||
import { FormItemInputContext } from '../form/context';
|
||||
import getIcons from '../select/utils/iconUtil';
|
||||
import type { SelectCommonPlacement } from '../_util/motion';
|
||||
@ -187,7 +189,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
const prefixCls = getPrefixCls('select', customizePrefixCls);
|
||||
const cascaderPrefixCls = getPrefixCls('cascader', customizePrefixCls);
|
||||
|
||||
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
|
||||
// =================== Dropdown ====================
|
||||
const mergedDropdownClassName = classNames(
|
||||
popupClassName || dropdownClassName,
|
||||
@ -219,11 +221,11 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
|
||||
|
||||
// ===================== Size ======================
|
||||
const size = React.useContext(SizeContext);
|
||||
const mergedSize = customizeSize || size;
|
||||
const mergedSize = compactSize || customizeSize || size;
|
||||
|
||||
// ===================== Disabled =====================
|
||||
const disabled = React.useContext(DisabledContext);
|
||||
const mergedDisabled = customDisabled || disabled;
|
||||
const mergedDisabled = customDisabled ?? disabled;
|
||||
|
||||
// ===================== Icon ======================
|
||||
let mergedExpandIcon = expandIcon;
|
||||
@ -278,6 +280,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
|
||||
[`${prefixCls}-in-form-item`]: isFormItemInput,
|
||||
},
|
||||
getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
|
||||
compactItemClassnames,
|
||||
className,
|
||||
)}
|
||||
disabled={mergedDisabled}
|
||||
|
||||
@ -100,6 +100,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===================== Compact Item Styles =====================
|
||||
.compact-item(@cascader-prefix-cls);
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
|
||||
@ -5,4 +5,4 @@ import './index.less';
|
||||
import '../../empty/style';
|
||||
import '../../select/style';
|
||||
|
||||
// deps-lint-skip: form
|
||||
// deps-lint-skip: form, space
|
||||
|
||||
@ -65,7 +65,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
|
||||
const checkboxGroup = React.useContext(GroupContext);
|
||||
const { isFormItemInput } = useContext(FormItemInputContext);
|
||||
const contextDisabled = useContext(DisabledContext);
|
||||
const mergedDisabled = disabled || checkboxGroup?.disabled || contextDisabled;
|
||||
const mergedDisabled = (checkboxGroup?.disabled || disabled) ?? contextDisabled;
|
||||
|
||||
const prevValue = React.useRef(restProps.value);
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ import * as React from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import warning from '../_util/warning';
|
||||
|
||||
export type CollapsibleType = 'header' | 'disabled';
|
||||
export type CollapsibleType = 'header' | 'icon' | 'disabled';
|
||||
|
||||
export interface CollapsePanelProps {
|
||||
key: string | number;
|
||||
|
||||
@ -475,6 +475,67 @@ exports[`renders ./components/collapse/demo/collapsible.md extend context correc
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse ant-collapse-icon-position-start"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-item ant-collapse-item-active"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="true"
|
||||
class="ant-collapse-header ant-collapse-icon-collapsible-only"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-expand-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right ant-collapse-arrow"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-collapse-header-text"
|
||||
>
|
||||
This panel can only be collapsed by clicking icon
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-collapse-content ant-collapse-content-active"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-content-box"
|
||||
>
|
||||
<p>
|
||||
A dog is a type of domesticated animal.
|
||||
Known for its loyalty and faithfulness,
|
||||
it can be found as a welcome guest in many households across the world.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
@ -881,7 +942,7 @@ Array [
|
||||
</div>,
|
||||
<br />,
|
||||
<span>
|
||||
Expand Icon Position:
|
||||
Expand Icon Position:
|
||||
</span>,
|
||||
<div
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
|
||||
@ -475,6 +475,67 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse ant-collapse-icon-position-start"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-item ant-collapse-item-active"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="true"
|
||||
class="ant-collapse-header ant-collapse-icon-collapsible-only"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-expand-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right ant-collapse-arrow"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-collapse-header-text"
|
||||
>
|
||||
This panel can only be collapsed by clicking icon
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-collapse-content ant-collapse-content-active"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-content-box"
|
||||
>
|
||||
<p>
|
||||
A dog is a type of domesticated animal.
|
||||
Known for its loyalty and faithfulness,
|
||||
it can be found as a welcome guest in many households across the world.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
@ -881,7 +942,7 @@ Array [
|
||||
</div>,
|
||||
<br />,
|
||||
<span>
|
||||
Expand Icon Position:
|
||||
Expand Icon Position:
|
||||
</span>,
|
||||
<div
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
|
||||
@ -32,6 +32,11 @@ const App: React.FC = () => (
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
<Collapse collapsible="icon" defaultActiveKey={['1']}>
|
||||
<Panel header="This panel can only be collapsed by clicking icon" key="1">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
<Collapse collapsible="disabled">
|
||||
<Panel header="This panel can't be collapsed" key="1">
|
||||
<p>{text}</p>
|
||||
|
||||
@ -22,7 +22,7 @@ A content area which can be collapsed and expanded.
|
||||
| accordion | If true, Collapse renders as Accordion | boolean | false | |
|
||||
| activeKey | Key of the active panel | string\[] \| string <br/> number\[] \| number | No default value. In `accordion` mode, it's the key of the first panel | |
|
||||
| bordered | Toggles rendering of the border around the collapse block | boolean | true | |
|
||||
| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `disabled` | - | 4.9.0 |
|
||||
| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 |
|
||||
| defaultActiveKey | Key of the initial active panel | string\[] \| string <br/> number\[] \| number | - | |
|
||||
| destroyInactivePanel | Destroy Inactive Panel | boolean | false | |
|
||||
| expandIcon | Allow to customize collapse icon | (panelProps) => ReactNode | - | |
|
||||
@ -34,9 +34,9 @@ A content area which can be collapsed and expanded.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| collapsible | Specify whether the panel be collapsible or the trigger area of collapsible | `header` \| `disabled` | - | 4.9.0 |
|
||||
| collapsible | Specify whether the panel be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 (icon: 4.24.0) |
|
||||
| extra | The extra element in the corner | ReactNode | - | |
|
||||
| forceRender | Forced render of content on panel, instead of lazy rendering after clicking on header | boolean | false | |
|
||||
| header | Title of the panel | ReactNode | - | |
|
||||
| key | Unique key identifying the panel from among its siblings | string \| number | - | |
|
||||
| showArrow | If false, panel will not show arrow icon | boolean | true | |
|
||||
| showArrow | If false, panel will not show arrow icon. If false, collapsible can't be set as icon | boolean | true | |
|
||||
|
||||
@ -23,7 +23,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
|
||||
| accordion | 手风琴模式 | boolean | false | |
|
||||
| activeKey | 当前激活 tab 面板的 key | string\[] \| string <br/> number\[] \| number | 默认无，accordion 模式下默认第一个元素 | |
|
||||
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
||||
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 4.9.0 |
|
||||
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 |
|
||||
| defaultActiveKey | 初始化选中面板的 key | string\[] \| string<br/> number\[] \| number | - | |
|
||||
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | false | |
|
||||
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
||||
@ -33,11 +33,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
|
||||
|
||||
### Collapse.Panel
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----------- | ------------------------------ | ---------------------- | ------ | ----- |
|
||||
| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 4.9.0 |
|
||||
| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | |
|
||||
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
||||
| header | 面板头内容 | ReactNode | - | |
|
||||
| key | 对应 activeKey | string \| number | - | |
|
||||
| showArrow | 是否展示当前面板上的箭头 | boolean | true | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 (icon: 4.24.0) |
|
||||
| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | |
|
||||
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
||||
| header | 面板头内容 | ReactNode | - | |
|
||||
| key | 对应 activeKey | string \| number | - | |
|
||||
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能置为 icon） | boolean | true | |
|
||||
|
||||
@ -64,6 +64,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.@{collapse-prefix-cls}-icon-collapsible-only {
|
||||
cursor: default;
|
||||
.@{collapse-prefix-cls}-expand-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&.@{collapse-prefix-cls}-no-arrow {
|
||||
> .@{collapse-prefix-cls}-header {
|
||||
padding-left: @padding-sm;
|
||||
|
||||
@ -14977,10 +14977,10 @@ exports[`ConfigProvider components Drawer prefixCls 1`] = `
|
||||
|
||||
exports[`ConfigProvider components Dropdown configProvider 1`] = `
|
||||
<div
|
||||
class="config-btn-group config-dropdown-button"
|
||||
class="config-space-compact config-space-compact-block config-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-default"
|
||||
class="config-btn config-btn-default config-btn-compact-item config-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -14988,7 +14988,7 @@ exports[`ConfigProvider components Dropdown configProvider 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="config-btn config-btn-default config-btn-icon-only config-dropdown-trigger"
|
||||
class="config-btn config-btn-default config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -15016,10 +15016,10 @@ exports[`ConfigProvider components Dropdown configProvider 1`] = `
|
||||
|
||||
exports[`ConfigProvider components Dropdown configProvider componentDisabled 1`] = `
|
||||
<div
|
||||
class="config-btn-group config-dropdown-button"
|
||||
class="config-space-compact config-space-compact-block config-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-default"
|
||||
class="config-btn config-btn-default config-btn-compact-item config-btn-compact-first-item"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
@ -15028,7 +15028,7 @@ exports[`ConfigProvider components Dropdown configProvider componentDisabled 1`]
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="config-btn config-btn-default config-btn-icon-only config-dropdown-trigger"
|
||||
class="config-btn config-btn-default config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
@ -15057,10 +15057,10 @@ exports[`ConfigProvider components Dropdown configProvider componentDisabled 1`]
|
||||
|
||||
exports[`ConfigProvider components Dropdown configProvider componentSize large 1`] = `
|
||||
<div
|
||||
class="config-btn-group config-dropdown-button"
|
||||
class="config-space-compact config-space-compact-block config-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-default config-btn-lg"
|
||||
class="config-btn config-btn-default config-btn-compact-item config-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -15068,7 +15068,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize large 1
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="config-btn config-btn-default config-btn-lg config-btn-icon-only config-dropdown-trigger"
|
||||
class="config-btn config-btn-default config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -15096,10 +15096,10 @@ exports[`ConfigProvider components Dropdown configProvider componentSize large 1
|
||||
|
||||
exports[`ConfigProvider components Dropdown configProvider componentSize middle 1`] = `
|
||||
<div
|
||||
class="config-btn-group config-dropdown-button"
|
||||
class="config-space-compact config-space-compact-block config-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-default"
|
||||
class="config-btn config-btn-default config-btn-compact-item config-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -15107,7 +15107,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize middle
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="config-btn config-btn-default config-btn-icon-only config-dropdown-trigger"
|
||||
class="config-btn config-btn-default config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -15135,10 +15135,10 @@ exports[`ConfigProvider components Dropdown configProvider componentSize middle
|
||||
|
||||
exports[`ConfigProvider components Dropdown configProvider virtual and dropdownMatchSelectWidth 1`] = `
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -15146,7 +15146,7 @@ exports[`ConfigProvider components Dropdown configProvider virtual and dropdownM
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -15174,10 +15174,10 @@ exports[`ConfigProvider components Dropdown configProvider virtual and dropdownM
|
||||
|
||||
exports[`ConfigProvider components Dropdown normal 1`] = `
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -15185,7 +15185,7 @@ exports[`ConfigProvider components Dropdown normal 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -15213,10 +15213,10 @@ exports[`ConfigProvider components Dropdown normal 1`] = `
|
||||
|
||||
exports[`ConfigProvider components Dropdown prefixCls 1`] = `
|
||||
<div
|
||||
class="ant-btn-group prefix-Dropdown"
|
||||
class="ant-space-compact ant-space-compact-block prefix-Dropdown"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -15224,7 +15224,7 @@ exports[`ConfigProvider components Dropdown prefixCls 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -21379,23 +21379,27 @@ exports[`ConfigProvider components Popconfirm configProvider 1`] = `
|
||||
class="config-popover-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
class="config-popover-message-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="config-popover-message-title"
|
||||
@ -21462,23 +21466,27 @@ exports[`ConfigProvider components Popconfirm configProvider componentDisabled 1
|
||||
class="config-popover-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
class="config-popover-message-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="config-popover-message-title"
|
||||
@ -21547,23 +21555,27 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize large
|
||||
class="config-popover-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
class="config-popover-message-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="config-popover-message-title"
|
||||
@ -21630,23 +21642,27 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize middl
|
||||
class="config-popover-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
class="config-popover-message-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="config-popover-message-title"
|
||||
@ -21713,23 +21729,27 @@ exports[`ConfigProvider components Popconfirm configProvider virtual and dropdow
|
||||
class="ant-popover-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
class="ant-popover-message-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
@ -21796,23 +21816,27 @@ exports[`ConfigProvider components Popconfirm normal 1`] = `
|
||||
class="ant-popover-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
class="ant-popover-message-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
@ -21879,23 +21903,27 @@ exports[`ConfigProvider components Popconfirm prefixCls 1`] = `
|
||||
class="prefix-Popconfirm-message"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
class="prefix-Popconfirm-message-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="prefix-Popconfirm-message-title"
|
||||
|
||||
@ -279,19 +279,7 @@ describe('ConfigProvider', () => {
|
||||
testPair('Drawer', props => <Drawer {...props} open getContainer={false} />);
|
||||
|
||||
// Dropdown
|
||||
testPair('Dropdown', props => {
|
||||
const menu = (
|
||||
<Menu {...props}>
|
||||
<Menu.Item {...props}>Bamboo</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
return (
|
||||
<Dropdown.Button {...props} overlay={menu}>
|
||||
Light
|
||||
</Dropdown.Button>
|
||||
);
|
||||
});
|
||||
testPair('Dropdown', props => <Dropdown.Button {...props}>Light</Dropdown.Button>);
|
||||
|
||||
// Form
|
||||
testPair('Form', props => (
|
||||
@ -489,9 +477,15 @@ describe('ConfigProvider', () => {
|
||||
myProps.iconPrefix = 'prefixIcon';
|
||||
}
|
||||
return (
|
||||
<Steps {...props}>
|
||||
<Steps.Step title="Bamboo" description="Little Light" />
|
||||
</Steps>
|
||||
<Steps
|
||||
{...props}
|
||||
items={[
|
||||
{
|
||||
title: 'Bamboo',
|
||||
description: 'Little Light',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@ -52,7 +52,6 @@ const ButtonGroup = Button.Group;
|
||||
const { Option } = Select;
|
||||
const { TreeNode } = Tree;
|
||||
const { Search } = Input;
|
||||
const { Step } = Steps;
|
||||
|
||||
const cascaderOptions = [
|
||||
{
|
||||
@ -391,17 +390,43 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
|
||||
<Col span={24}>
|
||||
<Divider orientation="left">Steps example</Divider>
|
||||
<div>
|
||||
<Steps progressDot current={currentStep}>
|
||||
<Step title="Finished" description="This is a description." />
|
||||
<Step title="In Progress" description="This is a description." />
|
||||
<Step title="Waiting" description="This is a description." />
|
||||
</Steps>
|
||||
<Steps
|
||||
progressDot
|
||||
current={currentStep}
|
||||
items={[
|
||||
{
|
||||
title: 'Finished',
|
||||
description: 'This is a description.',
|
||||
},
|
||||
{
|
||||
title: 'In Progress',
|
||||
description: 'This is a description.',
|
||||
},
|
||||
{
|
||||
title: 'Waiting',
|
||||
description: 'This is a description.',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<br />
|
||||
<Steps current={currentStep} onChange={onStepsChange}>
|
||||
<Step title="Step 1" description="This is a description." />
|
||||
<Step title="Step 2" description="This is a description." />
|
||||
<Step title="Step 3" description="This is a description." />
|
||||
</Steps>
|
||||
<Steps
|
||||
current={currentStep}
|
||||
onChange={onStepsChange}
|
||||
items={[
|
||||
{
|
||||
title: 'Step 1',
|
||||
description: 'This is a description.',
|
||||
},
|
||||
{
|
||||
title: 'Step 2',
|
||||
description: 'This is a description.',
|
||||
},
|
||||
{
|
||||
title: 'Step 3',
|
||||
description: 'This is a description.',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@ -312,21 +312,19 @@ const App: React.FC = () => {
|
||||
|
||||
{/* Dropdown */}
|
||||
<Dropdown
|
||||
overlay={
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: '1st menu item',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'a danger item',
|
||||
danger: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
}
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: '1',
|
||||
label: '1st menu item',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'a danger item',
|
||||
danger: true,
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
@ -369,23 +367,50 @@ const App: React.FC = () => {
|
||||
<Pagination showQuickJumper defaultCurrent={2} total={500} />
|
||||
|
||||
{/* Steps */}
|
||||
<Steps current={1} percent={60}>
|
||||
<Steps.Step title="Finished" description="This is a description." />
|
||||
<Steps.Step
|
||||
title="In Progress"
|
||||
subTitle="Left 00:00:08"
|
||||
description="This is a description."
|
||||
/>
|
||||
<Steps.Step title="Waiting" description="This is a description." />
|
||||
</Steps>
|
||||
<Steps
|
||||
current={1}
|
||||
percent={60}
|
||||
items={[
|
||||
{
|
||||
title: 'Finished',
|
||||
description: 'This is a description.',
|
||||
},
|
||||
{
|
||||
title: 'In Progress',
|
||||
subTitle: 'Left 00:00:08',
|
||||
description: 'This is a description.',
|
||||
},
|
||||
{
|
||||
title: 'Waiting',
|
||||
description: 'This is a description.',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Steps - dot */}
|
||||
<Steps current={2} status="error" progressDot>
|
||||
<Steps.Step title="Finished" description="You can hover on the dot." />
|
||||
<Steps.Step title="In Progress" description="You can hover on the dot." />
|
||||
<Steps.Step title="Error" description="You can hover on the dot." />
|
||||
<Steps.Step title="Waiting" description="You can hover on the dot." />
|
||||
</Steps>
|
||||
<Steps
|
||||
current={2}
|
||||
status="error"
|
||||
progressDot
|
||||
items={[
|
||||
{
|
||||
title: 'Finished',
|
||||
description: 'You can hover on the dot.',
|
||||
},
|
||||
{
|
||||
title: 'In Progress',
|
||||
description: 'You can hover on the dot.',
|
||||
},
|
||||
{
|
||||
title: 'Error',
|
||||
description: 'You can hover on the dot.',
|
||||
},
|
||||
{
|
||||
title: 'Waiting',
|
||||
description: 'You can hover on the dot.',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Form - Input */}
|
||||
<Form>
|
||||
|
||||
@ -13,6 +13,7 @@ import { ConfigContext } from '../../config-provider';
|
||||
import DisabledContext from '../../config-provider/DisabledContext';
|
||||
import SizeContext from '../../config-provider/SizeContext';
|
||||
import { FormItemInputContext } from '../../form/context';
|
||||
import { useCompactItemContext } from '../../space/Compact';
|
||||
import LocaleReceiver from '../../locale-provider/LocaleReceiver';
|
||||
import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
|
||||
import enUS from '../locale/en_US';
|
||||
@ -54,6 +55,7 @@ export default function generateRangePicker<DateType>(
|
||||
const innerRef = React.useRef<RCRangePicker<DateType>>(null);
|
||||
const { getPrefixCls, direction, getPopupContainer } = useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('picker', customizePrefixCls);
|
||||
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
|
||||
const { format, showTime, picker } = props as any;
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
|
||||
@ -72,11 +74,11 @@ export default function generateRangePicker<DateType>(
|
||||
|
||||
// ===================== Size =====================
|
||||
const size = React.useContext(SizeContext);
|
||||
const mergedSize = customizeSize || size;
|
||||
const mergedSize = compactSize || customizeSize || size;
|
||||
|
||||
// ===================== Disabled =====================
|
||||
const disabled = React.useContext(DisabledContext);
|
||||
const mergedDisabled = customDisabled || disabled;
|
||||
const mergedDisabled = customDisabled ?? disabled;
|
||||
|
||||
// ===================== FormItemInput =====================
|
||||
const formItemContext = useContext(FormItemInputContext);
|
||||
@ -131,6 +133,7 @@ export default function generateRangePicker<DateType>(
|
||||
getMergedStatus(contextStatus, customStatus),
|
||||
hasFeedback,
|
||||
),
|
||||
compactItemClassnames,
|
||||
className,
|
||||
)}
|
||||
locale={locale!.lang}
|
||||
|
||||
@ -7,6 +7,7 @@ import type { GenerateConfig } from 'rc-picker/lib/generate/index';
|
||||
import type { PickerMode } from 'rc-picker/lib/interface';
|
||||
import * as React from 'react';
|
||||
import { forwardRef, useContext, useImperativeHandle } from 'react';
|
||||
import { useCompactItemContext } from '../../space/Compact';
|
||||
import type { PickerDateProps, PickerProps, PickerTimeProps } from '.';
|
||||
import { Components, getTimeProps } from '.';
|
||||
import { ConfigContext } from '../../config-provider';
|
||||
@ -54,6 +55,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
|
||||
|
||||
const { getPrefixCls, direction, getPopupContainer } = useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('picker', customizePrefixCls);
|
||||
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
|
||||
const innerRef = React.useRef<RCPicker<DateType>>(null);
|
||||
const { format, showTime } = props as any;
|
||||
|
||||
@ -95,11 +97,11 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
|
||||
);
|
||||
// ===================== Size =====================
|
||||
const size = React.useContext(SizeContext);
|
||||
const mergedSize = customizeSize || size;
|
||||
const mergedSize = compactSize || customizeSize || size;
|
||||
|
||||
// ===================== Disabled =====================
|
||||
const disabled = React.useContext(DisabledContext);
|
||||
const mergedDisabled = customDisabled || disabled;
|
||||
const mergedDisabled = customDisabled ?? disabled;
|
||||
|
||||
// ===================== FormItemInput =====================
|
||||
const formItemContext = useContext(FormItemInputContext);
|
||||
@ -145,6 +147,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
|
||||
getMergedStatus(contextStatus, customStatus),
|
||||
hasFeedback,
|
||||
),
|
||||
compactItemClassnames,
|
||||
className,
|
||||
)}
|
||||
prefixCls={prefixCls}
|
||||
|
||||
@ -357,6 +357,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===================== Compact Item Styles =====================
|
||||
.compact-item(@picker-prefix-cls, null, ~'@{picker-prefix-cls}-focused');
|
||||
}
|
||||
|
||||
@import './panel';
|
||||
|
||||
@ -4,4 +4,4 @@ import './index.less';
|
||||
import '../../button/style';
|
||||
import '../../tag/style';
|
||||
|
||||
// deps-lint-skip: form
|
||||
// deps-lint-skip: form, space
|
||||
|
||||
@ -2970,6 +2970,330 @@ exports[`renders ./components/drawer/demo/render-in-current.md extend context co
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/drawer/demo/scroll-debug.md extend context correctly 1`] = `
|
||||
<div
|
||||
style="position:relative;z-index:999999"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
Drawer
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
Drawer2
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
Modal
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
Modal2
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="start"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
style="width:378px"
|
||||
>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="ant-drawer-content"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-wrapper-body"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header-title"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-drawer-title"
|
||||
>
|
||||
Drawer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
Some contents...
|
||||
<div
|
||||
class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="start"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
style="width:378px"
|
||||
>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="ant-drawer-content"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-wrapper-body"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header-title"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-drawer-title"
|
||||
>
|
||||
Drawer Sub
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
Sub contents...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="end"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="end"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="start"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
style="width:378px"
|
||||
>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="ant-drawer-content"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-wrapper-body"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header-title"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-drawer-title"
|
||||
>
|
||||
Drawer2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
Some contents...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="end"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/drawer/demo/size.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
|
||||
@ -311,23 +311,95 @@ exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/drawer/demo/scroll-debug.md correctly 1`] = `
|
||||
<div
|
||||
style="position:relative;z-index:999999"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-right ant-drawer-inline"
|
||||
style="position:absolute"
|
||||
tabindex="-1"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="start"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
Drawer
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="end"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
Drawer2
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
Modal
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
Modal2
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
75
components/drawer/demo/scroll-debug.md
Normal file
75
components/drawer/demo/scroll-debug.md
Normal file
@ -0,0 +1,75 @@
|
||||
---
|
||||
order: 999
|
||||
title:
|
||||
zh-CN: 滚动锁定调试
|
||||
en-US: Scroll Debug
|
||||
debug: true
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
当 Modal 和 Drawer 共同作用时的滚动锁定调试。
|
||||
|
||||
## en-US
|
||||
|
||||
Scroll lock debug with Modal & Drawer.
|
||||
|
||||
```tsx
|
||||
import { Switch, Space, Drawer, Modal } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [drawer, setDrawer] = useState(false);
|
||||
const [drawer2, setDrawer2] = useState(false);
|
||||
const [modal, setModal] = useState(false);
|
||||
const [modal2, setModal2] = useState(false);
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative', zIndex: 999999 }}>
|
||||
<Space>
|
||||
<Switch
|
||||
checkedChildren="Drawer"
|
||||
unCheckedChildren="Drawer"
|
||||
checked={drawer}
|
||||
onChange={() => setDrawer(!drawer)}
|
||||
/>
|
||||
<Switch
|
||||
checkedChildren="Drawer2"
|
||||
unCheckedChildren="Drawer2"
|
||||
checked={drawer2}
|
||||
onChange={() => setDrawer2(!drawer2)}
|
||||
/>
|
||||
<Switch
|
||||
checkedChildren="Modal"
|
||||
unCheckedChildren="Modal"
|
||||
checked={modal}
|
||||
onChange={() => setModal(!modal)}
|
||||
/>
|
||||
<Switch
|
||||
checkedChildren="Modal2"
|
||||
unCheckedChildren="Modal2"
|
||||
checked={modal2}
|
||||
onChange={() => setModal2(!modal2)}
|
||||
/>
|
||||
</Space>
|
||||
<Drawer title="Drawer" open={drawer}>
|
||||
Some contents...
|
||||
<Drawer title="Drawer Sub" open={drawer}>
|
||||
Sub contents...
|
||||
</Drawer>
|
||||
</Drawer>
|
||||
<Drawer title="Drawer2" open={drawer2}>
|
||||
Some contents...
|
||||
</Drawer>
|
||||
<Modal title="Modal" open={modal}>
|
||||
Some contents...
|
||||
</Modal>
|
||||
<Modal title="Modal2" open={modal2}>
|
||||
Some contents...
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
@ -53,7 +53,9 @@
|
||||
|
||||
&-enter,
|
||||
&-appear {
|
||||
transform: translateX(-100%);
|
||||
&-start {
|
||||
transform: translateX(-100%) !important;
|
||||
}
|
||||
|
||||
&-active {
|
||||
transform: translateX(0);
|
||||
@ -75,7 +77,9 @@
|
||||
|
||||
&-enter,
|
||||
&-appear {
|
||||
transform: translateX(100%);
|
||||
&-start {
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
|
||||
&-active {
|
||||
transform: translateX(0);
|
||||
@ -97,7 +101,9 @@
|
||||
|
||||
&-enter,
|
||||
&-appear {
|
||||
transform: translateY(-100%);
|
||||
&-start {
|
||||
transform: translateY(-100%) !important;
|
||||
}
|
||||
|
||||
&-active {
|
||||
transform: translateY(0);
|
||||
@ -119,7 +125,9 @@
|
||||
|
||||
&-enter,
|
||||
&-appear {
|
||||
transform: translateY(100%);
|
||||
&-start {
|
||||
transform: translateY(100%) !important;
|
||||
}
|
||||
|
||||
&-active {
|
||||
transform: translateY(0);
|
||||
|
||||
@ -3081,6 +3081,594 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/dropdown/demo/custom-dropdown.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<a
|
||||
class="ant-dropdown-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
Hover me
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</a>,
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="dropdown-content"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
<a
|
||||
href="https://www.antgroup.com"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
1st menu item
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-disabled ant-dropdown-menu-item-only-child"
|
||||
role="menuitem"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
<a
|
||||
href="https://www.aliyun.com"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
2nd menu item (disabled)
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-disabled ant-dropdown-menu-item-only-child"
|
||||
role="menuitem"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
<a
|
||||
href="https://www.luohanacademy.com"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
3rd menu item (disabled)
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="display:none"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
style="margin:0"
|
||||
/>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
style="padding:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Click me!
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/dropdown/demo/deprecated.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<a
|
||||
class="ant-dropdown-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
Hover me
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</a>,
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
<a
|
||||
href="https://www.antgroup.com"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
1st menu item
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-disabled"
|
||||
role="menuitem"
|
||||
>
|
||||
<span
|
||||
aria-label="smile"
|
||||
class="anticon anticon-smile ant-dropdown-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="smile"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
<a
|
||||
href="https://www.aliyun.com"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
2nd menu item (disabled)
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-disabled ant-dropdown-menu-item-only-child"
|
||||
role="menuitem"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
<a
|
||||
href="https://www.luohanacademy.com"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
3rd menu item (disabled)
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<li
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-danger ant-dropdown-menu-item-only-child"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
a danger item
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="display:none"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/dropdown/demo/dropdown-button.md extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
@ -3091,10 +3679,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -3102,7 +3690,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -3373,10 +3961,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -3384,7 +3972,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -3655,10 +4243,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
@ -3667,7 +4255,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
@ -3939,10 +4527,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -3974,7 +4562,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-loading ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-loading ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -4533,10 +5121,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
|
||||
style="padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-dangerous"
|
||||
class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -4544,7 +5132,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-dangerous ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-dangerous ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -5289,10 +5877,10 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-loading"
|
||||
class="ant-btn ant-btn-primary ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -5323,7 +5911,7 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -5427,10 +6015,10 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-btn-group-sm ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading"
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -5461,7 +6049,7 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -5565,10 +6153,10 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
class="ant-btn ant-btn-primary ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -5576,7 +6164,7 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -5679,10 +6267,10 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -5690,7 +6278,7 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
|
||||
@ -157,6 +157,86 @@ exports[`renders ./components/dropdown/demo/context-menu.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/dropdown/demo/custom-dropdown.md correctly 1`] = `
|
||||
<a
|
||||
class="ant-dropdown-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
Hover me
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/dropdown/demo/deprecated.md correctly 1`] = `
|
||||
<a
|
||||
class="ant-dropdown-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
Hover me
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
@ -167,10 +247,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -178,7 +258,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -208,10 +288,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -219,7 +299,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -249,10 +329,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
@ -261,7 +341,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
@ -292,10 +372,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -303,7 +383,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-loading ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-loading ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -380,10 +460,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
|
||||
style="padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-dangerous"
|
||||
class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -391,7 +471,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-dangerous ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-dangerous ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -508,10 +588,10 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-loading"
|
||||
class="ant-btn ant-btn-primary ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -542,7 +622,7 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -572,10 +652,10 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-btn-group-sm ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading"
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -606,7 +686,7 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -636,10 +716,10 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
class="ant-btn ant-btn-primary ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -647,7 +727,7 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -676,10 +756,10 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -687,7 +767,7 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
|
||||
exports[`DropdownButton rtl render component should be rendered correctly in RTL direction 1`] = `
|
||||
<div
|
||||
class="ant-btn-group ant-btn-group-rtl ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-rtl ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-rtl"
|
||||
class="ant-btn ant-btn-default ant-btn-rtl ant-btn-compact-item ant-btn-compact-first-item ant-btn-compact-item-rtl"
|
||||
type="button"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-rtl ant-dropdown-trigger ant-dropdown-rtl"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-rtl ant-btn-compact-item ant-btn-compact-last-item ant-btn-compact-item-rtl ant-dropdown-trigger ant-dropdown-rtl"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -37,14 +37,14 @@ exports[`DropdownButton rtl render component should be rendered correctly in RTL
|
||||
|
||||
exports[`DropdownButton should support href like Button 1`] = `
|
||||
<div
|
||||
class="ant-btn-group ant-dropdown-button"
|
||||
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
|
||||
>
|
||||
<a
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
href="https://ant.design"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
|
||||
@ -47,3 +47,51 @@ exports[`Dropdown rtl render component should be rendered correctly in RTL direc
|
||||
class="ant-dropdown-trigger ant-dropdown-rtl"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Dropdown should render custom dropdown correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
class="ant-dropdown-trigger ant-dropdown-open"
|
||||
type="button"
|
||||
>
|
||||
button
|
||||
</button>,
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
|
||||
style="opacity: 0;"
|
||||
>
|
||||
<div>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
|
||||
data-menu-id="rc-menu-uuid-test-1"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
foo
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="display: none;"
|
||||
/>
|
||||
<div
|
||||
class="dropdown-custom-node"
|
||||
>
|
||||
CUSTOM NODE
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
@ -2,7 +2,6 @@ import React from 'react';
|
||||
import DropdownButton from '../dropdown-button';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import Menu from '../../menu';
|
||||
import type { DropdownProps } from '../dropdown';
|
||||
import { render } from '../../../tests/utils';
|
||||
|
||||
@ -34,15 +33,18 @@ describe('DropdownButton', () => {
|
||||
rtlTest(DropdownButton);
|
||||
|
||||
it('pass appropriate props to Dropdown', () => {
|
||||
const items = [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
];
|
||||
|
||||
const props: DropdownProps = {
|
||||
align: {
|
||||
offset: [10, 20],
|
||||
},
|
||||
overlay: (
|
||||
<Menu>
|
||||
<Menu.Item key="1">foo</Menu.Item>
|
||||
</Menu>
|
||||
),
|
||||
menu: { items },
|
||||
disabled: false,
|
||||
trigger: ['hover'],
|
||||
open: true,
|
||||
@ -55,27 +57,29 @@ describe('DropdownButton', () => {
|
||||
expect(dropdownProps[key]).toBe(props[key]);
|
||||
});
|
||||
|
||||
rerender(<DropdownButton overlay={<div>123</div>} visible />);
|
||||
rerender(<DropdownButton menu={{ items }} visible />);
|
||||
expect(dropdownProps.open).toBe(true);
|
||||
});
|
||||
|
||||
it("don't pass open to Dropdown if it's not exits", () => {
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key="1">foo</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
render(<DropdownButton overlay={menu} />);
|
||||
const items = [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
];
|
||||
render(<DropdownButton menu={{ items }} />);
|
||||
expect('open' in dropdownProps).toBe(false);
|
||||
});
|
||||
|
||||
it('should support href like Button', () => {
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key="1">foo</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
const { asFragment } = render(<DropdownButton overlay={menu} href="https://ant.design" />);
|
||||
const items = [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
];
|
||||
const { asFragment } = render(<DropdownButton menu={{ items }} href="https://ant.design" />);
|
||||
expect(asFragment().firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -84,27 +88,29 @@ describe('DropdownButton', () => {
|
||||
});
|
||||
|
||||
it('should pass mouseEnterDelay and mouseLeaveDelay to Dropdown', () => {
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key="1">foo</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
render(<DropdownButton mouseEnterDelay={1} mouseLeaveDelay={2} overlay={menu} />);
|
||||
const items = [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
];
|
||||
render(<DropdownButton mouseEnterDelay={1} mouseLeaveDelay={2} menu={{ items }} />);
|
||||
expect(dropdownProps.mouseEnterDelay).toBe(1);
|
||||
expect(dropdownProps.mouseLeaveDelay).toBe(2);
|
||||
});
|
||||
|
||||
it('should support overlayClassName and overlayStyle', () => {
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key="1">foo</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
const items = [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
];
|
||||
const { container } = render(
|
||||
<DropdownButton
|
||||
overlayClassName="className"
|
||||
overlayStyle={{ color: 'red' }}
|
||||
overlay={menu}
|
||||
menu={{ items }}
|
||||
open
|
||||
/>,
|
||||
);
|
||||
@ -113,7 +119,13 @@ describe('DropdownButton', () => {
|
||||
});
|
||||
|
||||
it('should support loading', () => {
|
||||
const { container } = render(<DropdownButton overlay={<div />} loading />);
|
||||
const items = [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
];
|
||||
const { container } = render(<DropdownButton menu={{ items }} loading />);
|
||||
|
||||
expect(container.querySelector('.ant-dropdown-button .ant-btn-loading')?.classList).toContain(
|
||||
'ant-btn',
|
||||
|
||||
@ -5,7 +5,6 @@ import type { DropDownProps } from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
|
||||
import Menu from '../../menu';
|
||||
|
||||
let triggerProps: TriggerProps;
|
||||
|
||||
@ -24,14 +23,21 @@ jest.mock('rc-trigger', () => {
|
||||
});
|
||||
|
||||
describe('Dropdown', () => {
|
||||
const items = [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
];
|
||||
|
||||
mountTest(() => (
|
||||
<Dropdown overlay={<Menu />}>
|
||||
<Dropdown menu={{ items }}>
|
||||
<span />
|
||||
</Dropdown>
|
||||
));
|
||||
|
||||
rtlTest(() => (
|
||||
<Dropdown overlay={<Menu />}>
|
||||
<Dropdown menu={{ items }}>
|
||||
<span />
|
||||
</Dropdown>
|
||||
));
|
||||
@ -54,17 +60,46 @@ describe('Dropdown', () => {
|
||||
expect(Array.from(asFragment().childNodes)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render custom dropdown correctly', () => {
|
||||
const { asFragment } = render(
|
||||
<Dropdown
|
||||
open
|
||||
menu={{ items }}
|
||||
dropdownRender={menu => (
|
||||
<div>
|
||||
{menu}
|
||||
<div className="dropdown-custom-node">CUSTOM NODE</div>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<button type="button">button</button>
|
||||
</Dropdown>,
|
||||
);
|
||||
expect(Array.from(asFragment().childNodes)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('support Menu expandIcon', async () => {
|
||||
jest.useFakeTimers();
|
||||
const props: DropDownProps = {
|
||||
overlay: (
|
||||
<Menu expandIcon={<span id="customExpandIcon" />}>
|
||||
<Menu.Item key="1">foo</Menu.Item>
|
||||
<Menu.SubMenu title="SubMenu">
|
||||
<Menu.Item key="1">foo</Menu.Item>
|
||||
</Menu.SubMenu>
|
||||
</Menu>
|
||||
),
|
||||
menu: {
|
||||
items: [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
label: 'SubMenu',
|
||||
key: 'submenu',
|
||||
children: [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
expandIcon: <span id="customExpandIcon" />,
|
||||
},
|
||||
open: true,
|
||||
getPopupContainer: node => node,
|
||||
};
|
||||
@ -83,10 +118,10 @@ describe('Dropdown', () => {
|
||||
const error = jest.spyOn(console, 'error');
|
||||
render(
|
||||
<div>
|
||||
<Dropdown overlay={'123' as any} placement="bottomCenter">
|
||||
<Dropdown menu={{ items }} placement="bottomCenter">
|
||||
<button type="button">bottomCenter</button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={'123' as any} placement="topCenter">
|
||||
<Dropdown menu={{ items }} placement="topCenter">
|
||||
<button type="button">topCenter</button>
|
||||
</Dropdown>
|
||||
</div>,
|
||||
@ -103,7 +138,7 @@ describe('Dropdown', () => {
|
||||
// zombieJ: when replaced with react test lib, it may be mock fully content
|
||||
it('dropdown should support auto adjust placement', () => {
|
||||
render(
|
||||
<Dropdown overlay={<div>menu</div>} open>
|
||||
<Dropdown menu={{ items }} open>
|
||||
<button type="button">button</button>
|
||||
</Dropdown>,
|
||||
);
|
||||
@ -125,22 +160,20 @@ describe('Dropdown', () => {
|
||||
const { container } = render(
|
||||
<Dropdown
|
||||
trigger={['click']}
|
||||
overlay={
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
label: 'grp',
|
||||
type: 'group',
|
||||
children: [
|
||||
{
|
||||
label: '1',
|
||||
key: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
}
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
label: 'grp',
|
||||
type: 'group',
|
||||
children: [
|
||||
{
|
||||
label: '1',
|
||||
key: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<a />
|
||||
</Dropdown>,
|
||||
@ -174,7 +207,17 @@ describe('Dropdown', () => {
|
||||
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
|
||||
const { rerender } = render(
|
||||
<Dropdown visible overlay={<div>menu</div>}>
|
||||
<Dropdown
|
||||
visible
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
label: <div className="bamboo" />,
|
||||
key: 'bamboo',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<a />
|
||||
</Dropdown>,
|
||||
);
|
||||
@ -182,13 +225,31 @@ describe('Dropdown', () => {
|
||||
'Warning: [antd: Dropdown] `visible` is deprecated which will be removed in next major version, please use `open` instead.',
|
||||
);
|
||||
rerender(
|
||||
<Dropdown onVisibleChange={() => {}} overlay={<div>menu</div>}>
|
||||
<Dropdown
|
||||
onVisibleChange={() => {}}
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
label: <div className="bamboo" />,
|
||||
key: 'bamboo',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<a />
|
||||
</Dropdown>,
|
||||
);
|
||||
expect(errSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: Dropdown] `onVisibleChange` is deprecated which will be removed in next major version, please use `onOpenChange` instead.',
|
||||
);
|
||||
rerender(
|
||||
<Dropdown overlay={<div>menu</div>}>
|
||||
<a />
|
||||
</Dropdown>,
|
||||
);
|
||||
expect(errSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: Dropdown] `overlay` is deprecated. Please use `menu` instead.',
|
||||
);
|
||||
|
||||
errSpy.mockRestore();
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 3
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 箭头指向
|
||||
en-US: Arrow pointing at the center
|
||||
@ -14,59 +14,56 @@ title:
|
||||
By specifying `arrow` prop with `{ pointAtCenter: true }`, the arrow will point to the center of the target element.
|
||||
|
||||
```tsx
|
||||
import { Button, Dropdown, Menu } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Button, Dropdown } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Dropdown overlay={menu} placement="bottomLeft" arrow={{ pointAtCenter: true }}>
|
||||
<Dropdown menu={{ items }} placement="bottomLeft" arrow={{ pointAtCenter: true }}>
|
||||
<Button>bottomLeft</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="bottom" arrow={{ pointAtCenter: true }}>
|
||||
<Dropdown menu={{ items }} placement="bottom" arrow={{ pointAtCenter: true }}>
|
||||
<Button>bottom</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="bottomRight" arrow={{ pointAtCenter: true }}>
|
||||
<Dropdown menu={{ items }} placement="bottomRight" arrow={{ pointAtCenter: true }}>
|
||||
<Button>bottomRight</Button>
|
||||
</Dropdown>
|
||||
<br />
|
||||
<Dropdown overlay={menu} placement="topLeft" arrow={{ pointAtCenter: true }}>
|
||||
<Dropdown menu={{ items }} placement="topLeft" arrow={{ pointAtCenter: true }}>
|
||||
<Button>topLeft</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="top" arrow={{ pointAtCenter: true }}>
|
||||
<Dropdown menu={{ items }} placement="top" arrow={{ pointAtCenter: true }}>
|
||||
<Button>top</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="topRight" arrow={{ pointAtCenter: true }}>
|
||||
<Dropdown menu={{ items }} placement="topRight" arrow={{ pointAtCenter: true }}>
|
||||
<Button>topRight</Button>
|
||||
</Dropdown>
|
||||
</>
|
||||
|
||||
@ -14,59 +14,56 @@ title:
|
||||
You could display an arrow.
|
||||
|
||||
```tsx
|
||||
import { Button, Dropdown, Menu } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Button, Dropdown } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Dropdown overlay={menu} placement="bottomLeft" arrow>
|
||||
<Dropdown menu={{ items }} placement="bottomLeft" arrow>
|
||||
<Button>bottomLeft</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="bottom" arrow>
|
||||
<Dropdown menu={{ items }} placement="bottom" arrow>
|
||||
<Button>bottom</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="bottomRight" arrow>
|
||||
<Dropdown menu={{ items }} placement="bottomRight" arrow>
|
||||
<Button>bottomRight</Button>
|
||||
</Dropdown>
|
||||
<br />
|
||||
<Dropdown overlay={menu} placement="topLeft" arrow>
|
||||
<Dropdown menu={{ items }} placement="topLeft" arrow>
|
||||
<Button>topLeft</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="top" arrow>
|
||||
<Dropdown menu={{ items }} placement="top" arrow>
|
||||
<Button>top</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="topRight" arrow>
|
||||
<Dropdown menu={{ items }} placement="topRight" arrow>
|
||||
<Button>topRight</Button>
|
||||
</Dropdown>
|
||||
</>
|
||||
|
||||
@ -15,50 +15,47 @@ The most basic dropdown menu.
|
||||
|
||||
```tsx
|
||||
import { DownOutlined, SmileOutlined } from '@ant-design/icons';
|
||||
import { Dropdown, Menu, Space } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
icon: <SmileOutlined />,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
danger: true,
|
||||
label: 'a danger item',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
icon: <SmileOutlined />,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
danger: true,
|
||||
label: 'a danger item',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu}>
|
||||
<Dropdown menu={{ items }}>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Hover me
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 8
|
||||
order: 10
|
||||
title:
|
||||
zh-CN: 右键菜单
|
||||
en-US: Context Menu
|
||||
@ -14,30 +14,27 @@ title:
|
||||
The default trigger mode is `hover`, you can change it to `contextMenu`.
|
||||
|
||||
```tsx
|
||||
import { Dropdown, Menu } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
label: '1st menu item',
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
label: '2nd menu item',
|
||||
key: '2',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '3',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: '1st menu item',
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
label: '2nd menu item',
|
||||
key: '2',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '3',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu} trigger={['contextMenu']}>
|
||||
<Dropdown menu={{ items }} trigger={['contextMenu']}>
|
||||
<div
|
||||
className="site-dropdown-context-menu"
|
||||
style={{
|
||||
|
||||
91
components/dropdown/demo/custom-dropdown.md
Normal file
91
components/dropdown/demo/custom-dropdown.md
Normal file
@ -0,0 +1,91 @@
|
||||
---
|
||||
order: 8
|
||||
title:
|
||||
zh-CN: 扩展菜单
|
||||
en-US: Custom dropdown
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `dropdownRender` 对下拉菜单进行自由扩展。如果你并不需要 Menu 内容，请直接使用 Popover 组件。
|
||||
|
||||
## en-US
|
||||
|
||||
Customize the dropdown menu via `dropdownRender`. If you don't need the Menu content, use the Popover component directly.
|
||||
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Space, Divider, Button } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
disabled: true,
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown
|
||||
menu={{ items }}
|
||||
dropdownRender={menu => (
|
||||
<div className="dropdown-content">
|
||||
{menu}
|
||||
<Divider style={{ margin: 0 }} />
|
||||
<Space style={{ padding: 8 }}>
|
||||
<Button type="primary">Click me!</Button>
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Hover me
|
||||
<DownOutlined />
|
||||
</Space>
|
||||
</a>
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
```css
|
||||
.dropdown-content {
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%),
|
||||
0 9px 28px 8px rgb(0 0 0 / 5%);
|
||||
}
|
||||
.dropdown-content .ant-dropdown-menu {
|
||||
box-shadow: none;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .head-example {
|
||||
background: #1f1f1f;
|
||||
}
|
||||
</style>
|
||||
73
components/dropdown/demo/deprecated.md
Normal file
73
components/dropdown/demo/deprecated.md
Normal file
@ -0,0 +1,73 @@
|
||||
---
|
||||
order: -1
|
||||
title:
|
||||
zh-CN: 基础用法（废弃的语法糖）
|
||||
en-US: Basic usage (deprecated syntactic sugar)
|
||||
version: < 4.24.0
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的下拉菜单。
|
||||
|
||||
## en-US
|
||||
|
||||
The most basic dropdown menu.
|
||||
|
||||
```tsx
|
||||
import { DownOutlined, SmileOutlined } from '@ant-design/icons';
|
||||
import { Dropdown, Menu, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
icon: <SmileOutlined />,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
danger: true,
|
||||
label: 'a danger item',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu}>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Hover me
|
||||
<DownOutlined />
|
||||
</Space>
|
||||
</a>
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 5
|
||||
order: 7
|
||||
title:
|
||||
zh-CN: 带下拉框的按钮
|
||||
en-US: Button with dropdown menu
|
||||
@ -16,7 +16,7 @@ A button is on the left, and a related functional menu is on the right. You can
|
||||
```tsx
|
||||
import { DownOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Button, Dropdown, Menu, message, Space, Tooltip } from 'antd';
|
||||
import { Button, Dropdown, message, Space, Tooltip } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
@ -29,42 +29,42 @@ const handleMenuClick: MenuProps['onClick'] = e => {
|
||||
console.log('click', e);
|
||||
};
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
onClick={handleMenuClick}
|
||||
items={[
|
||||
{
|
||||
label: '1st menu item',
|
||||
key: '1',
|
||||
icon: <UserOutlined />,
|
||||
},
|
||||
{
|
||||
label: '2nd menu item',
|
||||
key: '2',
|
||||
icon: <UserOutlined />,
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '3',
|
||||
icon: <UserOutlined />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: '1st menu item',
|
||||
key: '1',
|
||||
icon: <UserOutlined />,
|
||||
},
|
||||
{
|
||||
label: '2nd menu item',
|
||||
key: '2',
|
||||
icon: <UserOutlined />,
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '3',
|
||||
icon: <UserOutlined />,
|
||||
},
|
||||
];
|
||||
|
||||
const menuProps = {
|
||||
items,
|
||||
onClick: handleMenuClick,
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space wrap>
|
||||
<Dropdown.Button onClick={handleButtonClick} overlay={menu}>
|
||||
<Dropdown.Button menu={menuProps} onClick={handleButtonClick}>
|
||||
Dropdown
|
||||
</Dropdown.Button>
|
||||
<Dropdown.Button overlay={menu} placement="bottom" icon={<UserOutlined />}>
|
||||
<Dropdown.Button menu={menuProps} placement="bottom" icon={<UserOutlined />}>
|
||||
Dropdown
|
||||
</Dropdown.Button>
|
||||
<Dropdown.Button onClick={handleButtonClick} overlay={menu} disabled>
|
||||
<Dropdown.Button menu={menuProps} onClick={handleButtonClick} disabled>
|
||||
Dropdown
|
||||
</Dropdown.Button>
|
||||
<Dropdown.Button
|
||||
overlay={menu}
|
||||
menu={menuProps}
|
||||
buttonsRender={([leftButton, rightButton]) => [
|
||||
<Tooltip title="tooltip" key="leftButton">
|
||||
{leftButton}
|
||||
@ -74,7 +74,7 @@ const App: React.FC = () => (
|
||||
>
|
||||
With Tooltip
|
||||
</Dropdown.Button>
|
||||
<Dropdown overlay={menu}>
|
||||
<Dropdown menu={menuProps}>
|
||||
<Button>
|
||||
<Space>
|
||||
Button
|
||||
@ -82,7 +82,7 @@ const App: React.FC = () => (
|
||||
</Space>
|
||||
</Button>
|
||||
</Dropdown>
|
||||
<Dropdown.Button danger onClick={handleButtonClick} overlay={menu}>
|
||||
<Dropdown.Button menu={menuProps} onClick={handleButtonClick} danger>
|
||||
Danger
|
||||
</Dropdown.Button>
|
||||
</Space>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 4
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 触发事件
|
||||
en-US: Click event
|
||||
@ -16,35 +16,30 @@ An event will be triggered when you click menu items, in which you can make diff
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Menu, message, Space } from 'antd';
|
||||
import { Dropdown, message, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const onClick: MenuProps['onClick'] = ({ key }) => {
|
||||
message.info(`Click on item ${key}`);
|
||||
};
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
onClick={onClick}
|
||||
items={[
|
||||
{
|
||||
label: '1st menu item',
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
label: '2nd menu item',
|
||||
key: '2',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '3',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: '1st menu item',
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
label: '2nd menu item',
|
||||
key: '2',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '3',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu}>
|
||||
<Dropdown menu={{ items, onClick }}>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Hover me, Click menu item
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 2
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 其他元素
|
||||
en-US: Other elements
|
||||
@ -15,42 +15,39 @@ Divider and disabled menu item.
|
||||
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import { Dropdown, Menu, Space } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
key: '0',
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item（disabled）',
|
||||
key: '3',
|
||||
disabled: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
key: '0',
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item（disabled）',
|
||||
key: '3',
|
||||
disabled: true,
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu}>
|
||||
<Dropdown menu={{ items }}>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Hover me
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 9
|
||||
order: 12
|
||||
title:
|
||||
zh-CN: 加载中状态
|
||||
en-US: Loading
|
||||
@ -15,19 +15,16 @@ A loading indicator can be added to a button by setting the `loading` property o
|
||||
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import { Dropdown, Menu, Space } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
label: 'Submit and continue',
|
||||
key: '1',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: 'Submit and continue',
|
||||
key: '1',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [loadings, setLoadings] = useState<boolean[]>([]);
|
||||
@ -50,16 +47,16 @@ const App: React.FC = () => {
|
||||
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<Dropdown.Button type="primary" loading overlay={menu}>
|
||||
<Dropdown.Button type="primary" loading menu={{ items }}>
|
||||
Submit
|
||||
</Dropdown.Button>
|
||||
<Dropdown.Button type="primary" size="small" loading overlay={menu}>
|
||||
<Dropdown.Button type="primary" size="small" loading menu={{ items }}>
|
||||
Submit
|
||||
</Dropdown.Button>
|
||||
<Dropdown.Button
|
||||
type="primary"
|
||||
loading={loadings[0]}
|
||||
overlay={menu}
|
||||
menu={{ items }}
|
||||
onClick={() => enterLoading(0)}
|
||||
>
|
||||
Submit
|
||||
@ -67,7 +64,7 @@ const App: React.FC = () => {
|
||||
<Dropdown.Button
|
||||
icon={<DownOutlined />}
|
||||
loading={loadings[1]}
|
||||
overlay={menu}
|
||||
menu={{ items }}
|
||||
onClick={() => enterLoading(1)}
|
||||
>
|
||||
Submit
|
||||
|
||||
@ -21,7 +21,7 @@ This demo was created for debugging Menu styles inside Dropdown.
|
||||
```tsx
|
||||
import { AppstoreOutlined, DownOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Menu, Space } from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
type MenuItem = Required<MenuProps>['items'][number];
|
||||
@ -69,10 +69,14 @@ const items: MenuItem[] = [
|
||||
null as any,
|
||||
];
|
||||
|
||||
const menu = <Menu selectedKeys={['1']} openKeys={['sub1']} items={items} />;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu}>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items,
|
||||
selectedKeys: ['1'],
|
||||
openKeys: ['sub1'],
|
||||
}}
|
||||
>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Hover to check menu style
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 7
|
||||
order: 12
|
||||
title:
|
||||
zh-CN: 菜单隐藏方式
|
||||
en-US: The way of hiding menu.
|
||||
@ -16,7 +16,7 @@ The default is to close the menu when you click on menu items, this feature can
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Menu, Space } from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
@ -32,28 +32,30 @@ const App: React.FC = () => {
|
||||
setOpen(flag);
|
||||
};
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
onClick={handleMenuClick}
|
||||
items={[
|
||||
{
|
||||
label: 'Clicking me will not close the menu.',
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
label: 'Clicking me will not close the menu also.',
|
||||
key: '2',
|
||||
},
|
||||
{
|
||||
label: 'Clicking me will close the menu.',
|
||||
key: '3',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: 'Clicking me will not close the menu.',
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
label: 'Clicking me will not close the menu also.',
|
||||
key: '2',
|
||||
},
|
||||
{
|
||||
label: 'Clicking me will close the menu.',
|
||||
key: '3',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Dropdown overlay={menu} onOpenChange={handleOpenChange} open={open}>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items,
|
||||
onClick: handleMenuClick,
|
||||
}}
|
||||
onOpenChange={handleOpenChange}
|
||||
open={open}
|
||||
>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Hover me
|
||||
|
||||
@ -14,61 +14,58 @@ title:
|
||||
Support 6 placements.
|
||||
|
||||
```tsx
|
||||
import { Button, Dropdown, Menu, Space } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Button, Dropdown, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical">
|
||||
<Space wrap>
|
||||
<Dropdown overlay={menu} placement="bottomLeft">
|
||||
<Dropdown menu={{ items }} placement="bottomLeft">
|
||||
<Button>bottomLeft</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="bottom">
|
||||
<Dropdown menu={{ items }} placement="bottom">
|
||||
<Button>bottom</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="bottomRight">
|
||||
<Dropdown menu={{ items }} placement="bottomRight">
|
||||
<Button>bottomRight</Button>
|
||||
</Dropdown>
|
||||
</Space>
|
||||
<Space wrap>
|
||||
<Dropdown overlay={menu} placement="topLeft">
|
||||
<Dropdown menu={{ items }} placement="topLeft">
|
||||
<Button>topLeft</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="top">
|
||||
<Dropdown menu={{ items }} placement="top">
|
||||
<Button>top</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="topRight">
|
||||
<Dropdown menu={{ items }} placement="topRight">
|
||||
<Button>topRight</Button>
|
||||
</Dropdown>
|
||||
</Space>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 10
|
||||
order: 13
|
||||
title:
|
||||
zh-CN: 菜单可选选择
|
||||
en-US: Selectable Menu
|
||||
@ -7,40 +7,41 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
为 Menu 添加 `selectable` 属性可以开启选择能力。
|
||||
添加 `menu` 中的 `selectable` 属性可以开启选择能力。
|
||||
|
||||
## en-US
|
||||
|
||||
Config Menu `selectable` prop to enable selectable ability.
|
||||
Configure the `selectable` property in `menu` to enable selectable ability.
|
||||
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import { Dropdown, Menu, Space, Typography } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Space, Typography } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
selectable
|
||||
defaultSelectedKeys={['3']}
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: 'Item 1',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'Item 2',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: 'Item 3',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: 'Item 1',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'Item 2',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: 'Item 3',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu}>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items,
|
||||
selectable: true,
|
||||
defaultSelectedKeys: ['3'],
|
||||
}}
|
||||
>
|
||||
<Typography.Link>
|
||||
<Space>
|
||||
Selectable
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 6
|
||||
order: 9
|
||||
title:
|
||||
zh-CN: 多级菜单
|
||||
en-US: Cascading menu
|
||||
@ -15,62 +15,59 @@ The menu has multiple levels.
|
||||
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import { Dropdown, Menu, Space } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
type: 'group',
|
||||
label: 'Group title',
|
||||
children: [
|
||||
{
|
||||
key: '1',
|
||||
type: 'group',
|
||||
label: 'Group title',
|
||||
children: [
|
||||
{
|
||||
key: '1-1',
|
||||
label: '1st menu item',
|
||||
},
|
||||
{
|
||||
key: '1-2',
|
||||
label: '2nd menu item',
|
||||
},
|
||||
],
|
||||
key: '1-1',
|
||||
label: '1st menu item',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'sub menu',
|
||||
children: [
|
||||
{
|
||||
key: '2-1',
|
||||
label: '3rd menu item',
|
||||
},
|
||||
{
|
||||
key: '2-2',
|
||||
label: '4th menu item',
|
||||
},
|
||||
],
|
||||
key: '1-2',
|
||||
label: '2nd menu item',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'sub menu',
|
||||
children: [
|
||||
{
|
||||
key: '2-1',
|
||||
label: '3rd menu item',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: 'disabled sub menu',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
key: '3-1',
|
||||
label: '5d menu item',
|
||||
},
|
||||
{
|
||||
key: '3-2',
|
||||
label: '6th menu item',
|
||||
},
|
||||
],
|
||||
key: '2-2',
|
||||
label: '4th menu item',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: 'disabled sub menu',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
key: '3-1',
|
||||
label: '5d menu item',
|
||||
},
|
||||
{
|
||||
key: '3-2',
|
||||
label: '6th menu item',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu}>
|
||||
<Dropdown menu={{ items }}>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Cascading menu
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 3
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 触发方式
|
||||
en-US: Trigger mode
|
||||
@ -15,33 +15,30 @@ The default trigger mode is `hover`, you can change it to `click`.
|
||||
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import { Dropdown, Menu, Space } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
label: <a href="https://www.antgroup.com">1st menu item</a>,
|
||||
key: '0',
|
||||
},
|
||||
{
|
||||
label: <a href="https://www.aliyun.com">2nd menu item</a>,
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '3',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: <a href="https://www.antgroup.com">1st menu item</a>,
|
||||
key: '0',
|
||||
},
|
||||
{
|
||||
label: <a href="https://www.aliyun.com">2nd menu item</a>,
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '3',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu} trigger={['click']}>
|
||||
<Dropdown menu={{ items }} trigger={['click']}>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Click me
|
||||
|
||||
@ -6,10 +6,10 @@ import Button from '../button';
|
||||
import type { ButtonHTMLType } from '../button/button';
|
||||
import type { ButtonGroupProps } from '../button/button-group';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import { useCompactItemContext } from '../space/Compact';
|
||||
import type { DropdownProps } from './dropdown';
|
||||
import Dropdown from './dropdown';
|
||||
|
||||
const ButtonGroup = Button.Group;
|
||||
import Space from '../space';
|
||||
|
||||
export type DropdownButtonType = 'default' | 'primary' | 'ghost' | 'dashed' | 'link' | 'text';
|
||||
|
||||
@ -49,6 +49,9 @@ const DropdownButton: DropdownButtonInterface = props => {
|
||||
htmlType,
|
||||
children,
|
||||
className,
|
||||
menu,
|
||||
arrow,
|
||||
autoFocus,
|
||||
overlay,
|
||||
trigger,
|
||||
align,
|
||||
@ -72,6 +75,9 @@ const DropdownButton: DropdownButtonInterface = props => {
|
||||
|
||||
const prefixCls = getPrefixCls('dropdown-button', customizePrefixCls);
|
||||
const dropdownProps: DropdownProps = {
|
||||
menu,
|
||||
arrow,
|
||||
autoFocus,
|
||||
align,
|
||||
overlay,
|
||||
disabled,
|
||||
@ -84,6 +90,9 @@ const DropdownButton: DropdownButtonInterface = props => {
|
||||
overlayStyle,
|
||||
destroyPopupOnHide,
|
||||
};
|
||||
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
|
||||
|
||||
const classes = classNames(prefixCls, compactItemClassnames, className);
|
||||
|
||||
if ('open' in props) {
|
||||
dropdownProps.open = open;
|
||||
@ -117,10 +126,10 @@ const DropdownButton: DropdownButtonInterface = props => {
|
||||
const [leftButtonToRender, rightButtonToRender] = buttonsRender([leftButton, rightButton]);
|
||||
|
||||
return (
|
||||
<ButtonGroup {...restProps} className={classNames(prefixCls, className)}>
|
||||
<Space.Compact className={classes} size={compactSize} block {...restProps}>
|
||||
{leftButtonToRender}
|
||||
<Dropdown {...dropdownProps}>{rightButtonToRender}</Dropdown>
|
||||
</ButtonGroup>
|
||||
</Space.Compact>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -4,6 +4,8 @@ import RcDropdown from 'rc-dropdown';
|
||||
import useEvent from 'rc-util/lib/hooks/useEvent';
|
||||
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
||||
import * as React from 'react';
|
||||
import Menu from '../menu';
|
||||
import type { MenuProps } from '../menu';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import { OverrideProvider } from '../menu/OverrideContext';
|
||||
import getPlacements from '../_util/placements';
|
||||
@ -45,21 +47,12 @@ export type DropdownArrowOptions = {
|
||||
};
|
||||
|
||||
export interface DropdownProps {
|
||||
menu?: MenuProps;
|
||||
autoFocus?: boolean;
|
||||
arrow?: boolean | DropdownArrowOptions;
|
||||
trigger?: ('click' | 'hover' | 'contextMenu')[];
|
||||
overlay: React.ReactElement | OverlayFunc;
|
||||
/**
|
||||
* @deprecated `onVisibleChange` is deprecated which will be removed in next major version. Please
|
||||
* use `onOpenChange` instead.
|
||||
*/
|
||||
onVisibleChange?: (visible: boolean) => void;
|
||||
dropdownRender?: (originNode: React.ReactNode) => React.ReactNode;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
/**
|
||||
* @deprecated `visible` is deprecated which will be removed in next major version. Please use
|
||||
* `open` instead.
|
||||
*/
|
||||
visible?: boolean;
|
||||
open?: boolean;
|
||||
disabled?: boolean;
|
||||
destroyPopupOnHide?: boolean;
|
||||
@ -76,6 +69,14 @@ export interface DropdownProps {
|
||||
mouseLeaveDelay?: number;
|
||||
openClassName?: string;
|
||||
children?: React.ReactNode;
|
||||
|
||||
// Deprecated
|
||||
/** @deprecated Please use `menu` instead */
|
||||
overlay?: React.ReactElement | OverlayFunc;
|
||||
/** @deprecated Please use `open` instead */
|
||||
visible?: boolean;
|
||||
/** @deprecated Please use `onOpenChange` instead */
|
||||
onVisibleChange?: (open: boolean) => void;
|
||||
}
|
||||
|
||||
interface DropdownInterface extends React.FC<DropdownProps> {
|
||||
@ -101,6 +102,12 @@ const Dropdown: DropdownInterface = props => {
|
||||
`\`${deprecatedName}\` is deprecated which will be removed in next major version, please use \`${newName}\` instead.`,
|
||||
);
|
||||
});
|
||||
|
||||
warning(
|
||||
!('overlay' in props),
|
||||
'Dropdown',
|
||||
'`overlay` is deprecated. Please use `menu` instead.',
|
||||
);
|
||||
}
|
||||
|
||||
const getTransitionName = () => {
|
||||
@ -135,11 +142,13 @@ const Dropdown: DropdownInterface = props => {
|
||||
};
|
||||
|
||||
const {
|
||||
menu,
|
||||
arrow,
|
||||
prefixCls: customizePrefixCls,
|
||||
children,
|
||||
trigger,
|
||||
disabled,
|
||||
dropdownRender,
|
||||
getPopupContainer,
|
||||
overlayClassName,
|
||||
visible,
|
||||
@ -201,11 +210,16 @@ const Dropdown: DropdownInterface = props => {
|
||||
const { overlay } = props;
|
||||
|
||||
let overlayNode: React.ReactNode;
|
||||
if (typeof overlay === 'function') {
|
||||
overlayNode = overlay();
|
||||
if (menu?.items) {
|
||||
overlayNode = <Menu {...menu} />;
|
||||
} else if (typeof overlay === 'function') {
|
||||
overlayNode = (overlay as OverlayFunc)();
|
||||
} else {
|
||||
overlayNode = overlay;
|
||||
}
|
||||
if (dropdownRender) {
|
||||
overlayNode = dropdownRender(overlayNode);
|
||||
}
|
||||
overlayNode = React.Children.only(
|
||||
typeof overlayNode === 'string' ? <span>{overlayNode}</span> : overlayNode,
|
||||
);
|
||||
|
||||
@ -11,6 +11,39 @@ A dropdown list.
|
||||
|
||||
When there are more than a few options to choose from, you can wrap them in a `Dropdown`. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.
|
||||
|
||||
### Usage upgrade after 4.24.0
|
||||
|
||||
```__react
|
||||
import Alert from '../alert';
|
||||
ReactDOM.render(<Alert message="After version 4.24.0, we provide a simpler usage <Dropdown menu={{ items: [...] }} /> with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 5.0." />, mountNode);
|
||||
```
|
||||
|
||||
```jsx
|
||||
// works when >=4.24.0, recommended ✅
|
||||
const items = [
|
||||
{ label: 'item 1', key: 'item-1' }, // remember to pass the key prop
|
||||
{ label: 'item 2', key: 'item-2' },
|
||||
];
|
||||
return (
|
||||
<Dropdown menu={{ items }}>
|
||||
<a>Hover me</a>
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
// works when <4.24.0, deprecated when >=4.24.0 🙅🏻♀️
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item>item 1</Menu.Item>
|
||||
<Menu.Item>item 2</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
<Dropdown overlay={menu}>
|
||||
<a>Hover me</a>
|
||||
</Dropdown>
|
||||
);
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Dropdown
|
||||
@ -21,8 +54,9 @@ When there are more than a few options to choose from, you can wrap them in a `D
|
||||
| autoFocus | Focus element in `overlay` when opened | boolean | false | 4.21.0 |
|
||||
| disabled | Whether the dropdown menu is disabled | boolean | - | |
|
||||
| destroyPopupOnHide | Whether destroy dropdown when hidden | boolean | false | |
|
||||
| dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 4.24.0 |
|
||||
| getPopupContainer | To set the container of the dropdown menu. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
||||
| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
|
||||
| menu | The menu props | [MenuProps](/components/menu/#API) | - | 4.24.0 |
|
||||
| overlayClassName | The class name of the dropdown root element | string | - | |
|
||||
| overlayStyle | The style of the dropdown root element | CSSProperties | - | |
|
||||
| placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` | |
|
||||
@ -30,26 +64,16 @@ When there are more than a few options to choose from, you can wrap them in a `D
|
||||
| open | Whether the dropdown menu is currently open. Use `visible` under 4.23.0 ([why?](/docs/react/faq#why-open)) | boolean | - | 4.23.0 |
|
||||
| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item. Use `onVisibleChange` under 4.23.0 ([why?](/docs/react/faq#why-open)) | (open: boolean) => void | - | 4.23.0 |
|
||||
|
||||
You should use [Menu](/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.
|
||||
|
||||
> Warning: You must set a unique `key` for `Menu.Item`.
|
||||
>
|
||||
> Menu of Dropdown is unselectable by default, you can make it selectable via `<Menu selectable>`.
|
||||
|
||||
### Dropdown.Button
|
||||
|
||||
Same props from Dropdown. And includes additional props:
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| buttonsRender | Custom buttons inside Dropdown.Button | (buttons: ReactNode\[]) => ReactNode\[] | - | |
|
||||
| loading | Set the loading status of button | boolean \| { delay: number } | false | |
|
||||
| danger | Set the danger status of button | boolean | - | 4.23.0 |
|
||||
| disabled | Whether the dropdown menu is disabled | boolean | - | |
|
||||
| icon | Icon (appears on the right) | ReactNode | - | |
|
||||
| overlay | The dropdown menu | [Menu](/components/menu) | - | |
|
||||
| placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomRight` | |
|
||||
| size | Size of the button, the same as [Button](/components/button/#API) | string | `default` | |
|
||||
| trigger | The trigger mode which executes the dropdown action | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
|
||||
| type | Type of the button, the same as [Button](/components/button/#API) | string | `default` | |
|
||||
| open | Whether the dropdown menu is currently open | boolean | - | 4.23.0 |
|
||||
| onClick | The same as [Button](/components/button/#API): called when you click the button on the left | (event) => void | - | |
|
||||
| onOpenChange | Called when the open state is changed | (open: boolean) => void | - | 4.23.0 |
|
||||
|
||||
@ -15,6 +15,39 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
|
||||
- 用于收罗一组命令操作。
|
||||
- Select 用于选择，而 Dropdown 是命令集合。
|
||||
|
||||
### 4.24.0 用法升级
|
||||
|
||||
```__react
|
||||
import Alert from '../alert';
|
||||
ReactDOM.render(<Alert message="在 4.24.0 版本后，我们提供了 <Dropdown menu={{ items: [...] }} /> 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法，你还是可以在 4.x 继续使用，但会在控制台看到警告，并会在 5.0 后移除。" />, mountNode);
|
||||
```
|
||||
|
||||
```jsx
|
||||
// >=4.24.0 可用，推荐的写法 ✅
|
||||
const items = [
|
||||
{ label: '菜单项一', key: 'item-1' }, // 菜单项务必填写 key
|
||||
{ label: '菜单项二', key: 'item-2' },
|
||||
];
|
||||
return (
|
||||
<Dropdown menu={{ items }}>
|
||||
<a>Hover me</a>
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
// <4.24.0 可用，>=4.24.0 时不推荐 🙅🏻♀️
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item>菜单项一</Menu.Item>
|
||||
<Menu.Item>菜单项二</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
<Dropdown overlay={menu}>
|
||||
<a>Hover me</a>
|
||||
</Dropdown>
|
||||
);
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
属性如下
|
||||
@ -25,8 +58,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
|
||||
| autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
|
||||
| disabled | 菜单是否禁用 | boolean | - | |
|
||||
| destroyPopupOnHide | 关闭后是否销毁 Dropdown | boolean | false | |
|
||||
| dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.24.0 |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
||||
| overlay | 菜单 | [Menu](/components/menu) \| () => Menu | - | |
|
||||
| menu | 菜单配置项 | [MenuProps](/components/menu/#API) | - | 4.24.0 |
|
||||
| overlayClassName | 下拉根元素的类名称 | string | - | |
|
||||
| overlayStyle | 下拉根元素的样式 | CSSProperties | - | |
|
||||
| placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` | |
|
||||
@ -34,26 +68,16 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
|
||||
| open | 菜单是否显示，小于 4.23.0 使用 `visible`（[为什么?](/docs/react/faq#why-open)） | boolean | - | 4.23.0 |
|
||||
| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 `onVisibleChange`（[为什么?](/docs/react/faq#why-open)） | (open: boolean) => void | - | 4.23.0 |
|
||||
|
||||
`overlay` 菜单使用 [Menu](/components/menu/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。
|
||||
|
||||
> 注意： Menu.Item 必须设置唯一的 key 属性。
|
||||
>
|
||||
> Dropdown 下的 Menu 默认不可选中。如果需要菜单可选中，可以指定 `<Menu selectable>`。
|
||||
|
||||
### Dropdown.Button
|
||||
|
||||
属性与 Dropdown 的相同。还包含以下属性：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode\[]) => ReactNode\[] | - | |
|
||||
| loading | 设置按钮载入状态 | boolean \| { delay: number } | false | |
|
||||
| danger | 设置危险按钮 | boolean | - | 4.23.0 |
|
||||
| disabled | 菜单是否禁用 | boolean | - | |
|
||||
| icon | 右侧的 icon | ReactNode | - | |
|
||||
| overlay | 菜单 | [Menu](/components/menu/) | - | |
|
||||
| placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomRight` | |
|
||||
| size | 按钮大小，和 [Button](/components/button/#API) 一致 | string | `default` | |
|
||||
| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
|
||||
| type | 按钮类型，和 [Button](/components/button/#API) 一致 | string | `default` | |
|
||||
| open | 菜单是否显示 | boolean | - | 4.23.0 |
|
||||
| onClick | 点击左侧按钮的回调，和 [Button](/components/button/#API) 一致 | (event) => void | - | |
|
||||
| onOpenChange | 菜单显示状态改变时调用 | (open: boolean) => void | - | 4.23.0 |
|
||||
|
||||
@ -4,3 +4,4 @@ import './index.less';
|
||||
// style dependencies
|
||||
import '../../button/style';
|
||||
import '../../menu/style';
|
||||
import '../../space/style';
|
||||
|
||||
@ -1197,7 +1197,7 @@ exports[`renders ./components/empty/demo/customize.md extend context correctly 1
|
||||
class="ant-empty-description"
|
||||
>
|
||||
<span>
|
||||
Customize
|
||||
Customize
|
||||
<a
|
||||
href="#API"
|
||||
>
|
||||
|
||||
@ -743,7 +743,7 @@ exports[`renders ./components/empty/demo/customize.md correctly 1`] = `
|
||||
class="ant-empty-description"
|
||||
>
|
||||
<span>
|
||||
Customize
|
||||
Customize
|
||||
<a
|
||||
href="#API"
|
||||
>
|
||||
|
||||
@ -2477,7 +2477,7 @@ Array [
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Apple
|
||||
Apple
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
@ -2497,7 +2497,7 @@ Array [
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Pear
|
||||
Pear
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
@ -6483,7 +6483,7 @@ exports[`renders ./components/form/demo/form-context.md extend context correctly
|
||||
<span
|
||||
class="ant-typography ant-typography-secondary ant-form-text"
|
||||
>
|
||||
(
|
||||
(
|
||||
<span
|
||||
aria-label="smile"
|
||||
class="anticon anticon-smile"
|
||||
@ -7724,7 +7724,7 @@ exports[`renders ./components/form/demo/normal-login.md extend context correctly
|
||||
Log in
|
||||
</span>
|
||||
</button>
|
||||
Or
|
||||
Or
|
||||
<a
|
||||
href=""
|
||||
>
|
||||
@ -9156,7 +9156,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
I have read the
|
||||
I have read the
|
||||
<a
|
||||
href=""
|
||||
>
|
||||
@ -18645,7 +18645,7 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
<pre>
|
||||
Name Value:
|
||||
Name Value:
|
||||
</pre>
|
||||
</article>,
|
||||
]
|
||||
|
||||
@ -1819,7 +1819,7 @@ Array [
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Apple
|
||||
Apple
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
@ -1839,7 +1839,7 @@ Array [
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Pear
|
||||
Pear
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
@ -3884,7 +3884,7 @@ exports[`renders ./components/form/demo/form-context.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-typography ant-typography-secondary ant-form-text"
|
||||
>
|
||||
(
|
||||
(
|
||||
<span
|
||||
aria-label="smile"
|
||||
class="anticon anticon-smile"
|
||||
@ -5125,7 +5125,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
|
||||
Log in
|
||||
</span>
|
||||
</button>
|
||||
Or
|
||||
Or
|
||||
<a
|
||||
href=""
|
||||
>
|
||||
@ -6166,7 +6166,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
I have read the
|
||||
I have read the
|
||||
<a
|
||||
href=""
|
||||
>
|
||||
@ -7822,7 +7822,7 @@ Array [
|
||||
class="ant-typography"
|
||||
>
|
||||
<pre>
|
||||
Name Value:
|
||||
Name Value:
|
||||
</pre>
|
||||
</article>,
|
||||
]
|
||||
|
||||
@ -1512,4 +1512,71 @@ describe('Form', () => {
|
||||
marginBottom: -24,
|
||||
});
|
||||
});
|
||||
it('form child components should be given priority to own disabled props when it in a disabled form', () => {
|
||||
const props = {
|
||||
name: 'file',
|
||||
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
|
||||
headers: {
|
||||
authorization: 'authorization-text',
|
||||
},
|
||||
capture: true,
|
||||
};
|
||||
const renderComps = (disabled?: boolean) => [
|
||||
<Button key="Button" disabled={disabled} type="primary" htmlType="submit">
|
||||
test
|
||||
</Button>,
|
||||
<Cascader key="Cascader" disabled={disabled} options={[]} />,
|
||||
<Checkbox key="Checkbox" disabled={disabled} />,
|
||||
<Checkbox.Group
|
||||
key="CheckboxGroup"
|
||||
disabled={disabled}
|
||||
options={[
|
||||
{ label: 'male', value: 0 },
|
||||
{ label: 'female', value: 1 },
|
||||
]}
|
||||
/>,
|
||||
<InputNumber key="InputNumber" disabled={disabled} />,
|
||||
<Input key="Input" disabled={disabled} />,
|
||||
<Select key="Select" disabled={disabled} />,
|
||||
<Switch key="Switch" disabled={disabled} />,
|
||||
<TreeSelect key="TreeSelect" disabled={disabled} />,
|
||||
<Upload key="Upload" {...props} disabled={disabled}>
|
||||
<Button disabled={disabled}>Click to Upload</Button>
|
||||
</Upload>,
|
||||
<DatePicker key="DatePicker" disabled={disabled} />,
|
||||
<DatePicker.RangePicker key="DatePicker.RangePicker" disabled={disabled} />,
|
||||
<DatePicker.MonthPicker key="DatePicker.MonthPicker" disabled={disabled} />,
|
||||
<DatePicker.QuarterPicker key="DatePicker.QuarterPicker" disabled={disabled} />,
|
||||
<DatePicker.WeekPicker key="DatePicker.WeekPicker" disabled={disabled} />,
|
||||
<DatePicker.YearPicker key="DatePicker.YearPicker" disabled={disabled} />,
|
||||
<DatePicker.TimePicker key="DatePicker.TimePicker" disabled={disabled} />,
|
||||
];
|
||||
const App = () => <Form disabled>{renderComps(false)}</Form>;
|
||||
|
||||
const wrapper = render(<App />);
|
||||
expect(wrapper.container.querySelectorAll('[disabled]').length).toBe(0);
|
||||
const App2 = () => <Form disabled>{renderComps()}</Form>;
|
||||
|
||||
const wrapper2 = render(<App2 />);
|
||||
// 时间范围组件中会有两个 input 框，因此虽然上述只有 18 个组件，但，实际有 19 个 带有 disabled 属性的表单组件
|
||||
expect(wrapper2.container.querySelectorAll('[disabled]').length).toBe(19);
|
||||
|
||||
const App3 = () => <Form disabled>{renderComps(true)}</Form>;
|
||||
|
||||
const wrapper3 = render(<App3 />);
|
||||
|
||||
expect(wrapper3.container.querySelectorAll('[disabled]').length).toBe(19);
|
||||
|
||||
const App4 = () => <Form>{renderComps(true)}</Form>;
|
||||
|
||||
const wrapper4 = render(<App4 />);
|
||||
|
||||
expect(wrapper4.container.querySelectorAll('[disabled]').length).toBe(19);
|
||||
|
||||
const App5 = () => <Form>{renderComps()}</Form>;
|
||||
|
||||
const wrapper5 = render(<App5 />);
|
||||
|
||||
expect(wrapper5.container.querySelectorAll('[disabled]').length).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
@ -866,7 +866,7 @@ Array [
|
||||
exports[`renders ./components/grid/demo/playground.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<span>
|
||||
Horizontal Gutter (px):
|
||||
Horizontal Gutter (px):
|
||||
</span>,
|
||||
<div
|
||||
style="width:50%"
|
||||
@ -986,7 +986,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<span>
|
||||
Vertical Gutter (px):
|
||||
Vertical Gutter (px):
|
||||
</span>,
|
||||
<div
|
||||
style="width:50%"
|
||||
|
||||
@ -866,7 +866,7 @@ Array [
|
||||
exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
|
||||
Array [
|
||||
<span>
|
||||
Horizontal Gutter (px):
|
||||
Horizontal Gutter (px):
|
||||
</span>,
|
||||
<div
|
||||
style="width:50%"
|
||||
@ -962,7 +962,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<span>
|
||||
Vertical Gutter (px):
|
||||
Vertical Gutter (px):
|
||||
</span>,
|
||||
<div
|
||||
style="width:50%"
|
||||
|
||||
@ -143,4 +143,44 @@ describe('Grid', () => {
|
||||
xxl: false,
|
||||
});
|
||||
});
|
||||
|
||||
it('should align by responsive align prop', () => {
|
||||
const matchMediaSpy = jest.spyOn(window, 'matchMedia');
|
||||
matchMediaSpy.mockImplementation(
|
||||
query =>
|
||||
({
|
||||
addListener: (cb: (e: { matches: boolean }) => void) => {
|
||||
cb({ matches: query === '(max-width: 575px)' });
|
||||
},
|
||||
removeListener: jest.fn(),
|
||||
matches: query === '(max-width: 575px)',
|
||||
} as any),
|
||||
);
|
||||
const { container } = render(<Row align="middle" />);
|
||||
expect(container.innerHTML).toContain('ant-row-middle');
|
||||
const { container: container2 } = render(<Row align={{ xs: 'middle' }} />);
|
||||
expect(container2.innerHTML).toContain('ant-row-middle');
|
||||
const { container: container3 } = render(<Row align={{ lg: 'middle' }} />);
|
||||
expect(container3.innerHTML).not.toContain('ant-row-middle');
|
||||
});
|
||||
|
||||
it('should justify by responsive justify prop', () => {
|
||||
const matchMediaSpy = jest.spyOn(window, 'matchMedia');
|
||||
matchMediaSpy.mockImplementation(
|
||||
query =>
|
||||
({
|
||||
addListener: (cb: (e: { matches: boolean }) => void) => {
|
||||
cb({ matches: query === '(max-width: 575px)' });
|
||||
},
|
||||
removeListener: jest.fn(),
|
||||
matches: query === '(max-width: 575px)',
|
||||
} as any),
|
||||
);
|
||||
const { container } = render(<Row justify="center" />);
|
||||
expect(container.innerHTML).toContain('ant-row-center');
|
||||
const { container: container2 } = render(<Row justify={{ xs: 'center' }} />);
|
||||
expect(container2.innerHTML).toContain('ant-row-center');
|
||||
const { container: container3 } = render(<Row justify={{ lg: 'center' }} />);
|
||||
expect(container3.innerHTML).not.toContain('ant-row-center');
|
||||
});
|
||||
});
|
||||
|
||||
@ -44,9 +44,9 @@ If the Ant Design grid layout component does not meet your needs, you can use th
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | Vertical alignment | `top` \| `middle` \| `bottom` | `top` | |
|
||||
| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 |
|
||||
| gutter | Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | number \| object \| array | 0 | |
|
||||
| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | `start` | |
|
||||
| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 |
|
||||
| wrap | Auto wrap line | boolean | true | 4.8.0 |
|
||||
|
||||
### Col
|
||||
|
||||
@ -43,9 +43,9 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` | `top` | |
|
||||
| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 |
|
||||
| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 | |
|
||||
| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | `start` | |
|
||||
| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 |
|
||||
| wrap | 是否自动换行 | boolean | true | 4.8.0 |
|
||||
|
||||
### Col
|
||||
|
||||
@ -10,16 +10,50 @@ import RowContext from './RowContext';
|
||||
const RowAligns = tuple('top', 'middle', 'bottom', 'stretch');
|
||||
const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between', 'space-evenly');
|
||||
|
||||
type Responsive = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
|
||||
type ResponsiveLike<T> = {
|
||||
[key in Responsive]?: T;
|
||||
};
|
||||
|
||||
type Gap = number | undefined;
|
||||
export type Gutter = number | undefined | Partial<Record<Breakpoint, number>>;
|
||||
|
||||
type ResponsiveAligns = ResponsiveLike<typeof RowAligns[number]>;
|
||||
type ResponsiveJustify = ResponsiveLike<typeof RowJustify[number]>;
|
||||
export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
gutter?: Gutter | [Gutter, Gutter];
|
||||
align?: typeof RowAligns[number];
|
||||
justify?: typeof RowJustify[number];
|
||||
align?: typeof RowAligns[number] | ResponsiveAligns;
|
||||
justify?: typeof RowJustify[number] | ResponsiveJustify;
|
||||
prefixCls?: string;
|
||||
wrap?: boolean;
|
||||
}
|
||||
|
||||
function useMergePropByScreen(oriProp: RowProps['align'] | RowProps['justify'], screen: ScreenMap) {
|
||||
const [prop, setProp] = React.useState(typeof oriProp === 'string' ? oriProp : '');
|
||||
|
||||
const clacMergeAlignOrJustify = () => {
|
||||
if (typeof oriProp !== 'object') {
|
||||
return;
|
||||
}
|
||||
for (let i = 0; i < responsiveArray.length; i++) {
|
||||
const breakpoint: Breakpoint = responsiveArray[i];
|
||||
// if do not match, do nothing
|
||||
if (!screen[breakpoint]) continue;
|
||||
const curVal = oriProp[breakpoint];
|
||||
if (curVal !== undefined) {
|
||||
setProp(curVal);
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
clacMergeAlignOrJustify();
|
||||
}, [JSON.stringify(oriProp), screen]);
|
||||
|
||||
return prop;
|
||||
}
|
||||
|
||||
const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
@ -43,6 +77,20 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
|
||||
xl: true,
|
||||
xxl: true,
|
||||
});
|
||||
// to save screens info when responsiveObserve callback had been call
|
||||
const [curScreens, setCurScreens] = React.useState<ScreenMap>({
|
||||
xs: false,
|
||||
sm: false,
|
||||
md: false,
|
||||
lg: false,
|
||||
xl: false,
|
||||
xxl: false,
|
||||
});
|
||||
|
||||
// ================================== calc reponsive data ==================================
|
||||
const mergeAlign = useMergePropByScreen(align, curScreens);
|
||||
|
||||
const mergeJustify = useMergePropByScreen(justify, curScreens);
|
||||
|
||||
const supportFlexGap = useFlexGapSupport();
|
||||
|
||||
@ -51,6 +99,7 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
|
||||
// ================================== Effect ==================================
|
||||
React.useEffect(() => {
|
||||
const token = ResponsiveObserve.subscribe(screen => {
|
||||
setCurScreens(screen);
|
||||
const currentGutter = gutterRef.current || 0;
|
||||
if (
|
||||
(!Array.isArray(currentGutter) && typeof currentGutter === 'object') ||
|
||||
@ -89,8 +138,8 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-no-wrap`]: wrap === false,
|
||||
[`${prefixCls}-${justify}`]: justify,
|
||||
[`${prefixCls}-${align}`]: align,
|
||||
[`${prefixCls}-${mergeJustify}`]: mergeJustify,
|
||||
[`${prefixCls}-${mergeAlign}`]: mergeAlign,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
className,
|
||||
|
||||
@ -43,6 +43,87 @@ exports[`renders ./components/image/demo/basic.md extend context correctly 1`] =
|
||||
|
||||
exports[`renders ./components/image/demo/controlled-preview.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<div>
|
||||
scaleStep:
|
||||
<!-- -->
|
||||
<div
|
||||
class="ant-input-number"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="up"
|
||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<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>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number-input-wrap"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="5"
|
||||
aria-valuemin="0.1"
|
||||
aria-valuenow="0.5"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
role="spinbutton"
|
||||
step="0.1"
|
||||
value="0.5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<br />,
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
|
||||
@ -43,6 +43,87 @@ exports[`renders ./components/image/demo/basic.md correctly 1`] = `
|
||||
|
||||
exports[`renders ./components/image/demo/controlled-preview.md correctly 1`] = `
|
||||
Array [
|
||||
<div>
|
||||
scaleStep:
|
||||
<!-- -->
|
||||
<div
|
||||
class="ant-input-number"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="up"
|
||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<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>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number-input-wrap"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="5"
|
||||
aria-valuemin="0.1"
|
||||
aria-valuenow="0.5"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
role="spinbutton"
|
||||
step="0.1"
|
||||
value="0.5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<br />,
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
|
||||
@ -14,14 +14,26 @@ title:
|
||||
You can make preview controlled.
|
||||
|
||||
```tsx
|
||||
import { Button, Image } from 'antd';
|
||||
import { Button, InputNumber, Image } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [scaleStep, setScaleStep] = useState(0.5);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
scaleStep:{' '}
|
||||
<InputNumber
|
||||
min={0.1}
|
||||
max={5}
|
||||
defaultValue={0.5}
|
||||
step={0.1}
|
||||
onChange={val => setScaleStep(val!)}
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<Button type="primary" onClick={() => setVisible(true)}>
|
||||
show image preview
|
||||
</Button>
|
||||
@ -31,6 +43,7 @@ const App: React.FC = () => {
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
|
||||
preview={{
|
||||
visible,
|
||||
scaleStep,
|
||||
src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
onVisibleChange: value => {
|
||||
setVisible(value);
|
||||
|
||||
@ -39,6 +39,7 @@ Previewable image.
|
||||
maskClassName?: string; // v4.11.0
|
||||
current?: number; // v4.12.0 Only support PreviewGroup
|
||||
countRender?: (current: number, total: number) => string // v4.20.0 Only support PreviewGroup
|
||||
scaleStep?: number;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -40,6 +40,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
|
||||
maskClassName?: string; // v4.11.0
|
||||
current?: number; // v4.12.0 仅支持 PreviewGroup
|
||||
countRender?: (current: number, total: number) => string // v4.20.0 仅支持 PreviewGroup
|
||||
scaleStep?: number;
|
||||
forceRender?: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
@ -11,6 +11,7 @@ import DisabledContext from '../config-provider/DisabledContext';
|
||||
import type { SizeType } from '../config-provider/SizeContext';
|
||||
import SizeContext from '../config-provider/SizeContext';
|
||||
import { FormItemInputContext, NoFormStyle } from '../form/context';
|
||||
import { useCompactItemContext } from '../space/Compact';
|
||||
import { cloneElement } from '../_util/reactNode';
|
||||
import type { InputStatus } from '../_util/statusUtils';
|
||||
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
|
||||
@ -52,6 +53,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
|
||||
} = props;
|
||||
|
||||
const prefixCls = getPrefixCls('input-number', customizePrefixCls);
|
||||
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
|
||||
let upIcon = <UpOutlined className={`${prefixCls}-handler-up-inner`} />;
|
||||
let downIcon = <DownOutlined className={`${prefixCls}-handler-down-inner`} />;
|
||||
const controlsTemp = typeof controls === 'boolean' ? controls : undefined;
|
||||
@ -79,10 +81,10 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
|
||||
} = useContext(FormItemInputContext);
|
||||
const mergedStatus = getMergedStatus(contextStatus, customStatus);
|
||||
|
||||
const mergeSize = customizeSize || size;
|
||||
const mergeSize = compactSize || customizeSize || size;
|
||||
// ===================== Disabled =====================
|
||||
const disabled = React.useContext(DisabledContext);
|
||||
const mergedDisabled = customDisabled || disabled;
|
||||
const mergedDisabled = customDisabled ?? disabled;
|
||||
|
||||
const inputNumberClass = classNames(
|
||||
{
|
||||
@ -93,6 +95,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
|
||||
[`${prefixCls}-in-form-item`]: isFormItemInput,
|
||||
},
|
||||
getStatusClassNames(prefixCls, mergedStatus),
|
||||
compactItemClassnames,
|
||||
className,
|
||||
);
|
||||
|
||||
|
||||
@ -235,6 +235,9 @@
|
||||
color: @error-color;
|
||||
}
|
||||
}
|
||||
|
||||
// ===================== Compact Item Styles =====================
|
||||
.compact-item(@input-number-prefix-cls, null, ~'@{input-number-prefix-cls}-focused');
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
|
||||
// deps-lint-skip: form
|
||||
// deps-lint-skip: form, space
|
||||
|
||||
@ -10,6 +10,7 @@ import DisabledContext from '../config-provider/DisabledContext';
|
||||
import type { SizeType } from '../config-provider/SizeContext';
|
||||
import SizeContext from '../config-provider/SizeContext';
|
||||
import { FormItemInputContext, NoFormStyle } from '../form/context';
|
||||
import { NoCompactStyle, useCompactItemContext } from '../space/Compact';
|
||||
import type { InputStatus } from '../_util/statusUtils';
|
||||
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
|
||||
import warning from '../_util/warning';
|
||||
@ -137,6 +138,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
|
||||
allowClear,
|
||||
addonAfter,
|
||||
addonBefore,
|
||||
className,
|
||||
onChange,
|
||||
...rest
|
||||
} = props;
|
||||
@ -145,13 +147,16 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
|
||||
const prefixCls = getPrefixCls('input', customizePrefixCls);
|
||||
const inputRef = useRef<InputRef>(null);
|
||||
|
||||
// ===================== Compact Item =====================
|
||||
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
|
||||
|
||||
// ===================== Size =====================
|
||||
const size = React.useContext(SizeContext);
|
||||
const mergedSize = customSize || size;
|
||||
const mergedSize = compactSize || customSize || size;
|
||||
|
||||
// ===================== Disabled =====================
|
||||
const disabled = React.useContext(DisabledContext);
|
||||
const mergedDisabled = customDisabled || disabled;
|
||||
const mergedDisabled = customDisabled ?? disabled;
|
||||
|
||||
// ===================== Status =====================
|
||||
const { status: contextStatus, hasFeedback, feedbackIcon } = useContext(FormItemInputContext);
|
||||
@ -215,19 +220,24 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
|
||||
onFocus={handleFocus}
|
||||
suffix={suffixNode}
|
||||
allowClear={mergedAllowClear}
|
||||
className={classNames(className, compactItemClassnames)}
|
||||
onChange={handleChange}
|
||||
addonAfter={
|
||||
addonAfter && (
|
||||
<NoFormStyle override status>
|
||||
{addonAfter}
|
||||
</NoFormStyle>
|
||||
<NoCompactStyle>
|
||||
<NoFormStyle override status>
|
||||
{addonAfter}
|
||||
</NoFormStyle>
|
||||
</NoCompactStyle>
|
||||
)
|
||||
}
|
||||
addonBefore={
|
||||
addonBefore && (
|
||||
<NoFormStyle override status>
|
||||
{addonBefore}
|
||||
</NoFormStyle>
|
||||
<NoCompactStyle>
|
||||
<NoFormStyle override status>
|
||||
{addonBefore}
|
||||
</NoFormStyle>
|
||||
</NoCompactStyle>
|
||||
)
|
||||
}
|
||||
inputClassName={classNames(
|
||||
|
||||
@ -5,6 +5,7 @@ import * as React from 'react';
|
||||
import Button from '../button';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import SizeContext from '../config-provider/SizeContext';
|
||||
import { useCompactItemContext } from '../space/Compact';
|
||||
import { cloneElement } from '../_util/reactNode';
|
||||
import type { InputProps, InputRef } from './Input';
|
||||
import Input from './Input';
|
||||
@ -44,7 +45,11 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
|
||||
const contextSize = React.useContext(SizeContext);
|
||||
const composedRef = React.useRef<boolean>(false);
|
||||
|
||||
const size = customizeSize || contextSize;
|
||||
const prefixCls = getPrefixCls('input-search', customizePrefixCls);
|
||||
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
|
||||
const { compactSize } = useCompactItemContext(prefixCls, direction);
|
||||
|
||||
const size = compactSize || customizeSize || contextSize;
|
||||
|
||||
const inputRef = React.useRef<InputRef>(null);
|
||||
|
||||
@ -76,9 +81,6 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
|
||||
onSearch(e);
|
||||
};
|
||||
|
||||
const prefixCls = getPrefixCls('input-search', customizePrefixCls);
|
||||
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
|
||||
|
||||
const searchIcon = typeof enterButton === 'boolean' ? <SearchOutlined /> : null;
|
||||
const btnClassName = `${prefixCls}-button`;
|
||||
|
||||
|
||||
@ -83,7 +83,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
|
||||
|
||||
// ===================== Disabled =====================
|
||||
const disabled = React.useContext(DisabledContext);
|
||||
const mergedDisabled = customDisabled || disabled;
|
||||
const mergedDisabled = customDisabled ?? disabled;
|
||||
|
||||
const {
|
||||
status: contextStatus,
|
||||
|
||||
@ -5114,6 +5114,142 @@ exports[`renders ./components/input/demo/borderless-debug.md extend context corr
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/input/demo/debug-addon.md extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
Input addon Button:
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<span
|
||||
class="ant-input-group-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value="mysite"
|
||||
/>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<span
|
||||
class="ant-input-group-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value="mysite"
|
||||
/>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
Input addon Button icon:
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-input-group-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value="mysite"
|
||||
/>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/input/demo/focus.md extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
|
||||
@ -1331,6 +1331,142 @@ exports[`renders ./components/input/demo/borderless-debug.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/input/demo/debug-addon.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
Input addon Button:
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<span
|
||||
class="ant-input-group-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value="mysite"
|
||||
/>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<span
|
||||
class="ant-input-group-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value="mysite"
|
||||
/>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
Input addon Button icon:
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-input-group-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value="mysite"
|
||||
/>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/input/demo/focus.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
|
||||
42
components/input/demo/debug-addon.md
Normal file
42
components/input/demo/debug-addon.md
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
order: 100
|
||||
title:
|
||||
zh-CN: debug 前置/后置标签
|
||||
en-US: debug Pre / Post tab
|
||||
debug: true
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
一些特殊的前置后置标签。
|
||||
|
||||
## en-US
|
||||
|
||||
Some special pre & post tabs example.
|
||||
|
||||
```tsx
|
||||
import { SettingOutlined } from '@ant-design/icons';
|
||||
import { Input, Space, Button } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical">
|
||||
Input addon Button:
|
||||
<Input addonAfter={<Button type="primary">Submit</Button>} defaultValue="mysite" />
|
||||
<Input addonAfter={<Button>Submit</Button>} defaultValue="mysite" />
|
||||
<br />
|
||||
<br />
|
||||
Input addon Button icon:
|
||||
<Input
|
||||
addonAfter={
|
||||
<Button>
|
||||
<SettingOutlined />
|
||||
</Button>
|
||||
}
|
||||
defaultValue="mysite"
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
@ -4,7 +4,6 @@
|
||||
@import './affix';
|
||||
@import './allow-clear';
|
||||
@import './status';
|
||||
|
||||
@input-prefix-cls: ~'@{ant-prefix}-input';
|
||||
|
||||
// Input styles
|
||||
@ -79,6 +78,9 @@
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
// ===================== Compact Item Styles =====================
|
||||
.compact-item(@input-prefix-cls);
|
||||
}
|
||||
|
||||
@import './search-input';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
|
||||
// deps-lint-skip: form
|
||||
// deps-lint-skip: form, space
|
||||
// style dependencies
|
||||
import '../../button/style';
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user