2022-11-02 16:25:28 +08:00
|
|
|
|
---
|
|
|
|
|
category: Components
|
2022-11-09 12:28:04 +08:00
|
|
|
|
group: 数据展示
|
2022-11-02 16:25:28 +08:00
|
|
|
|
title: Tour
|
2024-03-22 14:22:42 +08:00
|
|
|
|
subtitle: 漫游式引导
|
|
|
|
|
description: 用于分步引导用户了解产品功能的气泡组件。
|
2024-01-29 14:50:36 +08:00
|
|
|
|
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NMvqRZpuJfQAAAAAAAAAAAAADrJ8AQ/original
|
|
|
|
|
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*D70qQJJmzhgAAAAAAAAAAAAADrJ8AQ/original
|
2022-11-09 12:28:04 +08:00
|
|
|
|
demo:
|
|
|
|
|
cols: 2
|
2024-04-02 14:05:03 +08:00
|
|
|
|
tag: 5.0.0
|
2022-11-02 16:25:28 +08:00
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 何时使用
|
|
|
|
|
|
|
|
|
|
常用于引导用户了解产品功能。
|
|
|
|
|
|
2022-11-09 12:28:04 +08:00
|
|
|
|
## 代码演示
|
|
|
|
|
|
2022-11-17 17:31:26 +08:00
|
|
|
|
<!-- prettier-ignore -->
|
2022-11-09 12:28:04 +08:00
|
|
|
|
<code src="./demo/basic.tsx">基本</code>
|
|
|
|
|
<code src="./demo/non-modal.tsx">非模态</code>
|
|
|
|
|
<code src="./demo/placement.tsx">位置</code>
|
2022-12-30 18:38:16 +08:00
|
|
|
|
<code src="./demo/mask.tsx">自定义遮罩样式</code>
|
2023-02-07 23:36:52 +08:00
|
|
|
|
<code src="./demo/indicator.tsx">自定义指示器</code>
|
2024-08-31 14:44:24 +08:00
|
|
|
|
<code src="./demo/gap.tsx">自定义高亮区域的样式</code>
|
2022-11-09 12:28:04 +08:00
|
|
|
|
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
|
|
|
|
|
2022-11-02 16:25:28 +08:00
|
|
|
|
## API
|
|
|
|
|
|
2023-08-08 18:27:48 +08:00
|
|
|
|
通用属性参考:[通用属性](/docs/react/common-props)
|
|
|
|
|
|
2022-11-02 16:25:28 +08:00
|
|
|
|
### Tour
|
|
|
|
|
|
2022-11-17 17:31:26 +08:00
|
|
|
|
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
|
|
|
| --- | --- | --- | --- | --- |
|
|
|
|
|
| arrow | 是否显示箭头,包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` | |
|
2023-08-21 17:02:31 +08:00
|
|
|
|
| closeIcon | 自定义关闭按钮 | `React.ReactNode` | `true` | 5.9.0 |
|
2023-12-07 14:29:38 +08:00
|
|
|
|
| disabledInteraction | 禁用高亮区域交互 | `boolean` | `false` | 5.13.0 |
|
2024-08-31 14:44:24 +08:00
|
|
|
|
| gap | 控制高亮区域的圆角边框和显示间距 | `{ offset?: number \| [number, number]; radius?: number }` | `{ offset?: 6 ; radius?: 2 }` | 5.0.0 (数组类型的 `offset`: 5.9.0 ) |
|
2023-07-24 11:42:18 +08:00
|
|
|
|
| placement | 引导卡片相对于目标元素的位置 | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | |
|
2022-11-17 17:31:26 +08:00
|
|
|
|
| onClose | 关闭引导时的回调函数 | `Function` | - | |
|
|
|
|
|
| onFinish | 引导完成时的回调 | `Function` | - | |
|
2022-12-30 18:38:16 +08:00
|
|
|
|
| mask | 是否启用蒙层,也可传入配置改变蒙层样式和填充色 | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` | |
|
2022-11-17 17:31:26 +08:00
|
|
|
|
| type | 类型,影响底色与文字颜色 | `default` \| `primary` | `default` | |
|
2022-11-23 00:02:21 +08:00
|
|
|
|
| open | 打开引导 | `boolean` | - | |
|
2023-03-08 10:44:57 +08:00
|
|
|
|
| onChange | 步骤改变时的回调,current 为当前的步骤 | `(current: number) => void` | - | |
|
2022-11-23 00:02:21 +08:00
|
|
|
|
| current | 当前处于哪一步 | `number` | - | |
|
2023-01-03 21:37:22 +08:00
|
|
|
|
| scrollIntoViewOptions | 是否支持当前元素滚动到视窗内,也可传入配置指定滚动视窗的相关参数 | `boolean \| ScrollIntoViewOptions` | `true` | 5.2.0 |
|
2023-02-07 23:36:52 +08:00
|
|
|
|
| indicatorsRender | 自定义指示器 | `(current: number, total: number) => ReactNode` | - | 5.2.0 |
|
2023-03-01 11:14:10 +08:00
|
|
|
|
| zIndex | Tour 的层级 | number | 1001 | 5.3.0 |
|
2023-11-09 14:50:01 +08:00
|
|
|
|
| getPopupContainer | 设置 Tour 浮层的渲染节点,默认是 body | `(node: HTMLElement) => HTMLElement` | body | 5.12.0 |
|
2022-11-02 16:25:28 +08:00
|
|
|
|
|
|
|
|
|
### TourStep 引导步骤卡片
|
|
|
|
|
|
2022-11-17 17:31:26 +08:00
|
|
|
|
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
|
|
|
| --- | --- | --- | --- | --- |
|
|
|
|
|
| target | 获取引导卡片指向的元素,为空时居中于屏幕 | `() => HTMLElement` \| `HTMLElement` | - | |
|
|
|
|
|
| arrow | 是否显示箭头,包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` | |
|
2023-08-21 17:02:31 +08:00
|
|
|
|
| closeIcon | 自定义关闭按钮 | `React.ReactNode` | `true` | 5.9.0 |
|
2022-11-17 17:31:26 +08:00
|
|
|
|
| cover | 展示的图片或者视频 | `ReactNode` | - | |
|
|
|
|
|
| title | 标题 | `ReactNode` | - | |
|
|
|
|
|
| description | 主要描述部分 | `ReactNode` | - | |
|
2023-07-24 11:42:18 +08:00
|
|
|
|
| placement | 引导卡片相对于目标元素的位置 | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` | | |
|
2022-11-17 17:31:26 +08:00
|
|
|
|
| onClose | 关闭引导时的回调函数 | `Function` | - | |
|
2022-12-30 18:38:16 +08:00
|
|
|
|
| mask | 是否启用蒙层,也可传入配置改变蒙层样式和填充色,默认跟随 Tour 的 `mask` 属性 | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` | |
|
2022-11-17 17:31:26 +08:00
|
|
|
|
| type | 类型,影响底色与文字颜色 | `default` \| `primary` | `default` | |
|
|
|
|
|
| nextButtonProps | 下一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - | |
|
|
|
|
|
| prevButtonProps | 上一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - | |
|
2023-01-03 21:37:22 +08:00
|
|
|
|
| scrollIntoViewOptions | 是否支持当前元素滚动到视窗内,也可传入配置指定滚动视窗的相关参数,默认跟随 Tour 的 `scrollIntoViewOptions` 属性 | `boolean \| ScrollIntoViewOptions` | `true` | 5.2.0 |
|
2023-04-11 10:25:24 +08:00
|
|
|
|
|
2023-08-30 23:02:35 +08:00
|
|
|
|
## 主题变量(Design Token)
|
2023-04-11 10:25:24 +08:00
|
|
|
|
|
|
|
|
|
<ComponentTokenTable component="Tour"></ComponentTokenTable>
|