- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
A popup component for guiding users through a product. Available 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 |
| 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.
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.
