test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity
f1fda002a4
ant-design/components/skeleton/index.en-US.md
黑雨 cef58664e8
📝doc: add design token table (#41717) 
* ✨feat: add token

* 📝doc: update lint

* 📝doc: update doc
2023-04-11 10:25:24 +08:00

3.3 KiB
Raw Blame History

category group title cover coverDark
Components Feedback Skeleton https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*uae3QbkNCm8AAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAAAAAAAAAAAADrJ8AQ/original

Provide a placeholder while you wait for content to load, or to visualize 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.

Examples

Basic Complex combination Active Animation Button/Avatar/Input/Image/Node Contains sub component List

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
round Show paragraph and title radius when true boolean false
title Show title placeholder boolean | SkeletonTitleProps true

SkeletonAvatarProps

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

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 Version
active Show animation effect boolean false
block Option to fit button width to its parent width boolean false 4.17.0
shape Set the shape of button circle | round | square | default -
size Set the size of button large | small | default -

SkeletonInputProps

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

Design Token