mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-22 07:50:36 +01:00
chore(Skeleton): new component
This commit is contained in:
9
docs/components/content/examples/SkeletonExample.vue
Normal file
9
docs/components/content/examples/SkeletonExample.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div class="flex items-center space-x-4">
|
||||
<USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" />
|
||||
<div class="space-y-2">
|
||||
<USkeleton class="h-4 w-[250px]" />
|
||||
<USkeleton class="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
33
docs/content/6.layout/3.skeleton.md
Normal file
33
docs/content/6.layout/3.skeleton.md
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
github: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Use to show a placeholder while content is loading.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:skeleton-example
|
||||
|
||||
#code
|
||||
```vue
|
||||
<template>
|
||||
<div className="flex items-center space-x-4">
|
||||
<USkeleton class="h-12 w-12 rounded-full" />
|
||||
<div className="space-y-2">
|
||||
<USkeleton class="h-4 w-[250px]" />
|
||||
<USkeleton class="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
Reference in New Issue
Block a user