arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Stepper): new component (#2733)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
2024-12-05 12:20:45 +01:00
committed by GitHub
parent d539109357
commit 6484d010a1
15 changed files with 2899 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
docs/app/components/content/examples/stepper/StepperContentSlotExample.vue Normal file
View File

@@ -0,0 +1,26 @@
<script setup lang="ts">
const items = [
{
title: 'Address',
description: 'Add your address here',
icon: 'i-lucide-house'
}, {
title: 'Shipping',
description: 'Set your preferred shipping method',
icon: 'i-lucide-truck'
}, {
title: 'Checkout',
description: 'Confirm your order'
}
]
</script>
<template>
<UStepper ref="stepper" :items="items" class="w-full">
<template #content="{ item }">
<Placeholder class="aspect-video">
This is the {{ item?.title }} step.
</Placeholder>
</template>
</UStepper>
</template>

41
docs/app/components/content/examples/stepper/StepperCustomSlotExample.vue Normal file
View File

@@ -0,0 +1,41 @@
<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>

37
docs/app/components/content/examples/stepper/StepperModelValueExample.vue Normal file
View File

@@ -0,0 +1,37 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
const items = [
{
title: 'Address',
description: 'Add your address here',
icon: 'i-lucide-house'
}, {
title: 'Shipping',
description: 'Set your preferred shipping method',
icon: 'i-lucide-truck'
}, {
title: 'Checkout',
description: 'Confirm your order'
}
]
const active = ref(0)
// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
setInterval(() => {
active.value = (active.value + 1) % items.length
}, 2000)
})
</script>
<template>
<UStepper v-model="active" :items="items" class="w-full">
<template #content="{ item }">
<Placeholder class="aspect-video">
This is the {{ item?.title }} step.
</Placeholder>
</template>
</UStepper>
</template>

51
docs/app/components/content/examples/stepper/StepperWithControlsExample.vue Normal file
View File

@@ -0,0 +1,51 @@
<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'
}
]
const stepper = useTemplateRef('stepper')
</script>
<template>
<div class="w-full">
<UStepper ref="stepper" :items="items">
<template #content="{ item }">
<Placeholder class="aspect-video">
{{ item.title }}
</Placeholder>
</template>
</UStepper>
<div class="flex gap-2 justify-between mt-4">
<UButton
leading-icon="i-lucide-arrow-left"
:disabled="!stepper?.hasPrev"
@click="stepper?.prev()"
>
Prev
</UButton>
<UButton
trailing-icon="i-lucide-arrow-right"
:disabled="!stepper?.hasNext"
@click="stepper?.next()"
>
Next
</UButton>
</div>
</div>
</template>