Skeleton

Laddningsindikator

Storybook

Komponent som används som en platshållare för den riktiga komponenten innan sidan laddat klart

import { Skeleton } from '@midas-ds/components'

<Skeleton height='48px' />

Varianter

Rectangle

Detta är standardvarianten. Används som platshållare för text och de flesta komponenter vi har. Ange storleken i px, rem eller % med width och height. Om inget anges kommer den att fylla sin parent container.

<Skeleton height='48px' />

Circle

Används för cirkulära komponenter, tex avatar. Circle behöver bara width och sätter automatiskt höjden så att den blir rund.

<Skeleton
  variant='circle'
  width='48px'
/>

Form

Används som platshållare för formulärfält som inte laddat klart än. Form-varianten visar en skeleton för etikett, beskrivning och inmatningsfält som liknar riktiga formulärkomponenter som TextField.

<Skeleton
  variant='form'
  width='400px'
/>

Storlek

Form-varianten stödjer två storlekar för inmatningsfältet: large (48px, standard) och medium (40px).

<Skeleton
  variant='form'
  size='medium'
  width='400px'
/>

Animation

Skeleton är animerad som standard. Det går att stänga av med isAnimated={false}.

<Skeleton
  height='48px'
  isAnimated={false}
/>

Att använda en annan bakgrundsfärg

Om Skeletonkomponenten ligger på bakgrundsfärgen layer01 eller light-dark(#f2f2f2, #262626), behöver den använda propen isOnLayer01 för att synas.

<Skeleton
  height='48px'
  isOnLayer01
/>

Riktlinjer

För val av laddningsindikator se Mönster för laddningsindikatorer

API

Name	Type	Default	Description
width	Width<string | number>	-	Use valid CSS length units
height	Height<string | number>	-	Use valid CSS length units
variant	"circle" | "rectangle" | "form"	rectangle	Circular, rectangular, or form field Skeleton component. When using circle, only width is allowed to control size. When using form, displays label, description, and input field skeletons. The size prop controls the input field height.
size	Size	large	Size of the form input field skeleton. Only applies when variant='form'. medium: 40px height large: 48px height
isAnimated	boolean	true	Displays the skeleton component with a wave animation
isOnLayer01	boolean	false	If skeleton is on a layer01 background light-dark( #f2f2f2, #262626)