JSPM

react-introducer

0.0.4
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 2
    • Score
      100M100P100Q18619F
    • License MIT

    A React component to help you introduce your product.

    Package Exports

    • react-introducer

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-introducer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    react-introducer

    主要用于新手引导

    live demo

    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