帮助引导

此组件库包含视频引导、滑动引导、任务引导，帮助用户快速了解系统特征、产品特性、功能模块操作流程，降低用户操作成本，为用户留下一个良好印象。

安装

yarn add @uyun/pro

使用

import { Intro } from "@uyun/pro";

const { VideoIntro, TaskIntro, SlideIntro, IntroModal } = Intro;

示例

视频引导

系统级引导。建议外宣或新用户首次了解优云系统时使用。

滑动引导

产品级引导，一页页的功能介绍形式，向用户说明产品的相关功能特性。建议用户首次接触产品时使用。

任务引导

模块级引导，与页面任务强关联，顺序以操作的先后顺序或信息的主次程度来排列，前后之间可辅以动画。

属性

视频引导(Intro.VideoIntro)

字段	类型	描述
src	string	视频的 src 地址
visible	boolean	视频引导框是否可见
defaultVisible	boolean	视频引导框是否可见的默认值
onCancel	() => void	点击右上角叉的回调

滑动引导(Intro.SlideIntro)

字段	类型	描述	是否必填
steps	SlideIntroStep[]	数据	✅
visible	boolean	滑动引导框是否可见
ribbonSrc	string	滑动引导丝带图片的 src 地址
defaultVisible	boolean	滑动引导框是否可见的默认值
onCancel	() => void	点击右上角叉或跳过了解按钮的回调

SlideIntroStep

interface SlideIntroStep {
  /** 图片src地址 */
  imgSrc?: string;
  /** 描述 */
  desc?: string;
  /** 标题 */
  title?: string;
  /** 图片的alt信息 */
  imgAlt?: string;
  /** 下一步按钮文字 */
  nextLabel?: string;
  /** 上一步按钮文字 */
  prevLabel?: string;
  /** 跳过按钮文字 */
  skipLabel?: string;
  /** 完成按钮文字 */
  doneLabel?: string;
}

任务引导(Intro.TaskIntro)

字段	类型	描述	是否必填
initialStep	number	显示步骤时开始的步骤索引	✅
onExit	(stepIndex: number) => void	关闭任务引导的回掉函数	✅
steps	TaskIntroStep[]	所有任务引导的数据	✅
visible	boolean	任务引导是否可见
onBeforeExit	(stepIndex: number) => void	退出引导之前调用的回调
onStart	(stepIndex: number) => void	启用引导时调用的回调
onChange	(nextStepIndex: number, nextElement: ReactNode) => void	引导步骤更改时的回调
onBeforeChange	(nextStepIndex: number, nextElement: ReactNode) => void	引导步骤更改之前的回调。如果你想阻止过渡到下一步/上一步，你可以在这个回调中返回 false
onAfterChange	(nextStepIndex: number, nextElement: ReactNode) => void	引导步骤更改之后的回调
onPreventChange	(stepIndex: number) => void	如果通过在 onBeforeChange 中返回 false 来阻止转换到新步骤，则会调用回调。
onComplete	() => void	当所有步骤完成时调用回调
options	Object	任务引导的选项

TaskIntroStep

interface TaskIntroStep {
  /**
   * 用于引导的选择器
   */
  element?: string;
  /**
   * 引导提示内容
   */
  intro: string | React.ReactNode;
  /**
   * 引导提示的位置
   */
  position?: string;
  /**
   * 工具提示的 CSS 类
   */
  tooltipClass?: string;
  /**
   * helperLayer 的 CSS 类
   */
  highlightClass?: string;
}

IntroModalProps

引导框的配置

interface IntroModalProps {
  /** 任务引导框的是否显示 */
  visible?: boolean;
  /** 任务引导框的图片 */
  src?: string;
  /** 任务引导框的标题 */
  title?: string;
  /** 任务引导框的内容 */
  content?: string;
  /** 任务引导框的开始按钮 */
  startLabel?: string;
  /** 任务引导框的跳过按钮 */
  skipLabel?: string;
  /** 任务引导框的默认是否显示  */
  defaultVisible?: boolean;
  /** 任务引导框的取消回调事件 */
  onCancel?: () => void;
  /** 任务引导框的开始引导回掉事件 */
  onOk?: () => void;
}

Options

任务引导的配置

字段	描述	类型
`nextLabel`	下一步按钮的标签。	String
`prevLabel`	上一步按钮的标签。	String
`skipLabel`	跳过按钮的标签。	String
`doneLabel`	完成按钮的标签。	String

更多的属性可参考intro.js-react

Current Tags

1.0.1-dev.0 ... dev (3 years ago)
1.0.2 ... latest (3 years ago)

13 Versions

1.0.2 ... 3 years ago
1.0.1 ... 3 years ago
1.0.1-dev.0 ... 3 years ago
1.0.0 ... 3 years ago
0.2.2-dev.0 ... 3 years ago
0.2.2-alpha.5 ... 3 years ago
0.2.2-alpha.4 ... 3 years ago
0.2.2-alpha.3 ... 3 years ago
0.2.2-alpha.2 ... 3 years ago
0.2.2-alpha.1 ... 3 years ago
0.2.2-alpha.0 ... 3 years ago
0.2.1-alpha.0 ... 3 years ago
0.2.0 ... 3 years ago