From 9f860844a02cb27c40efc6dbebe7538e91731888 Mon Sep 17 00:00:00 2001 From: wasimTQ Date: Fri, 29 Dec 2023 17:54:18 +0530 Subject: [PATCH] feat: add more examples for spacing, size and options --- apps/www/__registry__/index.ts | 28 +++++ .../src/content/docs/components/carousel.md | 113 ++++++++++++++++++ .../registry/default/example/CarouselSize.vue | 29 +++++ .../default/example/CarouselSpacing.vue | 29 +++++ .../new-york/example/CarouselSize.vue | 29 +++++ .../new-york/example/CarouselSpacing.vue | 29 +++++ 6 files changed, 257 insertions(+) create mode 100644 apps/www/src/lib/registry/default/example/CarouselSize.vue create mode 100644 apps/www/src/lib/registry/default/example/CarouselSpacing.vue create mode 100644 apps/www/src/lib/registry/new-york/example/CarouselSize.vue create mode 100644 apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts index ae2bf373..e53557cb 100644 --- a/apps/www/__registry__/index.ts +++ b/apps/www/__registry__/index.ts @@ -198,6 +198,20 @@ export const Index = { component: () => import('../src/lib/registry/default/example/CarouselOrientation.vue').then(m => m.default), 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: { name: 'CheckboxDemo', type: 'components:example', @@ -1005,6 +1019,20 @@ export const Index = { component: () => import('../src/lib/registry/new-york/example/CarouselOrientation.vue').then(m => m.default), 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: { name: 'CheckboxDemo', type: 'components:example', diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md index 40ef113b..73bfdeaa 100644 --- a/apps/www/src/content/docs/components/carousel.md +++ b/apps/www/src/content/docs/components/carousel.md @@ -59,3 +59,116 @@ Use the `orientation` prop to set the orientation of the carousel. ... ``` + +### Sizes + +To set the size of the items, you can use the `basis` utility class on the ``. + + + + +Example + +```vue title="Example" showLineNumbers {4-6} +// 33% of the carousel width. + + + ... + ... + ... + + +``` + + +Responsive + +```vue title="Responsive" showLineNumbers {4-6} +// 50% on small screens and 33% on larger screens. + + + ... + ... + ... + + +``` + +### Spacing + +To set the spacing between the items, we use a `pl-[VALUE]` utility on the `` and a negative `-ml-[VALUE]` on the ``. + + + +**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. +

+You can always adjust this in your own project if you need to. + + + + + +Example + +```vue showLineNumbers /-ml-4/ /pl-4/ + +``` + +Responsive + +```vue showLineNumbers /-ml-2/ /pl-2/ /md:-ml-4/ /md:pl-4/ + +``` + + +## 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} + +``` \ No newline at end of file diff --git a/apps/www/src/lib/registry/default/example/CarouselSize.vue b/apps/www/src/lib/registry/default/example/CarouselSize.vue new file mode 100644 index 00000000..12726784 --- /dev/null +++ b/apps/www/src/lib/registry/default/example/CarouselSize.vue @@ -0,0 +1,29 @@ + + + diff --git a/apps/www/src/lib/registry/default/example/CarouselSpacing.vue b/apps/www/src/lib/registry/default/example/CarouselSpacing.vue new file mode 100644 index 00000000..6d8ee403 --- /dev/null +++ b/apps/www/src/lib/registry/default/example/CarouselSpacing.vue @@ -0,0 +1,29 @@ + + + diff --git a/apps/www/src/lib/registry/new-york/example/CarouselSize.vue b/apps/www/src/lib/registry/new-york/example/CarouselSize.vue new file mode 100644 index 00000000..59602774 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/example/CarouselSize.vue @@ -0,0 +1,29 @@ + + + diff --git a/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue b/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue new file mode 100644 index 00000000..d7675c99 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue @@ -0,0 +1,29 @@ + + +