Skeleton

introduce

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

Code Demo

Basic usage

Display the title placeholder image through the title attribute, and configure the number of placeholder paragraph lines through the row attribute.

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

Show avatar

Display the avatar placeholder image through the avatar attribute.

<z-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 child components of Skeleton will be displayed.

<view class="demo-skeleton-switch">
   <z-switch v-model="show" />
</view>
<z-skeleton title avatar :row="2" :loading="!show">
   <view class="demo-skeleton-preview">
     <image src="https://cdn.zebraui.com/zebra-ui/images/logo.png" />
     <view class="demo-skeleton-content">
       <view class="title">Title</view>
       <view class="desc"
         >zebra-swiper is a mobile carousel component developed based on uniapp. </view
       >
     </view>
   </view>
</z-skeleton>
import { ref } from 'vue'
const show = ref(false)
.demo-skeleton {
   color: var(--z-text-color);

   &-switch {
     margin-bottom: 30rpx;
   }

   &-preview {
     display: flex;

     image {
       flex-shrink: 0;
       width: 100rpx;
       height: 100rpx;
     }
   }

   &-content {
     margin-top: 16rpx;

     .title {
       font-size: 36rpx;
       line-height: 50rpx;
     }

     .desc {
       font-size: 26rpx;
       line-height: 40rpx;
     }
   }
}

Custom display content

Display of custom content is completed through the template slot.

<z-skeleton>
   <template #template>
     <view :style="{ display: 'flex', width: '100%' }">
       <z-skeleton-image />
       <view :style="{ flex: 1, marginLeft: '32rpx' }">
         <z-skeleton-paragraph row-width="60%" />
         <z-skeleton-paragraph />
         <z-skeleton-paragraph />
         <z-skeleton-paragraph />
       </view>
     </view>
   </template>
</z-skeleton>

API

Skeleton Props

ParametersDescriptionTypeDefault value
rowParagraph placeholder map row numbernumber | string0
row-widthWidth of paragraph placeholder image, you can pass an array to set the width of each rownumber | string |
(number | string)
100%
titleWhether to display the title placeholder imagebooleanfalse
avatarWhether to display the avatar placeholder imagebooleanfalse
loadingWhether to display the skeleton screen, when passing false, the content of the subcomponent will be displayedbooleantrue
animateWhether to enable animationbooleantrue
roundWhether to display titles and paragraphs as rounded cornersbooleanfalse
title-widthTitle placeholder image widthnumber | string40%
avatar-sizeAvatar placeholder image sizenumber | string64rpx
avatar-shapeAvatar placeholder image shape, optional value is squarestringround

SkeletonParagraph Props

ParametersDescriptionTypeDefault value
roundWhether to display paragraphs in rounded stylebooleanfalse
row-widthParagraph placeholder image widthstring100%

SkeletonTitle Props

ParametersDescriptionTypeDefault value
roundWhether to display the title in rounded stylebooleanfalse
title-widthTitle placeholder image widthnumber | string40%

SkeletonAvatar Props

ParametersDescriptionTypeDefault value
avatar-sizeAvatar placeholder image sizenumber | string64rpx
avatar-shapeAvatar placeholder image shape, optional value is squarestringround

SkeletonImage Props

ParametersDescriptionTypeDefault value
image-sizeImage placeholder sizenumber | string64rpx
image-shapeImage placeholder shape, optional value is squarestringround

Skeleton Slots

NameDescription
defaultSkeleton screen content
templatecustom content

Theme customization

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

NameDefaultDescription
--z-skeleton-paragraph-height32rpx-
--z-skeleton-paragraph-backgroundvar(--z-active-color)-
--z-skeleton-paragraph-margin-topvar(--z-padding-sm)-
--z-skeleton-title-width40%-
--z-skeleton-avatar-size64rpx-
--z-skeleton-avatar-backgroundvar(--z-active-color)-
--z-skeleton-duration1.2s-
--z-skeleton-image-size192rpx
--z-skeleton-image-radius48rpx-