mt-step
A lightweight, highly customizable’s Vue component to help user step by step focus on the page.
๐ 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