SxSkeleton (骨架屏)
- Implemented
内容加载时的占位视觉元素。对齐 Microsoft Fluent UI Blazor Skeleton (v4.13.2) 的 API 结构，并说明 NextUI 当前实现状态。
使用场景
- 列表/卡片加载占位
- 详情页内容加载
- 头像/标题/正文骨架组合
约束说明
Width/Height为空时使用默认尺寸。Pattern为空时不显示图案蒙层。
行为说明
Animation为真时启用闪烁动画。Shape控制圆形或矩形骨架。
API
Parameters (参数)
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | Animation |
bool |
true |
是否启用动画。 |
| Implemented | Shape |
SkeletonShape |
Rectangle |
骨架形状。 |
| Implemented | Width |
string? |
null |
宽度。 |
| Implemented | Height |
string? |
null |
高度。 |
| Implemented | Pattern |
string? |
null |
SVG 图案蒙层。 |
| Implemented | Disabled (继承) |
bool |
false |
禁用状态。 |
| Implemented | Id (继承) |
string? |
null |
组件的物理 Id。 |
| Implemented | Class (继承) |
string? |
null |
自定义 CSS 类名。 |
| Implemented | Style (继承) |
string? |
null |
自定义样式。 |
| Implemented | Title (继承) |
string? |
null |
HTML title 属性。 |
| Implemented | AdditionalAttributes (继承) |
IEnumerable<KeyValuePair<string, object>>? |
null |
捕获不匹配的 HTML 属性。 |
示例
<SxSkeleton Width="100%" Height="20px" />
<SxSkeleton Shape="SkeletonShape.Circle" Width="48px" Height="48px" />