Platzhalter

Verwenden Sie Ladeplatzhalter für Ihre Komponenten oder Seiten, um anzuzeigen, dass möglicherweise noch etwas geladen wird.

Auf dieser Seite

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 .placeholderKlasse 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 .btns via ::beforean, um sicherzustellen, dass das heightrespektiert 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.

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>

Die Verwendung von 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 widthSpaltenklassen, Breitendienstprogramme oder Inline-Stile durch das Raster ändern.

html

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

Farbe

Standardmäßig placeholderverwendet die currentColor. Dies kann mit einer benutzerdefinierten Farbe oder Utility-Klasse überschrieben werden.

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>

Dimensionierung

Die Größe von .placeholders basiert auf dem typografischen Stil des übergeordneten Elements. Passen Sie sie mit Größenmodifikatoren an: .placeholder-lg, .placeholder-sm, oder .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>

Animation

Animieren Sie Platzhalter mit .placeholder-glowoder .placeholder-wave, um besser die Wahrnehmung zu vermitteln, dass etwas aktiv geladen wird.

html

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