Press UI

# Skeleton

Used to display a set of placeholder graphics during content loading.

# Code Demo

# Basic usage

Use the title attribute to display the title placeholder image, and use the row attribute to configure the number of rows in the placeholder paragraph.

<press-skeleton title :row="3" />

# Show Avatar

Use the avatar property to display an avatar placeholder.

<press-skeleton title avatar :row="3" />

# Display child components

Set the loading property to false to indicate that the content is loaded. At this time, the placeholder image will be hidden and the subcomponents of Skeleton will be displayed.

<press-skeleton title avatar :row="3" :loading="loading">
   <div>actual content</div>
</press-skeleton>

export default {
   data() {
     return {
       loading: true,
     }
   },
   methods: {
     onChange(val) {
       this.loading = val;
     }
   }
};

# API

# Props

Parameter Description Type Default
row row number of paragraph placeholder image number 0
row-width The width of the paragraph placeholder image, an array can be passed to set the width of each row string | string[] 100%
title whether to show title placeholder boolean false
title-width width of title image string | number 40%
avatar whether to display avatar placeholder boolean false
avatar-size Avatar placeholder image size string | number 32px
avatar-shape Avatar placeholder image shape, optional value is square string round
loading Whether to display a placeholder image, if false is passed, the content of the subcomponent will be displayed boolean true
animate Whether to enable animation boolean true
横屏

← Steps →