Tour
Tour
Importimport { Tour } from 'antd'; |
 |
VOOZH | about |
|
VOOZH | about |
Use when you want to guide users through a product.
Common props ref：Common props
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | boolean | { pointAtCenter: boolean } | true | × | |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 | |
| closeIcon | Customize close icon | React.ReactNode | true | 5.9.0 | 5.14.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) | × |
| keyboard | Whether to enable keyboard shortcuts | boolean | true | 6.2.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 | - | × | |
| onFinish | Callback when the tour is finished | 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 | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
| indicatorsRender | custom indicator | (current: number, total: number) => ReactNode | - | 5.2.0 | × |
| actionsRender | custom action | (originNode: ReactNode, info: { current: number, total: number }) => ReactNode | - | 5.25.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 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgElevated | Container background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.g: modal, pop-up, menu, etc. | string | #ffffff |
| colorBgTextActive | Control the background color of text in active state. | string | rgba(0,0,0,0.15) |
| colorBgTextHover | Control the background color of text in hover state. | string | rgba(0,0,0,0.06) |
| colorFill | The darkest fill color is used to distinguish between the second and third level of fill color, and is currently only used in the hover effect of Slider. | string | rgba(0,0,0,0.15) |
| colorIcon | Weak action. Such as `allowClear` or Alert close button | string | rgba(0,0,0,0.45) |
| colorIconHover | Weak action hover color. Such as `allowClear` or Alert close button | string | rgba(0,0,0,0.88) |
| colorPrimary | Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. | string | #1677ff |
| colorPrimaryBorder | The stroke color under the main color gradient, used on the stroke of components such as Slider. | string | #91caff |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextLightSolid | Control the highlight color of text with background color, such as the text in Primary Button components. | string | #fff |
| colorWhite | Pure white color don't changed by theme | string | #fff |
| borderRadius | Border radius of base components | number | 6 |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| borderRadiusSM | SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size | number | 4 |
| borderRadiusXS | XS size border radius, used in some small border radius components, such as Segmented, Arrow and other components with small border radius. | number | 2 |
| boxShadowTertiary | Control the tertiary box shadow style of an element. | string | 0 1px 2px 0 rgba(0,0,0,0.05), 0 1px 6px -1px rgba(0,0,0,0.03), 0 2px 4px 0 rgba(0,0,0,0.03) |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontWeightStrong | Control the font weight of heading components (such as h1, h2, h3) or selected item. | number | 600 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineWidthFocus | Control the width of the line when the component is in focus state. | number | 3 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| padding | Control the padding of the element. | number | 16 |
| paddingXS | Control the extra small padding of the element. | number | 8 |
| sizePopupArrow | The size of the component arrow | number | 16 |
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.
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.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.
Custom action.
You can customize the semantic dom style of Tour by passing objects/functions through classNames and styles.