Gå til hovedinnhold
KOMPONENTER

Skeleton

npmv0.3.37

Skeletons er placeholdere som visuelt kommuniserer at deler av innholdet er i ferd med å laste inn og hvordan innholdsoppsettet vil se ut.

Komponenter

Skeleton

NavnTypePåkrevd?Default-verdiBeskrivelse
classNamestring

Ekstra klassenavn

widthstring | number '100%'

Bredden til komponenten. Er 100% som default.

heightstring | number '1rem'

Høyden til komponenten. 1rem som default.

Skeleton er en firkantig boks, som man gir en høyde og bredde til. Elementene har litt marigin seg i mellom per default.

SkeletonCircle

NavnTypePåkrevd?Default-verdiBeskrivelse
classNamestring

Ekstra klassenavn

sizestring | number'1rem'

Høyde og bredde av sirkelen. 1rem som default

SkeletonCircle er en sirkulær "Skeleton", for å illustrere sirkulære komponenter som vil vises etter lastingen er gjennomført.

SkeletonWrapper

NavnTypePåkrevd?Beskrivelse
classNamestring

Ekstra klassenavn

childrenReactNode

Skeletonkomponentene som skal vises

Det ytterste elementet som Skeleton og SkeletonCircle pakkes inn i. Brukes for å gi nødvendige aria-labels o.l.

Retningslinjer for bruk

Skeletons er placeholdere som visuelt kommuniserer at deler av innholdet er i ferd med å laste inn og hvordan innholdsoppsettet vil se ut. Brukes når seksjoner på siden gradvis fylles med innhold, for eksempel tekst og bilder eller data i tabeller som dukker opp etter hvert som de blir tilgjengelige. På denne måten gir vi brukerne en idé og forventning om hva slags innhold som skal komme, i tillegg for å skape en oppfatning av redusert ventetid. Skeletons blir borte og erstattes med innhold så snart dataene er tilgjengelig.

Prinsipper

Innafor
  • Bruk skeletons hvis data hentes fra baksystemer som har lang ventetid og er ikke umiddelbart tilgjengelige.
  • Bruk skeletons hvis det laster inn mer enn ett element samtidig som krever en indikator.
  • Bruk skeletons når innholdet har en fast størrelse og oppsettet er forutsigbart.
Uttafor
  • Unngå å bruk skeletons hvis det er en langvarig prosess, f.eks importering av data eller opplasting av en fil. Bruk Progressbar i stedet.
  • Unngå skeletons hvis det er en rask prosess som tar mindre enn 300 ms. Vurderer å bruk en vanlig Loader eller om du i det hele tatt trenger en lastetilstand.
  • For en liten, inline handling som f.eks klikket på en knapp der handlingen kan ta tid, bruker vi en lastespinner i knappen istedet.
Rediger denne siden på Bitbucket