Tour
Tour
A popup component for guiding users through a product.
가져오기import{ Tour }from"antd"; |
버전5.0.0 이후 지원됨 |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
가져오기import{ Tour }from"antd"; |
버전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 |
| 토큰 이름 | 설명 | 타입 | 기본값 |
|---|---|---|---|
| closeBtnSize | 关闭按钮尺寸 | number | 22 |
| primaryNextBtnHoverBg | Primary 模式下一步按钮悬浮背景色 | string | rgb(240, 240, 240) |
| primaryPrevBtnBg | Primary 模式上一步按钮背景色 | string | rgba(255, 255, 255, 0.15) |
| zIndexPopup | 弹层 z-index | number | 1070 |
