Tour 漫游式引导 v1.7.0

用于分步引导用户了解产品功能的气泡组件。用来引导用户并介绍产品

基础用法

打开引导

上传

保存

...

位置

改变引导相对于目标的位置，共有 12 种位置可供选择。

信息

placement：
top-start/top/top-end/right-start/right/right-end/bottom-start/bottom/bottom-end/left-start/left/left-end

打开引导

可用的 css 变量

点击展开

css

:host {
  --ivy-tour-width: 420px;
  --ivy-tour-padding-primary: 16px;
  --ivy-tour-font-line-height: var(--ivy-font-line-height-primary);
  --ivy-tour-title-font-size: 16px;
  --ivy-tour-title-text-color: var(--ivy-text-color-primary);
  --ivy-tour-title-font-weight: 400;
  --ivy-tour-font-size: 14px;
  --ivy-tour-color: var(--ivy-text-color-primary);
  --ivy-tour-bg-color: #ffffff;
  --ivy-tour-border-radius: var(--ivy-border-radius);
  --ivy-tour-border-color: var(--ivy-border-color-lighter);
}

Tour Props

参数	说明	类型	可选值	默认值
steps	内容	Array<Step>	-	-
placement	位置	String	`enum`	`top`

Step

参数	说明	类型	可选值	默认值
target	目标元素	string \| HTMLElement	-	-
title	标题	string	-	-
content	内容	string	-	-
allowHtml	内容可以是 html 字符串	string	-	-
placement	位置	String	`enum`	`top`

Tour Events

事件名称	说明	类型
change	引导步骤发生变化	`(index:number) => void`
close	关闭引导时的回调函数	`() => void`
finish	引导完成时的回调	`() => void`

Tour Methods

方法名	说明	类型
open	显示引导层	`() => void`

Tour 漫游式引导 v1.7.0 ​

基础用法 ​

位置 ​

可用的 css 变量 ​

Tour Props ​

Step ​

Tour Events ​

Tour Methods ​