docs: adding skeleton card example (#382)
This commit is contained in:
parent
edd713fd08
commit
3ec55ada1b
|
|
@ -619,6 +619,13 @@ export const Index = {
|
||||||
component: () => import("../src/lib/registry/default/example/SheetSideDemo.vue").then((m) => m.default),
|
component: () => import("../src/lib/registry/default/example/SheetSideDemo.vue").then((m) => m.default),
|
||||||
files: ["../src/lib/registry/default/example/SheetSideDemo.vue"],
|
files: ["../src/lib/registry/default/example/SheetSideDemo.vue"],
|
||||||
},
|
},
|
||||||
|
"SkeletonCard": {
|
||||||
|
name: "SkeletonCard",
|
||||||
|
type: "components:example",
|
||||||
|
registryDependencies: ["skeleton"],
|
||||||
|
component: () => import("../src/lib/registry/default/example/SkeletonCard.vue").then((m) => m.default),
|
||||||
|
files: ["../src/lib/registry/default/example/SkeletonCard.vue"],
|
||||||
|
},
|
||||||
"SkeletonDemo": {
|
"SkeletonDemo": {
|
||||||
name: "SkeletonDemo",
|
name: "SkeletonDemo",
|
||||||
type: "components:example",
|
type: "components:example",
|
||||||
|
|
@ -636,7 +643,7 @@ export const Index = {
|
||||||
"SliderForm": {
|
"SliderForm": {
|
||||||
name: "SliderForm",
|
name: "SliderForm",
|
||||||
type: "components:example",
|
type: "components:example",
|
||||||
registryDependencies: ["button","form","select","toast"],
|
registryDependencies: ["button","form","slider","toast"],
|
||||||
component: () => import("../src/lib/registry/default/example/SliderForm.vue").then((m) => m.default),
|
component: () => import("../src/lib/registry/default/example/SliderForm.vue").then((m) => m.default),
|
||||||
files: ["../src/lib/registry/default/example/SliderForm.vue"],
|
files: ["../src/lib/registry/default/example/SliderForm.vue"],
|
||||||
},
|
},
|
||||||
|
|
@ -1593,6 +1600,13 @@ export const Index = {
|
||||||
component: () => import("../src/lib/registry/new-york/example/SheetSideDemo.vue").then((m) => m.default),
|
component: () => import("../src/lib/registry/new-york/example/SheetSideDemo.vue").then((m) => m.default),
|
||||||
files: ["../src/lib/registry/new-york/example/SheetSideDemo.vue"],
|
files: ["../src/lib/registry/new-york/example/SheetSideDemo.vue"],
|
||||||
},
|
},
|
||||||
|
"SkeletonCard": {
|
||||||
|
name: "SkeletonCard",
|
||||||
|
type: "components:example",
|
||||||
|
registryDependencies: ["skeleton"],
|
||||||
|
component: () => import("../src/lib/registry/new-york/example/SkeletonCard.vue").then((m) => m.default),
|
||||||
|
files: ["../src/lib/registry/new-york/example/SkeletonCard.vue"],
|
||||||
|
},
|
||||||
"SkeletonDemo": {
|
"SkeletonDemo": {
|
||||||
name: "SkeletonDemo",
|
name: "SkeletonDemo",
|
||||||
type: "components:example",
|
type: "components:example",
|
||||||
|
|
@ -1610,7 +1624,7 @@ export const Index = {
|
||||||
"SliderForm": {
|
"SliderForm": {
|
||||||
name: "SliderForm",
|
name: "SliderForm",
|
||||||
type: "components:example",
|
type: "components:example",
|
||||||
registryDependencies: ["button","form","select","toast"],
|
registryDependencies: ["button","form","slider","toast"],
|
||||||
component: () => import("../src/lib/registry/new-york/example/SliderForm.vue").then((m) => m.default),
|
component: () => import("../src/lib/registry/new-york/example/SliderForm.vue").then((m) => m.default),
|
||||||
files: ["../src/lib/registry/new-york/example/SliderForm.vue"],
|
files: ["../src/lib/registry/new-york/example/SliderForm.vue"],
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,6 @@ npx shadcn-vue@latest add skeleton
|
||||||
|
|
||||||
### Copy and paste the following code into your project
|
### Copy and paste the following code into your project
|
||||||
|
|
||||||
|
|
||||||
<<< @/lib/registry/default/ui/skeleton/Skeleton.vue
|
<<< @/lib/registry/default/ui/skeleton/Skeleton.vue
|
||||||
|
|
||||||
</Steps>
|
</Steps>
|
||||||
|
|
@ -40,3 +39,9 @@ import { Skeleton } from '@/components/ui/skeleton'
|
||||||
<Skeleton class="w-[100px] h-5 rounded-full" />
|
<Skeleton class="w-[100px] h-5 rounded-full" />
|
||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Card
|
||||||
|
|
||||||
|
<ComponentPreview name="SkeletonCard" />
|
||||||
|
|
|
||||||
13
apps/www/src/lib/registry/default/example/SkeletonCard.vue
Normal file
13
apps/www/src/lib/registry/default/example/SkeletonCard.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { Skeleton } from '@/lib/registry/default/ui/skeleton'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex flex-col space-y-3">
|
||||||
|
<Skeleton class="h-[125px] w-[250px] rounded-xl" />
|
||||||
|
<div class="space-y-2">
|
||||||
|
<Skeleton class="h-4 w-[250px]" />
|
||||||
|
<Skeleton class="h-4 w-[200px]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
13
apps/www/src/lib/registry/new-york/example/SkeletonCard.vue
Normal file
13
apps/www/src/lib/registry/new-york/example/SkeletonCard.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { Skeleton } from '@/lib/registry/new-york/ui/skeleton'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex flex-col space-y-3">
|
||||||
|
<Skeleton class="h-[125px] w-[250px] rounded-xl" />
|
||||||
|
<div class="space-y-2">
|
||||||
|
<Skeleton class="h-4 w-[250px]" />
|
||||||
|
<Skeleton class="h-4 w-[200px]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue
Block a user