Single element

Single element without hint

Just use selector props highlight element without a hint, click below example's input to see results.

Code
<template>  <div class="single-element-without-hint">    <input      type="text"      id="text-input"      placeholder="input"      @focus="showStep = true"    />    <MtStep v-if="showStep" @close="showStep = false">      <MtStepItem        :stepItem="[          {            selector: '#text-input',          },        ]"      />    </MtStep>  </div></template><script setup lang="ts">import 'mt-step/css'import { MtStep, MtStepItem } from 'mt-step'import { ref } from 'vue'const showStep = ref(false)</script>

Single element with hint (one step)

Each MtStepItem mean a step, use one MtStepItem to show hint.

Code
<template>  <div class="single-example-with-hint-one-step">    <BaseButton @click="showStep = true" />    <MtStep v-if="showStep" @close="showStep = false">      <MtStepItem        :stepItem="[          {            selector: 'header',            hint: { text: 'This header', position: 'bottom' },          },        ]"      />    </MtStep>  </div></template><script setup lang="ts">import 'mt-step/css'import { MtStep, MtStepItem } from 'mt-step'import { ref } from 'vue'const showStep = ref(false)</script>

Single element with hint (multiple step)

Each MtStepItem mean a step, use multiple MtStepItem to show each step.

Code
<template><div class="single-example-with-hint-multiple-step">  <BaseButton @click="showStep = true" />  <ClientOnly>    <MtStep v-if="showStep" @close="showStep = false">      <MtStepItem        :stepItem="[          {            selector: '#single-element-with-hint-one-step',            hint: { text: 'This is title 1' },          },        ]"      />      <MtStepItem        :stepItem="[          {            selector: '#single-element-with-hint-multiple-step',            hint: { text: 'This is title 2' },          },        ]"      />    </MtStep>  </ClientOnly></div></template><script setup lang="ts">import 'mt-step/css'import { MtStep, MtStepItem } from 'mt-step'import { ref } from 'vue'const showStep = ref(false)</script>

Use two-way binding to do something before the next step.

Sometimes, we need to do something (Ajax, open modal, etc.) before the next step, can use two-way binding achieve. In example, we use setTimeout to simulation Ajax.

Code
<template>  <div class="single-example-with-hint-one-step">    <BaseButton @click="showStep = true" />    <MtStep      v-if="showStep"      :modelValue="index"      @update:modelValue="handleUpdateIndex"    >      <MtStepItem        :stepItem="[          {            selector: 'header',            hint: { text: 'Click overlay and wait 2sec', position: 'bottom' },          },        ]"      />    </MtStep>  </div></template><script setup lang="ts">import 'mt-step/css'import { MtStep, MtStepItem } from 'mt-step'import { ref } from 'vue'const showStep = ref(false)const index = ref(0)const handleUpdateIndex = async (newIndex: number) => {  // do something, like Ajax  await new Promise((resolve) => setTimeout(resolve, 2000))  // after ajax, update index  index.value = newIndex  // edge case. if last step, close step  if (index.value > 0) {    showStep.value = false    index.value = 0  }}</script>
Table of Contents