mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity
master
ant-design/components/skeleton/index.en-US.md
二货爱吃白萝卜 20561d6f9d
docs: Fix component doc alignment & support import usage (#48004) 
* docs: init ref

* docs all support

* docs: fix link show
2024-03-22 14:22:42 +08:00

3.4 KiB
Raw Permalink Blame History

category group title description cover coverDark
Components Feedback Skeleton Provide a placeholder while you wait for content to load, or to visualize content that doesn't exist yet. https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*uae3QbkNCm8AAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAAAAAAAAAAAADrJ8AQ/original

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 Custom component token

API

Common props ref：Common props

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