Skip to content

Latest commit

 

History

History
65 lines (49 loc) · 2.74 KB

index.en-US.md

File metadata and controls

65 lines (49 loc) · 2.74 KB
category type title cols cover
Components
Feedback
Skeleton
1

Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.

When To Use

  • When a resource needs long time to load.
  • When the component contains lots of information, such as List or Card.
  • Only works when loading data for the first time.
  • Could be replaced by Spin in any situation, but can provide a better user experience.

API

Skeleton

Property Description Type Default
active Show animation effect boolean false
avatar Show avatar placeholder boolean | SkeletonAvatarProps false
loading Display the skeleton when true boolean -
paragraph Show paragraph placeholder boolean | SkeletonParagraphProps true
title Show title placeholder boolean | SkeletonTitleProps true
round Show paragraph and title radius when true boolean false

SkeletonAvatarProps

Property Description Type Default
active Show animation effect, only valid when used avatar independently boolean false
size Set the size of avatar number | large | small | default -
shape Set the shape of avatar circle | square -

SkeletonTitleProps

Property Description Type Default
width Set the width of title number | string -

SkeletonParagraphProps

Property Description Type Default
rows Set the row count of paragraph number -
width Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width number | string | Array<number | string> -

SkeletonButtonProps

Property Description Type Default
active Show animation effect boolean false
size Set the size of button large | small | default -
shape Set the shape of button circle | round | default -

SkeletonInputProps

Property Description Type Default
active Show animation effect boolean false
size Set the size of input large | small | default -