Anstataŭiloj

Uzu ŝarĝajn anstataŭaĵojn por viaj komponantoj aŭ paĝoj por indiki ke io ankoraŭ povas ŝarĝi.

Sur ĉi tiu paĝo

Pri

Anstataŭiloj povas esti uzataj por plibonigi la sperton de via aplikaĵo. Ili estas konstruitaj nur kun HTML kaj CSS, tio signifas, ke vi ne bezonas JavaScript por krei ilin. Vi tamen bezonos iom da kutimo JavaScript por ŝanĝi ilian videblecon. Ilia aspekto, koloro kaj grandeco povas esti facile personecigitaj kun niaj utilaj klasoj.

Ekzemplo

En la malsupra ekzemplo, ni prenas tipan kartan komponanton kaj rekreas ĝin per anstataŭiloj aplikataj por krei "ŝarĝan karton". Grandeco kaj proporcioj estas la samaj inter la du.

Kartotitolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Iru ien

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

Kiel ĝi funkcias

Kreu anstataŭaĵojn kun la .placeholderklaso kaj kradkolumna klaso (ekz. .col-6) por agordi la width. Ili povas anstataŭigi la tekston ene de elemento aŭ esti aldonitaj kiel modifklaso al ekzistanta komponento.

Ni aplikas plian stilon al .btns via ::beforepor certigi, ke la heightestas respektata. Vi povas etendi ĉi tiun ŝablonon por aliaj situacioj laŭbezone, aŭ aldoni  ene de la elemento por reflekti la altecon kiam reala teksto estas prezentita anstataŭe.

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>

La uzo de aria-hidden="true"nur indikas, ke la elemento estu kaŝita al ekranlegantoj. La ŝarĝa konduto de la lokokupilo dependas de kiel aŭtoroj efektive uzos la loktenilojn, kiel ili planas ĝisdatigi aferojn, ktp. Eble necesas iom da JavaScript-kodo por interŝanĝi la staton de la lokokupilo kaj informi AT-uzantojn pri la ĝisdatigo.

Larĝo

Vi povas ŝanĝi la widthklasojn de tra kradaj kolumnoj, larĝajn utilecojn aŭ enliniajn stilojn.

html

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

Koloro

Defaŭlte, la placeholderuzoj currentColor. Ĉi tio povas esti anstataŭita per kutima koloro aŭ utila klaso.

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>

Dimensio

La grandeco de .placeholders baziĝas sur la tipografia stilo de la gepatra elemento. Agordu ilin per grandecomodifiloj: .placeholder-lg, .placeholder-sm, 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>

Animacio

Anigi anstataŭaĵojn kun .placeholder-glowaŭ .placeholder-wavepor pli bone transdoni la percepton pri io aktive ŝargita.

html

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

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

Sass

Variabloj

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