骨架屏

Vue 组件
Circular Progress 环形进度
Vue 组件
Inner Loading 加载
Vue 组件
Spinners 加载项
Quasar 插件
Loading 加载
Quasar 插件
Loading Bar 加载条

QSkeleton 是一个用于在加载实际页面数据之前显示占位符预览内容的组件。这是一种很好的方式，可以在页面完全加载之前告知用户对页面的期望，并提高感知性能。当获取数据时，它可用于在屏幕上逐渐显示信息。

QSkeleton API

QSkeleton API
type
: String
说明
骨架占位符的类型
tag
: String
说明
要使用的 HTML 标签

用法

<template>
  <div class="q-pa-md">
    <q-card style="max-width: 300px">
      <q-item>
        <q-item-section avatar>
          <q-skeleton type="QAvatar" />
        </q-item-section>

        <q-item-section>
          <q-item-label>
            <q-skeleton type="text" />
          </q-item-label>
          <q-item-label caption>
            <q-skeleton type="text" />
          </q-item-label>
        </q-item-section>
      </q-item>

      <q-skeleton height="200px" square />

      <q-card-actions align="right" class="q-gutter-md">
        <q-skeleton type="QBtn" />
        <q-skeleton type="QBtn" />
      </q-card-actions>
    </q-card>
  </div>
</template>

预设的类型

在下面，您可以看到预定义的类型。有一些基本类型（文本，矩形，圆形），还有一些特殊的便利类型，可以准确显示 Quasar 组件的形状。 

<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-start">
      <q-card flat bordered v-for="type in skeletonTypes" :key="type" style="width: 250px">
        <q-card-section>
          <div class="text-caption">"{{ type }}"</div>
        </q-card-section>

        <q-separator />

        <q-card-section>
          <q-skeleton :type="type" />
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>
"text"
"rect"
"circle"
"QBtn"
"QBadge"
"QChip"
"QToolbar"
"QCheckbox"
"QRadio"
"QToggle"
"QSlider"
"QRange"
"QInput"
"QAvatar"

动画

<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-start">
      <q-card flat bordered v-for="animation in skeletonAnimations" :key="animation" style="width: 250px">
        <q-card-section>
          <div class="text-caption">"{{ animation }}"</div>
        </q-card-section>

        <q-separator />

        <q-card-section>
          <q-skeleton :animation="animation" />
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>
"wave"
"pulse"
"pulse-x"
"pulse-y"
"fade"
"blink"
"none"

动画

大小

样式

示例

享受一些事先准备好的示例。您的想象力是唯一的限制。

查看更多？
Vue 组件
Separator 分割条
Vue 组件
Slide Item 滑动项
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。

大小

<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <q-skeleton type="circle" size="100px" />
      <q-skeleton width="150px" />
      <q-skeleton height="150px" />
      <q-skeleton size="50px" />
      <q-skeleton width="200px" height="100px" />
    </div>
  </div>
</template>

样式

<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md">
      <q-skeleton bordered type="circle" />
      <q-skeleton bordered />
      <q-skeleton bordered square />
    </div>
  </div>
</template>
<template>
  <div class="q-pa-md">
    <q-skeleton square />
  </div>
</template>
<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <q-skeleton class="bg-accent" type="circle" />
      <q-skeleton class="bg-teal" />
      <q-skeleton class="bg-orange" animation="pulse-y" />
      <q-skeleton class="bg-indigo" />
    </div>
  </div>
</template>
<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md">
      <q-skeleton
        width="100px"
        height="50px"
        class="custom-skeleton-border"
      />
    </div>
  </div>
</template>

示例

享受一些事先准备好的示例。您的想象力是唯一的限制。

<template>
  <div class="q-pa-md">
    <q-card flat style="max-width: 300px">
      <q-skeleton height="150px" square />

      <q-card-section>
        <q-skeleton type="text" class="text-subtitle1" />
        <q-skeleton type="text" width="50%" class="text-subtitle1" />
        <q-skeleton type="text" class="text-caption" />
      </q-card-section>
    </q-card>
  </div>
</template>
<template>
  <div class="q-pa-md">
    <q-card flat bordered style="max-width: 300px">
      <q-item>
        <q-item-section avatar>
          <q-skeleton type="QAvatar" animation="fade" />
        </q-item-section>

        <q-item-section>
          <q-item-label>
            <q-skeleton type="text" animation="fade" />
          </q-item-label>
          <q-item-label caption>
            <q-skeleton type="text" animation="fade" />
          </q-item-label>
        </q-item-section>
      </q-item>

      <q-skeleton height="200px" square animation="fade" />

      <q-card-section>
        <q-skeleton type="text" class="text-subtitle2" animation="fade" />
        <q-skeleton type="text" width="50%" class="text-subtitle2" animation="fade" />
      </q-card-section>
    </q-card>
  </div>
</template>
<template>
  <div class="q-pa-md">
    <q-card flat bordered style="max-width: 500px">
      <q-item>
        <q-item-section avatar>
          <q-skeleton type="QAvatar" />
        </q-item-section>

        <q-item-section>
          <q-item-label>
            <q-skeleton type="text" />
          </q-item-label>
          <q-item-label caption>
            <q-skeleton type="text" width="80%" />
          </q-item-label>
        </q-item-section>
      </q-item>

      <q-item>
        <q-item-section avatar />

        <q-item-section class="q-pl-sm">
          <q-skeleton height="150px" class="q-mb-sm" />

          <div class="row items-center justify-between no-wrap">
            <div class="row items-center">
              <q-icon name="chat_bubble_outline" color="grey-4" class="q-mr-sm" size="18px" />
              <q-skeleton type="text" width="30px" />
            </div>

            <div class="row items-center">
              <q-icon name="repeat" color="grey-4" class="q-mr-sm" size="18px" />
              <q-skeleton type="text" width="30px" />
            </div>

            <div class="row items-center">
              <q-icon name="favorite_border" color="grey-4" class="q-mr-sm" size="18px" />
              <q-skeleton type="text" width="30px" />
            </div>
          </div>
        </q-item-section>
      </q-item>
    </q-card>
  </div>
</template>
<template>
  <div class="q-pa-md">
    <div style="max-width: 300px">
      <q-skeleton height="170px" square animation="fade" />

      <div class="row items-start no-wrap q-mt-sm">
        <q-skeleton size="56px" square animation="fade" />

        <div class="col q-pl-sm">
          <q-skeleton type="text" square width="30%" animation="fade" />
          <q-skeleton type="text" square height="12px" animation="fade" />
          <q-skeleton type="text" square height="12px" width="75%" animation="fade" />
        </div>
      </div>
    </div>
  </div>
</template>
<template>
  <div class="q-pa-md">
    <q-markup-table>
      <thead>
        <tr>
          <th class="text-left" style="width: 150px">
            <q-skeleton animation="blink" type="text" />
          </th>
          <th class="text-right">
            <q-skeleton animation="blink" type="text" />
          </th>
          <th class="text-right">
            <q-skeleton animation="blink" type="text" />
          </th>
          <th class="text-right">
            <q-skeleton animation="blink" type="text" />
          </th>
          <th class="text-right">
            <q-skeleton animation="blink" type="text" />
          </th>
          <th class="text-right">
            <q-skeleton animation="blink" type="text" />
          </th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="n in 5" :key="n">
          <td class="text-left">
            <q-skeleton animation="blink" type="text" width="85px" />
          </td>
          <td class="text-right">
            <q-skeleton animation="blink" type="text" width="50px" />
          </td>
          <td class="text-right">
            <q-skeleton animation="blink" type="text" width="35px" />
          </td>
          <td class="text-right">
            <q-skeleton animation="blink" type="text" width="65px" />
          </td>
          <td class="text-right">
            <q-skeleton animation="blink" type="text" width="25px" />
          </td>
          <td class="text-right">
            <q-skeleton animation="blink" type="text" width="85px" />
          </td>
        </tr>
      </tbody>
    </q-markup-table>
  </div>
</template>
<template>
  <div class="q-pa-md">
    <q-item style="max-width: 300px">
      <q-item-section avatar>
        <q-skeleton type="QAvatar" />
      </q-item-section>

      <q-item-section>
        <q-item-label>
          <q-skeleton type="text" />
        </q-item-label>
        <q-item-label caption>
          <q-skeleton type="text" width="65%" />
        </q-item-label>
      </q-item-section>
    </q-item>

    <q-item style="max-width: 300px">
      <q-item-section avatar>
        <q-skeleton type="QAvatar" />
      </q-item-section>

      <q-item-section>
        <q-item-label>
          <q-skeleton type="text" />
        </q-item-label>
        <q-item-label caption>
          <q-skeleton type="text" width="90%" />
        </q-item-label>
      </q-item-section>
    </q-item>

    <q-item style="max-width: 300px">
      <q-item-section avatar>
        <q-skeleton type="QAvatar" />
      </q-item-section>

      <q-item-section>
        <q-item-label>
          <q-skeleton type="text" width="35%" />
        </q-item-label>
        <q-item-label caption>
          <q-skeleton type="text" />
        </q-item-label>
      </q-item-section>
    </q-item>
  </div>
</template>
查看更多？
Vue 组件
Separator 分割条
Vue 组件
Slide Item 滑动项
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。