Толтургучтар

Бир нерсе дагы эле жүктөлүп жатканын көрсөтүү үчүн компоненттериңиз же баракчаларыңыз үчүн жүктөөчү толтургучтарды колдонуңуз.

Бул бетте

Жөнүндө

Толтургучтар колдонмоңуздун тажрыйбасын жакшыртуу үчүн колдонулушу мүмкүн. Алар 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. Алар элементтин ичиндеги текстти алмаштыра алат же учурдагы компонентке өзгөрткүч класс катары кошулат.

.btnБиз s via ::beforeүчүн кошумча стилди колдонобуз height. Бул үлгүнү зарылчылыкка жараша башка жагдайлар үчүн кеңейте аласыз же  чыныгы текст анын ордуна көрсөтүлгөндө бийиктикти чагылдыруу үчүн элементтин ичине бирди кошсоңуз болот.

<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Тор мамыча класстарын, кеңдиктин утилиталарын же саптык стилдерди өзгөртө аласыз .

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

Түс

Демейки боюнча placeholder, currentColor. Муну ыңгайлаштырылган түс же пайдалуу класс менен жокко чыгарса болот.

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

Өлчөмү

s өлчөмү .placeholderнегизги элементтин типографиялык стилине негизделген. Аларды өлчөмдү өзгөрткүчтөр менен ыңгайлаштырыңыз: .placeholder-lg, .placeholder-sm, же .placeholder-xs.

<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

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

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

Sass

Өзгөрмөлөр

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