Symbole zastępcze

Użyj symboli zastępczych ładowania dla swoich komponentów lub stron, aby wskazać, że coś może się nadal ładować.

Na tej stronie

O

Symbole zastępcze mogą służyć do zwiększenia komfortu korzystania z aplikacji. Są zbudowane tylko z HTML i CSS, co oznacza, że nie potrzebujesz żadnego JavaScriptu do ich tworzenia. Będziesz jednak potrzebował niestandardowego kodu JavaScript, aby przełączyć ich widoczność. Ich wygląd, kolor i rozmiar można łatwo dostosować za pomocą naszych klas użyteczności.

Przykład

W poniższym przykładzie bierzemy typowy składnik karty i odtwarzamy go z zastosowaniem symboli zastępczych, aby utworzyć „kartę ładującą”. Rozmiar i proporcje są między nimi takie same.

Tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

Iść gdzieś

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

Jak to działa

Utwórz symbole zastępcze z .placeholderklasą i klasą kolumn siatki (np. .col-6), aby ustawić width. Mogą zastąpić tekst wewnątrz elementu lub zostać dodane jako klasa modyfikatora do istniejącego komponentu.

Stosujemy dodatkową stylizację do .btns via ::before, aby zapewnić jej heightprzestrzeganie. W razie potrzeby można rozszerzyć ten wzorzec na inne sytuacje lub dodać  wewnątrz elementu, aby odzwierciedlić wysokość, gdy rzeczywisty tekst jest renderowany w jego miejscu.

html

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

Użycie aria-hidden="true"tylko wskazuje, że element powinien być ukryty dla czytników ekranu. Zachowanie wczytywania symbolu zastępczego zależy od tego, w jaki sposób autorzy będą faktycznie używać stylów symbolu zastępczego, w jaki sposób planują aktualizować elementy itp. Może być potrzebny kod JavaScript do zamiany stanu symbolu zastępczego i poinformowania użytkowników AT o aktualizacji.

Szerokość

Można zmienić widthklasy słupów siatki przelotowej, narzędzia szerokości lub style wbudowane.

html

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

Kolor

Domyślnie placeholderużywa currentColor. Można to zmienić za pomocą niestandardowego koloru lub klasy użytkowej.

html

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

Rozmiary

Rozmiar .placeholders zależy od stylu typograficznego elementu nadrzędnego. Dostosuj je za pomocą modyfikatorów rozmiaru: .placeholder-lg, .placeholder-smlub .placeholder-xs.

html

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

Animacja

Animuj symbole zastępcze za pomocą .placeholder-glowlub .placeholder-wavew celu lepszego przekazania wrażenia, że coś jest aktywnie ładowane.

html

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

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

Sass

Zmienne

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