პლასჰოლდერები

შესახებ

პლასჰოლდერები შეიძლება გამოყენებულ იქნას თქვენი აპლიკაციის გამოცდილების გასაუმჯობესებლად. ისინი აშენებულია მხოლოდ 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რომ დაცულია. თქვენ შეგიძლიათ გააფართოვოთ ეს ნიმუში სხვა სიტუაციებისთვის, როგორც საჭიროა, ან დაამატოთ  ელემენტის შიგნით, რათა ასახავდეს სიმაღლეს, როდესაც რეალურ ტექსტს მის ადგილას ასახავს.

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

სიგანე

თქვენ შეგიძლიათ შეცვალოთ 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;