Swikhomela-ndhawu

Tirhisa swikhomela-ndhawu swo layicha swa swiphemu swa wena kumbe matluka ku kombisa leswaku nchumu wo karhi wu nga ha va wa ha layicha.

Eka tluka leri

Hi

Swikhomela-ndhawu swi nga tirhisiwa ku ndlandlamuxa ntokoto wa xikombelo xa wena. Ti akiwile ntsena hi HTML na CSS, leswi vulaka leswaku a wu lavi JavaScript leswaku u ti endla. Hambiswiritano, u ta lava JavaScript yin’wana ya ntolovelo leswaku u cinca-cinca ku vonaka ka tona. Ku languteka ka tona, muvala ni mpimo wa tona swi nga endliwa hi ku olova hi ku tirhisa titlilasi ta hina ta switirhisiwa.

Xikombiso

Eka xikombiso lexi nga laha hansi, hi teka xiphemu xa khadi lexi tolovelekeke hi xi tumbuluxa nakambe hi swikhomela-ndhawu leswi tirhisiweke ku endla “khadi ro layicha”. Vukulu na mpimo swa fana exikarhi ka leswimbirhi.

Xihloko xa khadi

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Yana kun’wana

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

Ndlela leyi swi tirhaka ha yona

Endla swikhomela-ndhawu hi .placeholdertlilasi na tlilasi ya kholomo ya gridi (xikombiso, .col-6) ku veka width. Va nga siva tsalwa endzeni ka xiaki kutani va engeteriwa tanihi tlilasi ya mucinci eka xiphemu lexi nga kona.

Hi tirhisa switayili swo engetela eka .btns via ::beforeku tiyisisa leswaku the heightya xiximiwa. U nga ha andlala xivumbeko lexi eka swiyimo swin’wana tanihilaha swi lavekaka hakona, kumbe u engetela  endzeni ka elemente ku kombisa ku tlakuka loko tsalwa ra xiviri ri hundzuluxeriwa ematshan’wini ya rona.

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

Ku tirhisiwa ka aria-hidden="true"ntsena swi kombisa leswaku elemente yi fanele ku fihliwa eka vahlayi va xikirini. Mahanyelo yo layicha ya xikhomela-ndhawu ya ya hi ndlela leyi vatsari va nga ta tirhisa ha yona switayele swa xikhomela-ndhawu hakunene, ndlela leyi va kunguhataka ku pfuxeta swilo ha yona, na swin’wana na swin’wana Khodi yin’wana ya JavaScript yi nga ha laveka ku cincana xiyimo xa xikhomela-ndhawu na ku tivisa vatirhisi va AT hi ku pfuxetiwa.

Anama

U nga cinca widthtitlilasi ta kholomo ya through grid, switirhisiwa swa ku anama, kumbe switayele swa le ndzeni ka layini.

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

Muhlovo

Hi ku tiyimisela, placeholdermatirhiselo ya currentColor. Leswi swi nga ha tluriwa hi muvala wa ntolovelo kumbe tlilasi ya vukorhokeri.

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

Ku pima mpimo

Vukulu bya .placeholders byi sekeriwe eka xitayili xa ku thayipa xa xiaki xa mutswari. Swi endle leswaku swi va leswi u swi lavaka hi swilo leswi cinca-cincaka mpimo: .placeholder-lg, .placeholder-sm, kumbe .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>

Swifaniso leswi hanyaka

Animate placeholders hi .placeholder-glowkumbe .placeholder-waveku hundzisela ku antswa mavonelo ya nchumu lowu layichiweke hi ku gingiriteka .

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

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

Sass

Swilo leswi cinca-cincaka

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