Files
ui/docs/app/components/content/examples/stepper/StepperCustomSlotExample.vue
Romain Hamel 6484d010a1 feat(Stepper): new component (#2733)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-12-05 12:20:45 +01:00

42 lines
838 B
Vue

<script setup lang="ts">
const items = [
{
slot: 'address',
title: 'Address',
description: 'Add your address here',
icon: 'i-lucide-house'
}, {
slot: 'shipping',
title: 'Shipping',
description: 'Set your preferred shipping method',
icon: 'i-lucide-truck'
}, {
slot: 'checkout',
title: 'Checkout',
description: 'Confirm your order'
}
]
</script>
<template>
<UStepper :items="items" class="w-full">
<template #address>
<Placeholder class="aspect-video">
Address
</Placeholder>
</template>
<template #shipping>
<Placeholder class="aspect-video">
Shipping
</Placeholder>
</template>
<template #checkout>
<Placeholder class="aspect-video">
Checkout
</Placeholder>
</template>
</UStepper>
</template>