4.2 KiB

Raw Blame History

Skeleton

A combination of placeholder shapes displayed while waiting for content to load, with dynamic loading effects to reduce user anxiety during waiting.

Skeleton Styles

Supports four types: avatar, image, text, and paragraph.

// Avatar skeleton
<wd-skeleton theme="avatar" />
// Image skeleton
<wd-skeleton theme="image" />
// Text skeleton
<wd-skeleton theme="text" />
// Paragraph skeleton
<wd-skeleton theme="paragraph" />

Grid Skeleton

<wd-skeleton :row-col="grid" />

const grid = [
  [
    { width: '48px', height: '48px' },
    { width: '48px', height: '48px' },
    { width: '48px', height: '48px' },
    { width: '48px', height: '48px' },
    { width: '48px', height: '48px' }
  ],
  [
    { width: '48px', height: '16px' },
    { width: '48px', height: '16px' },
    { width: '48px', height: '16px' },
    { width: '48px', height: '16px' },
    { width: '48px', height: '16px' }
  ]
]

Cell Skeleton

<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 Group Skeleton

<view>
  <wd-skeleton :row-col="imageGroup" />
  <wd-skeleton :custom-style="{ marginTop: '20px' }" :row-col="imageGroup" />
</view>

const imageGroup = [
  { height: '171px' }, 1, { width: '107px' }, 
  [{ width: '93px' }, { width: '32px', marginLeft: '41px' }]
]

Loading Animation

Supports gradient and flashed

<wd-skeleton animation="gradient" theme="paragraph" />
<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

You can write display content through slots. When the request ends and loading is set to false, the skeleton component will be hidden and the slot content will be displayed.

<wd-skeleton 
  :row-col="[
    [
      { width: '48px', height: '48px' },
      { width: '48px', height: '48px' },
      { width: '48px', height: '48px' },
      { width: '48px', height: '48px' },
      { width: '48px', height: '48px' }
    ],
    [
      { width: '48px', height: '16px' },
      { width: '48px', height: '16px' },
      { width: '48px', height: '16px' },
      { width: '48px', height: '16px' },
      { width: '48px', height: '16px' }
    ]
  ]" 
  :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	Options	Default	Version
theme	Skeleton style	SkeletonTheme	`text` `avatar` `paragraph` `image`	-	-
rowCol	Used to set row and column count, width, height, spacing, etc. 【Example 1】`[1, 1, 2]` means output three rows of skeleton, first row one column, second row one column, third row two columns. 【Example 2】`[1, 1, { width: '100px' }]` means customize the width of the third row to `100px`. 【Example 3】`[1, 2, [{ width, height }, { width, height, marginLeft }]]` means the third row has two columns with custom width, height and spacing	SkeletonRowCol	-	-	-
loading	Whether in loading state, if true shows skeleton, if false shows loaded content	boolean	-	true	-
animation	Animation effect	SkeletonAnimation	`gradient` `flashed`	-	-

Slots

Name	Description	Version
default	Content to display after loading ends	1.2.21

4.2 KiB Raw Blame History