mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 12:09:14 +08:00
feat: tour support custom mask style and fill color (#39919)
This commit is contained in:
kiner-tang(文辉)
GitHub
parent
4eff22497d
commit
78235623c4
@ -75,6 +75,81 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tour/demo/mask.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Begin Tour
|
||||
</span>
|
||||
</button>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
/>,
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Upload
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Save
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="ellipsis"
|
||||
class="anticon anticon-ellipsis"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="ellipsis"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tour/demo/non-modal.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
|
||||
@ -75,6 +75,81 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tour/demo/mask.tsx correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Begin Tour
|
||||
</span>
|
||||
</button>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
/>,
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Upload
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Save
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="ellipsis"
|
||||
class="anticon anticon-ellipsis"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="ellipsis"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tour/demo/non-modal.tsx correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
|
||||
7
components/tour/demo/mask.md
Normal file
7
components/tour/demo/mask.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
自定义遮罩样式。
|
||||
|
||||
## en-US
|
||||
|
||||
custom mask style.
|
||||
75
components/tour/demo/mask.tsx
Normal file
75
components/tour/demo/mask.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { Button, Divider, Space, Tour } from 'antd';
|
||||
import type { TourProps } from 'antd';
|
||||
import { EllipsisOutlined } from '@ant-design/icons';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const ref1 = useRef(null);
|
||||
const ref2 = useRef(null);
|
||||
const ref3 = useRef(null);
|
||||
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
|
||||
const steps: TourProps['steps'] = [
|
||||
{
|
||||
title: 'Upload File',
|
||||
description: 'Put your files here.',
|
||||
cover: (
|
||||
<img
|
||||
alt="tour.png"
|
||||
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
|
||||
/>
|
||||
),
|
||||
target: () => ref1.current,
|
||||
},
|
||||
{
|
||||
title: 'Save',
|
||||
description: 'Save your changes.',
|
||||
target: () => ref2.current,
|
||||
mask: {
|
||||
style: {
|
||||
boxShadow: 'inset 0 0 15px #fff',
|
||||
},
|
||||
color: 'rgba(40, 0, 255, .4)',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Other Actions',
|
||||
description: 'Click to see other actions.',
|
||||
target: () => ref3.current,
|
||||
mask: false,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button type="primary" onClick={() => setOpen(true)}>
|
||||
Begin Tour
|
||||
</Button>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Space>
|
||||
<Button ref={ref1}> Upload</Button>
|
||||
<Button ref={ref2} type="primary">
|
||||
Save
|
||||
</Button>
|
||||
<Button ref={ref3} icon={<EllipsisOutlined />} />
|
||||
</Space>
|
||||
|
||||
<Tour
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
steps={steps}
|
||||
mask={{
|
||||
style: {
|
||||
boxShadow: 'inset 0 0 15px #333',
|
||||
},
|
||||
color: 'rgba(80, 255, 255, .4)',
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -19,6 +19,7 @@ Use when you want to guide users through a product.
|
||||
<code src="./demo/basic.tsx">Basic</code>
|
||||
<code src="./demo/non-modal.tsx">Non-modal</code>
|
||||
<code src="./demo/placement.tsx">Placement</code>
|
||||
<code src="./demo/mask.tsx">custom mask style</code>
|
||||
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
|
||||
## API
|
||||
@ -30,7 +31,7 @@ Use when you want to guide users through a product.
|
||||
| arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | `boolean`\|`{ pointAtCenter: boolean}` | `true` | |
|
||||
| placement | Position of the guide card relative to the target element | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | |
|
||||
| onClose | Callback function on shutdown | `Function` | - | |
|
||||
| mask | Whether to enable masking | `boolean` | `true` | |
|
||||
| mask | Whether to enable masking, change mask style and fill color by pass custom props | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` | |
|
||||
| type | Type, affects the background color and text color | `default` `primary` | `default` | |
|
||||
| open | Open tour | `boolean` | - | |
|
||||
| onChange | Callback when the step changes. Current is the previous step | `(current: number) => void` | - | |
|
||||
@ -47,7 +48,7 @@ Use when you want to guide users through a product.
|
||||
| description | description | `ReactNode` | - | |
|
||||
| placement | Position of the guide card relative to the target element | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | |
|
||||
| onClose | Callback function on shutdown | `Function` | - | |
|
||||
| mask | Whether to enable masking, the default follows the `mask` property of Tour | `boolean` | `true` | |
|
||||
| mask | Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` | |
|
||||
| type | Type, affects the background color and text color | `default` `primary` | `default` | |
|
||||
| nextButtonProps | Properties of the Next button | `{ children: ReactNode; onClick: Function }` | - | |
|
||||
| prevButtonProps | Properties of the previous button | `{ children: ReactNode; onClick: Function }` | - | |
|
||||
|
||||
@ -20,6 +20,7 @@ demo:
|
||||
<code src="./demo/basic.tsx">基本</code>
|
||||
<code src="./demo/non-modal.tsx">非模态</code>
|
||||
<code src="./demo/placement.tsx">位置</code>
|
||||
<code src="./demo/mask.tsx">自定义遮罩样式</code>
|
||||
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
|
||||
## API
|
||||
@ -32,7 +33,7 @@ demo:
|
||||
| placement | 引导卡片相对于目标元素的位置 | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | |
|
||||
| onClose | 关闭引导时的回调函数 | `Function` | - | |
|
||||
| onFinish | 引导完成时的回调 | `Function` | - | |
|
||||
| mask | 是否启用蒙层 | `boolean` | `true` | |
|
||||
| mask | 是否启用蒙层，也可传入配置改变蒙层样式和填充色 | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` | |
|
||||
| type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` | |
|
||||
| open | 打开引导 | `boolean` | - | |
|
||||
| onChange | 步骤改变时的回调，current 为当前前的步骤 | `(current: number) => void` | - | |
|
||||
@ -49,7 +50,7 @@ demo:
|
||||
| description | 主要描述部分 | `ReactNode` | - | |
|
||||
| placement | 引导卡片相对于目标元素的位置 | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` | | |
|
||||
| onClose | 关闭引导时的回调函数 | `Function` | - | |
|
||||
| mask | 是否启用蒙层，默认跟随 Tour 的 `mask` 属性 | `boolean` | `true` | |
|
||||
| mask | 是否启用蒙层，也可传入配置改变蒙层样式和填充色，默认跟随 Tour 的 `mask` 属性 | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` | |
|
||||
| type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` | |
|
||||
| nextButtonProps | 下一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - | |
|
||||
| prevButtonProps | 上一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - | |
|
||||
|
||||
@ -113,7 +113,7 @@
|
||||
"@ant-design/react-slick": "~1.0.0",
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"@ctrl/tinycolor": "^3.4.0",
|
||||
"@rc-component/tour": "~1.1.0",
|
||||
"@rc-component/tour": "~1.3.0",
|
||||
"classnames": "^2.2.6",
|
||||
"copy-to-clipboard": "^3.2.0",
|
||||
"dayjs": "^1.11.1",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user