rc-stepguide 使用文档

rc-stepguide

这是一个实现步骤引导的react组件

旨在解决复杂应用中对特定的区域进行提示,可以通过节点自动跟踪提示目标,并拥有顺畅的过渡动画;

该组件从实现了步骤引导相关的逻辑跟业务代码解耦,不会对业务代码造成侵入式的破坏,只需要设置相关配置即可;

通过配置useEffect可以自定义被跟踪节点的active状态,比如本来隐藏着的目标在被引导的时候进行显示,详情可以查看demo中的SpecialScene;

package 地址

demo 地址

下载

使用npm下载rc-stepguide:

npm install --save rc-stepguide

使用yarn下载rc-stepguide:

yarn add rc-stepguide

Usage

import stepGuide from 'rc-stepguide';
import 'rc-stepguide/lib/index.css';

stepGuide(stepData, setting)

API

StepGuide

参数说明类型默认值
stepData步骤数据列表StepData-
setting设置项Setting-

StepData

参数说明类型默认值
elementdom 选择器string-
title标题ReactNode-
content内容ReactNode-
placement气泡框位置,可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottomstringrightTop
useEffect选中目标节点之后的一次拦截,可以针对目标节点进行一些自定义副作用操作function(next,dom, currentData)-

Setting

参数说明类型默认值
doneTextdone按钮文案ReactNode确定
nextTextnext按钮文案ReactNode下一步
showNext是否显示next按钮booleantrue
prevTextprev按钮文案ReactNode上一步
showPrev是否显示prev按钮booleanfalse
skipTextskip按钮文案ReactNode跳过
showSkip是否显示skip按钮booleantrue
mask是否显示遮罩booleantrue
onPrev点击上一步回调function(currentStep)-
onNext点击下一步回调function(currentStep)-
onOk点击确定回调function-
onSkip点击跳过回调function-
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值