Skeleton

introduce

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

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>

Skeleton Props

SkeletonParagraph Props

SkeletonTitle Props

SkeletonAvatar Props

SkeletonImage Props

Skeleton Slots

Style variables

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