Placeholders
Uża placeholders tat-tagħbija għall-komponenti jew il-paġni tiegħek biex tindika xi ħaġa li tista' tkun għadha qed titgħabbi.
Dwar
Placeholders jistgħu jintużaw biex itejbu l-esperjenza tal-applikazzjoni tiegħek. Huma mibnija biss b'HTML u CSS, jiġifieri m'għandekx bżonn JavaScript biex toħloqhom. Madankollu, ser ikollok bżonn xi JavaScript personalizzat biex taqleb il-viżibilità tagħhom. Id-dehra, il-kulur u d-daqs tagħhom jistgħu jiġu personalizzati faċilment bil-klassijiet ta 'utilità tagħna.
Eżempju
Fl-eżempju ta 'hawn taħt, nieħdu komponent ta' karta tipiku u noħolqu mill-ġdid b'placeholders applikati biex noħolqu "karta tat-tagħbija". Id-daqs u l-proporzjonijiet huma l-istess bejn it-tnejn.
Titolu tal-karta
Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.
Mur x'imkien<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>
Kif taħdem
Oħloq placeholders bil- .placeholder
klassi u klassi tal-kolonna tal-grilja (eż, .col-6
) biex tissettja l- width
. Jistgħu jissostitwixxu t-test ġewwa element jew jiġu miżjuda bħala klassi modifikatur għal komponent eżistenti.
Aħna napplikaw grafika addizzjonali għal .btn
s via ::before
biex niżguraw li l- height
huwa rispettat. Tista' testendi dan il-mudell għal sitwazzjonijiet oħra kif meħtieġ, jew iżżid
fl-element biex tirrifletti l-għoli meta t-test attwali jingħata minfloku.
<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"
' jindika biss li l-element għandu jkun moħbi għall-qarrejja tal-iskrin. L
-imġieba tat- tagħbija tal-placeholder tiddependi fuq kif l-awturi fil-fatt se jużaw l-istili tal-placeholder, kif qed jippjanaw li jaġġornaw l-affarijiet, eċċ. Jista 'jkun meħtieġ xi kodiċi JavaScript biex
tbiddel l-istat tal-placeholder u jinforma lill-utenti AT bl-aġġornament.
Wisa'
Tista 'tbiddel il- width
klassijiet tal-kolonna tal-grilja, l-utilitajiet tal-wisa', jew l-istili inline.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Kulur
B'mod awtomatiku, l- placeholder
użi currentColor
. Dan jista 'jiġi sostitwit b'kulur personalizzat jew klassi ta' utilità.
<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>
Daqs
Id-daqs ta ' .placeholder
s huma bbażati fuq l-istil tipografiku tal-element ġenitur. Ippersonalizzahom b'modifikaturi tad-daqs: .placeholder-lg
, .placeholder-sm
, jew .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>
Animazzjoni
Janima l-placeholders bi .placeholder-glow
jew .placeholder-wave
biex twassal aħjar il-perċezzjoni ta’ xi ħaġa li qed titgħabba b’mod attiv .
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Varjabbli
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;