0.0.4 • Published 5 years ago
react-introducer v0.0.4
react-introducer
主要用于新手引导
useage
import {Intro, getController} from 'react-introducer';
<Intro
tooltip={<div>不添加则显示默认</div>}
step={1} name="引导1">包裹需要引导的节点</Intro>
const controller = getController('引导1');
controller.start();api
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 用于处理引导的命名空间, 同一个页面可以添加多个不同name的Intro节点 | string | 'global' |
| step | 用于设置step的步骤, 最小值是1 | number | 必填 |
| tooltip | 用于显示提示框 | ReactNode | 默认Tooltip |
| placement | 提示框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom | string e.g:'top', 'left' | 'top' |
tooltipProps
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| step | 当前处于的步骤 | number | |
| count | 当前介绍总步骤 | number | |
| start | 开始介绍 | function() => void | |
| end | 结束介绍 | function() => void | |
| goToStep | 根据Intro实例跳转到指定介绍 | function(step: Intro) => void | |
| prevStep | 跳转到上一步 | function() => void | |
| nextStep | 跳转到下一步 | function() => void | |
| goToStepNumber | 根据step跳转到指定步骤 | function(step: number) => void | |