test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-04 04:58:55 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity
ee3bd96f2d
ant-design/components/tour/index.zh-CN.md
afc163 e027cbec1c
docs: format all markdown (#38629) 
* chore: add prettier-ignore in markdown demo

* docs: format markdown api table

* docs: format markdown api table
2022-11-17 17:31:26 +08:00

2.4 KiB
Raw Blame History

category subtitle group title cover demo
Components 漫游式引导 数据展示 Tour https://gw.alipayobjects.com/zos/bmw-prod/cc3fcbfa-bf5b-4c8c-8a3d-c3f8388c75e8.svg
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 } -