fix: prevent page zoom while tapping carousel buttons (#274)
* fix: prevent page zoom while tapping carousel buttons choose shadcn-ui icons and sizes for buttons * docs: fix carousel page responsive issues and ordering docs as shadcn-ui
This commit is contained in:
Sadegh Barati
GitHub
parent
72857b6a56
commit
c33acba4ff
|
|
@ -52,7 +52,7 @@ const { style } = useConfigStore()
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
:class="cn('preview flex min-h-[350px] w-full justify-center p-6 lg:p-10', {
|
:class="cn('preview flex min-h-[350px] w-full justify-center p-10 items-center', {
|
||||||
'items-center': align === 'center',
|
'items-center': align === 'center',
|
||||||
'items-start': align === 'start',
|
'items-start': align === 'start',
|
||||||
'items-end': align === 'end',
|
'items-end': align === 'end',
|
||||||
|
|
|
||||||
|
|
@ -48,18 +48,6 @@ import {
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
### Orientation
|
|
||||||
|
|
||||||
Use the `orientation` prop to set the orientation of the carousel.
|
|
||||||
|
|
||||||
<ComponentPreview name="CarouselOrientation" />
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<Carousel orientation="vertical | horizontal">
|
|
||||||
...
|
|
||||||
</Carousel>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Sizes
|
### Sizes
|
||||||
|
|
||||||
To set the size of the items, you can use the `basis` utility class on the `<CarouselItem />`.
|
To set the size of the items, you can use the `basis` utility class on the `<CarouselItem />`.
|
||||||
|
|
@ -151,6 +139,17 @@ Responsive
|
||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Orientation
|
||||||
|
|
||||||
|
Use the `orientation` prop to set the orientation of the carousel.
|
||||||
|
|
||||||
|
<ComponentPreview name="CarouselOrientation" />
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<Carousel orientation="vertical | horizontal">
|
||||||
|
...
|
||||||
|
</Carousel>
|
||||||
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
|
|
||||||
|
|
@ -280,4 +279,4 @@ import Autoplay from 'embla-carousel-autoplay'
|
||||||
|
|
||||||
<ComponentPreview name="CarouselPlugin" />
|
<ComponentPreview name="CarouselPlugin" />
|
||||||
|
|
||||||
See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.
|
See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.
|
||||||
|
|
|
||||||
|
|
@ -27,8 +27,8 @@ watchOnce(api, (api) => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col items-center space-x-2">
|
<div class="w-full sm:w-auto">
|
||||||
<Carousel class="w-full max-w-xs" @init-api="setApi">
|
<Carousel class="relative w-full max-w-xs" @init-api="setApi">
|
||||||
<CarouselContent>
|
<CarouselContent>
|
||||||
<CarouselItem v-for="(_, index) in 5" :key="index">
|
<CarouselItem v-for="(_, index) in 5" :key="index">
|
||||||
<div class="p-1">
|
<div class="p-1">
|
||||||
|
|
|
||||||
|
|
@ -4,21 +4,19 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex items-center space-x-2">
|
<Carousel class="relative w-full max-w-xs">
|
||||||
<Carousel class="w-full max-w-xs">
|
<CarouselContent>
|
||||||
<CarouselContent>
|
<CarouselItem v-for="(_, index) in 5" :key="index">
|
||||||
<CarouselItem v-for="(_, index) in 5" :key="index">
|
<div class="p-1">
|
||||||
<div class="p-1">
|
<Card>
|
||||||
<Card>
|
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
|
||||||
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</CarouselItem>
|
||||||
</CarouselItem>
|
</CarouselContent>
|
||||||
</CarouselContent>
|
<CarouselPrevious />
|
||||||
<CarouselPrevious />
|
<CarouselNext />
|
||||||
<CarouselNext />
|
</Carousel>
|
||||||
</Carousel>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -4,27 +4,25 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="w-1/2">
|
<Carousel
|
||||||
<Carousel
|
orientation="vertical"
|
||||||
orientation="vertical"
|
class="relative w-full max-w-xsw-full max-w-xs"
|
||||||
class="w-full max-w-xs"
|
:opts="{
|
||||||
:opts="{
|
align: 'start',
|
||||||
align: 'start',
|
}"
|
||||||
}"
|
>
|
||||||
>
|
<CarouselContent class="-mt-1 h-[200px]">
|
||||||
<CarouselContent class="-mt-1 h-[200px]">
|
<CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
|
||||||
<CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
|
<div class="p-1">
|
||||||
<div class="p-1">
|
<Card>
|
||||||
<Card>
|
<CardContent class="flex items-center justify-center p-6">
|
||||||
<CardContent class="flex items-center justify-center p-6">
|
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
|
||||||
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</CarouselItem>
|
||||||
</CarouselItem>
|
</CarouselContent>
|
||||||
</CarouselContent>
|
<CarouselPrevious />
|
||||||
<CarouselPrevious />
|
<CarouselNext />
|
||||||
<CarouselNext />
|
</Carousel>
|
||||||
</Carousel>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -11,26 +11,24 @@ const plugin = Autoplay({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex items-center space-x-2">
|
<Carousel
|
||||||
<Carousel
|
class="relative w-full max-w-xs"
|
||||||
class="w-full max-w-xs"
|
:plugins="[plugin]"
|
||||||
:plugins="[plugin]"
|
@mouseenter="plugin.stop"
|
||||||
@mouseenter="plugin.stop"
|
@mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
|
||||||
@mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
|
>
|
||||||
>
|
<CarouselContent>
|
||||||
<CarouselContent>
|
<CarouselItem v-for="(_, index) in 5" :key="index">
|
||||||
<CarouselItem v-for="(_, index) in 5" :key="index">
|
<div class="p-1">
|
||||||
<div class="p-1">
|
<Card>
|
||||||
<Card>
|
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
|
||||||
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</CarouselItem>
|
||||||
</CarouselItem>
|
</CarouselContent>
|
||||||
</CarouselContent>
|
<CarouselPrevious />
|
||||||
<CarouselPrevious />
|
<CarouselNext />
|
||||||
<CarouselNext />
|
</Carousel>
|
||||||
</Carousel>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex items-center space-x-2">
|
<Carousel
|
||||||
<Carousel
|
class="relative w-full max-w-sm"
|
||||||
class="w-full max-w-xs"
|
:opts="{
|
||||||
:opts="{
|
align: 'start',
|
||||||
align: 'start',
|
}"
|
||||||
}"
|
>
|
||||||
>
|
<CarouselContent>
|
||||||
<CarouselContent>
|
<CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
|
||||||
<CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
|
<div class="p-1">
|
||||||
<div class="p-1">
|
<Card>
|
||||||
<Card>
|
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
|
||||||
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</CarouselItem>
|
||||||
</CarouselItem>
|
</CarouselContent>
|
||||||
</CarouselContent>
|
<CarouselPrevious />
|
||||||
<CarouselPrevious />
|
<CarouselNext />
|
||||||
<CarouselNext />
|
</Carousel>
|
||||||
</Carousel>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex items-center space-x-2">
|
<Carousel
|
||||||
<Carousel
|
class="relative w-full max-w-sm"
|
||||||
class="w-full max-w-sm"
|
:opts="{
|
||||||
:opts="{
|
align: 'start',
|
||||||
align: 'start',
|
}"
|
||||||
}"
|
>
|
||||||
>
|
<CarouselContent class="-ml-1">
|
||||||
<CarouselContent class="-ml-1">
|
<CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||||
<CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
|
<div class="p-1">
|
||||||
<div class="p-1">
|
<Card>
|
||||||
<Card>
|
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
<span class="text-2xl font-semibold">{{ index + 1 }}</span>
|
||||||
<span class="text-2xl font-semibold">{{ index + 1 }}</span>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</CarouselItem>
|
||||||
</CarouselItem>
|
</CarouselContent>
|
||||||
</CarouselContent>
|
<CarouselPrevious />
|
||||||
<CarouselPrevious />
|
<CarouselNext />
|
||||||
<CarouselNext />
|
</Carousel>
|
||||||
</Carousel>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ChevronRight } from 'lucide-vue-next'
|
import { ArrowRight } from 'lucide-vue-next'
|
||||||
import { useCarousel } from './useCarousel'
|
import { useCarousel } from './useCarousel'
|
||||||
import type { WithClassAsProps } from './interface'
|
import type { WithClassAsProps } from './interface'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
@ -14,7 +14,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
|
||||||
<Button
|
<Button
|
||||||
:disabled="!canScrollNext"
|
:disabled="!canScrollNext"
|
||||||
:class="cn(
|
:class="cn(
|
||||||
'absolute h-10 w-10 rounded-full p-0',
|
'touch-manipulation absolute h-8 w-8 rounded-full p-0',
|
||||||
orientation === 'horizontal'
|
orientation === 'horizontal'
|
||||||
? '-right-12 top-1/2 -translate-y-1/2'
|
? '-right-12 top-1/2 -translate-y-1/2'
|
||||||
: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
|
: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
|
||||||
|
|
@ -24,7 +24,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
|
||||||
@click="scrollNext"
|
@click="scrollNext"
|
||||||
>
|
>
|
||||||
<slot>
|
<slot>
|
||||||
<ChevronRight class="h-4 w-4 text-current" />
|
<ArrowRight class="h-4 w-4 text-current" />
|
||||||
</slot>
|
</slot>
|
||||||
</Button>
|
</Button>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ChevronLeft } from 'lucide-vue-next'
|
import { ArrowLeft } from 'lucide-vue-next'
|
||||||
import { useCarousel } from './useCarousel'
|
import { useCarousel } from './useCarousel'
|
||||||
import type { WithClassAsProps } from './interface'
|
import type { WithClassAsProps } from './interface'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
@ -14,7 +14,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
|
||||||
<Button
|
<Button
|
||||||
:disabled="!canScrollPrev"
|
:disabled="!canScrollPrev"
|
||||||
:class="cn(
|
:class="cn(
|
||||||
'absolute h-10 w-10 rounded-full p-0',
|
'touch-manipulation absolute h-8 w-8 rounded-full p-0',
|
||||||
orientation === 'horizontal'
|
orientation === 'horizontal'
|
||||||
? '-left-12 top-1/2 -translate-y-1/2'
|
? '-left-12 top-1/2 -translate-y-1/2'
|
||||||
: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
|
: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
|
||||||
|
|
@ -24,7 +24,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
|
||||||
@click="scrollPrev"
|
@click="scrollPrev"
|
||||||
>
|
>
|
||||||
<slot>
|
<slot>
|
||||||
<ChevronLeft class="h-4 w-4 text-current" />
|
<ArrowLeft class="h-4 w-4 text-current" />
|
||||||
</slot>
|
</slot>
|
||||||
</Button>
|
</Button>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -27,8 +27,8 @@ watchOnce(api, (api) => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col items-center space-x-2">
|
<div class="w-full sm:w-auto">
|
||||||
<Carousel class="w-full max-w-xs" @init-api="setApi">
|
<Carousel class="relative w-full max-w-xs" @init-api="setApi">
|
||||||
<CarouselContent>
|
<CarouselContent>
|
||||||
<CarouselItem v-for="(_, index) in 5" :key="index">
|
<CarouselItem v-for="(_, index) in 5" :key="index">
|
||||||
<div class="p-1">
|
<div class="p-1">
|
||||||
|
|
|
||||||
|
|
@ -4,21 +4,19 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex items-center space-x-2">
|
<Carousel class="relative w-full max-w-xs">
|
||||||
<Carousel class="w-full max-w-xs">
|
<CarouselContent>
|
||||||
<CarouselContent>
|
<CarouselItem v-for="(_, index) in 5" :key="index">
|
||||||
<CarouselItem v-for="(_, index) in 5" :key="index">
|
<div class="p-1">
|
||||||
<div class="p-1">
|
<Card>
|
||||||
<Card>
|
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
|
||||||
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</CarouselItem>
|
||||||
</CarouselItem>
|
</CarouselContent>
|
||||||
</CarouselContent>
|
<CarouselPrevious />
|
||||||
<CarouselPrevious />
|
<CarouselNext />
|
||||||
<CarouselNext />
|
</Carousel>
|
||||||
</Carousel>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -4,27 +4,25 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="w-1/2">
|
<Carousel
|
||||||
<Carousel
|
orientation="vertical"
|
||||||
orientation="vertical"
|
class="relative w-full max-w-xs"
|
||||||
class="w-full max-w-xs"
|
:opts="{
|
||||||
:opts="{
|
align: 'start',
|
||||||
align: 'start',
|
}"
|
||||||
}"
|
>
|
||||||
>
|
<CarouselContent class="-mt-1 h-[200px]">
|
||||||
<CarouselContent class="-mt-1 h-[200px]">
|
<CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
|
||||||
<CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
|
<div class="p-1">
|
||||||
<div class="p-1">
|
<Card>
|
||||||
<Card>
|
<CardContent class="flex items-center justify-center p-6">
|
||||||
<CardContent class="flex items-center justify-center p-6">
|
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
|
||||||
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</CarouselItem>
|
||||||
</CarouselItem>
|
</CarouselContent>
|
||||||
</CarouselContent>
|
<CarouselPrevious />
|
||||||
<CarouselPrevious />
|
<CarouselNext />
|
||||||
<CarouselNext />
|
</Carousel>
|
||||||
</Carousel>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -11,26 +11,24 @@ const plugin = Autoplay({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex items-center space-x-2">
|
<Carousel
|
||||||
<Carousel
|
class="relative w-full max-w-xs"
|
||||||
class="w-full max-w-xs"
|
:plugins="[plugin]"
|
||||||
:plugins="[plugin]"
|
@mouseenter="plugin.stop"
|
||||||
@mouseenter="plugin.stop"
|
@mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
|
||||||
@mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
|
>
|
||||||
>
|
<CarouselContent>
|
||||||
<CarouselContent>
|
<CarouselItem v-for="(_, index) in 5" :key="index">
|
||||||
<CarouselItem v-for="(_, index) in 5" :key="index">
|
<div class="p-1">
|
||||||
<div class="p-1">
|
<Card>
|
||||||
<Card>
|
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
|
||||||
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</CarouselItem>
|
||||||
</CarouselItem>
|
</CarouselContent>
|
||||||
</CarouselContent>
|
<CarouselPrevious />
|
||||||
<CarouselPrevious />
|
<CarouselNext />
|
||||||
<CarouselNext />
|
</Carousel>
|
||||||
</Carousel>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex items-center space-x-2">
|
<Carousel
|
||||||
<Carousel
|
class="relative w-full max-w-xs"
|
||||||
class="w-full max-w-xs"
|
:opts="{
|
||||||
:opts="{
|
align: 'start',
|
||||||
align: 'start',
|
}"
|
||||||
}"
|
>
|
||||||
>
|
<CarouselContent>
|
||||||
<CarouselContent>
|
<CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
|
||||||
<CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
|
<div class="p-1">
|
||||||
<div class="p-1">
|
<Card>
|
||||||
<Card>
|
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
|
||||||
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</CarouselItem>
|
||||||
</CarouselItem>
|
</CarouselContent>
|
||||||
</CarouselContent>
|
<CarouselPrevious />
|
||||||
<CarouselPrevious />
|
<CarouselNext />
|
||||||
<CarouselNext />
|
</Carousel>
|
||||||
</Carousel>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex items-center space-x-2">
|
<Carousel
|
||||||
<Carousel
|
class="w-full max-w-sm"
|
||||||
class="w-full max-w-sm"
|
:opts="{
|
||||||
:opts="{
|
align: 'start',
|
||||||
align: 'start',
|
}"
|
||||||
}"
|
>
|
||||||
>
|
<CarouselContent class="-ml-1">
|
||||||
<CarouselContent class="-ml-1">
|
<CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||||
<CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
|
<div class="p-1">
|
||||||
<div class="p-1">
|
<Card>
|
||||||
<Card>
|
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
<span class="text-2xl font-semibold">{{ index + 1 }}</span>
|
||||||
<span class="text-2xl font-semibold">{{ index + 1 }}</span>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</CarouselItem>
|
||||||
</CarouselItem>
|
</CarouselContent>
|
||||||
</CarouselContent>
|
<CarouselPrevious />
|
||||||
<CarouselPrevious />
|
<CarouselNext />
|
||||||
<CarouselNext />
|
</Carousel>
|
||||||
</Carousel>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ChevronRightIcon } from '@radix-icons/vue'
|
import { ArrowRightIcon } from '@radix-icons/vue'
|
||||||
import { useCarousel } from './useCarousel'
|
import { useCarousel } from './useCarousel'
|
||||||
import type { WithClassAsProps } from './interface'
|
import type { WithClassAsProps } from './interface'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
@ -14,7 +14,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
|
||||||
<Button
|
<Button
|
||||||
:disabled="!canScrollNext"
|
:disabled="!canScrollNext"
|
||||||
:class="cn(
|
:class="cn(
|
||||||
'absolute h-10 w-10 rounded-full p-0',
|
'touch-manipulation absolute h-8 w-8 rounded-full p-0',
|
||||||
orientation === 'horizontal'
|
orientation === 'horizontal'
|
||||||
? '-right-12 top-1/2 -translate-y-1/2'
|
? '-right-12 top-1/2 -translate-y-1/2'
|
||||||
: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
|
: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
|
||||||
|
|
@ -24,7 +24,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
|
||||||
@click="scrollNext"
|
@click="scrollNext"
|
||||||
>
|
>
|
||||||
<slot>
|
<slot>
|
||||||
<ChevronRightIcon class="h-4 w-4 text-current" />
|
<ArrowRightIcon class="h-4 w-4 text-current" />
|
||||||
</slot>
|
</slot>
|
||||||
</Button>
|
</Button>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ChevronLeftIcon } from '@radix-icons/vue'
|
import { ArrowLeftIcon } from '@radix-icons/vue'
|
||||||
import { useCarousel } from './useCarousel'
|
import { useCarousel } from './useCarousel'
|
||||||
import type { WithClassAsProps } from './interface'
|
import type { WithClassAsProps } from './interface'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
@ -14,7 +14,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
|
||||||
<Button
|
<Button
|
||||||
:disabled="!canScrollPrev"
|
:disabled="!canScrollPrev"
|
||||||
:class="cn(
|
:class="cn(
|
||||||
'absolute h-10 w-10 rounded-full p-0',
|
'touch-manipulation absolute h-8 w-8 rounded-full p-0',
|
||||||
orientation === 'horizontal'
|
orientation === 'horizontal'
|
||||||
? '-left-12 top-1/2 -translate-y-1/2'
|
? '-left-12 top-1/2 -translate-y-1/2'
|
||||||
: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
|
: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
|
||||||
|
|
@ -24,7 +24,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
|
||||||
@click="scrollPrev"
|
@click="scrollPrev"
|
||||||
>
|
>
|
||||||
<slot>
|
<slot>
|
||||||
<ChevronLeftIcon class="h-4 w-4 text-current" />
|
<ArrowLeftIcon class="h-4 w-4 text-current" />
|
||||||
</slot>
|
</slot>
|
||||||
</Button>
|
</Button>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user