Platzhalter
Verwenden Sie Ladeplatzhalter für Ihre Komponenten oder Seiten, um anzuzeigen, dass möglicherweise noch etwas geladen wird.
Um
Platzhalter können verwendet werden, um das Erlebnis Ihrer Anwendung zu verbessern. Sie werden nur mit HTML und CSS erstellt, was bedeutet, dass Sie kein JavaScript benötigen, um sie zu erstellen. Sie benötigen jedoch ein benutzerdefiniertes JavaScript, um ihre Sichtbarkeit umzuschalten. Ihr Aussehen, ihre Farbe und ihre Größe können mit unseren Gebrauchsklassen einfach angepasst werden.
Beispiel
Im folgenden Beispiel nehmen wir eine typische Kartenkomponente und erstellen sie mit angewendeten Platzhaltern neu, um eine „Ladekarte“ zu erstellen. Größe und Proportionen sind bei beiden gleich.
Kartentitel
Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.
Irgendwohin gehen<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>
Wie es funktioniert
Erstellen Sie Platzhalter mit der .placeholder
Klasse und einer Rasterspaltenklasse (z. B. .col-6
), um die width
. Sie können den Text in einem Element ersetzen oder einer vorhandenen Komponente als Modifikatorklasse hinzugefügt werden.
Wir wenden zusätzliches Styling auf .btn
s via ::before
an, um sicherzustellen, dass das height
respektiert wird. Sie können dieses Muster nach Bedarf für andere Situationen erweitern oder ein
innerhalb des Elements hinzufügen, um die Höhe widerzuspiegeln, wenn tatsächlicher Text an seiner Stelle gerendert wird.
<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"
zeigt nur an, dass das Element für Screenreader ausgeblendet werden soll. Das
Ladeverhalten des Platzhalters hängt davon ab, wie Autoren die Platzhalterstile tatsächlich verwenden, wie sie Dinge aktualisieren möchten usw. Möglicherweise ist etwas JavaScript-Code erforderlich,
um den Status des Platzhalters auszutauschen und AT-Benutzer über die Aktualisierung zu informieren.
Breite
Sie können die width
Spaltenklassen, Breitendienstprogramme oder Inline-Stile durch das Raster ändern.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Farbe
Standardmäßig placeholder
verwendet die currentColor
. Dies kann mit einer benutzerdefinierten Farbe oder Utility-Klasse überschrieben werden.
<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>
Dimensionierung
Die Größe von .placeholder
s basiert auf dem typografischen Stil des übergeordneten Elements. Passen Sie sie mit Größenmodifikatoren an: .placeholder-lg
, .placeholder-sm
, oder .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>
Animation
Animieren Sie Platzhalter mit .placeholder-glow
oder .placeholder-wave
, um besser die Wahrnehmung zu vermitteln, dass etwas aktiv geladen wird.
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Variablen
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;