mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

demo: add tooltip disabled demo (#45748)

Browse Source 
* demo: add disabled demo

* demo: Modify tooltip Disable demo Description

* demo: Modify tooltip Disable demo Description
This commit is contained in:
JarvisArt 2023-11-09 17:15:21 +08:00 committed by GitHub
parent c2ef52b9ba
commit 5727ce00ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 126 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1284,6 +1284,51 @@ Array [
exports[`renders components/tooltip/demo/destroy-tooltip-on-hide.tsx extend context correctly 2`] = `[]`;
exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Enable
</span>
</button>
</div>
<div
class="ant-space-item"
>
<span>
Tooltip will show on mouse enter.
</span>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div>
</div>
`;
exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 2`] = `[]`;
exports[`renders components/tooltip/demo/disabled-children.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
@ -1627,7 +1672,7 @@ exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 1
</div>
`;
exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 2`] = `[]`;
exports[`renders components/tooltip/demo/disabled-children.tsx extend context correctly 2`] = `[]`;
exports[`renders components/tooltip/demo/placement.tsx extend context correctly 1`] = `
<div

26
components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -533,6 +533,32 @@ exports[`renders components/tooltip/demo/destroy-tooltip-on-hide.tsx correctly 1
`;
exports[`renders components/tooltip/demo/disabled.tsx correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Enable
</span>
</button>
</div>
<div
class="ant-space-item"
>
<span>
Tooltip will show on mouse enter.
</span>
</div>
</div>
`;
exports[`renders components/tooltip/demo/disabled-children.tsx correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>

7
components/tooltip/demo/disabled-children.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
Disabled 子元素。
## en-US
Disabled wrapper.

28
components/tooltip/demo/disabled-children.tsx Normal file
View File

@ -0,0 +1,28 @@
import React from 'react';
import { Button, Checkbox, Input, Select, Space, Tooltip, InputNumber } from 'antd';
const WrapperTooltip: React.FC<{ children?: React.ReactNode }> = (props) => (
<Tooltip title="Thanks for using antd. Have a nice day!" {...props} />
);
const App: React.FC = () => (
<Space>
<WrapperTooltip>
<Button disabled>Disabled</Button>
</WrapperTooltip>
<WrapperTooltip>
<Input disabled placeholder="disabled" />
</WrapperTooltip>
<WrapperTooltip>
<InputNumber disabled />
</WrapperTooltip>
<WrapperTooltip>
<Checkbox disabled />
</WrapperTooltip>
<WrapperTooltip>
<Select disabled />
</WrapperTooltip>
</Space>
);
export default App;

4
components/tooltip/demo/disabled.md
View File

@ -1,7 +1,7 @@
## zh-CN
Disabled 子元素。
通过设置 `title=""` 可以禁用 Tooltip。
## en-US
Disabled wrapper.
The Tooltip can be disabled by setting `title=""`.

37
components/tooltip/demo/disabled.tsx
View File

@ -1,28 +1,17 @@
import React from 'react';
import { Button, Checkbox, Input, Select, Space, Tooltip, InputNumber } from 'antd';
import React, { useState } from 'react';
import { Space, Button, Tooltip } from 'antd';
const WrapperTooltip: React.FC<{ children?: React.ReactNode }> = (props) => (
<Tooltip title="Thanks for using antd. Have a nice day!" {...props} />
);
const App: React.FC = () => {
const [disabled, setDisabled] = useState(true);
const App: React.FC = () => (
<Space>
<WrapperTooltip>
<Button disabled>Disabled</Button>
</WrapperTooltip>
<WrapperTooltip>
<Input disabled placeholder="disabled" />
</WrapperTooltip>
<WrapperTooltip>
<InputNumber disabled />
</WrapperTooltip>
<WrapperTooltip>
<Checkbox disabled />
</WrapperTooltip>
<WrapperTooltip>
<Select disabled />
</WrapperTooltip>
</Space>
);
return (
<Space>
<Button onClick={() => setDisabled(!disabled)}>{disabled ? 'Enable' : 'Disable'}</Button>
<Tooltip title={disabled ? '' : 'prompt text'}>
<span>Tooltip will show on mouse enter.</span>
</Tooltip>
</Space>
);
};
export default App;

3
components/tooltip/index.en-US.md
View File

@ -27,7 +27,8 @@ A simple text popup tip.
<code src="./demo/colorful.tsx">Colorful Tooltip</code>
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
<code src="./demo/debug.tsx" debug>Debug</code>
<code src="./demo/disabled.tsx" debug>Disabled</code>
<code src="./demo/disabled.tsx">Disabled</code>
<code src="./demo/disabled-children.tsx" debug>Disabled children</code>
## API

3
components/tooltip/index.zh-CN.md
View File

@ -29,7 +29,8 @@ demo:
<code src="./demo/colorful.tsx">多彩文字提示</code>
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
<code src="./demo/debug.tsx" debug>Debug</code>
<code src="./demo/disabled.tsx" debug>禁用</code>
<code src="./demo/disabled.tsx">禁用</code>
<code src="./demo/disabled-children.tsx" debug>禁用子元素</code>
## API