mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
44 lines
898 B
Vue
44 lines
898 B
Vue
<script setup lang="ts">
|
|
import type { StepperItem } from '@nuxt/ui'
|
|
|
|
const items: StepperItem[] = [
|
|
{
|
|
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>
|