Ant Design Blazor
Skeleton骨架屏
在需要等待加载内容的位置提供一个占位图形组合。
何时使用
- 网络较慢，需要长时间等待加载处理的情况下。
- 图文信息内容较多的列表/卡片中。
- 只适合用在第一次加载数据的场景。
- 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验
Examples
最简单的用法。
更复杂的组合。
骨架按钮、头像和输入框。
显示动画效果。
加载占位图包含子组件。
在列表组件中使用加载占位符。
Skeleton API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Active | 属性是否显示活动动画 | Boolean | -- |
| Loading | 属性为真时显示骨架 | Boolean | -- |
| Title | 属性显示标题占位符 | Boolean | -- |
| TitleWidth | 属性标题占位符的宽度 | OneOf<Int32?, String> | -- |
| Avatar | 属性在占位符中显示头像 | Boolean | -- |
| AvatarSize | 属性头像大小 | OneOf<Int32?, String> | -- |
| AvatarShape | 属性头像造型 | String | -- |
| Paragraph | 属性显示段落骨架 | Boolean | -- |
| ParagraphRows | 属性段落骨架的行数 | Int32? | -- |
| ParagraphWidth | 属性段落骨架的宽度 | OneOf<Int32?, String, IList<OneOf<Int32?, String>>> | -- |
| ChildContent | 属性骨架未激活时显示的内容 | RenderFragment | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
SkeletonElement API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Active | 属性如果骨架处于活动状态 | Boolean | false |
| Type | 属性元素的类型。可能的值：输入、头像、按钮 | String | -- |
| Size | 属性元素的大小。可能的值：大、小、默认。如果类型是头像，那么也可以提供一个整数。 | OneOf<Int32?, String> | -- |
| Shape | 属性头像的形状。不用于输入类型。 | String | SkeletonButtonShape.Default |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |