ant-design/index.en-US.md at 6dad4144e7647f5c9da2357a8f53cd995929298e

mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 03:29:59 +08:00

kiner-tang(文辉) 65d7a5b943

feat: migrate less to token for Skeleton (#42134 )

* feat: migrate less to token for Message

* docs: update docs

* feat: add debug demo

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: update snapshots

* Update docs/react/migrate-less-variables.en-US.md

Co-authored-by: MadCcc <1075746765@qq.com>

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

---------

Co-authored-by: MadCcc <1075746765@qq.com>

2023-05-18 21:18:02 +08:00

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

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`	-

3.4 KiB Raw Blame History