Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add more examples for spacing, size and options

Browse Source
This commit is contained in:
wasimTQ 2023-12-29 17:54:18 +05:30
parent 963217bfa4
commit 9f860844a0
6 changed files with 257 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/www/__registry__/index.ts
View File

@ -198,6 +198,20 @@ export const Index = {
component: () => import('../src/lib/registry/default/example/CarouselOrientation.vue').then(m => m.default), component: () => import('../src/lib/registry/default/example/CarouselOrientation.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/CarouselOrientation.vue'], 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: { CheckboxDemo: {
name: 'CheckboxDemo', name: 'CheckboxDemo',
type: 'components:example', type: 'components:example',
@ -1005,6 +1019,20 @@ export const Index = {
component: () => import('../src/lib/registry/new-york/example/CarouselOrientation.vue').then(m => m.default), component: () => import('../src/lib/registry/new-york/example/CarouselOrientation.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/CarouselOrientation.vue'], 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: { CheckboxDemo: {
name: 'CheckboxDemo', name: 'CheckboxDemo',
type: 'components:example', type: 'components:example',

113
apps/www/src/content/docs/components/carousel.md
View File

@ -59,3 +59,116 @@ Use the `orientation` prop to set the orientation of the carousel.
... ...
</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
View 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>

29
apps/www/src/lib/registry/default/example/CarouselSpacing.vue Normal file
View 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-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
View 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>

29
apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue Normal file
View 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-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>