Dalfannau
Defnyddiwch ddalfannau llwytho ar gyfer eich cydrannau neu dudalennau i ddangos y gallai rhywbeth fod yn dal i lwytho.
Ynghylch
Gellir defnyddio deiliaid lleoedd i wella profiad eich cais. Maent wedi'u hadeiladu gyda HTML a CSS yn unig, sy'n golygu nad oes angen unrhyw JavaScript arnoch i'w creu. Fodd bynnag, bydd angen rhywfaint o JavaScript personol arnoch i newid eu gwelededd. Gellir addasu eu hymddangosiad, lliw a maint yn hawdd gyda'n dosbarthiadau cyfleustodau.
Enghraifft
Yn yr enghraifft isod, rydym yn cymryd cydran cerdyn nodweddiadol ac yn ei hail-greu gyda dalfannau wedi'u cymhwyso i greu "cerdyn llwytho". Mae maint a chyfrannau'r un peth rhwng y ddau.
Teitl y cerdyn
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
Ewch i rywle<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>
Sut mae'n gweithio
Creu dalfannau gyda'r .placeholder
dosbarth a dosbarth colofn grid (ee, .col-6
) i osod y width
. Gallant ddisodli'r testun y tu mewn i elfen neu eu hychwanegu fel dosbarth addasydd i gydran sy'n bodoli eisoes.
Rydym yn defnyddio steilio ychwanegol i .btn
s via ::before
er mwyn sicrhau y height
caiff ei barchu. Gallwch ymestyn y patrwm hwn ar gyfer sefyllfaoedd eraill yn ôl yr angen, neu ychwanegu o
fewn yr elfen i adlewyrchu'r uchder pan fydd y testun gwirioneddol yn cael ei rendro yn ei le.
<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"
dim ond yn nodi y dylai'r elfen gael ei chuddio i ddarllenwyr sgrin. Mae
ymddygiad llwytho'r dalfan yn dibynnu ar sut y bydd awduron yn defnyddio'r arddulliau dalfan mewn gwirionedd, sut maent yn bwriadu diweddaru pethau, ac ati Efallai y bydd angen rhywfaint o god JavaScript i
gyfnewid cyflwr y dalfan a hysbysu defnyddwyr AT am y diweddariad.
Lled
Gallwch newid y width
dosbarthiadau colofn grid drwodd, cyfleustodau lled, neu arddulliau mewn-lein.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Lliw
Yn ddiofyn, mae'r placeholder
defnyddiau currentColor
. Gellir diystyru hyn gyda lliw arferol neu ddosbarth cyfleustodau.
<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>
Maintioli
Mae maint .placeholder
s yn seiliedig ar arddull teipograffeg y rhiant elfen. Addaswch nhw gydag addaswyr maint: .placeholder-lg
, .placeholder-sm
, neu .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>
Animeiddiad
Animeiddio deiliaid lleoedd gyda .placeholder-glow
neu .placeholder-wave
i gyfleu'n well y canfyddiad bod rhywbeth yn cael ei lwytho'n weithredol .
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Newidynnau
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;