feat: add the default carousel component to the docs

This commit is contained in:
wasimTQ 2023-12-29 15:13:10 +05:30
parent 38e8a8eaf0
commit 34ca4e34d8
2 changed files with 77 additions and 0 deletions

View File

@ -0,0 +1,61 @@
---
title: Carousel
description: A carousel with motion and swipe built using Embla.
source: apps/www/src/lib/registry/default/ui/carousel
primitive: https://www.embla-carousel.com/api
---
<ComponentPreview name="CarouselDemo" />
## About
The carousel component is built using the [Embla Carousel](https://www.embla-carousel.com/) library.
## Installation
```bash
npx shadcn-vue@latest add carousel
```
## Usage
```vue
<script setup lang="ts">
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from '@/components/ui/carousel'
</script>
<template>
<Carousel>
<CarouselContent>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</template>
```
## Examples
### Orientation
Use the `orientation` prop to set the orientation of the carousel.
<ComponentPreview name="CarouselOrientation" />
```vue
<Carousel orientation="vertical | horizontal">
...
</Carousel>
```

View File

@ -130,6 +130,22 @@
],
"type": "components:ui"
},
{
"name": "carousel",
"dependencies": [],
"registryDependencies": [
"utils"
],
"files": [
"ui/carousel/Carousel.vue",
"ui/carousel/CarouselContent.vue",
"ui/carousel/CarouselItem.vue",
"ui/carousel/CarouselNext.vue",
"ui/carousel/CarouselPrev.vue",
"ui/carousel/index.ts"
],
"type": "components:ui"
},
{
"name": "checkbox",
"dependencies": [],