Tour
Tour
A popup component for guiding users through a product.
Importimport{ Tour }from"antd"; |
Sourcecomponents/tour |
Versionsupported since 5.0.0 |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Importimport{ Tour }from"antd"; |
Sourcecomponents/tour |
Versionsupported since 5.0.0 |
Use when you want to guide users through a product.
Common props ref：Common props
| 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 | |
| closeIcon | Customize close icon | React.ReactNode | true | 5.9.0 |
| disabledInteraction | Disable interaction on highlighted area. | boolean | false | 5.13.0 |
| gap | Control the radius of the highlighted area and the offset between highlighted area and the element. | { offset?: number | [number, number]; radius?: number } | { offset?: 6 ; radius?: 2 } | 5.0.0 (array type offset: 5.9.0) |
| placement | Position of the guide card relative to the target element | center 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 |
| getPopupContainer | Set the rendering node of Tour floating layer | (node: HTMLElement) => HTMLElement | body | 5.12.0 |
| 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 | |
| closeIcon | Customize close icon | React.ReactNode | true | 5.9.0 |
| cover | Displayed pictures or videos | ReactNode | - | |
| title | title | ReactNode | - | |
| description | description | ReactNode | - | |
| placement | Position of the guide card relative to the target element | center 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 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| closeBtnSize | Close button size | number | 22 |
| primaryNextBtnHoverBg | Hover background color of next button in primary type | string | rgb(240, 240, 240) |
| primaryPrevBtnBg | Background color of previous button in primary type | string | rgba(255, 255, 255, 0.15) |
| zIndexPopup | Tour popup z-index | number | 1070 |
The most basic usage.
Change the placement of the guide relative to the target, there are 12 placements available. When target={null} the guide will show in the center.
Custom indicator.
Debug usage. Do not use in your production.
Use mask={false} to make Tour non-modal. At the meantime it is recommended to use with type="primary" to emphasize the guide itself.
Custom mask style.
Using gap to control the radius of highlight area and the offset between highlight area and the element.
offset with array type is not supported until 5.9.0.