arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-01 12:47:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(github): add playground job in module workflow (#4021)

Browse Source
This commit is contained in:
Benjamin Canac
2025-04-29 17:48:09 +02:00
committed by GitHub
parent 53f8b34bef
commit d7710795df
6 changed files with 126 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
playground/app/pages/components/carousel.vue
View File

@@ -28,7 +28,12 @@ const bind = computed(() => ({
dots: dots.value
}))
const items = Array.from({ length: 6 }).map((_, index) => index)
const items = Array.from({ length: 6 }).map((_, index) => ({
id: index,
title: `Item ${index + 1}`,
description: `Description for item ${index + 1}`,
src: `https://picsum.photos/640/640?v=${index}`
}))
</script>
<template>
@@ -60,23 +65,23 @@ const items = Array.from({ length: 6 }).map((_, index) => index)
</div>
<template v-if="classNames">
<UCarousel v-slot="{ index }" v-bind="bind" :items="items" :ui="{ item: 'basis-[70%] transition-opacity ease-in-out [&:not(.is-snapped)]:opacity-10', container: 'h-[352px]' }" class="w-full max-w-xl mx-auto">
<img :src="`https://picsum.photos/600/350?v=${index}`" class="rounded-lg">
<UCarousel v-slot="{ item }" v-bind="bind" :items="items" :ui="{ item: 'basis-[70%] transition-opacity ease-in-out [&:not(.is-snapped)]:opacity-10', container: 'h-[352px]' }" class="w-full max-w-xl mx-auto">
<img :src="item.src" class="rounded-lg">
</UCarousel>
</template>
<template v-else-if="autoHeight">
<UCarousel v-slot="{ index }" v-bind="bind" :items="items" :ui="{ container: 'transition-[height] duration-200' }" class="w-full max-w-md mx-auto">
<img :src="`https://picsum.photos/600/${index % 2 === 0 ? 350 : 450}?v=${index}`" :class="index % 2 === 0 ? 'h-[350px]' : 'h-[450px]'" class="rounded-lg">
<UCarousel v-slot="{ item }" v-bind="bind" :items="items" :ui="{ container: 'transition-[height] duration-200' }" class="w-full max-w-md mx-auto">
<img :src="item.src" class="rounded-lg">
</UCarousel>
</template>
<template v-else>
<UCarousel v-slot="{ index }" v-bind="bind" :items="items" class="w-[320px] mx-auto" :ui="{ container: 'h-[336px]' }">
<img :src="`https://picsum.photos/640/640?v=${index}`" class="rounded-lg">
<UCarousel v-slot="{ item }" v-bind="bind" :items="items" class="w-[320px] mx-auto" :ui="{ container: 'h-[336px]' }">
<img :src="item.src" class="rounded-lg">
</UCarousel>
<template v-if="orientation === 'horizontal'">
<UCarousel v-slot="{ index }" v-bind="bind" :items="items" :ui="{ item: 'basis-1/3' }" class="w-full max-w-xs mx-auto">
<img :src="`https://picsum.photos/320/320?v=${index}`" class="rounded-lg">
<UCarousel v-slot="{ item }" v-bind="bind" :items="items" :ui="{ item: 'basis-1/3' }" class="w-full max-w-xs mx-auto">
<img :src="item.src" class="rounded-lg">
</UCarousel>
</template>
</template>