გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

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

გამოიყენეთ ჩატვირთვის ჩანაცვლების ველები თქვენი კომპონენტებისთვის ან გვერდებისთვის, რათა მიუთითოთ, რომ რაღაც კვლავ იტვირთება.

ამ გვერდზე

შესახებ

პლასჰოლდერები შეიძლება გამოყენებულ იქნას თქვენი აპლიკაციის გამოცდილების გასაუმჯობესებლად. ისინი აშენებულია მხოლოდ HTML და CSS-ით, რაც ნიშნავს, რომ თქვენ არ გჭირდებათ JavaScript მათი შესაქმნელად. ამასთან, დაგჭირდებათ რამდენიმე მორგებული JavaScript, რომ გადართოთ მათი ხილვადობა. მათი გარეგნობა, ფერი და ზომა შეიძლება ადვილად მორგებული იყოს ჩვენი კომუნალური კლასებით.

მაგალითი

ქვემოთ მოყვანილ მაგალითში, ჩვენ ვიღებთ ტიპიური ბარათის კომპონენტს და ხელახლა ვქმნით მას ჩანაცვლების ჩანაცვლებით, რომლებიც გამოიყენება „ჩამტვირთავი ბარათის“ შესაქმნელად. ზომა და პროპორციები ერთნაირია ორს შორის.

Placeholder
ბარათის სათაური

რამდენიმე სწრაფი მაგალითი ტექსტი, რომელიც დაეყრდნობა ბარათის სათაურს და შეადგინოს ბარათის შიგთავსის ძირითადი ნაწილი.

Სადმე წასვლა 
<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რომ დაცულია. თქვენ შეგიძლიათ გააფართოვოთ ეს ნიმუში სხვა სიტუაციებისთვის, როგორც საჭიროა, ან დაამატოთ &nbsp;ელემენტის შიგნით, რათა ასახავდეს სიმაღლეს, როდესაც რეალურ ტექსტს მის ადგილას ასახავს.

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