$ cnpm install @uyun/pro-intro
此组件库包含视频引导、滑动引导、任务引导,帮助用户快速了解系统特征、产品特性、功能模块操作流程,降低用户操作成本,为用户留下一个良好印象。
yarn add @uyun/pro
import { Intro } from "@uyun/pro";
const { VideoIntro, TaskIntro, SlideIntro, IntroModal } = Intro;
系统级引导。建议外宣或新用户首次了解优云系统时使用。
<Example path="VideoIntroExample/index" />产品级引导,一页页的功能介绍形式,向用户说明产品的相关功能特性。建议用户首次接触产品时使用。
<Example path="SlideIntroExample/index" />模块级引导,与页面任务强关联,顺序以操作的先后顺序或信息的主次程度来排列,前后之间可辅以动画。
<Example path="TaskIntroExample/index" />字段 | 类型 | 描述 | 是否必填 |
---|---|---|---|
src | string | 视频的 src 地址 | |
visible | boolean | 视频引导框是否可见 | |
defaultVisible | boolean | 视频引导框是否可见的默认值 | |
onCancel | () => void | 点击右上角叉的回调 |
字段 | 类型 | 描述 | 是否必填 |
---|---|---|---|
steps | SlideIntroStep[] | 数据 | ✅ |
visible | boolean | 滑动引导框是否可见 | |
ribbonSrc | string | 滑动引导丝带图片的 src 地址 | |
defaultVisible | boolean | 滑动引导框是否可见的默认值 | |
onCancel | () => void | 点击右上角叉或跳过了解按钮的回调 |
interface SlideIntroStep {
/** 图片src地址 */
imgSrc?: string;
/** 描述 */
desc?: string;
/** 标题 */
title?: string;
/** 图片的alt信息 */
imgAlt?: string;
/** 下一步按钮文字 */
nextLabel?: string;
/** 上一步按钮文字 */
prevLabel?: string;
/** 跳过按钮文字 */
skipLabel?: string;
/** 完成按钮文字 */
doneLabel?: string;
}
字段 | 类型 | 描述 | 是否必填 |
---|---|---|---|
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 | 任务引导的选项 |
interface TaskIntroStep {
/**
* 用于引导的选择器
*/
element?: string;
/**
* 引导提示内容
*/
intro: string | React.ReactNode;
/**
* 引导提示的位置
*/
position?: string;
/**
* 工具提示的 CSS 类
*/
tooltipClass?: string;
/**
* helperLayer 的 CSS 类
*/
highlightClass?: string;
}
引导框的配置
interface IntroModalProps {
/** 任务引导框的是否显示 */
visible?: boolean;
/** 任务引导框的图片 */
src?: string;
/** 任务引导框的标题 */
title?: string;
/** 任务引导框的内容 */
content?: string;
/** 任务引导框的开始按钮 */
startLabel?: string;
/** 任务引导框的跳过按钮 */
skipLabel?: string;
/** 任务引导框的默认是否显示 */
defaultVisible?: boolean;
/** 任务引导框的取消回调事件 */
onCancel?: () => void;
/** 任务引导框的开始引导回掉事件 */
onOk?: () => void;
}
任务引导的配置
字段 | 描述 | 类型 |
---|---|---|
nextLabel |
下一步按钮的标签。 | String |
prevLabel |
上一步按钮的标签。 | String |
skipLabel |
跳过按钮的标签。 | String |
doneLabel |
完成按钮的标签。 | String |
更多的属性可参考intro.js-react
Copyright 2013 - present © cnpmjs.org