Заповнювачі

Використовуйте покажчики місця завантаження для своїх компонентів або сторінок, щоб вказати, що щось ще може завантажуватися.

На цій сторінці

про

Заповнювачі можна використовувати для покращення роботи вашої програми. Вони створені лише за допомогою HTML і CSS, тобто вам не потрібен JavaScript для їх створення. Однак вам знадобиться спеціальний JavaScript, щоб увімкнути їх видимість. Їх зовнішній вигляд, колір і розмір можна легко налаштувати за допомогою наших корисних класів.

приклад

У наведеному нижче прикладі ми беремо типовий компонент картки та створюємо його за допомогою заповнювачів, застосованих для створення «картки завантаження». Розмір і пропорції між ними однакові.

Назва картки

Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.

Іди кудись

<div class="card">
  <img src="..." class="card-img-top" alt="...">

  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>

Як це працює

Створіть заповнювачі з .placeholderкласом і класом стовпця сітки (наприклад, .col-6), щоб встановити width. Вони можуть замінити текст всередині елемента або бути доданими як клас-модифікатор до існуючого компонента.

Ми застосовуємо додаткові стилі до .btns via ::before, щоб забезпечити heightдотримання. Ви можете розширити цей шаблон для інших ситуацій, якщо потрібно, або додати  всередині елемента, щоб відобразити висоту, коли фактичний текст відображається на його місці.

html

<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>

Використання aria-hidden="true"лише вказує на те, що елемент має бути прихований для програм зчитування з екрана. Поведінка заповнювача при завантаженні залежить від того, як автори фактично використовуватимуть стилі заповнювача, як вони планують оновлювати речі тощо. Може знадобитися деякий код JavaScript, щоб змінити стан заповнювача та повідомити користувачів AT про оновлення.

Ширина

Ви можете змінити widthкласи стовпців наскрізної сітки, утиліти ширини або вбудовані стилі.

html

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

колір

За замовчуванням placeholderвикористовує currentColor. Це можна замінити спеціальним кольором або класом корисності.

html

<span class="placeholder col-12"></span>

<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>

Розміри

Розмір .placeholders базується на друкарському стилі батьківського елемента. Налаштуйте їх за допомогою модифікаторів розміру: .placeholder-lg, .placeholder-smабо .placeholder-xs.

html

<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>

Анімація

Анімуйте заповнювачі за допомогою .placeholder-glowабо .placeholder-wave, щоб краще передати сприйняття чогось, що активно завантажується.

html

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

Сасс

Змінні

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;