Ant Design Blazor
Skeleton
Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
When To Use
- When resource need long time loading, like low network speed.
- The component contains much 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 usage.
Complex combination with avatar and multiple paragraphs.
Skeleton button, avatar and input.
Display active animation.
Skeleton contains sub component.
Use skeleton in list component.
Skeleton API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Active | ParameterDisplay active animation or not | Boolean | -- |
| Loading | ParameterDisplay skeleton when true | Boolean | -- |
| Title | ParameterShow title placeholder | Boolean | -- |
| TitleWidth | ParameterWidth of the title placeholder | OneOf<Int32?, String> | -- |
| Avatar | ParameterShow avatar in placeholder | Boolean | -- |
| AvatarSize | ParameterAvatar size | OneOf<SkeletonElementSize, String> | -- |
| AvatarShape | ParameterAvatar shape | SkeletonElementShape | -- |
| Paragraph | ParameterShow paragraph skeleton | Boolean | -- |
| ParagraphRows | ParameterNumber of rows for paragraph skeleton | Int32? | -- |
| ParagraphWidth | ParameterWidth of paragraph skeleton | OneOf<Int32?, String, IList<OneOf<Int32?, String>>> | -- |
| ChildContent | ParameterContent to display when skeleton is not active | RenderFragment | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
SkeletonElement API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Active | ParameterIf the skeleton is active | Boolean | false |
| Type | ParameterType of the element. Possible values: input, avatar, button | SkeletonElementType | -- |
| Size | ParameterSize of element. Possible values: large, small, default. If type is avatar then an integer can be provided as well. | OneOf<SkeletonElementSize, String> | -- |
| Shape | ParameterShape of the avatar. Not used for input type. | SkeletonElementShape | SkeletonElementShape.Default |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |