Dagiti Placeholder

Usaren dagiti pagkargaan a lugar para kadagiti paset wenno panidmo tapno mangipakita ti maysa a banag a mabalin a maikarga pay laeng.

Iti daytoy a panid

Maipapan

Mabalin nga usaren dagiti placeholder tapno mapasayaat ti padas ti aplikasionmo. Dagitoy ket naibangon laeng babaen ti HTML ken CSS, kayatna a sawen a saanmo a kasapulan ti ania man a JavaScript tapno makaaramid kadagitoy. Nupay kasta, kasapulam ti sumagmamano a kostumbre a JavaScript tapno mai-toggle ti pannakakitada. Nalaka laeng a ma-customize ti langa, kolor, ken kadakkelda babaen kadagiti klasetayo iti utilidad.

Pagwadan

Iti pagarigan iti baba, alaentayo ti gagangay a paset ti kard ken mangparnuay manen daytoy nga addaan kadagiti placeholder a naipakat tapno mangpartuat ti “loading card”. Agpapada ti kadakkel ken proporsion iti nagbaetan dagitoy a dua.

Titulo ti kard

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Mapanka iti sadinoman

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

No kasano ti panagandar dayta

Mangpartuat kadagiti placeholder nga addaan ti .placeholderklase ken ti maysa a klase ti adigi ti grid (kas pagarigan, .col-6) tapno mangikeddeng ti width. Mabalinda a sukatan ti teksto iti uneg ti maysa nga elemento wenno mainayon a kas maysa a klase ti mangbalbaliw iti addan a paset.

Iyaplikarmi ti kanayonan nga estilo iti .btns via ::beforetapno masigurado heighta mararaem ti. Mabalinmo nga palawaen daytoy a padron para kadagiti sabali a kasasaad no kasapulan, wenno manginayon ti maysa iti  uneg ti elemento tapno maiparangarang ti kangato no ti aktual a teksto ket naiparang iti lugarna.

html nga

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

Ti panagusar ti aria-hidden="true"ket mangipakita laeng a ti elemento ket rumbeng a mailemmeng kadagiti agbasbasa ti iskrin. Ti panagkarga a kababalin ti placeholder ket agpannuray no kasano nga aktual nga usaren dagiti mannurat dagiti estilo ti placeholder, no kasano ti planoda a mangpabaro kadagiti banag, kdpy.. Mabalin a kasapulan ti sumagmamano a kodigo ti JavaScript tapno agsinnukat ti kasasaad ti placeholder ken mangipakaammo kadagiti agar-aramat ti AT ti panagpabaro.

Kaakaba

Mabalinmo a baliwan dagiti widthklase ti kolum babaen ti grid, dagiti utilidad ti kalawa, wenno dagiti estilo ti inline.

html nga

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

Maris

Babaen ti default, dagiti placeholderagus -usar iti currentColor. Daytoy ket mabalin a maibabawi babaen ti kostumbre a kolor wenno klase ti utilidad.

html nga

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

Panag-sizing

Ti kadakkel ti .placeholders ket naibatay iti tipograpiko nga estilo ti nagannak nga elemento. Ipasayaat dagitoy babaen kadagiti mangbalbaliw iti kadakkel: .placeholder-lg, .placeholder-sm, wenno .placeholder-xs.

html nga

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

Animasion nga

Animate dagiti placeholder nga addaan .placeholder-glowwenno .placeholder-wavetapno nasaysayaat a maipakaammo ti pannakaawat ti maysa a banag nga aktibo a maikarga.

html nga

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

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

Sass nga

Dagiti Variable

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