Skeleton
Komponent som används som en platshållare för den riktiga komponenten innan sidan laddat klart
<Skeleton height='48px' />
Installation
- npm
- Yarn
- pnpm
npm install @midas-ds/components
yarn add @midas-ds/components
pnpm add @midas-ds/components
import { Skeleton } from '@midas-ds/components'
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
/>
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 |
isAnimated | boolean | true | Displays the skeleton component with a wave animation |