Толтырғыштар

Бірдеңе әлі жүктеліп жатқанын көрсету үшін құрамдастарға немесе беттерге жүктеу толтырғыштарын пайдаланыңыз.

Бұл бетте

туралы

Толтырғыштарды қолданба тәжірибесін жақсарту үшін пайдалануға болады. Олар тек 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 қосымша сәндеуді қолданамыз . Бұл үлгіні қажет болған жағдайда басқа жағдайларға кеңейте аласыз немесе нақты мәтін өз орнында көрсетілген кезде биіктікті көрсету үшін элементтің ішіне қосуға болады.::beforeheight 

<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Тор арқылы баған сыныптарын, ен утилиталарын немесе кірістірілген мәнерлерді өзгертуге болады .

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

Сасс

Айнымалылар

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