Meeleeyayaasha

U isticmaal meelaha wax rarida qaybahaaga ama boggaga si aad u muujiso in wax wali soo shubanayaan.

Boggan

Ku saabsan

Meel-hayeyaasha waxa loo isticmaali karaa in kor loogu qaado khibrada codsigaaga. Waxay ku dhismeen oo keliya HTML iyo CSS, taasoo la micno ah inaadan u baahnayn JavaScript si aad u abuurto. Waxaad, si kastaba ha ahaatee, u baahan doontaa qaar ka mid ah JavaScript caadadii si aad u beddesho muuqaalkooda. Muuqaalkooda, midabkooda, iyo cabbirkooda si fudud ayaa loogu habeyn karaa fasalladayada tamarta.

Tusaale

Tusaalaha hoose, waxaanu qaadanaa qayb ka mid ah kaadhka caadiga ah waxaanan ku celinaynaa meel-hayeyaal lagu codsado si ay u abuuraan "kaarka rarista". Baaxadda iyo saamiga waa isku mid inta u dhaxaysa labada.

Magaca kaadhka

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

Meel tag

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

Sida ay u shaqeyso

Abuur meel-hayeyaal leh .placeholderfasalka iyo fasalka tiireedka (tusaale, .col-6) si loo dejiyo width. Waxay bedeli karaan qoraalka gudaha curiye ama waxaa lagu dari karaa sidii fasalka wax ka beddelka qayb jira.

Waxaan ku dabaqnaa habayn dheeri ah .btns via ::beforesi loo hubiyo in heightla ixtiraamo. Waxaad ku dari kartaa qaabkan xaaladaha kale haddii loo baahdo, ama waxaad ku dari kartaa  cutubka dhexdiisa si aad u muujiso dhererka marka qoraalka dhabta ah lagu dhejiyo meesheeda.

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>

Isticmaalka aria-hidden="true"kaliya ayaa tilmaamaya in curiyaha lagu qariyo akhristayaasha shaashadda. Dabeecada soo dejinta ee meeleeyaha waxay kuxirantahay sida qorayaashu ay dhab ahaantii u isticmaali doonaan qaababka meeleeyaha, sida ay u qorsheynayaan inay wax u cusboonaysiiyaan, iwm. Qaar ka mid ah koodka JavaScript ayaa laga yaabaa in loo baahdo si loo bedelo xaalada meeleeyaha oo loogu sheego isticmaalayaasha AT cusboonaysiinta.

Ballaca

Waxaad ka beddeli kartaa widthfasalada tiirarka grid-ka, yutiilitida ballaca, ama qaababka khadka.

html

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

Midabka

Sida caadiga ah, placeholderisticmaalka currentColor. Tan waxaa lagaga gudbi karaa midab gaar ah ama fasalka utility.

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>

Cabbirka

Baaxadda .placeholders waxay ku saleysan tahay qaabka qoraalka ee xubinta waalidka. Ku beddel iyaga oo isticmaalaya cabbirada cabbirka: .placeholder-lg, .placeholder-sm, ama .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>

Animation

Ku nooleeya meel-hayeyaasha leh .placeholder-glowama .placeholder-wavesi ka wanaagsan u gudbiyaan aragtida shay si firfircoon loogu rarayo.

html

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

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

Sass

Kala duwanaansho

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