Staðfestar

Notaðu hleðslustaðsetningar fyrir íhluti eða síður til að gefa til kynna að eitthvað gæti enn verið að hlaðast.

Á þessari síðu

Um

Hægt er að nota staðgengla til að auka upplifun af umsókn þinni. Þau eru eingöngu byggð með HTML og CSS, sem þýðir að þú þarft ekki JavaScript til að búa þau til. Þú þarft hins vegar sérsniðið JavaScript til að skipta um sýnileika þeirra. Auðvelt er að aðlaga útlit þeirra, lit og stærð með tólum okkar.

Dæmi

Í dæminu hér að neðan tökum við dæmigerðan kortahluta og endurskapum hann með staðhöldum sem notaðir eru til að búa til „hleðslukort“. Stærð og hlutföll eru þau sömu á milli.

Titill korts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Farðu eitthvert

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

Hvernig það virkar

Búðu til staðgengla með .placeholderbekknum og töfludálkaflokki (td .col-6) til að stilla width. Þeir geta komið í stað texta inni í þætti eða verið bætt við sem breytingaflokki við núverandi íhlut.

Við notum viðbótarstíl á .btns via ::beforetil að tryggja að það heightsé virt. Þú getur framlengt þetta mynstur fyrir aðrar aðstæður eftir þörfum, eða bætt við  inn í frumefninu til að endurspegla hæðina þegar raunverulegur texti er sýndur á sínum stað.

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>

Notkun á aria-hidden="true"gefur aðeins til kynna að þátturinn ætti að vera falinn fyrir skjálesendum. Hleðsluhegðun staðgengils fer eftir því hvernig höfundar nota staðsetningarstílana í raun og veru, hvernig þeir ætla að uppfæra hlutina o.s.frv. Nokkur JavaScript kóða gæti þurft til að skipta um stöðu staðgengils og upplýsa AT notendur um uppfærsluna.

Breidd

Þú getur breytt dálkaflokkum í widthgegnum rist, breiddartólum eða innbyggðum stílum.

html

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

Litur

Sjálfgefið er að placeholdernota currentColor. Þetta er hægt að hnekkja með sérsniðnum lit eða tólaflokki.

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>

Stærð

Stærð .placeholders er byggð á leturfræðistíl foreldraþáttsins. Sérsníddu þau með stærðarbreytum: .placeholder-lg, .placeholder-sm, eða .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>

Hreyfimynd

Lífgaðu staðgengla með .placeholder-gloweða .placeholder-wavetil að koma betur á framfæri skynjun þess að eitthvað sé virkt hlaðið.

html

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

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

Sass

Breytur

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