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'
/>

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"	rectangle	Circular or rectangular Skeleton component. When using circle, only width is allowed to control size.
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)