Placeholders

Itilize loading placeholders pou konpozan ou oswa paj ou pou endike yon bagay ka toujou ap chaje.

Nan paj sa a

Konsènan

Yo ka itilize plas pou amelyore eksperyans aplikasyon w lan. Yo bati sèlman ak HTML ak CSS, sa vle di ou pa bezwen okenn JavaScript pou kreye yo. Sepandan, w ap bezwen kèk JavaScript koutim pou chanje vizibilite yo. Aparans yo, koulè, ak gwosè yo ka fasilman Customized ak klas sèvis piblik nou yo.

Egzanp

Nan egzanp ki anba la a, nou pran yon eleman kat tipik epi rkree li ak espas ki aplike pou kreye yon "chajman kat". Gwosè ak pwopòsyon yo se menm bagay la tou ant de la.

Tit kat la

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Ale yon kote

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

Ki jan li fonksyone

Kreye kote ki gen .placeholderklas la ak yon klas kolòn kadriyaj (egzanp, .col-6) pou mete width. Yo ka ranplase tèks la andedan yon eleman oswa yo ka ajoute kòm yon klas modifye nan yon eleman ki deja egziste.

Nou aplike manier adisyonèl nan .btns atravè ::beforeasire ke heightyo respekte. Ou ka pwolonje modèl sa a pou lòt sitiyasyon jan sa nesesè, oswa ajoute yon  nan eleman an pou reflete wotè a lè tèks aktyèl la rann nan plas li.

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>

Itilize nan aria-hidden="true"sèlman endike ke eleman nan ta dwe kache nan lektè ekran. Konpòtman chajman an nan plas la depann de fason otè yo pral aktyèlman itilize estil placeholder yo, ki jan yo planifye pou mete ajou bagay sa yo, elatriye. Gen kèk kòd JavaScript ka bezwen chanje eta a nan placeholder a epi enfòme itilizatè AT yo sou aktyalizasyon a.

Lajè

Ou ka chanje widthklas kolòn nan kadriyaj, sèvis piblik lajè, oswa estil inline.

html

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

Koulè

Pa default, placeholderitilize yo currentColor. Sa a ka pase sou plas ak yon koulè koutim oswa klas sèvis piblik.

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>

Dimansyon

Gwosè .placeholders yo baze sou style tipografik eleman paran an. Pèsonalize yo ak modifikatè gwosè: .placeholder-lg, .placeholder-sm, oswa .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>

Animasyon

Anime anplasman ak .placeholder-glowoswa .placeholder-wavepou pi byen transmèt pèsepsyon yon bagay ke yo te chaje aktivman .

html

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

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

Sass

Varyab

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