Skeleton

Grid Skeleton Screen

Construct a grid skeleton screen by combining multi-row and multi-column placeholder structures through row-col.

Theme Types

Set different skeleton themes through `theme`, commonly used for text, avatar, image, paragraph and other scenarios.

Cell Skeleton Screen

Can combine avatar, rectangle block and text lines to simulate common cell list layouts.

<view style="display: flex">
  <wd-skeleton :row-col="[{ size: '48px', type: 'circle' }]" />
  <wd-skeleton :custom-style="{ width: '100%', marginLeft: '12px' }" :row-col="[{ width: '50%' }, { width: '100%' }]" />
</view>

<view style="display: flex; margin-top: 20px">
  <wd-skeleton :row-col="[{ size: '48px', type: 'rect' }]" />
  <wd-skeleton :custom-style="{ width: '100%', marginLeft: '12px' }" :row-col="[{ width: '50%' }, { width: '100%' }]" />
</view>

Image Combination Skeleton Screen

Can combine row-col to customize image card and text-image mixed layout placeholder structures.

<wd-skeleton :row-col="[{ height: '171px' }, 1, { width: '107px' }, [{ width: '93px' }, { width: '32px', marginLeft: '41px' }]]" />

### Gradient Loading Animation
## Component Styles
Set `animation="gradient"` to enable gradient loading animation.
### Custom Rows and Columns

Customize the placeholder structure of each row through `row-col`, which can combine width, height, rounded corners, type and other configurations.
```html
<wd-skeleton :row-col="[{ width: '100%' }, { width: '80%' }, { width: '60%' }]" />
### Flashing Loading Animation

Set `animation="flashed"` to enable flashing loading animation.

```html
<view style="display: flex">
  <wd-skeleton :row-col="[{ size: '48px', type: 'circle' }]" />
  <wd-skeleton :custom-style="{ width: '100%', marginLeft: '12px' }" animation="flashed" theme="paragraph" />
</view>

Slot Content

Write actual content through the default slot. When loading is true, the skeleton screen is displayed; after switching to false, the slot content is displayed.

Animation Effects

Set animation to enable animation effects, optional values are gradient, flashed.

Custom Content

Set loading to false, then the default slot content is displayed.

<wd-skeleton :row-col="grid" :loading="showContent">
  <wd-grid>
    <wd-grid-item icon-size="32px" icon="picture" text="Text" />
    <wd-grid-item icon-size="32px" icon="picture" text="Text" />
    <wd-grid-item icon-size="32px" icon="picture" text="Text" />
    <wd-grid-item icon-size="32px" icon="picture" text="Text" />
    <wd-grid-item icon-size="32px" icon="picture" text="Text" />
  </wd-grid>
</wd-skeleton>

const showContent = ref(true)

Attributes

Parameter	Description	Type	Default Value
theme	Skeleton screen theme, optional values are text, avatar, paragraph, image	SkeletonTheme	'text'
row-col	Customize placeholder configuration for each row, used to set the number of rows and columns, width, height, spacing, rounded corners and placeholder type, etc.	SkeletonRowCol[]	[]
loading	Whether to display the skeleton screen	boolean	true
animation	Animation type, optional values are gradient, flashed	SkeletonAnimation	''
custom-class	Custom style class name	string | string[] | Record<string, boolean>	''
custom-style	Custom inline style	CSSProperties	{}

Slots

Name	Description
default	Actual content displayed after loading ends

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-skeleton-row-margin-bottom	$spacing-loose	行间距
--wot-skeleton-col-bg	$filled-strong	占位块背景色
--wot-skeleton-text-height	$n-16	文本占位高度
--wot-skeleton-rect-height	$n-16	矩形占位高度
--wot-skeleton-circle-height	$n-48	圆形占位尺寸
--wot-skeleton-text-border-radius	$radius-small	文本占位圆角
--wot-skeleton-rect-border-radius	$radius-main	矩形占位圆角
--wot-skeleton-circle-border-radius	$radius-radius-full	圆形占位圆角
--wot-skeleton-animation-gradient	$filled-bottom	渐变动画高亮色
--wot-skeleton-animation-flashed	$filled-bottom	闪烁动画高亮色
--wot-skeleton-animation-flashed-opacity	$opacity-backdrop	闪烁动画透明度

Source Code

Documentation

• Component