mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 21:19:37 +08:00
40e77c40d3
* docs: add dark overview * docs: show dark cover in dark theme * docs: update cover
3.2 KiB
3.2 KiB
category | subtitle | group | title | cover | coverDark |
---|---|---|---|---|---|
Components | 骨架屏 | 反馈 | Skeleton | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*uae3QbkNCm8AAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAAAAAAAAAAAADrJ8AQ/original |
在需要等待加载内容的位置提供一个占位图形组合。
何时使用
- 网络较慢,需要长时间等待加载处理的情况下。
- 图文信息内容较多的列表/卡片中。
- 只在第一次加载数据的时候使用。
- 可以被 Spin 完全代替,但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。
代码演示
基本
复杂的组合
动画效果
按钮/头像/输入框/图像/自定义节点
包含子组件
列表
API
Skeleton
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
active | 是否展示动画效果 | boolean | false |
avatar | 是否显示头像占位图 | boolean | SkeletonAvatarProps | false |
loading | 为 true 时,显示占位图。反之则直接展示子组件 | boolean | - |
paragraph | 是否显示段落占位图 | boolean | SkeletonParagraphProps | true |
round | 为 true 时,段落和标题显示圆角 | boolean | false |
title | 是否显示标题占位图 | boolean | SkeletonTitleProps | true |
SkeletonAvatarProps
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
active | 是否展示动画效果,仅在单独使用头像骨架时生效 | boolean | false |
shape | 指定头像的形状 | circle | square |
- |
size | 设置头像占位图的大小 | number | large | small | default |
- |
SkeletonTitleProps
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
width | 设置标题占位图的宽度 | number | string | - |
SkeletonParagraphProps
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
rows | 设置段落占位图的行数 | number | - |
width | 设置段落占位图的宽度,若为数组时则为对应的每行宽度,反之则是最后一行的宽度 | number | string | Array<number | string> | - |
SkeletonButtonProps
属性 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
active | 是否展示动画效果 | boolean | false | |
block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
shape | 指定按钮的形状 | circle | round | square | default |
- | |
size | 设置按钮的大小 | large | small | default |
- |
SkeletonInputProps
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
active | 是否展示动画效果 | boolean | false |
size | 设置输入框的大小 | large | small | default |
- |