Skip to main content

Каркас

Навігація

Каркас

Techno4 Framework постачається з бібліотекою Skeleton Elements (така ж UI Skeletons, Skeleton Screens, Ghost Elements) — UI для покращеної продуктивності.

Бібліотека Skeleton Elements уже інтегрована у Techno4 Framework, і вам не потрібно встановлювати її окремо. Щоб отримати повну документацію щодо API та інші приклади, перегляньте офіційну документацію Skeleton Elements.

Каркасний блок

Каркасний блок – це звичайний блок-елемент із сірим кольором фону, який може бути будь-якого необхідного розміру.

Щоб створити скелетний блоковий елемент, нам просто потрібно створити елемент div із класом skeleton-block , а краще з фіксованою шириною: 

...
<div class="list">
  <ul>
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">
          <!-- Використовуйте каркасний блок замість заголовка елемента списку -->
          <div class="skeleton-block" style="width: 100px"></div>
        </div>
      </div>
    </li>
  </ul>
</div>
...

Каркасний текст

Скелетний текст більш цікавий. Techno4 Framework поставляється зі спеціальним вбудованим шрифтом Skeleton, який відображає кожен символ у вигляді маленького сірого прямокутника. Коли ми застосовуємо клас 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>
    <!-- ми просто додаємо клас "skeleton-text" до елемента списку, і його текст буде відображено у вигляді сірих прямокутників -->
    <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>
    <!-- У наступному пункті ми використовуємо символ "_" замість фактичного тексту -->
    <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>
...

Ефекти каркаса

Каркасні елементи також підтримують три ефекти анімації: Fade,Wave і Pulse.

Щоб увімкнути спеціальний ефект анімації каркаса, нам може знадобитися додати один із наступних класів до елементів каркаса або до батьківського елемента, що містить елементи каркаса:

skeleton-effect-fade - щоб додати ефект вицвітання
skeleton-effect-wave- додати ефект хвилі
skeleton-effect-pulse - додати пульсовий ефект

Змінні 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);
}

Приклади 

<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>Techno4 Framework 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>