ray-hints

dependencies

• Intro.js

usage

css

import 'intro.js/introjs.css';

module

import { TipSteps, TipHints } from 'ray-hints';

Steps demo

• Basic

const steps = [
  {
    element: '.selector1',
    intro: '步骤1',
    position: 'right',
    tooltipClass: 'myTooltipClass',
    highlightClass: 'myHighlightClass',
  },
  {
    element: '.selector2',
    intro: '步骤2',
  },
  {
    element: '.selector3',
    intro: '步骤3',
  },
];
 
<TipSteps
  enabled={stepsEnabled}
  steps={steps}
  initialStep={initialStep}
  onExit={this.onExit}
/>

• Dynamic elements

如果想使用Intro.js步骤与动态创建的元素，则必须更新与该步骤相关联的元素

使用 updateStepElement() API

onBeforeChange = nextStepIndex => {
  if (nextStepIndex === 4) {
    this.steps.updateStepElement(nextStepIndex);
  }
}
 
<TipSteps
  enabled={stepsEnabled}
  steps={steps}
  ref={steps => (this.steps = steps)}
/>

TipHints demo

const hints = [
  {
    element: '.selector1',
    hint: 'test 1',
    hintPosition: 'middle-middle',
  },
  {
    element: '.selector2',
    hint: 'test 2',
  },
];
 
<TipHints
  enabled={hintsEnabled}
  hints={hints}
/>
 
// use Instro instance
<TipHints
  enabled={hintsEnabled}
  steps={hints}
  ref={hints => (this.hints = hints)}
/>

Install

npm install ray-hints --save

Props

TipSteps props

param	type	default	description
enabled	Boolean	false	定义steps是否可见.
initialStep	Number	-	其实步骤.
steps	Step[]	-	所有的步骤.
onExit	Function: (stepIndex) => {}	null	退出时的回调. 注意：当使用内联Intro.js事件而不是prop enabled 取消步骤时，需要强制跟踪状态.
onBeforeExit	Function: (stepIndex) => {}	null	退出之前回调. 如果想要阻止退出，在回调中返回 false 即可 (since intro.js 0.2.7).
onStart	Function: (stepIndex) => {}	null	启用后回调.
onChange	Function: (nextStepIndex, nextElement) => {}	null	当前步骤改变时的回调.
onBeforeChange	Function: (nextStepIndex) => {}	null	当前步骤改变前的回调. 如果想要阻止上一个/下一个，返回 false 即可 (since intro.js 2.8.0).*
onAfterChange	Function: (nextStepIndex, nextElement) => {}	null	更改当前步骤后调用回调.
onPreventChange	Function: (stepIndex) => {}	null	在 onBeforeChange中返回false时，将阻止转换为新的步骤.
onComplete	Function	null	完成所有步骤后调用回调.
options	Object	{ hidePrev: true, hideNext: true }	Intro.js 配置参数.

Step

{
  element: String // 用于步骤的CSS选择器.
  intro: String // 提示文本.
  position: String // 提示显示位置.
  tooltipClass: String // 提示框样式名.
  highlightClass: String // 高亮浮层的样式名.
}

TipHints props

param	type	default	description
enabled	Boolean	false	TipHints是否可见.
hints	Hint[]	-	所有的 TipHints.
onClick	Function	-	点击 TipHints 时的回调.
onClose	Function	-	TipHints关闭时的回调.
options	Object	-	Intro.js 配置参数.

Hint

{
  element: String // hint 元素选择器，必填
  hint: String // hint提示内容，必填
  hintPosition: String // 提示框位置
  hintAnimation: Boolean // 是否启用动画
}

Intro.js-options

Intro.js documentation

Intro.js options

Intro.js code.

default options _utils/defaultProps.js file.

param	type	description
nextLabel	String	下一个 标签内容.
prevLabel	String	上一个 标签内容.
skipLabel	String	跳过 标签内容.
doneLabel	String	完成 标签内容.
hidePrev	Boolean	隐藏第一步中的 上一个 按钮.
hideNext	Boolean	隐藏最后一步中的 下一个 按钮.
tooltipPosition	String	提示框位置，可选值 top,right,bottom,left,'bottom-left-aligned','bottom-middle-aligned','bottom-right-aligned',auto.
tooltipClass	String	提示框样式名.
highlightClass	String	高亮浮层的样式名.
exitOnEsc	Boolean	按键ESC是否退出.
exitOnOverlayClick	Boolean	点击浮层是是否退出.
showStepNumbers	Boolean	在红色圆圈中显示步骤编号.
keyboardNavigation	Boolean	允许使用键盘跳转各个步骤.
showButtons	Boolean	显示导航按钮.
showBullets	Boolean	显示弹头.
showProgress	Boolean	显示进度指示器.
scrollToElement	Boolean	是否启用自动滚动到在视窗之外的元素.
scrollTo	Element	滚动到指定的元素，当scrollToElement为 true 时应用.
scrollPadding	Number	当scrollToElement为 true 时，自动填充的padding值，默认30px
overlayOpacity	Number	浮层透明度.
disableInteraction	Boolean	禁用突出显示元素的内部交互.

hint-options

param	type	description
hintPosition	String	hint位置，可选值为 'top-middle','top-left','top-right','bottom-left','bottom-right','bottom-middle','middle-left','middle-right','middle-middle'.
hintButtonLabel	String	hint按钮白哦前.
hintAnimation	Boolean	是否启用hint动画.

License

MIT