Oʻrin egalari

Biror narsa hali ham yuklanayotganini ko'rsatish uchun komponentlaringiz yoki sahifalaringiz uchun yuklash to'ldiruvchilaridan foydalaning.

Ushbu sahifada

Haqida

To'ldiruvchilar ilovangiz tajribasini yaxshilash uchun ishlatilishi mumkin. Ular faqat HTML va CSS bilan yaratilgan, ya'ni ularni yaratish uchun sizga hech qanday JavaScript kerak emas. Biroq, ularning ko'rinishini almashtirish uchun sizga ba'zi maxsus JavaScript kerak bo'ladi. Ularning tashqi ko'rinishi, rangi va o'lchamlari bizning yordamchi sinflarimiz bilan osongina moslashtirilishi mumkin.

Misol

Quyidagi misolda biz odatiy karta komponentini olamiz va uni "yuklash kartasi" yaratish uchun qo'llaniladigan to'ldiruvchilar bilan qayta yaratamiz. Hajmi va nisbati ikkalasi o'rtasida bir xil.

Karta sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Bir joyga boring

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

U qanday ishlaydi

.placeholderni o'rnatish uchun sinf va panjara ustunlari sinfi (masalan, .col-6) bilan to'ldiruvchilarni yarating width. Ular element ichidagi matnni almashtirishi yoki mavjud komponentga modifikator sinfi sifatida qo'shilishi mumkin.

.btnBiz s via ga qo'shimcha uslubni qo'llaymiz , bu esa hurmat qilinishini ::beforeta'minlaydi . heightAgar kerak bo'lsa, ushbu naqshni boshqa holatlar uchun kengaytirishingiz mumkin yoki  haqiqiy matn o'z o'rnida berilganda balandlikni aks ettirish uchun element ichiga qo'shishingiz mumkin.

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>

dan foydalanish aria-hidden="true"faqat elementni ekran o'quvchilariga yashirish kerakligini ko'rsatadi. To'ldiruvchining yuklanish harakati mualliflar to'ldiruvchi uslublardan qanday foydalanishiga, narsalarni qanday yangilashni rejalashtirayotganiga va hokazolarga bog'liq. To'ldiruvchining holatini almashtirish va AT foydalanuvchilarini yangilanish haqida xabardor qilish uchun ba'zi JavaScript kodi kerak bo'lishi mumkin.

Kengligi

Siz widthtarmoq ustunlari sinflarini, kenglik yordamchi dasturlarini yoki inline uslublarini o'zgartirishingiz mumkin.

html

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

Rang

Odatiy bo'lib, placeholderfoydalanadi currentColor. Buni maxsus rang yoki yordamchi sinf bilan bekor qilish mumkin.

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>

Hajmi

s ning o'lchami .placeholderasosiy elementning tipografik uslubiga asoslanadi. Ularni oʻlcham oʻzgartirish moslamalari bilan moslashtiring: .placeholder-lg, .placeholder-sm, yoki .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>

Animatsiya

Faol yuklanayotgan narsaning idrokini yaxshiroq etkazish uchun .placeholder-glowto'ldiruvchilarni jonlantiring ..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>

Sass

O'zgaruvchilar

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