feat: add more examples for spacing, size and options
This commit is contained in:
wasimTQ
parent
963217bfa4
commit
9f860844a0
|
|
@ -198,6 +198,20 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/default/example/CarouselOrientation.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/CarouselOrientation.vue'],
|
||||
},
|
||||
CarouselSize: {
|
||||
name: 'CarouselSize',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['carousel', 'button'],
|
||||
component: () => import('../src/lib/registry/default/example/CarouselSize.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/CarouselSize.vue'],
|
||||
},
|
||||
CarouselSpacing: {
|
||||
name: 'CarouselSpacing',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['carousel', 'button'],
|
||||
component: () => import('../src/lib/registry/default/example/CarouselSpacing.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/CarouselSpacing.vue'],
|
||||
},
|
||||
CheckboxDemo: {
|
||||
name: 'CheckboxDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -1005,6 +1019,20 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/CarouselOrientation.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CarouselOrientation.vue'],
|
||||
},
|
||||
CarouselSize: {
|
||||
name: 'CarouselSize',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['carousel', 'button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/CarouselSize.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CarouselSize.vue'],
|
||||
},
|
||||
CarouselSpacing: {
|
||||
name: 'CarouselSpacing',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['carousel', 'button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/CarouselSpacing.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CarouselSpacing.vue'],
|
||||
},
|
||||
CheckboxDemo: {
|
||||
name: 'CheckboxDemo',
|
||||
type: 'components:example',
|
||||
|
|
|
|||
|
|
@ -59,3 +59,116 @@ Use the `orientation` prop to set the orientation of the carousel.
|
|||
...
|
||||
</Carousel>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
To set the size of the items, you can use the `basis` utility class on the `<CarouselItem />`.
|
||||
|
||||
<ComponentPreview name="CarouselSize" />
|
||||
|
||||
|
||||
Example
|
||||
|
||||
```vue title="Example" showLineNumbers {4-6}
|
||||
// 33% of the carousel width.
|
||||
<Carousel>
|
||||
<CarouselContent>
|
||||
<CarouselItem class="basis-1/3">...</CarouselItem>
|
||||
<CarouselItem class="basis-1/3">...</CarouselItem>
|
||||
<CarouselItem class="basis-1/3">...</CarouselItem>
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
```
|
||||
|
||||
|
||||
Responsive
|
||||
|
||||
```vue title="Responsive" showLineNumbers {4-6}
|
||||
// 50% on small screens and 33% on larger screens.
|
||||
<Carousel>
|
||||
<CarouselContent>
|
||||
<CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
|
||||
<CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
|
||||
<CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
```
|
||||
|
||||
### Spacing
|
||||
|
||||
To set the spacing between the items, we use a `pl-[VALUE]` utility on the `<CarouselItem />` and a negative `-ml-[VALUE]` on the `<CarouselContent />`.
|
||||
|
||||
<Callout class="mt-6">
|
||||
|
||||
**Why:** I tried to use the `gap` property or a `grid` layout on the `
|
||||
CarouselContent` but it required a lot of math and mental effort to get the
|
||||
spacing right. I found `pl-[VALUE]` and `-ml-[VALUE]` utilities much easier to
|
||||
use.
|
||||
<br/><br/>
|
||||
You can always adjust this in your own project if you need to.
|
||||
|
||||
</Callout>
|
||||
|
||||
<ComponentPreview name="CarouselSpacing" />
|
||||
|
||||
Example
|
||||
|
||||
```vue showLineNumbers /-ml-4/ /pl-4/
|
||||
<template>
|
||||
<Carousel>
|
||||
<CarouselContent class="-ml-4">
|
||||
<CarouselItem class="pl-4">
|
||||
...
|
||||
</CarouselItem>
|
||||
<CarouselItem class="pl-4">
|
||||
...
|
||||
</CarouselItem>
|
||||
<CarouselItem class="pl-4">
|
||||
...
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</template>
|
||||
```
|
||||
|
||||
Responsive
|
||||
|
||||
```vue showLineNumbers /-ml-2/ /pl-2/ /md:-ml-4/ /md:pl-4/
|
||||
<template>
|
||||
<Carousel>
|
||||
<CarouselContent class="-ml-2 md:-ml-4">
|
||||
<CarouselItem class="pl-2 md:pl-4">
|
||||
...
|
||||
</CarouselItem>
|
||||
<CarouselItem class="pl-2 md:pl-4">
|
||||
...
|
||||
</CarouselItem>
|
||||
<CarouselItem class="pl-2 md:pl-4">
|
||||
...
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
||||
## Options
|
||||
|
||||
You can pass options to the carousel using the `opts` prop. See the [Embla Carousel docs](https://www.embla-carousel.com/api/options/) for more information.
|
||||
|
||||
```vue showLineNumbers {3-6}
|
||||
<template>
|
||||
<Carousel
|
||||
:opts="{
|
||||
align: 'start',
|
||||
loop: true,
|
||||
}"
|
||||
>
|
||||
<CarouselContent>
|
||||
<CarouselItem>...</CarouselItem>
|
||||
<CarouselItem>...</CarouselItem>
|
||||
<CarouselItem>...</CarouselItem>
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</template>
|
||||
```
|
||||
29
apps/www/src/lib/registry/default/example/CarouselSize.vue
Normal file
29
apps/www/src/lib/registry/default/example/CarouselSize.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
|
||||
import { Card, CardContent } from '@/lib/registry/default/ui/card'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Carousel
|
||||
class="w-full max-w-xs"
|
||||
:opts="{
|
||||
align: 'start',
|
||||
}"
|
||||
>
|
||||
<CarouselContent>
|
||||
<CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
|
||||
<div class="p-1">
|
||||
<Card>
|
||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
|
||||
import { Card, CardContent } from '@/lib/registry/default/ui/card'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Carousel
|
||||
class="w-full max-w-sm"
|
||||
:opts="{
|
||||
align: 'start',
|
||||
}"
|
||||
>
|
||||
<CarouselContent class="-ml-1">
|
||||
<CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<div class="p-1">
|
||||
<Card>
|
||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||
<span class="text-2xl font-semibold">{{ index + 1 }}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
29
apps/www/src/lib/registry/new-york/example/CarouselSize.vue
Normal file
29
apps/www/src/lib/registry/new-york/example/CarouselSize.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
|
||||
import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Carousel
|
||||
class="w-full max-w-xs"
|
||||
:opts="{
|
||||
align: 'start',
|
||||
}"
|
||||
>
|
||||
<CarouselContent>
|
||||
<CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
|
||||
<div class="p-1">
|
||||
<Card>
|
||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
|
||||
import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Carousel
|
||||
class="w-full max-w-sm"
|
||||
:opts="{
|
||||
align: 'start',
|
||||
}"
|
||||
>
|
||||
<CarouselContent class="-ml-1">
|
||||
<CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<div class="p-1">
|
||||
<Card>
|
||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||
<span class="text-2xl font-semibold">{{ index + 1 }}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue
Block a user