Stepper

1<script setup lang="ts">2import { Button, InputText, Label, StackPanel, Step, StepList, StepPanel, StepPanels, Stepper } from '@vitral/vue';3import { ref } from 'vue';4 5const step = ref('1');6</script>7 8<template>9    <Stepper v-model:value="step" linear>10        <StepList aria-label="Checkout">11            <Step value="1">Cart</Step>12            <Step value="2">Shipping</Step>13            <Step value="3">Payment</Step>14        </StepList>15        <StepPanels>16            <StepPanel v-slot="{ activateCallback }" value="1">17                <p>Three items in your cart.</p>18                <Button label="Continue" icon="arrowRight" icon-pos="right" @click="activateCallback('2')" />19            </StepPanel>20            <StepPanel v-slot="{ activateCallback }" value="2">21                <StackPanel spacing="0.375rem" style="min-width: 16rem">22                    <Label for="stepper-address">Address</Label>23                    <InputText id="stepper-address" />24                </StackPanel>25                <div style="display: flex; gap: 0.5rem; margin-top: 1rem">26                    <Button label="Back" severity="secondary" @click="activateCallback('1')" />27                    <Button label="Continue" icon="arrowRight" icon-pos="right" @click="activateCallback('3')" />28                </div>29            </StepPanel>30            <StepPanel v-slot="{ activateCallback }" value="3">31                <p>Pay and finish.</p>32                <Button label="Back" severity="secondary" @click="activateCallback('2')" />33            </StepPanel>34        </StepPanels>35    </Stepper>36</template>

1<script setup lang="ts">2import { Step, StepItem, StepPanel, Stepper } from '@vitral/vue';3import { ref } from 'vue';4 5const vertical = ref('1');6</script>7 8<template>9    <Stepper v-model:value="vertical">10        <StepItem value="1">11            <Step>Create an account</Step>12            <StepPanel>Pick a name and a password.</StepPanel>13        </StepItem>14        <StepItem value="2">15            <Step>Invite your team</Step>16            <StepPanel>Send invitations by email.</StepPanel>17        </StepItem>18        <StepItem value="3">19            <Step>Start a project</Step>20            <StepPanel>Name it and choose a template.</StepPanel>21        </StepItem>22    </Stepper>23</template>