mt-step

A lightweight, highly customizable’s Vue component to help user step by step focus on the page.

image

๐Ÿš€ Features

  • โšก Lightweight: Bundle size <3kb when gzipped.
  • ๐Ÿงฉ Customizable: Configurable z-index to fit any project.
  • ๐Ÿ‘ Vue Component: Work for Vue 2 and Vue 3.
  • ๐Ÿงถ Highlighting multiple element: Support highlighting single or multiple element on a step.
  • ๐Ÿ”Œ Flexible: Support no hint, single hint, multiple hint on a step and single hint corresponds multiple highlight.
  • ๐Ÿฆพ Type Strong: Written in TypeScript.

๐ŸŽ Usage

<template>
  <MtStep>
    <MtStepItem
      :stepItem="[
        {
          selector: '#get-started',
          hint: { text: 'This is a hint', position: 'bottom' },
        },
      ]"
    />
  </MtStep>
</template>

<script setup lang="ts">
import 'mt-step/css'
import { MtStep, MtStepItem } from 'mt-step'
</script>

Refer to documentations for more details.

๐Ÿ“ฆ Install

yarn add mt-step

GitHub

View Github