Skip to content

骨架屏

Props ​

名称类型默认值说明
widthnumber | string'100%'占位块的宽度。传入数字时按像素处理,字符串则保留为 CSS 尺寸。
heightnumber | string'100%'占位块的高度。传入数字时按像素处理,字符串则保留为 CSS 尺寸。
radius'none' | 0 | 1 | 2 | 3 | 4 | 'rounded'3圆角使用设计令牌等级,none 为直角,rounded 为完全圆角。
indexnumber0交错动画的索引,每增加 1,动画延后 100ms,让多个占位块依次闪烁。

无障碍 ​

  • Skeleton 默认设置 aria-hidden="true"。
  • 辅助技术不会读取默认的占位块。
  • 外围加载区域必须提供名称。
  • 外围加载区域必须设置 aria-busy="true"。
  • 系统启用「减少动态效果」时,脉冲动画停止。
  • 系统启用强制颜色模式时,占位块保持可见。

原生属性 ​

根元素为 <div>。

以下内容传入根元素:

  • HTML 属性。
  • aria-* 属性。
  • data-* 属性。
  • class。
  • style。
  • 原生事件监听器。

传入 aria-hidden 时,该值覆盖默认值。