Stepper
Basic usage
Shows controlled step navigation with a custom indicator slot.
DraftCollect the first version of the content.
ReviewMove through feedback without leaving the flow.
PublishConfirm the final state and ship the update.
<script setup lang="ts">
import { ref } from "vue";
import {
NmorphButton,
NmorphCard,
NmorphIconChevronLeft,
NmorphIconChevronRight,
NmorphStepper,
} from "@nmorph/nmorph-ui-kit";
const activeStep = ref(0);
const slides = [
{ title: "Draft", text: "Collect the first version of the content." },
{ title: "Review", text: "Move through feedback without leaving the flow." },
{ title: "Publish", text: "Confirm the final state and ship the update." },
];
</script><template>
<NmorphStepper
v-model="activeStep"
class="stepper-basic-usage"
:count="slides.length"
loop
>
<div
v-for="slide in slides"
:key="slide.title"
class="stepper-basic-usage__slide"
>
<NmorphCard class="stepper-basic-usage__card" shadow-type="outset" :paper="3">
<div class="stepper-basic-usage__card-content">
<strong>{{ slide.title }}</strong>
<span>{{ slide.text }}</span>
</div>
</NmorphCard>
</div>
<template #indicator="{ index, count, goTo, next, previous }">
<div class="stepper-basic-usage__indicator">
<NmorphButton
class="stepper-basic-usage__arrow"
design="plain"
thickness="thin"
title="Previous step"
@click="previous"
>
<template #icon-only>
<NmorphIconChevronLeft />
</template><template #icon-only>
<NmorphIconChevronRight />
</template>