Components
Skeleton
Prevent layout shift by showing a placeholder while content is loading.
Usage
<template>
<NXW-Skeleton />
</template>
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
<template>
<NXW-Skeleton
:tagOptions="{
p: {
lines: '3',
lineHeight: 'h-4',
color: 'dark:bg-zinc-700 bg-zinc-200',
rounded: 'rounded-3xl',
gap: 'gap-2',
},
article: {
lines: '5',
lineHeight: 'h-4',
headingHeight: 'h-6',
color: 'dark:bg-zinc-700 bg-zinc-200',
gap: 'gap-2',
headingGap: 'gap-5',
rounded: 'rounded-3xl',
headingRounded: 'rounded-lg',
},
img: {
width: 'w-full',
height: 'h-full min-h-40',
rounded: 'rounded',
color: 'bg-zinc-800',
iconColor: 'text-zinc-600',
iconSize: 'size-10',
},
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',
},
}"
/>
</template>