Орлуулагч

Ямар нэг зүйл ачаалагдаж байж болзошгүйг харуулахын тулд өөрийн бүрэлдэхүүн хэсгүүд эсвэл хуудаснууддаа ачаалах орлуулагчийг ашиглана уу.

Энэ хуудсан дээр

тухай

Орлуулагчийг таны хэрэглээний туршлагыг сайжруулахад ашиглаж болно. Тэдгээр нь зөвхөн 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 

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>

Хэмжээ тогтоох

s- ийн хэмжээ нь .placeholderэх элементийн хэвлэх хэв маягт суурилдаг. Хэмжээ тохируулагчаар тэдгээрийг тохируулна уу: .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;