Skeleton

<HStack spacing={10} alignVertical="start"> <Skeleton rounded="sm" width={100} height={100} /> <Skeleton.Image rounded="sm" width={100} ratio="1:1" /> <Skeleton.Button size="md" /> <Skeleton.Field size="md" width={100} /> <Skeleton.Avatar size="md" /> <Skeleton.Text size="md" typography="body1" width={100} /> <Skeleton.Chip size="md" /> </HStack>

<HStack spacing={10} alignVertical="start">
  <Skeleton
    rounded="sm"
    width={100}
    height={100}
  />

  <Skeleton.Image
    rounded="sm"
    width={100}
    ratio="1:1"
  />

  <Skeleton.Button size="md" />

  <Skeleton.Field size="md" width={100} />

  <Skeleton.Avatar size="md" />

  <Skeleton.Text size="md" typography="body1" width={100} />

  <Skeleton.Chip size="md" />
</HStack>

Loading...

How to use

import { Skeleton } from '@vibrant-ui/components';

Properties

Skeleton

Prop	Type	Default	Description
borderRadiusLevel	BorderRadiusLevel		스켈레톤의 borderRadius를 지정합니다
width	number | percentage		스켈레톤의 너비를 지정합니다
height	number | percentage		스켈레톤의 높이를 지정합니다
maxWidth	number | percentage		스켈레톤의 최대 너비를 지정합니다

Skeleton.Image

Prop	Type	Default	Description
borderRadiusLevel	BorderRadiusLevel		스켈레톤의 borderRadius를 지정합니다
ratio	number		스켈레톤의 비율을 지정합니다
width	number | percentage		스켈레톤의 너비를 지정합니다
maxWidth	number | percentage		스켈레톤의 최대 너비를 지정합니다

Skeleton.Button

Prop	Type	Default	Description
size	sm | md | lg |xl		스켈레톤의 사이즈를 지정합니다. ContainedButton, OutlinedButton과 동일한 사이즈를 갖습니다
width	number | percentage		스켈레톤의 너비를 지정합니다. 지정하지 않은 경우 사이즈 별에 따른 기본 너비를 갖습니다.
maxWidth	number | percentage		스켈레톤의 최대 너비를 지정합니다

Skeleton.Field

Prop	Type	Default	Description
size	md | lg		스켈레톤의 사이즈를 지정합니다. Field와 동일한 사이즈를 가집니다
width	number | percentage	100%	스켈레톤의 너비를 지정합니다
maxWidth	number | percentage		스켈레톤의 최대 너비를 지정합니다

Skeleton.Avatar

Prop	Type	Default	Description
size	xl | lg | md | sm | xs		스켈레톤의 사이즈를 지정합니다. Avatar와 동일한 사이즈를 가집니다

Skeleton.Text

Prop	Type	Default	Description
typography	TypographyKind		스켈레톤의 타이포그래피를 지정합니다. Text의 typography와 동일한 사이즈를 가집니다.
lines	number	1	표시할 줄의 수를 지정합니다.
maxWidth	number | percentage	100%	스켈레톤의 너비를 지정합니다.

Skeleton.Chip

Prop	Type	Default	Description
size	md | sm		스켈레톤의 사이즈를 지정합니다. FilterChip과 동일한 사이즈를 갖습니다
width	number | percentage		스켈레톤의 너비를 지정합니다. 지정하지 않은 경우 사이즈 별에 따른 기본 너비를 갖습니다.
maxWidth	number | percentage		스켈레톤의 최대 너비를 지정합니다