feat: add the default carousel component to the docs
This commit is contained in:
parent
38e8a8eaf0
commit
34ca4e34d8
61
apps/www/src/content/docs/components/carousel.md
Normal file
61
apps/www/src/content/docs/components/carousel.md
Normal 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>
|
||||
```
|
||||
|
|
@ -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": [],
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user