Verwende SkeletonText für ...
- Textzeilen, deren Höhe sich aus der umgebenden Typografie ergibt.
- Überschriften, Fließtext und Labels.
Grundlagen
Der SkeletonText ist der Platzhalter für eine Textzeile, die noch geladen wird. Er passt sich der Typografie seines Umfelds an und deutet so an, welcher Text an dieser Stelle erscheint.
Best Practices
Achte bei der Verwendung eines SkeletonTexts darauf, dass ...
- er innerhalb der Component steht, die später den Text enthält (z. B. Text oder Heading). So entspricht seine Höhe der finalen Typografie und es entsteht kein Layout-Sprung.
- seine Breite ungefähr der Länge des erwarteten Textes entspricht.
- pro Textblock nur wenige Zeilen verwendet werden – zwei bis drei genügen, um den Inhalt anzudeuten, ohne visuelle Unruhe zu erzeugen.
- er ausschließlich für das initiale und kurzzeitige Laden eingesetzt wird. Für andere Lade- oder Feedbackprozesse verwende beispielsweise stattdessen den LoadingSpinner.
Verwendung
Verwende einen SkeletonText, um Textinhalte wie Überschriften, Fließtext oder Labels während des Ladens als Platzhalter darzustellen.
SkeletonText vs. Skeleton
SkeletonText und Skeleton haben dasselbe Erscheinungsbild, unterscheiden sich aber in ihrer Größe.
Verwende Skeleton für ...
- Flächen, deren Größe du selbst festlegst.
- Bilder, Avatare und andere grafische Elemente.
Anwendung
Ein SkeletonText ersetzt den späteren Text an genau der Stelle, an der dieser erscheint. Bilde damit die Struktur der Seite nach – also Überschrift, Absätze und Labels in ihrer tatsächlichen Reihenfolge und Position.
Mehrere SkeletonTexts untereinander deuten einen Textblock an. Variiere dabei die Breite der letzten Zeile, damit der Block wie echter Fließtext wirkt.