Skeleton

Laddningsindikator

Storybook

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

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.

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.

Animation

Skeleton har som standard en animationen wave aktiverad. Den går att stänga av med animation= 'false'.

Riktlinjer

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

API

Namn	Typ	Standard	Beskrivning
width	string | number	-
height	string | number	-
variant	"circle" | "rectangular"	rectangular
animation	false | "wave"	wave