mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 21:48:19 +08:00
cef58664e8
* ✨feat: add token * 📝doc: update lint * 📝doc: update doc
3.7 KiB
3.7 KiB
category | group | title | cover | coverDark | demo | ||
---|---|---|---|---|---|---|---|
Components | Data Display | Tour | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8CC_Tbe3_e4AAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6hQpM0XtEAAAAAAAAAAAAADrJ8AQ/original |
|
A popup component for guiding users through a product. Available since 5.0.0
.
When To Use
Use when you want to guide users through a product.
Examples
Basic
Non-modal
Placement
custom mask style
custom indicator
_InternalPanelDoNotUseOrYouWillBeFired
API
Tour
Property | Description | Type | Default | Version |
---|---|---|---|---|
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, 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 |
- | |
current | What is the current step | number |
- | |
scrollIntoViewOptions | support pass custom scrollIntoView options | boolean | ScrollIntoViewOptions |
true |
5.2.0 |
indicatorsRender | custom indicator | (current: number, total: number) => ReactNode |
- | 5.2.0 |
zIndex | Tour's zIndex | number | 1001 | 5.3.0 |
TourStep
Property | Description | Type | Default | Version |
---|---|---|---|---|
target | Get the element the guide card points to. Empty makes it show in center of screen | () => HTMLElement HTMLElement |
- | |
arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | boolean { pointAtCenter: boolean} |
true |
|
cover | Displayed pictures or videos | ReactNode |
- | |
title | title | ReactNode |
- | |
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, 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 } |
- | |
scrollIntoViewOptions | support pass custom scrollIntoView options, the default follows the scrollIntoViewOptions property of Tour |
boolean | ScrollIntoViewOptions |
true |
5.2.0 |