Запаўняльнікі

Выкарыстоўвайце запаўняльнікі для загрузкі вашых кампанентаў або старонак, каб паказаць, што нешта яшчэ можа загружацца.

На гэтай старонцы

Аб

Запаўняльнікі могуць выкарыстоўвацца для паляпшэння працы вашага прыкладання. Яны створаны толькі з дапамогай 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"азначае толькі тое, што элемент павінен быць схаваны для праграм чытання з экрана. Паводзіны запаўняльніка пры загрузцы залежаць ад таго, як аўтары насамрэч будуць выкарыстоўваць стылі запаўняльніка, як яны плануюць абнаўляць рэчы і г. д . Для змены стану запаўняльніка і інфармавання карыстальнікаў AT аб абнаўленні можа спатрэбіцца некаторы код JavaScript.

Шырыня

Вы можаце змяніць 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;