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