๐ข Skeleton
Basic
NSkeleton
is a placeholder while the content is being loaded.
Shape
rounded="{value}"
- change the shape of the skeleton.
๐ You can freely adjust the size of the rounded using any value imaginable. No limits exist, and you can use
breakpoints
such assm:sm, xs:lg
to change size based on screen size orstates
such ashover:lg, focus:3xl
to change size based on input state and more.
The
value
determines the overall form of the skeleton. You can always add and customize it using utility classes in the class
attribute.Color
skeleton="{color}"
- change the color of the skeleton.
You can use any color provided by the Tailwind CSS color palette, the default is
gray
. You can also add your own colors to the palette through the Configuration section.Props
import type { HTMLAttributes } from 'vue'
interface Extensions { class?: HTMLAttributes['class'] }
export interface NSkeletonProps extends Extensions {
/**
* Allows you to add `UnaUI` skeleton preset properties,
* Think of it as a shortcut for adding options or variants to the preset if available.
*
* @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/skeleton.ts
* @example
* skeleton="green""
*/
skeleton?: string
/**
* Allows you to change the size of the skeleton.
*
* @default base|md
*
* @example
* size="sm" | size="2cm" | size="2rem" | size="2px"
*/
size?: string
/**
* `UnaUI` preset configuration
*
* @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/skeleton.ts
*/
una?: {
// base
skeleton?: HTMLAttributes['class']
}
}
Presets
import { parseColor } from '@unocss/preset-mini/utils'
import type { Theme } from '@unocss/preset-uno'
import type { RuleContext } from '@unocss/core'
type SkeletonPrefix = 'skeleton'
export const staticSkeleton: Record<`${SkeletonPrefix}-${string}` | SkeletonPrefix, string> = {
// base
skeleton: 'skeleton-gray text-md animate-pulse rounded-md w-full h-0.5em bg-brand',
}
export const dynamicSkeleton = [
[/^skeleton-(.*)$/, ([, body]: string[], { theme }: RuleContext<Theme>) => {
const color = parseColor(body, theme)
if ((color?.cssColor?.type === 'rgb' || color?.cssColor?.type === 'rgba') && color.cssColor.components)
return `n-${body}-100 dark:n-${body}-800`
}],
]
export const skeleton = [
...dynamicSkeleton,
staticSkeleton,
]
Component
<script setup lang="ts">
import type { NSkeletonProps } from '../../types'
import { cn } from '../../utils'
const props = defineProps<NSkeletonProps>()
</script>
<template>
<div
:class="
cn(
'skeleton',
props.class,
props.una?.skeleton,
)
"
:skeleton="props.skeleton"
:size="props.size"
>
<slot />
</div>
</template>