Vietos žymos

Norėdami nurodyti, kad kažkas vis dar gali būti įkeliama, naudokite savo komponentų ar puslapių įkėlimo vietos rezervavimo ženklus.

Šiame puslapyje

Apie

Vietos žymekliai gali būti naudojami siekiant pagerinti jūsų programos patirtį. Jie sukurti tik naudojant HTML ir CSS, o tai reiškia, kad jiems sukurti nereikia jokio JavaScript. Tačiau jums reikės tam tikro tinkinto „JavaScript“, kad perjungtumėte jų matomumą. Jų išvaizdą, spalvą ir dydį galima lengvai pritaikyti pagal mūsų naudingumo klases.

Pavyzdys

Toliau pateiktame pavyzdyje paimame tipinį kortelės komponentą ir iš naujo sukuriame jį naudodami vietos rezervavimo ženklus, kad sukurtume „įkėlimo kortelę“. Dydis ir proporcijos yra vienodos tarp dviejų.

Kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Eik kur nors

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

Kaip tai veikia

Sukurkite vietos rezervavimo ženklus su .placeholderklase ir tinklelio stulpelio klase (pvz., .col-6), kad nustatytumėte width. Jie gali pakeisti tekstą elemento viduje arba pridėti kaip modifikavimo klasę prie esamo komponento.

Siekdami užtikrinti, kad būtų laikomasi .btns via , taikome papildomą stilių . Jei reikia, galite išplėsti šį šabloną kitoms situacijoms arba pridėti elementą, kad atspindėtų aukštį, kai tikrasis tekstas atvaizduojamas jo vietoje.::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>

Naudojimas aria-hidden="true"tik reiškia, kad elementas turi būti paslėptas ekrano skaitytuvuose. Vietos žymeklio įkėlimas priklauso nuo to, kaip autoriai iš tikrųjų naudos rezervuotos vietos stilius, kaip jie planuoja atnaujinti dalykus ir tt Gali prireikti JavaScript kodo, kad būtų pakeista rezervuotos vietos žymeklio būsena ir informuojami AT naudotojai apie atnaujinimą.

Plotis

Galite keisti widthtinklelio stulpelių klases, pločio įrankius arba eilutinius stilius.

html

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

Spalva

Pagal numatytuosius nustatymus placeholdernaudoja currentColor. Tai gali būti pakeista pasirinkta spalva arba naudingumo klase.

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>

Dydžio nustatymas

S dydis .placeholderyra pagrįstas pirminio elemento tipografiniu stiliumi. Tinkinkite juos naudodami dydžio modifikatorius: .placeholder-lg, .placeholder-sm, arba .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>

Animacija

Suaktyvinkite vietos žymeklius su .placeholder-glowarba .placeholder-wavegeriau perteikite suvokimą, kad kažkas aktyviai įkeliama.

html

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

Sass

Kintamieji

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