Tour

Tour component is used to display product tour information.

Import

import { tour } from '@mekari/pixel3'

Playground

API

// Use tour function with steps and options parameter to show tour on your applications
tour(isStartTour, steps, options)

steps: [
  {
    target: '#tour-dashboard-1', // define target element, using web API document.querySelector() under the hood, if not defined Tour will render as intro.
    options: { // option object receive any valid Popper.js configuration
      placement: 'bottom' // placement of content, default to bottom
    },
    isHighlighted: true, // show highlighted target element
    highlightColor: 'pink', // variant of highlight color, available pink, blue and black
    isScrollIntoElement: true, // scrolling into target element, using web API scrollTo() under the hood
    offset: 0 // set top offset when scrolling into target element, default to 16
    render: (next, prev, close) => void // render of tour, return next, prev and close functions
  },
]

options: {
  id: 'tour', // id for MpTour
  stepIndex: 0, // represent index for first tour, default to 0
  isDisableScroll: false, // if true, disabled scrolling event in body
  isManual: true, // if true, handle MpTour event manually
  isDebug: true, // if true, show debug info in console
  next: nextFunction, // function for handle next action, return step index
  prev: prevFunction, // function for handle back action, return step index
  close: closeFunction, // function for handle back action, return step index
}

tour

Props

Name	Type	Default
isStartTour If true, tour will be start.	boolean	false
steps Steps of tour.	array	[]
options Options of tour.	string | object	{}