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"
|
"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",
|
"name": "checkbox",
|
||||||
"dependencies": [],
|
"dependencies": [],
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user