Skeleton

Laddningsindikator

Storybook

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

<Skeleton height='48px' />

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

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

Varianter

Rectangular

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 har som standard en animationen wave aktiverad. Den går att stänga av med animation='false'.

<Skeleton
  height='48px'
  animation='false'
/>

Riktlinjer

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

API

Name	Type	Default	Description
width	string | number	-
height	string | number	-
variant	"circle" | "rectangular"	rectangular
animation	false | "wave"	wave