Leku-markak

Erabili kargatzeko leku-markak zure osagai edo orrietarako oraindik zerbait kargatzen ari dela adierazteko.

Orrialde honetan

Buruz

Leku-markak erabil daitezke zure aplikazioaren esperientzia hobetzeko. HTML eta CSSrekin soilik eraiki dira, hau da, ez duzu JavaScript behar horiek sortzeko. Hala ere, JavaScript pertsonalizatu batzuk beharko dituzu haien ikusgarritasuna aldatzeko. Haien itxura, kolorea eta tamaina erraz pertsonaliza daitezke gure erabilgarritasun klaseekin.

Adibidea

Beheko adibidean, txartel-osagai tipiko bat hartu eta leku-markekin birsortzen dugu "kargatzeko txartela" sortzeko. Tamaina eta proportzioak berdinak dira bien artean.

Txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Zoaz nonbait

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

Nola dabil

Sortu leku-markak .placeholderklasearekin eta sareta-zutabe-klase batekin (adibidez, .col-6) width. Elementu baten barruan dagoen testua ordezkatu dezakete edo lehendik dagoen osagai bati modifikatzaile klase gisa gehi daitezke.

Estilo osagarria aplikatzen diogu .btns bidez , errespetatzen ::beforedela ziurtatzeko . heightEredu hau beste egoera batzuetarako heda dezakezu behar izanez gero, edo  elementuaren barruan bat gehi dezakezu altuera islatzeko benetako testua bere lekuan errendatzen denean.

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>

Erabiltzeak aria-hidden="true"soilik adierazten du elementua pantaila-irakurleentzat ezkutatu behar dela. Leku -markaren karga -jokaera egileek leku-markaren estiloak benetan erabiliko dituzten, gauzak eguneratzeko asmoa duten eta abarren araberakoa da. Baliteke JavaScript kode batzuk behar izatea leku-markaren egoera aldatzeko eta AT erabiltzaileei eguneratzearen berri emateko.

Zabalera

widthSarearen bidezko zutabeen klaseak, zabalera-utilitateak edo lerroko estiloak alda ditzakezu .

html

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

Kolore

Lehenespenez, placeholdererabilerak currentColor. Hau kolore pertsonalizatu edo erabilgarritasun klase batekin gainidatzi daiteke.

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>

Tamaina

S -ren tamaina .placeholderelementu nagusiaren estilo tipografikoan oinarritzen da. Pertsonalizatu itzazu tamaina aldagailuekin: .placeholder-lg, .placeholder-sm, edo .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>

Animazioa

Animatu leku-markak .placeholder-glowaktiboki kargatzen ari .placeholder-waveden zerbaiten pertzepzioa hobeto adierazteko .

html

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

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

Sass

Aldagaiak

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