Paikkamerkit

Käytä komponenttien tai sivujen latauspaikkamerkkejä osoittaaksesi, että jotain saattaa vielä latautua.

Tällä sivulla

Noin

Paikkamerkkejä voidaan käyttää parantamaan sovelluksesi käyttökokemusta. Ne on rakennettu vain HTML:llä ja CSS:llä, joten et tarvitse JavaScriptiä niiden luomiseen. Tarvitset kuitenkin mukautetun JavaScriptin muuttaaksesi niiden näkyvyyttä. Niiden ulkonäköä, väriä ja kokoa voidaan helposti muokata hyödyllisyysluokillamme.

Esimerkki

Alla olevassa esimerkissä otamme tyypillisen korttikomponentin ja luomme sen uudelleen paikkamerkeillä, joita käytetään "latauskortin" luomiseksi. Koko ja mittasuhteet ovat samat näiden kahden välillä.

Kortin otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Mennä jonnekin

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

Kuinka se toimii

Luo paikkamerkit .placeholderluokan ja ruudukon sarakeluokan (esim. .col-6) kanssa asettaaksesi width. Ne voivat korvata elementin sisällä olevan tekstin tai lisätä olemassa olevan komponentin muokkausluokkana.

Käytämme .btns via :ssa lisätyyliä ::beforevarmistaaksemme, että heightsitä noudatetaan. Voit laajentaa tätä mallia muihin tilanteisiin tarpeen mukaan tai lisätä  elementin sisään korkeuden, kun varsinainen teksti hahmonnetaan sen tilalle.

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

Käyttö aria-hidden="true"osoittaa vain, että elementti tulee piilottaa näytönlukuohjelmilta. Paikkamerkin latauskäyttäytyminen riippuu siitä, kuinka kirjoittajat todella käyttävät paikkamerkkityylejä, kuinka he aikovat päivittää asioita jne. Jotkin JavaScript-koodit saattavat tarvita paikkamerkin tilan vaihtamista ja AT-käyttäjille ilmoittamista päivityksestä.

Leveys

Voit muuttaa widthläpivientiruudukon sarakeluokkia, leveysapuohjelmia tai rivin sisäisiä tyylejä.

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

Väri

Oletuksena placeholderkäyttää currentColor. Tämä voidaan ohittaa mukautetulla värillä tai hyödyllisyysluokalla.

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

Mitoitus

S :n koko .placeholderperustuu pääelementin typografiseen tyyliin. Mukauta niitä koon muokkaajilla: .placeholder-lg, .placeholder-sm, tai .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>

Animaatio

Animoi paikkamerkit yhdessä .placeholder-glowtai .placeholder-wavevälittääksesi paremmin käsityksen jostakin aktiivisesta latauksesta.

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

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

Sass

Muuttujat

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