Anstataŭiloj
Uzu ŝarĝajn anstataŭaĵojn por viaj komponantoj aŭ paĝoj por indiki ke io ankoraŭ povas ŝarĝi.
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 .placeholder
klaso 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 .btn
s via ::before
por certigi, ke la height
estas 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.
<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>
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 width
klasojn de tra kradaj kolumnoj, larĝajn utilecojn aŭ enliniajn stilojn.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Koloro
Defaŭlte, la placeholder
uzoj currentColor
. Ĉi tio povas esti anstataŭita per kutima koloro aŭ utila klaso.
<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 .placeholder
s baziĝas sur la tipografia stilo de la gepatra elemento. Agordu ilin per grandecomodifiloj: .placeholder-lg
, .placeholder-sm
, aŭ .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>
Animacio
Anigi anstataŭaĵojn kun .placeholder-glow
aŭ .placeholder-wave
por pli bone transdoni la percepton pri io aktive ŝargita.
<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;