mittwald Flow Logo

Components

Skeleton

Das Skeleton zeigt als Platzhalter eine vereinfachte Vorschau der Benutzeroberfläche, bis der Content vollständig geladen ist.GitHub

Playground

Verwende <Skeleton />, um ein Skeleton anzuzeigen.

import { Skeleton } from "@mittwald/flow-react-components";

<Skeleton />

Benutzerdefinierte Größe

Skeletons können mit dem width- oder height-Attribut angepasst werden, um die grobe Ladevorschau an die Benutzeroberfläche anzupassen.

import { Skeleton } from "@mittwald/flow-react-components";

<Column>
  <Skeleton height="100px" />
  <Skeleton height="100px" width="100px" />
</Column>

Accessibility

Das Skeleton verwendet das Property aria-hidden, damit es vom Screenreader ignoriert wird.

Die Accessibility eines Ladezustands soll nicht vom Skeleton geregelt werden.

Um Screenreadern mitzuteilen, dass Inhalte noch geladen werden, sollte das Property aria-busy verwendet werden. Dieses wird auf false gesetzt, sobald der Ladevorgang abgeschlossen ist (s. MDN).

Overview