mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-20 15:01:46 +01:00
feat(Carousel): new component (#927)
Co-authored-by: Michał Hanusek <m.hanusek@myfreak.pl> Co-authored-by: Inesh Bose <dev@inesh.xyz> Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Michał Hanusek
GitHub
16
docs/components/content/examples/CarouselExample.vue
Normal file
16
docs/components/content/examples/CarouselExample.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
const items = [
|
||||
'https://picsum.photos/600/800?random=1',
|
||||
'https://picsum.photos/600/800?random=2',
|
||||
'https://picsum.photos/600/800?random=3',
|
||||
'https://picsum.photos/600/800?random=4',
|
||||
'https://picsum.photos/600/800?random=5',
|
||||
'https://picsum.photos/600/800?random=6'
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCarousel v-slot="{ item }" :items="items">
|
||||
<img :src="item" width="300" height="400">
|
||||
</UCarousel>
|
||||
</template>
|
||||
16
docs/components/content/examples/CarouselExampleArrows.vue
Normal file
16
docs/components/content/examples/CarouselExampleArrows.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
const items = [
|
||||
'https://picsum.photos/1920/1080?random=1',
|
||||
'https://picsum.photos/1920/1080?random=2',
|
||||
'https://picsum.photos/1920/1080?random=3',
|
||||
'https://picsum.photos/1920/1080?random=4',
|
||||
'https://picsum.photos/1920/1080?random=5',
|
||||
'https://picsum.photos/1920/1080?random=6'
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="rounded-lg overflow-hidden" arrows>
|
||||
<img :src="item" class="w-full">
|
||||
</UCarousel>
|
||||
</template>
|
||||
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
const items = [
|
||||
'https://picsum.photos/600/800?random=1',
|
||||
'https://picsum.photos/600/800?random=2',
|
||||
'https://picsum.photos/600/800?random=3',
|
||||
'https://picsum.photos/600/800?random=4',
|
||||
'https://picsum.photos/600/800?random=5',
|
||||
'https://picsum.photos/600/800?random=6'
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCarousel
|
||||
v-slot="{ item }"
|
||||
:items="items"
|
||||
:ui="{
|
||||
item: 'basis-full',
|
||||
container: 'rounded-lg'
|
||||
}"
|
||||
:prev-button="{
|
||||
color: 'gray',
|
||||
icon: 'i-heroicons-arrow-left-20-solid',
|
||||
class: '-left-12'
|
||||
}"
|
||||
:next-button="{
|
||||
color: 'gray',
|
||||
icon: 'i-heroicons-arrow-right-20-solid',
|
||||
class: '-right-12'
|
||||
}"
|
||||
arrows
|
||||
class="w-64 mx-auto"
|
||||
>
|
||||
<img :src="item" class="w-full">
|
||||
</UCarousel>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
const items = [
|
||||
'https://picsum.photos/1920/1080?random=1',
|
||||
'https://picsum.photos/1920/1080?random=2',
|
||||
'https://picsum.photos/1920/1080?random=3',
|
||||
'https://picsum.photos/1920/1080?random=4',
|
||||
'https://picsum.photos/1920/1080?random=5',
|
||||
'https://picsum.photos/1920/1080?random=6'
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="rounded-lg overflow-hidden" indicators>
|
||||
<img :src="item" class="w-full">
|
||||
</UCarousel>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
const items = [
|
||||
'https://picsum.photos/600/600?random=1',
|
||||
'https://picsum.photos/600/600?random=2',
|
||||
'https://picsum.photos/600/600?random=3',
|
||||
'https://picsum.photos/600/600?random=4',
|
||||
'https://picsum.photos/600/600?random=5',
|
||||
'https://picsum.photos/600/600?random=6'
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full md:basis-1/2 lg:basis-1/3' }" indicators class="rounded-lg overflow-hidden">
|
||||
<img :src="item" class="w-full">
|
||||
</UCarousel>
|
||||
</template>
|
||||
16
docs/components/content/examples/CarouselExampleSize.vue
Normal file
16
docs/components/content/examples/CarouselExampleSize.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
const items = [
|
||||
'https://picsum.photos/600/600?random=1',
|
||||
'https://picsum.photos/600/600?random=2',
|
||||
'https://picsum.photos/600/600?random=3',
|
||||
'https://picsum.photos/600/600?random=4',
|
||||
'https://picsum.photos/600/600?random=5',
|
||||
'https://picsum.photos/600/600?random=6'
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full md:basis-1/2 lg:basis-1/3' }">
|
||||
<img :src="item" class="w-full">
|
||||
</UCarousel>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
const items = [
|
||||
'https://picsum.photos/600/800?random=1',
|
||||
'https://picsum.photos/600/800?random=2',
|
||||
'https://picsum.photos/600/800?random=3',
|
||||
'https://picsum.photos/600/800?random=4',
|
||||
'https://picsum.photos/600/800?random=5',
|
||||
'https://picsum.photos/600/800?random=6'
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="w-64 mx-auto rounded-lg overflow-hidden">
|
||||
<img :src="item" class="w-full">
|
||||
</UCarousel>
|
||||
</template>
|
||||
16
docs/components/content/examples/CarouselExampleSizeFull.vue
Normal file
16
docs/components/content/examples/CarouselExampleSizeFull.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
const items = [
|
||||
'https://picsum.photos/1920/1080?random=1',
|
||||
'https://picsum.photos/1920/1080?random=2',
|
||||
'https://picsum.photos/1920/1080?random=3',
|
||||
'https://picsum.photos/1920/1080?random=4',
|
||||
'https://picsum.photos/1920/1080?random=5',
|
||||
'https://picsum.photos/1920/1080?random=6'
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="rounded-lg overflow-hidden">
|
||||
<img :src="item" class="w-full">
|
||||
</UCarousel>
|
||||
</template>
|
||||
@@ -0,0 +1,33 @@
|
||||
<script setup lang="ts">
|
||||
const items = [{
|
||||
name: 'Sébastien Chopin',
|
||||
to: 'https://github.com/Atinux',
|
||||
avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/atinux' }
|
||||
}, {
|
||||
name: 'Pooya Parsa',
|
||||
to: 'https://github.com/pi0',
|
||||
avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/pi0' }
|
||||
}, {
|
||||
name: 'Daniel Roe',
|
||||
to: 'https://github.com/danielroe',
|
||||
avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/danielroe' }
|
||||
}, {
|
||||
name: 'Anthony Fu',
|
||||
to: 'https://github.com/antfu',
|
||||
avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/antfu' }
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCarousel :items="items" :ui="{ item: 'w-full' }">
|
||||
<template #default="{ item, index }">
|
||||
<div class="text-center mx-auto">
|
||||
<img :src="item.avatar.src" :alt="item.name" class="rounded-full w-48 h-48 mb-2">
|
||||
|
||||
<p class="font-semibold">
|
||||
{{ index + 1 }}. {{ item.name }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</UCarousel>
|
||||
</template>
|
||||
@@ -0,0 +1,33 @@
|
||||
<script setup lang="ts">
|
||||
const items = [
|
||||
'https://picsum.photos/600/800?random=1',
|
||||
'https://picsum.photos/600/800?random=2',
|
||||
'https://picsum.photos/600/800?random=3',
|
||||
'https://picsum.photos/600/800?random=4',
|
||||
'https://picsum.photos/600/800?random=5',
|
||||
'https://picsum.photos/600/800?random=6'
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCarousel
|
||||
:items="items"
|
||||
:ui="{
|
||||
item: 'basis-full',
|
||||
container: 'rounded-lg',
|
||||
indicators: {
|
||||
wrapper: 'relative bottom-0 mt-4'
|
||||
}
|
||||
}"
|
||||
indicators
|
||||
class="w-64 mx-auto"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<img :src="item" class="w-full">
|
||||
</template>
|
||||
|
||||
<template #indicator="{ onClick, index, active }">
|
||||
<UButton :label="index" :variant="active ? 'solid' : 'outline'" size="2xs" class="rounded-full min-w-6 justify-center" @click="onClick(index)" />
|
||||
</template>
|
||||
</UCarousel>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
const items = [
|
||||
'https://picsum.photos/600/800?random=1',
|
||||
'https://picsum.photos/600/800?random=2',
|
||||
'https://picsum.photos/600/800?random=3',
|
||||
'https://picsum.photos/600/800?random=4',
|
||||
'https://picsum.photos/600/800?random=5',
|
||||
'https://picsum.photos/600/800?random=6'
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCarousel
|
||||
:items="items"
|
||||
:ui="{
|
||||
item: 'basis-full',
|
||||
container: 'rounded-lg'
|
||||
}"
|
||||
arrows
|
||||
class="w-64 mx-auto"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<img :src="item" class="w-full">
|
||||
</template>
|
||||
|
||||
<template #prev="{ onClick, disabled }">
|
||||
<button :disabled="disabled" @click="onClick">
|
||||
Prev
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template #next="{ onClick, disabled }">
|
||||
<button :disabled="disabled" class="" @click="onClick">
|
||||
Next
|
||||
</button>
|
||||
</template>
|
||||
</UCarousel>
|
||||
</template>
|
||||
16
docs/components/content/examples/CarouselExampleSnapEnd.vue
Normal file
16
docs/components/content/examples/CarouselExampleSnapEnd.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
const items = [
|
||||
'https://picsum.photos/400/600?random=1',
|
||||
'https://picsum.photos/400/600?random=2',
|
||||
'https://picsum.photos/400/600?random=3',
|
||||
'https://picsum.photos/400/600?random=4',
|
||||
'https://picsum.photos/400/600?random=5',
|
||||
'https://picsum.photos/400/600?random=6'
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'snap-end' }">
|
||||
<img :src="item" width="200" height="300">
|
||||
</UCarousel>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
const items = [
|
||||
'https://picsum.photos/400/600?random=1',
|
||||
'https://picsum.photos/400/600?random=2',
|
||||
'https://picsum.photos/400/600?random=3',
|
||||
'https://picsum.photos/400/600?random=4',
|
||||
'https://picsum.photos/400/600?random=5',
|
||||
'https://picsum.photos/400/600?random=6'
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'snap-start' }">
|
||||
<img :src="item" width="200" height="300">
|
||||
</UCarousel>
|
||||
</template>
|
||||
@@ -122,7 +122,7 @@ export default defineAppConfig({
|
||||
|
||||
Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `app.config.ts` is smartly merged with the default config. This means you don't have to rewrite everything.
|
||||
|
||||
You can change this behaviour by setting `strategy` to `override` in your `app.config.ts`:
|
||||
You can change this behavior by setting `strategy` to `override` in your `app.config.ts`:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
@@ -175,7 +175,7 @@ To change the font of the `label`, you only need to write:
|
||||
|
||||
This will smartly replace the `font-medium` by `font-semibold` and prevent any class duplication and any class priority issue.
|
||||
|
||||
You can change this behaviour by setting `strategy` to `override` inside the `ui` prop:
|
||||
You can change this behavior by setting `strategy` to `override` inside the `ui` prop:
|
||||
|
||||
```vue
|
||||
<UButton
|
||||
|
||||
137
docs/content/2.elements/13.carousel.md
Normal file
137
docs/content/2.elements/13.carousel.md
Normal file
@@ -0,0 +1,137 @@
|
||||
---
|
||||
description: Display images or content in a scrollable area.
|
||||
links:
|
||||
- label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Carousel.vue
|
||||
navigation:
|
||||
badge: New
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Drag with your mouse, scroll with your mouse wheel or use the navigation arrows to navigate.
|
||||
|
||||
Pass an array to the `items` prop and use the default slot to display the content of each item.
|
||||
|
||||
:component-example{component="carousel-example"}
|
||||
|
||||
### Snap
|
||||
|
||||
The carousel will snap the item to the center (`snap-center`). You can use the `snap` utility classes to change this behavior using the `ui` prop:
|
||||
|
||||
#### Snap to start
|
||||
|
||||
::component-example
|
||||
---
|
||||
component: 'carousel-example-snap-start'
|
||||
---
|
||||
|
||||
#code
|
||||
```vue
|
||||
<template>
|
||||
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'snap-start' }">
|
||||
<img :src="item" width="200" height="300">
|
||||
</UCarousel>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
#### Snap to end
|
||||
|
||||
::component-example
|
||||
---
|
||||
component: 'carousel-example-snap-end'
|
||||
---
|
||||
|
||||
#code
|
||||
```vue
|
||||
<template>
|
||||
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'snap-end' }">
|
||||
<img :src="item" width="200" height="300">
|
||||
</UCarousel>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb" to="https://tailwindcss.com/docs/scroll-snap-align" target="_blank"}
|
||||
Learn more about the `scroll-snap-align` property on the Tailwind CSS documentation.
|
||||
::
|
||||
|
||||
### Size
|
||||
|
||||
Each item will take its own size by default in the carousel. You can use the `basis` / `width` utility classes to change this behavior using the `ui` prop:
|
||||
|
||||
:component-example{component="carousel-example-size"}
|
||||
|
||||
In this example, we used `basis-1/3` to display 3 items at a time but you can also use this to make the carousel full width using `basis-full` and display only one item at a time:
|
||||
|
||||
:component-example{component="carousel-example-size-full"}
|
||||
|
||||
You can also set a width on the container to center the carousel:
|
||||
|
||||
:component-example{component="carousel-example-size-center"}
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb" to="https://tailwindcss.com/docs/flex-basis" target="_blank"}
|
||||
Learn more about the `flex-basis` property on the Tailwind CSS documentation.
|
||||
::
|
||||
|
||||
## Navigation
|
||||
|
||||
### Arrows
|
||||
|
||||
Use the `arrows` prop to enable prev and next buttons, they will be automatically disabled when the carousel reaches the first or last item.
|
||||
|
||||
:component-example{component="carousel-example-arrows"}
|
||||
|
||||
You can also customize the prev and next buttons using the `prev-button` and `next-button` props:
|
||||
|
||||
:component-example{component="carousel-example-arrows-center"}
|
||||
|
||||
In this example, we move the buttons outside of the carousel container. You can also change this globally in `ui.carousel.default.prevButton` and `ui.carousel.default.nextButton`.
|
||||
|
||||
### Indicators
|
||||
|
||||
Use the `indicators` prop to display a list of buttons at the bottom of the carousel to navigate between items.
|
||||
|
||||
:component-example{component="carousel-example-indicators"}
|
||||
|
||||
The number of indicators will be automatically generated based on the number of items:
|
||||
|
||||
:component-example{component="carousel-example-indicators-size"}
|
||||
|
||||
## Slots
|
||||
|
||||
### `default`
|
||||
|
||||
You can put anything inside the default slot, not only images. You will have access to the `item` and `index` properties in the slot scope.
|
||||
|
||||
:component-example{component="carousel-example-slots-default"}
|
||||
|
||||
### `prev` / `next`
|
||||
|
||||
With the `arrows` prop enabled, use the `#prev` and `#next` slots to set the content of the previous and next buttons. You will have access to the `disabled` property and `on-click` method in the slot scope.
|
||||
|
||||
:component-example{component="carousel-example-slots-prev-next"}
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb"}
|
||||
You can customize the position of the buttons through `ui.arrows.wrapper`.
|
||||
::
|
||||
|
||||
### `indicator`
|
||||
|
||||
With the `indicators` prop enabled, use the `#indicator` slot to set the content of the indicators. You will have access to the `active`, `index` properties and `on-click` method in the slot scope.
|
||||
|
||||
:component-example{component="carousel-example-slots-indicator"}
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb"}
|
||||
You can customize the position of the buttons through `ui.indicators.wrapper`.
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Config
|
||||
|
||||
:component-preset
|
||||
Reference in New Issue
Block a user