You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

2.7 KiB

category type title cols
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 button large | small | default -