Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: adding skeleton card example (#382)

Browse Source
This commit is contained in:
Saeid Zareie 2024-03-05 14:37:35 +03:30 committed by GitHub
parent edd713fd08
commit 3ec55ada1b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 50 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/www/__registry__/index.ts
View File

@ -619,6 +619,13 @@ export const Index = {
component: () => import("../src/lib/registry/default/example/SheetSideDemo.vue").then((m) => m.default),
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": {
name: "SkeletonDemo",
type: "components:example",
@ -636,7 +643,7 @@ export const Index = {
"SliderForm": {
name: "SliderForm",
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),
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),
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": {
name: "SkeletonDemo",
type: "components:example",
@ -1610,7 +1624,7 @@ export const Index = {
"SliderForm": {
name: "SliderForm",
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),
files: ["../src/lib/registry/new-york/example/SliderForm.vue"],
},

7
apps/www/src/content/docs/components/skeleton.md
View File

@ -21,7 +21,6 @@ npx shadcn-vue@latest add skeleton
### Copy and paste the following code into your project
<<< @/lib/registry/default/ui/skeleton/Skeleton.vue
</Steps>
@ -40,3 +39,9 @@ import { Skeleton } from '@/components/ui/skeleton'
<Skeleton class="w-[100px] h-5 rounded-full" />
</template>
```
## Examples
### Card
<ComponentPreview name="SkeletonCard" />

13
apps/www/src/lib/registry/default/example/SkeletonCard.vue Normal file
View 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
View 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>