Rainui

Appearance

r-skeleton ​

r-skeleton 骨架屏，用于在内容加载过程中展示一组占位图形。

示例 ​

vue
<template>
  <view class="content" style="padding: 20px">
    <!-- <r-config-provider> -->
    <r-divider content-position="left">基本使用</r-divider>
    <r-skeleton title :row="3" />
    <r-divider content-position="left">显示头像</r-divider>
    <r-skeleton title avatar :row="3" />
    <r-divider content-position="left">展示子组件</r-divider>
    <r-switch v-model:value="loading"></r-switch>
    <r-skeleton title avatar :row="3" :loading="loading">
      <view>实际内容</view>
    </r-skeleton>
    <r-divider content-position="left">自定义展示内容</r-divider>

    <r-skeleton>
      <template #template>
        <view :style="{ display: 'flex', width: '100%' }">
          <r-skeleton-image />
          <view
            :style="{
              flex: 1,
              display: 'flex',
              flexDirection: 'column',
              gap: '20rpx',
              marginLeft: '16px',
            }"
          >
            <r-skeleton-paragraph row-width="60%" />
            <r-skeleton-paragraph />
            <r-skeleton-paragraph />
            <r-skeleton-paragraph />
          </view>
        </view>
      </template>
    </r-skeleton>
    <!-- </r-config-provider> -->
  </view>
</template>
<script setup>
import { ref } from "vue";
const loading = ref(true);
</script>

API ​

Skeleton Props ​

名称说明类型默认值可选值
row段落占位图行数Number | String0-
rowWidth段落占位图宽度，可传数组来设置每一行的宽度Number|String|Array100%-
title是否显示标题占位图Booleanfalsetrue
avatar是否显示头像占位图Booleanfalsetrue
loading是否显示骨架屏，传 false 时会展示子组件内容Booleantruefalse
animate是否开启动画Booleantruefalse
round是否将标题和段落显示为圆角风格Booleanfalsetrue
titleWidth标题占位图宽度Number |String40%-
avatarSize头像占位图大小Number | String64rpx-
avatarShape头像占位图形状Stringroundsquare
themeNamer-theme主题名称Stringdefault

SkeletonParagraph Props ​

名称说明类型默认值可选值
round是否将段落显示为圆角风格Booleanfalsetrue
rowWidth段落占位图宽度String100%-

SkeletonTitle Props ​

名称说明类型默认值可选值
round是否将标题显示为圆角风格Booleanfalsetrue
titleWidth标题占位图宽度String | Number40%-

SkeletonAvatar Props ​

名称说明类型默认值可选值
avatarSize头像占位图大小Number | String64rpx-
avatarShape头像占位图形状Stringroundsquare

SkeletonImage Props ​

名称说明类型默认值可选值
imageSize图片占位图大小Number | String64rpx-
imageShape图片占位图形状Stringroundsquare

Skeleton Slots ​

名称说明
default骨架屏内容
template自定义内容

更多组件，请前往rainui