arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-28 02:40:35 +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> </script>
<template> <template>
<UCarousel :items="items" :ui="{ item: 'w-full' }"> <UCarousel v-slot="{ item, index }" :items="items" :ui="{ item: 'w-full' }">
<template #default="{ item, index }"> <div class="text-center mx-auto">
<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">
<img :src="item.avatar.src" :alt="item.name" class="rounded-full w-48 h-48 mb-2" draggable="false">
<p class="font-semibold"> <p class="font-semibold">
{{ index + 1 }}. {{ item.name }} {{ index + 1 }}. {{ item.name }}
</p> </p>
</div> </div>
</template>
</UCarousel> </UCarousel>
</template> </template>

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

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

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

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