Symbole zastępcze
Użyj symboli zastępczych ładowania dla swoich komponentów lub stron, aby wskazać, że coś może się nadal ładować.
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 .placeholder
klasą 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 .btn
s via ::before
, aby zapewnić jej height
przestrzeganie. 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.
<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"
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, jak planują aktualizować elementy itp. Do
zamiany stanu symbolu zastępczego i poinformowania użytkowników AT o aktualizacji może być potrzebny pewien kod JavaScript.
Szerokość
Można zmienić width
klasy słupów siatki przelotowej, narzędzia szerokości lub style wbudowane.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Kolor
Domyślnie placeholder
używa currentColor
. Można to zmienić za pomocą niestandardowego koloru lub klasy użytkowej.
<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 .placeholder
s zależy od stylu typograficznego elementu nadrzędnego. Dostosuj je za pomocą modyfikatorów rozmiaru: .placeholder-lg
, .placeholder-sm
lub .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>
Animacja
Animuj symbole zastępcze za pomocą .placeholder-glow
lub .placeholder-wave
w celu lepszego przekazania wrażenia, że coś jest aktywnie ładowane.
<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;