Designsystemet Flutter

Utseende

DsSkeleton ​

Plassholder for innhold som lastes.

Bruk ​

Når bør du bruke DsSkeleton? ​

  • Når innhold hentes asynkront og du vil indikere at noe er på vei.
  • For å gi brukeren en visuell indikasjon på sideoppsettet mens data lastes.
  • Når du vil unngå sprangvis layoutendring (layout shift) ved lasting.

Når bør du unngå DsSkeleton? ​

  • Når innholdet lastes svært raskt (under 300 ms) — da kan skjelettet flimre og forstyrre.
  • Når du har viktige statusmeldinger — bruk en spinner eller lasteindikator med tekst i stedet.

Eksempler ​

Grunnleggende bruk ​

DsSkeleton — interaktiv forhåndsvisning
Åpne i nytt vindu ↗
dart
Column(
  children: [
    DsSkeleton(width: 200, height: 24),
    SizedBox(height: 8),
    DsSkeleton(width: double.infinity, height: 16),
    SizedBox(height: 4),
    DsSkeleton(width: double.infinity, height: 16),
  ],
)

Med variant ​

dart
// Sirkulær plassholder (f.eks. for avatar)
DsSkeleton(variant: DsSkeletonVariant.circle)

// Tekstlinje (full bredde, 16px høyde)
DsSkeleton(variant: DsSkeletonVariant.text)

// Rektangulær plassholder (f.eks. for bilde)
DsSkeleton(variant: DsSkeletonVariant.rectangle, height: 200)

Egendefinerte mål ​

dart
DsSkeleton(
  width: 48,
  height: 48,
  borderRadius: 24,
)

Retningslinjer ​

  • Etterlign layouten til det virkelige innholdet så nøyaktig som mulig.
  • Unngå å bruke for mange skjelettkomponenter samtidig — det kan oppleves like forstyrrende som en tom side.
  • Kombiner gjerne flere DsSkeleton-elementer for å representere overskrift, tekst og bilder.

Tekst ​

  • DsSkeleton har ingen tekstinnhold, men sørg for at området rundt gir kontekst om hva som lastes.

Har du innspill til denne komponenten? Send innspill på GitHub