Skeleton骨架屏
Skeleton
骨架屏
使用import { Skeleton } from 'antd'; |
| 参数 | 说明 | 类型 | 默认值 | 版本 | 全局配置 |
|---|---|---|---|---|---|
| active | 是否展示动画效果 | boolean | false | - | × |
| classNames | 用于自定义 Skeleton 组件内部各语义化结构的 class，支持对象或函数 | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | 6.0.0 | 6.0.0 |
| styles | 用于自定义 Skeleton 组件内部各语义化结构的行内 style，支持对象或函数 | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | 6.0.0 | 6.0.0 |
| 属性 | 说明 | 类型 | 默认值 | 版本 | 全局配置 |
|---|---|---|---|---|---|
| active | 是否展示动画效果 | boolean | false | × | |
| avatar | 是否显示头像占位图 | boolean | SkeletonAvatar | false | × | |
| loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | - | × | |
| paragraph | 是否显示段落占位图 | boolean | SkeletonParagraphProps | true | × | |
| round | 为 true 时，段落和标题显示圆角 | boolean | false | × | |
| title | 是否显示标题占位图 | boolean | SkeletonTitleProps | true | × |
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 设置标题占位图的宽度 | number | string | - |
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| rows | 设置段落占位图的行数 | number | - |
| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number | string | Array<number | string> | - |
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| active | 是否展示动画效果，只在独立使用头像时有效 | boolean | false |
| shape | 指定头像的形状 | circle | square | circle |
| size | 设置头像占位图的大小 | number | large | medium | small | medium |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| active | 是否展示动画效果 | boolean | false | |
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
| shape | 指定按钮的形状 | circle | round | square | default | - | |
| size | 设置按钮的大小 | large | medium | small | medium |
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| active | 是否展示动画效果 | boolean | false |
| size | 设置输入框的大小 | large | medium | small | medium |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| blockRadius | 骨架屏圆角 | number | 4 |
| gradientFromColor | 渐变色起点颜色 | string | rgba(0,0,0,0.06) |
| gradientToColor | 渐变色终点颜色 | string | rgba(0,0,0,0.15) |
| paragraphLiHeight | 段落骨架屏单行高度 | number | 16 |
| paragraphMarginTop | 段落骨架屏上间距 | number | 28 |
| titleHeight | 标题骨架屏高度 | string | number | 16 |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| borderRadiusSM | SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角 | number | 4 |
| controlHeight | Ant Design 中按钮和输入框等基础控件的高度 | number | 32 |
| controlHeightLG | 较高的组件高度 | number | 40 |
| controlHeightSM | 较小的组件高度 | number | 24 |
| controlHeightXS | 更小的组件高度 | number | 16 |
| marginSM | 控制元素外边距，中小尺寸。 | number | 12 |
| padding | 控制元素的内间距。 | number | 16 |
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.