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

docs(carousel): improve examples

Browse Source
This commit is contained in:
Benjamin Canac
2024-02-07 21:31:48 +01:00
parent b8936070f9
commit ee0a8f01af
3 changed files with 10 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/components/content/examples/CarouselExampleSlotsDefault.vue
View File

@@ -19,15 +19,13 @@ const items = [{
</script>
<template>
<UCarousel :items="items" :ui="{ item: 'w-full' }">
<template #default="{ item, index }">
<div class="text-center mx-auto">
<img :src="item.avatar.src" :alt="item.name" class="rounded-full w-48 h-48 mb-2" draggable="false">
<UCarousel v-slot="{ item, index }" :items="items" :ui="{ item: 'w-full' }">
<div class="text-center mx-auto">
<img :src="item.avatar.src" :alt="item.name" class="rounded-full w-48 h-48 mb-2" draggable="false">
<p class="font-semibold">
{{ index + 1 }}. {{ item.name }}
</p>
</div>
</template>
<p class="font-semibold">
{{ index + 1 }}. {{ item.name }}
</p>
</div>
</UCarousel>
</template>

4
docs/components/content/examples/CarouselExampleSlotsIndicator.vue
View File

@@ -26,8 +26,8 @@ const items = [
<img :src="item" class="w-full" draggable="false">
</template>
<template #indicator="{ onClick, index, active }">
<UButton :label="String(index)" :variant="active ? 'solid' : 'outline'" size="2xs" class="rounded-full min-w-6 justify-center" @click="onClick(index)" />
<template #indicator="{ onClick, page, active }">
<UButton :label="String(page)" :variant="active ? 'solid' : 'outline'" size="2xs" class="rounded-full min-w-6 justify-center" @click="onClick(page)" />
</template>
</UCarousel>
</template>

2
docs/components/content/examples/CarouselExampleSlotsPrevNext.vue
View File

@@ -30,7 +30,7 @@ const items = [
</template>
<template #next="{ onClick, disabled }">
<button :disabled="disabled" class="" @click="onClick">
<button :disabled="disabled" @click="onClick">
Next
</button>
</template>