---
category: Components
subtitle: 漫游式引导
group: 数据展示
title: Tour
cover: https://gw.alipayobjects.com/zos/bmw-prod/cc3fcbfa-bf5b-4c8c-8a3d-c3f8388c75e8.svg
demo:
  cols: 2
---

用于分步引导用户了解产品功能的气泡组件。自 `5.0.0` 版本开始提供该组件。

## 何时使用

常用于引导用户了解产品功能。

## 代码演示

<code src="./demo/basic.tsx">基本</code>
<code src="./demo/non-modal.tsx">非模态</code>
<code src="./demo/placement.tsx">位置</code>
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>

## API

### Tour

| 属性      | 说明                                     | 类型                                                                                                                          | 默认值    | 版本 |
| --------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------- | ---- |
| arrow     | 是否显示箭头，包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}`                                                                                      | `true`    |      |
| placement | 引导卡片相对于目标元素的位置             | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom`  |      |
| onClose   | 关闭引导时的回调函数                     | `Function`                                                                                                                    | -         |      |
| onFinish  | 引导完成时的回调                         | `Function`                                                                                                                    | -         |      |
| mask      | 是否启用蒙层                             | `boolean`                                                                                                                     | `true`    |      |
| type      | 类型，影响底色与文字颜色                 | `default` \| `primary`                                                                                                        | `default` |      |

### TourStep 引导步骤卡片

| 属性            | 说明                                       | 类型                                                                                                                                   | 默认值    | 版本 |
| --------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | --------- | ---- |
| target          | 获取引导卡片指向的元素，为空时居中于屏幕   | `() => HTMLElement` \| `HTMLElement`                                                                                                   | -         |      |
| arrow           | 是否显示箭头，包含是否指向元素中心的配置   | `boolean` \| `{ pointAtCenter: boolean}`                                                                                               | `true`    |      |
| cover           | 展示的图片或者视频                         | `ReactNode`                                                                                                                            | -         |      |
| title           | 标题                                       | `ReactNode`                                                                                                                            | -         |      |
| description     | 主要描述部分                               | `ReactNode`                                                                                                                            | -         |      |
| placement       | 引导卡片相对于目标元素的位置               | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` |           |      |
| onClose         | 关闭引导时的回调函数                       | `Function`                                                                                                                             | -         |      |
| mask            | 是否启用蒙层，默认跟随 Tour 的 `mask` 属性 | `boolean`                                                                                                                              | `true`    |      |
| type            | 类型，影响底色与文字颜色                   | `default` \| `primary`                                                                                                                 | `default` |      |
| nextButtonProps | 下一步按钮的属性                           | `{ children: ReactNode; onClick: Function }`                                                                                           | -         |      |
| prevButtonProps | 上一步按钮的属性                           | `{ children: ReactNode; onClick: Function }`                                                                                           | -         |      |