Nmorph UI Kit

Guide Step

Shows how a guide step wraps a target element and provides fallback card content.

<script setup lang="ts">
import { ref } from "vue";
import {
  NmorphButton,
  NmorphCard,
  NmorphGuide,
  NmorphGuideStep,
} from "@nmorph/nmorph-ui-kit";

const guideOpen = ref(false);
</script>

<template>
  <div class="guide-step-basic-usage">
    <NmorphButton thickness="basic" @click="guideOpen = true">
      Show target step
    </NmorphButton>

    <NmorphGuide v-model="guideOpen" :show-progress="false" max-width="260px">
      <NmorphGuideStep
        name="target-card"
        title="Wrapped target"
        text="NmorphGuideStep registers this target and controls where the guide card appears."
        position="right"
      >
        <NmorphCard class="guide-step-basic-usage__target" :paper="3">
          Wrapped target
        </NmorphCard>
      </NmorphGuideStep>
    </NmorphGuide>
  </div>
</template>

Basic usage

NmorphGuideStep Api

Attributes

Slots

Resolution is not supported