Skeleton
Display a skeleton whilst another component is loading.
Default with set width
<template>
<PSkeleton width="160" />
</template>
Default with box height
<template>
<PSkeleton width="160" box-height="42" />
</template>
Wrapping children
Setting the height to auto automatically calculates the height.
<template>
<PStack direction="vertical">
<PSkeleton height="auto">
<PButton>Hidden by skeleton</PButton>
</PSkeleton>
<PSkeleton :loading="false" height="auto">
<PButton>Not hidden by skeleton</PButton>
</PSkeleton>
</PStack>
</template>
Wrapping children with fixed size
The skeleton will hide when children are not null, but the size is retained.
<template>
<PStack direction="vertical">
<PSkeleton height="100" width="100%" />
<PSkeleton :loading="false" height="100" width="100%">
<PButton>Not hidden by skeleton</PButton>
</PSkeleton>
</PStack>
</template>
Shapes
<template>
<PStack direction="vertical">
<PSkeleton shape="default" width="48" />
<PSkeleton shape="rounded" width="48" />
<PSkeleton shape="squared" width="48" />
<PSkeleton shape="default" width="48" height="48" />
<PSkeleton shape="rounded" width="48" height="48" />
<PSkeleton shape="squared" width="48" height="48" />
</PStack>
</template>
No animation
<template>
<PStack direction="vertical">
<PSkeleton height="100" width="100%" :animated="false" />
</PStack>
</template>
Props
| Name | Type | Default | Description |
|---|---|---|---|
| loading | boolean | true | Render the placeholder; false reveals the slotted children |
| animated | boolean | true | Animate the shimmering gradient across the block |
| width | string | number | - | Width of the block; numbers are treated as px |
| height | string | number | 24 | Height of the block; numbers are treated as px |
| box-height | string | number | - | Total height including margin-bottom, for aligning wrapped children |
| shape | 'default' | 'square' | 'rounded' | default | Corner rounding of the block |
Slots
| Name | Description |
|---|---|
| default | Default slot |