骨架

Framework7 附带骨架元素库（又名 UI 骨架、骨架屏幕、幽灵元素）- 用于提高感知性能的 UI。

骨架元素库已集成到 Framework7 中，你无需单独安装。有关完整的 API 文档和更多示例，请查看官方骨架元素文档.

骨架区块

骨架区块只是一个带有灰色背景色的普通区块元素，可以存在于任何所需大小。

要创建骨架区块元素，我们只需要创建div元素并添加skeleton-block类，最好是固定宽度：

...
<div class="list">
  <ul>
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">
          <!-- Use skeleton block instead of list item title -->
          <div class="skeleton-block" style="width: 100px"></div>
        </div>
      </div>
    </li>
  </ul>
</div>
...

骨架文本

骨架文本是一个更有趣的东西。Framework7带有特殊的内置骨架字体，它将每个字符渲染为小的灰色矩形。当我们对任何元素应用skeleton-text类时，它将文本转换为灰色块/行。与skeleton-block的优势在于，这种“骨架文本”可以完全响应式，并且其大小将反映实际文本大小。

骨架文本字体支持以下字符集（包括“空格”）：

0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z _ -   . , : ; / ! / * & ' " | ( ) { } [ ]
...
<div class="list media-list">
  <ul>
    <!-- we just add "skeleton-text" class to list item and its text will be rendered as gray boxes -->
    <li class="item-content skeleton-text">
      <div class="item-inner">
        <div class="item-title-row">
          <div class="item-title">Item Title</div>
        </div>
        <div class="item-subtitle">Item Subtitle</div>
        <div class="item-text">Item text goes here, and it will be rendered as gray box too.</div>
      </div>
    </li>
    <!-- In the next item we use "_" character instead of actual text -->
    <li class="item-content skeleton-text">
      <div class="item-inner">
        <div class="item-title-row">
          <div class="item-title">____ _____</div>
        </div>
        <div class="item-subtitle">____ _______</div>
        <div class="item-text">____ ____ ____ _____ ___ __ ____ __ ________ __ ____ ___ ____</div>
      </div>
    </li>
  </ul>
</div>
...

骨架效果

骨架元素也支持三种动画效果：淡入、波浪和脉冲。

要启用特殊的骨架动画效果，我们可以需要将以下类之一添加到骨架元素或包含骨架元素的父元素：

CSS 变量

以下是相关CSS 变量(CSS 自定义属性) 的列表。

:root {
  --skeleton-color: #ccc;
  --skeleton-icon-color: rgba(0, 0, 0, 0.25);
}
.dark {
  --skeleton-color: #515151;
  --skeleton-icon-color: rgba(255, 255, 255, 0.25);
}

示例

skeleton.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Skeleton Elements</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong-ios block-outline-ios">
        <p>Skeleton (or Ghost) elements designed to improve perceived performance and make app feels faster.</p>
        <p>Framework7 comes with two types of such elements: Skeleton Block and Skeleton Text. Skeleton block is a gray
          box that can be used as placeholder for any element. Skeleton text uses special built-in skeleton font to
          render each character of such text as gray rectangle. Skeleton text allows to make such elements responsive
          and feel more natural.</p>
        <p>It can be used in any places and with any elements.</p>
      </div>

      <div class="block-title">Skeleton List</div>
      <div class="list list-strong-ios list-outline-ios list-dividers-ios media-list skeleton-text">
        <ul>
          <li class="item-content">
            <div class="item-media">
              <div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%"></div>
            </div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Title</div>
              </div>
              <div class="item-subtitle">Subtitle</div>
              <div class="item-text">
                Placeholder text line 1<br />
                Text line 2
              </div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-media">
              <div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%"></div>
            </div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Title</div>
              </div>
              <div class="item-subtitle">Subtitle</div>
              <div class="item-text">
                Placeholder text line 1<br />
                Text line 2
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div class="block-title">Skeleton Card</div>
      <div class="card card-outline skeleton-text">
        <div class="card-header">Card Header</div>
        <div class="card-content card-content-padding">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          lobortis et massa ac interdum. Cras consequat felis at consequat hendrerit.</div>
        <div class="card-footer">Card Footer</div>
      </div>

      <div class="block-title">Loading Effects</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>It supports few loading effects:</p>
        <p class="grid grid-cols-3 grid-gap">
          <a class="button button-fill button-small button-round" @click=${()=> load('fade')}>Fade</a>
          <a class="button button-fill button-small button-round" @click=${()=> load('wave')}>Wave</a>
          <a class="button button-fill button-small button-round" @click=${()=> load('pulse')}>Pulse</a>
        </p>
      </div>
      <div class="list list-strong-ios list-outline-ios list-dividers-ios media-list">
        <ul>
          ${loading ? $h`
          <li class="item-content skeleton-text skeleton-effect-${effect}">
            <div class="item-media">
              <div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%"></div>
            </div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Full Name</div>
              </div>
              <div class="item-subtitle">Position</div>
              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac
                interdum. Cras consequat felis at consequat hendrerit. Aliquam vestibulum vitae lorem ac iaculis.
                Praesent nec pharetra massa, at blandit lectus. Sed tincidunt, lectus eu convallis elementum, nibh nisi
                aliquet urna, nec imperdiet felis sapien at enim.</div>
            </div>
          </li>
          <li class="item-content skeleton-text skeleton-effect-${effect}">
            <div class="item-media">
              <div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%"></div>
            </div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Full Name</div>
              </div>
              <div class="item-subtitle">Position</div>
              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac
                interdum. Cras consequat felis at consequat hendrerit. Aliquam vestibulum vitae lorem ac iaculis.
                Praesent nec pharetra massa, at blandit lectus. Sed tincidunt, lectus eu convallis elementum, nibh nisi
                aliquet urna, nec imperdiet felis sapien at enim.</div>
            </div>
          </li>
          <li class="item-content skeleton-text skeleton-effect-${effect}">
            <div class="item-media">
              <div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%"></div>
            </div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Full Name</div>
              </div>
              <div class="item-subtitle">Position</div>
              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac
                interdum. Cras consequat felis at consequat hendrerit. Aliquam vestibulum vitae lorem ac iaculis.
                Praesent nec pharetra massa, at blandit lectus. Sed tincidunt, lectus eu convallis elementum, nibh nisi
                aliquet urna, nec imperdiet felis sapien at enim.</div>
            </div>
          </li>
          ` : $h`
          <li class="item-content">
            <div class="item-media">
              <img src="https://placeimg.com/80/80/people/1" style="width: 40px; height: 40px; border-radius: 50%" />
            </div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">John Doe</div>
              </div>
              <div class="item-subtitle">CEO</div>
              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac
                interdum. Cras consequat felis at consequat hendrerit. Aliquam vestibulum vitae lorem ac iaculis.
                Praesent nec pharetra massa, at blandit lectus. Sed tincidunt, lectus eu convallis elementum, nibh nisi
                aliquet urna, nec imperdiet felis sapien at enim.</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-media">
              <img src="https://placeimg.com/80/80/people/2" style="width: 40px; height: 40px; border-radius: 50%" />
            </div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Jane Doe</div>
              </div>
              <div class="item-subtitle">Marketing</div>
              <div class="item-text">Cras consequat felis at consequat hendrerit. Aliquam vestibulum vitae lorem ac
                iaculis. Praesent nec pharetra massa, at blandit lectus. Sed tincidunt, lectus eu convallis elementum,
                nibh nisi aliquet urna, nec imperdiet felis sapien at enim.</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-media">
              <img src="https://placeimg.com/80/80/people/3" style="width: 40px; height: 40px; border-radius: 50%" />
            </div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Kate Johnson</div>
              </div>
              <div class="item-subtitle">Admin</div>
              <div class="item-text">Sed tincidunt, lectus eu convallis elementum, nibh nisi aliquet urna, nec imperdiet
                felis sapien at enim.</div>
            </div>
          </li>
          `}

        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $update }) => {
    let loading = false;
    let effect = null;

    const load = (newEffect) => {
      if (loading) return;
      effect = newEffect;
      loading = true;
      $update();
      setTimeout(function () {
        loading = false;
        $update();
      }, 3000);
    }
    return $render;
  }
</script>
改进此文档
在本页上