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'

Prop extraConfig

参数 说明 类型 可选值 默认值 Version
position extra内容相对于内容出现的位置 String 'top' | 'left' | 'right' 'top'
shape extra内容的形状 String 'circle' | 'square' 'square'
size 用于定义extra内容的大小(宽、高) String / Array[width, height] 40px

贡献者

类型 参与者
设计者 UED视觉组
维护者 UED前端组
上次更新: 7/28/2021, 9:46:32 AM