Skeleton

Zastępniki, które trzymają miejsce treści podczas ładowania, aby strona nie skakała. Wybierz SkeletonRow dla list i tabel, SkeletonText dla akapitów, a Skeleton dla każdego innego kształtu.

Skeleton
SkeletonText
SkeletonRow

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: Skeleton

Noc, podgląd: Skeleton

Wysoki kontrast, podgląd: Skeleton

UżycieLink do sekcji Użycie

tsx

import { Skeleton, SkeletonText, SkeletonRow } from '@skribly/ui/feedback'

tsx

<div aria-busy={loading}>
  <Spinner label="Loading members" showLabel size="sm" />
  <SkeletonRow />
  <SkeletonRow />
</div>

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Szkielety są ukryte przed czytnikami ekranu.
Oznacz kontener ładowania przez aria-busy i połącz go ze Spinner albo komunikatem statusu, który mówi, co się ładuje.
Pulsowanie zatrzymuje się przy ograniczonym ruchu, a ramka utrzymuje widoczność kształtów w trybie wymuszonych kolorów.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.