Placeholders

Uża placeholders tat-tagħbija għall-komponenti jew il-paġni tiegħek biex tindika xi ħaġa li tista' tkun għadha qed titgħabbi.

Fuq din il-paġna

Dwar

Placeholders jistgħu jintużaw biex itejbu l-esperjenza tal-applikazzjoni tiegħek. Huma mibnija biss b'HTML u CSS, jiġifieri m'għandekx bżonn JavaScript biex toħloqhom. Madankollu, ser ikollok bżonn xi JavaScript personalizzat biex taqleb il-viżibilità tagħhom. Id-dehra, il-kulur u d-daqs tagħhom jistgħu jiġu personalizzati faċilment bil-klassijiet ta 'utilità tagħna.

Eżempju

Fl-eżempju ta 'hawn taħt, nieħdu komponent ta' karta tipiku u noħolqu mill-ġdid b'placeholders applikati biex noħolqu "karta tat-tagħbija". Id-daqs u l-proporzjonijiet huma l-istess bejn it-tnejn.

Titolu tal-karta

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Mur x'imkien

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

Kif taħdem

Oħloq placeholders bil- .placeholderklassi u klassi tal-kolonna tal-grilja (eż, .col-6) biex tissettja l- width. Jistgħu jissostitwixxu t-test ġewwa element jew jiġu miżjuda bħala klassi modifikatur għal komponent eżistenti.

Aħna napplikaw grafika addizzjonali għal .btns via ::beforebiex niżguraw li l- heighthuwa rispettat. Tista' testendi dan il-mudell għal sitwazzjonijiet oħra kif meħtieġ, jew iżżid  fl-element biex tirrifletti l-għoli meta t-test attwali jingħata minfloku.

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

L-użu ta aria-hidden="true"' jindika biss li l-element għandu jkun moħbi għall-qarrejja tal-iskrin. L -imġieba tat- tagħbija tal-placeholder tiddependi fuq kif l-awturi fil-fatt se jużaw l-istili tal-placeholder, kif qed jippjanaw li jaġġornaw l-affarijiet, eċċ. Jista 'jkun meħtieġ xi kodiċi JavaScript biex tbiddel l-istat tal-placeholder u jinforma lill-utenti AT bl-aġġornament.

Wisa'

Tista 'tbiddel il- widthklassijiet tal-kolonna tal-grilja, l-utilitajiet tal-wisa', jew l-istili inline.

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

Kulur

B'mod awtomatiku, l- placeholderużi currentColor. Dan jista 'jiġi sostitwit b'kulur personalizzat jew klassi ta' utilità.

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

Daqs

Id-daqs ta ' .placeholders huma bbażati fuq l-istil tipografiku tal-element ġenitur. Ippersonalizzahom b'modifikaturi tad-daqs: .placeholder-lg, .placeholder-sm, jew .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>

Animazzjoni

Janima l-placeholders bi .placeholder-glowjew .placeholder-wavebiex twassal aħjar il-perċezzjoni ta’ xi ħaġa li qed titgħabba b’mod attiv .

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

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

Sass

Varjabbli

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