使用import { Tour } from 'antd'; |
文档贡献者
常用于引导用户了解产品功能。
通用属性参考：通用属性
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| arrow | 是否显示箭头，包含是否指向元素中心的配置 | boolean | { pointAtCenter: boolean} | true | |
| classNames | 用于自定义组件内部各语义化结构的 class，支持对象或函数 | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| closeIcon | 自定义关闭按钮 | React.ReactNode | true | 5.9.0 |
| disabledInteraction | 禁用高亮区域交互 | boolean | false | 5.13.0 |
| gap | 控制高亮区域的圆角边框和显示间距 | { offset?: number | [number, number]; radius?: number } | { offset?: 6 ; radius?: 2 } | 5.0.0 (数组类型的 offset: 5.9.0 ) |
| keyboard | 是否启用键盘快捷行为 | boolean | true | 6.2.0 |
| placement | 引导卡片相对于目标元素的位置 | center left leftTop leftBottom right rightTop rightBottom top topLeft topRight bottom bottomLeft bottomRight | bottom | |
| onClose | 关闭引导时的回调函数 | Function | - | |
| onFinish | 引导完成时的回调 | Function | - | |
| mask | 是否启用蒙层，也可传入配置改变蒙层样式和填充色 | boolean | { style?: React.CSSProperties; color?: string; } | true | |
| type | 类型，影响底色与文字颜色 | default | primary | default | |
| open | 打开引导 | boolean | - | |
| onChange | 步骤改变时的回调，current 为当前的步骤 | (current: number) => void | - | |
| current | 当前处于哪一步 | number | - | |
| scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数 | boolean | ScrollIntoViewOptions | true | 5.2.0 |
| styles | 用于自定义组件内部各语义化结构的行内 style，支持对象或函数 | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| indicatorsRender | 自定义指示器 | (current: number, total: number) => ReactNode | - | 5.2.0 |
| actionsRender | 自定义操作按钮 | (originNode: ReactNode, info: { current: number, total: number }) => ReactNode | - | 5.25.0 |
| zIndex | Tour 的层级 | number | 1001 | 5.3.0 |
| getPopupContainer | 设置 Tour 浮层的渲染节点，默认是 body | (node: HTMLElement) => HTMLElement | body | 5.12.0 |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| target | 获取引导卡片指向的元素，为空时居中于屏幕 | () => HTMLElement | HTMLElement | - | |
| arrow | 是否显示箭头，包含是否指向元素中心的配置 | boolean | { pointAtCenter: boolean} | true | |
| closeIcon | 自定义关闭按钮 | React.ReactNode | true | 5.9.0 |
| cover | 展示的图片或者视频 | ReactNode | - | |
| title | 标题 | ReactNode | - | |
| description | 主要描述部分 | ReactNode | - | |
| placement | 引导卡片相对于目标元素的位置 | center left leftTop leftBottom right rightTop rightBottom top topLeft topRight bottom bottomLeft bottomRight | bottom | |
| onClose | 关闭引导时的回调函数 | Function | - | |
| mask | 是否启用蒙层，也可传入配置改变蒙层样式和填充色，默认跟随 Tour 的 mask 属性 | boolean | { style?: React.CSSProperties; color?: string; } | true | |
| type | 类型，影响底色与文字颜色 | default | primary | default | |
| nextButtonProps | 下一步按钮的属性 | { children: ReactNode; onClick: Function } | - | |
| prevButtonProps | 上一步按钮的属性 | { children: ReactNode; onClick: Function } | - | |
| scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 scrollIntoViewOptions 属性 | boolean | ScrollIntoViewOptions | true | 5.2.0 |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| closeBtnSize | 关闭按钮尺寸 | number | 22 |
| primaryNextBtnHoverBg | Primary 模式下一步按钮悬浮背景色 | string | rgb(240,240,240) |
| primaryPrevBtnBg | Primary 模式上一步按钮背景色 | string | rgba(255,255,255,0.15) |
| zIndexPopup | 弹层 z-index | number | 1070 |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| colorBgElevated | 浮层容器背景色，在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如：模态框、弹出框、菜单等。 | string | #ffffff |
| colorBgTextActive | 控制文本在激活状态下的背景色。 | string | rgba(0,0,0,0.15) |
| colorBgTextHover | 控制文本在悬停状态下的背景色。 | string | rgba(0,0,0,0.06) |
| colorFill | 最深的填充色，用于拉开与二、三级填充色的区分度，目前只用在 Slider 的 hover 效果。 | string | rgba(0,0,0,0.15) |
| colorIcon | 控制弱操作图标的颜色，例如 allowClear 或 Alert 关闭按钮。 * | string | rgba(0,0,0,0.45) |
| colorIconHover | 控制弱操作图标在悬浮状态下的颜色，例如 allowClear 或 Alert 关闭按钮。 | string | rgba(0,0,0,0.88) |
| colorPrimary | 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义 | string | #1677ff |
| colorPrimaryBorder | 主色梯度下的描边用色，用在 Slider 等组件的描边上。 | string | #91caff |
| colorText | 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。 | string | rgba(0,0,0,0.88) |
| colorTextLightSolid | 控制带背景色的文本，例如 Primary Button 组件中的文本高亮颜色。 | string | #fff |
| colorWhite | 不随主题变化的纯白色 | string | #fff |
| borderRadius | 基础组件的圆角大小，例如按钮、输入框、卡片等 | number | 6 |
| borderRadiusLG | LG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。 | number | 8 |
| borderRadiusSM | SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角 | number | 4 |
| borderRadiusXS | XS号圆角，用于组件中的一些小圆角，如 Segmented 、Arrow 等一些内部圆角的组件样式中。 | number | 2 |
| boxShadowTertiary | 控制元素三级盒子阴影样式。 | string | 0 1px 2px 0 rgba(0,0,0,0.03), 0 1px 6px -1px rgba(0,0,0,0.02), 0 2px 4px 0 rgba(0,0,0,0.02) |
| fontFamily | Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。 | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。 | number | 14 |
| fontWeightStrong | 控制标题类组件（如 h1、h2、h3）或选中项的字体粗细。 | number | 600 |
| lineHeight | 文本行高 | number | 1.5714285714285714 |
| lineWidthFocus | 控制线条的宽度，当组件处于聚焦态时。 | number | 3 |
| marginXS | 控制元素外边距，小尺寸。 | number | 8 |
| motionDurationMid | 动效播放速度，中速。用于中型元素动画交互 | string | 0.2s |
| motionDurationSlow | 动效播放速度，慢速。用于大型元素如面板动画交互 | string | 0.3s |
| padding | 控制元素的内间距。 | number | 16 |
| paddingXS | 控制元素的特小内间距。 | number | 8 |
| sizePopupArrow | 组件箭头的尺寸 | number | 16 |