Components
Skeleton
Prevent layout shift by showing a placeholder while content is loading.
Usage
<template>
<NXW-Skeleton :loading="loading" tag="article"><!-- Your Content here --> </NXW-Skeleton>
</template>
<script setup lang="ts">
const loading = ref(true)
</script>
Props
animation-class
string
Default
animate-pulse
auto-detect-root-tag
boolean
Default
true
loading
boolean
Default
true
tag
string
Default
p
tagOptions
object
Default
{
"p": {
"gap": "gap-2",
"lines": 3,
"lineHeight": "h-4",
"color": "bg-gray-300 dark:bg-gray-700",
"rounded": "rounded"
},
"article": {
"headingGap": "gap-4",
"headingHeight": "h-6",
"headingRounded": "rounded-lg",
"gap": "gap-2",
"lines": 3,
"lineHeight": "h-4",
"color": "bg-gray-300 dark:bg-gray-700",
"rounded": "rounded"
},
"img": {
"width": "w-32",
"height": "h-32",
"color": "bg-gray-300 dark:bg-gray-700",
"rounded": "rounded-lg",
"iconSize": "size-10",
"iconColor": "text-gray-400 dark:text-gray-600"
},
"card": {
"imgHeight": "h-full min-h-40",
"headingHeight": "h-6",
"imgRounded": "rounded",
"headingRounded": "rounded-lg",
"imgIconColor": "text-zinc-600",
"imgIconSize": "size-10",
"imageAspect": "aspect-video",
"color": "bg-zinc-800",
"gap": "gap-4"
}
}
Slots
default
Content that will be replaced by the skeleton while loading.