mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-21 16:33:27 +08:00
Code Issues Actions 38 Packages Projects Releases Wiki Activity
212b6fb01d
ant-design/components/skeleton/index.en-US.md
Rustin 060b7ded20 feat: Add skeleton button (#19699) 
* #18237 add skeleton button

* update snapshot

* refactoring demo code

* lint code

* update test snapshots

* add test

* update snapshot

* fix deps lint issue

* set avatar siz and update test snapshots

* fix lint issue

* remove button and just keep skeleton

* add active switch for button demo

* add size and shape radio for skeleton button demo

* add button tests

* add skeleton tests

* update doc

* update test snapshots

* omit avatar and button props

* refactoring skeleton and update test snapshots
2019-11-21 20:23:56 +08:00

2.4 KiB
Raw Blame History

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

SkeletonAvatarProps

Property Description Type Default
size Set the size of avatar number | Enum{ 'large', 'small', 'default' } -
shape Set the shape of avatar Enum{ '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 Enum{ 'large', 'small', 'default' } -
shape Set the shape of button Enum{ 'circle', 'round', 'default' } -