Placeholders

Cihên barkirinê ji bo pêkhate an rûpelên xwe bikar bînin da ku destnîşan bikin ku tiştek hîn jî tê barkirin.

Li ser vê rûpelê

Ji dor

Cihgir dikarin werin bikar anîn da ku ezmûna serîlêdana we zêde bikin. Ew tenê bi HTML û CSS-ê têne çêkirin, tê vê wateyê ku hûn hewce ne JavaScript-ê ne ku wan biafirînin. Lêbelê, hûn ê hewceyê hin JavaScript-a xwerû bikin ku dîtina wan biguhezînin. Xuyabûn, reng û mezinbûna wan bi dersên meyên karûbar bi hêsanî têne xweş kirin.

Mînak

Di mînaka jêrîn de, em pêkhateyek qertê ya tîpîk digirin û wê bi cîhgirên ku ji bo afirandina "karta barkirinê" hatine bicîh kirin ji nû ve diafirînin. Mezinahî û nîsbet di navbera herduyan de yek in.

Sernavê karta

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Biçe cihekî

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

Çawa dixebite

Cîgiran bi .placeholderpolê û çînek stûna torê (mînak, .col-6) biafirînin da ku xêz bikin width. Ew dikarin nivîsê di hundurê hêmanekê de biguhezînin an jî wekî çînek guhêrbar li pêkhateyek heyî werin zêdekirin.

Em bi rê ve şêwazek din li ser .btns ::beforebicîh dikin da ku heightrêz were girtin. Hûn dikarin li gorî hewcedariyê vê nimûneyê ji bo rewşên din dirêj bikin, an jî  hêmanek di hundurê hêmanê de zêde bikin da ku dema ku nivîsa rastîn li cîhê xwe were pêşkêş kirin bilindahiyê nîşan bide.

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>

Bikaranîna aria-hidden="true"tenê destnîşan dike ku divê hêman ji xwendevanên ekranê re were veşartin. Tevgera barkirina cîhê bi wê yekê ve girêdayî ye ku nivîskar dê çawa bi rastî şêwazên cîhgir bikar bînin, ew çawa plan dikin ku tiştan nûve bikin, hwd. Dibe ku hin kodên JavaScript-ê hewce bibin da ku rewşa cîhgir biguhezînin û bikarhênerên AT-ê ji nûvekirinê agahdar bikin.

Berî

Hûn dikarin widthçînên stûna torê, karûbarên firehiyê, an şêwazên hundurîn biguhezînin.

html

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

Reng

Bi xwerû, placeholderbikar tîne currentColor. Ev dikare bi rengek xwerû an çînek bikêrhatî were paşguh kirin.

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>

Mezinbûn

Mezinahiya .placeholders-yê li gorî şêwaza tîpografî ya hêmana dêûbav têne çêkirin. Wan bi guhêrbarên mezinbûnê xweş bikin: .placeholder-lg, .placeholder-sm, an .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>

Jayandarî

Cihên cîhan bi .placeholder-glowan jî .placeholder-waveji bo ku têgihîştina tiştek ku bi rengek çalak tê barkirin baştir ragihînin zindî bikin.

html

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

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

Sass

Variables

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