Tour
漫游式引导

用于分步引导用户了解产品功能的气泡组件。
使用import{ Tour }from"antd";
版本自 5.0.0 后支持

何时使用

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

代码演示

最简单的用法。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

改变引导相对于目标的位置,共有 12 种位置可供选择。当 target={null} 时引导将会展示在正中央。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

自定义指示器。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

使用 mask={false} 可以将引导变为非模态,同时为了强调引导本身,建议与 type="primary" 组合使用。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

自定义遮罩样式。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Radius:
offset:
Horizontal offset:
Vertical offset:

使用 gap 参数来控制高亮区域的边距和圆角。

  • 5.9.0 之前不支持单独设置两个方向上的边距和数组类型的 offset 参数。
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

Tour

属性说明类型默认值版本
arrow是否显示箭头,包含是否指向元素中心的配置boolean | { pointAtCenter: boolean}true
closeIcon自定义关闭按钮React.ReactNodetrue5.9.0
disabledInteraction禁用高亮区域交互booleanfalse5.13.0
gap控制高亮区域的圆角边框和显示间距{ offset?: number | [number, number]; radius?: number }{ offset?: 6 ; radius?: 2 }5.0.0 (数组类型的 offset: 5.9.0 )
placement引导卡片相对于目标元素的位置center left leftTop leftBottom right rightTop rightBottom top topLeft topRight bottom bottomLeft bottomRightbottom
onClose关闭引导时的回调函数Function-
onFinish引导完成时的回调Function-
mask是否启用蒙层,也可传入配置改变蒙层样式和填充色boolean | { style?: React.CSSProperties; color?: string; }true
type类型,影响底色与文字颜色default | primarydefault
open打开引导boolean-
onChange步骤改变时的回调,current 为当前的步骤(current: number) => void-
current当前处于哪一步number-
scrollIntoViewOptions是否支持当前元素滚动到视窗内,也可传入配置指定滚动视窗的相关参数boolean | ScrollIntoViewOptionstrue5.2.0
indicatorsRender自定义指示器(current: number, total: number) => ReactNode-5.2.0
zIndexTour 的层级number10015.3.0
getPopupContainer设置 Tour 浮层的渲染节点,默认是 body(node: HTMLElement) => HTMLElementbody5.12.0

TourStep 引导步骤卡片

属性说明类型默认值版本
target获取引导卡片指向的元素,为空时居中于屏幕() => HTMLElement | HTMLElement-
arrow是否显示箭头,包含是否指向元素中心的配置boolean | { pointAtCenter: boolean}true
closeIcon自定义关闭按钮React.ReactNodetrue5.9.0
cover展示的图片或者视频ReactNode-
title标题ReactNode-
description主要描述部分ReactNode-
placement引导卡片相对于目标元素的位置center left leftTop leftBottom right rightTop rightBottom top topLeft topRight bottom bottomLeft bottomRightbottom
onClose关闭引导时的回调函数Function-
mask是否启用蒙层,也可传入配置改变蒙层样式和填充色,默认跟随 Tour 的 mask 属性boolean | { style?: React.CSSProperties; color?: string; }true
type类型,影响底色与文字颜色default | primarydefault
nextButtonProps下一步按钮的属性{ children: ReactNode; onClick: Function }-
prevButtonProps上一步按钮的属性{ children: ReactNode; onClick: Function }-
scrollIntoViewOptions是否支持当前元素滚动到视窗内,也可传入配置指定滚动视窗的相关参数,默认跟随 Tour 的 scrollIntoViewOptions 属性boolean | ScrollIntoViewOptionstrue5.2.0

主题变量(Design Token)

组件 Token如何定制?

Token 名称描述类型默认值
closeBtnSize关闭按钮尺寸number22
primaryNextBtnHoverBgPrimary 模式下一步按钮悬浮背景色stringrgb(240,240,240)
primaryPrevBtnBgPrimary 模式上一步按钮背景色stringrgba(255,255,255,0.15)
zIndexPopup弹层 z-indexnumber1070

全局 Token如何定制?