--- 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` 版本开始提供该组件。 ## 何时使用 常用于引导用户了解产品功能。 ## 代码演示 基本 非模态 位置 \_InternalPanelDoNotUseOrYouWillBeFired ## 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 }` | - | |