Skeleton 骨架屏
骨架屏用处在于: 为需要加载等待的位置提供一个占位, 骨架屏与传统的 loading 有异曲同工之妙.
代码演示
API
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
animated | 是否开启动画效果 | Boolean | — | false | |
loading | 控制骨架屏的出现与隐藏 | Boolean | — | true | |
rows | 显示几行文本 | Number | — | 3 | |
content-config | 内容样式配置(详细查看 contentConfig 说明) | Object | — | — | |
extra-config | 其他内容配置, 用于灵活的定义一些占位内容. (详细查看 extraConfig 说明) | Object | — | — | |
Prop contentConfig
参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
item-space | 内容之间的间距 | String | — | '20px' | |
item-height | 内容占位的高度 | String | — | '20px' | |
参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
position | extra 内容相对于内容出现的位置 | String | 'top' | 'left' | 'right' | 'top' | |
shape | extra 内容的形状 | String | 'circle' | 'square' | 'square' | |
size | 用于定义 extra 内容的大小(宽、高) | String / Array[width, height] | — | 40px | |
上次更新: 4/18/2024, 1:30:27 PM