用途:<sgds-skeleton> 渲染占位形状,代表仍在加载的内容,用于降低感知加载时间,并在数据请求期间防止布局抖动。
主要能力:通过属性控制尺寸与形状。width、height 需带 CSS 单位(如 "200px"、"100%"、"1.5rem");borderRadius 支持像素或百分比,设置 rows 时作用于每一行;rows 为数字,在给定 height 内堆叠多行骨架;sheen 为布尔属性,默认 false,开启后添加横向微光动画。矩形可省略 borderRadius,圆角矩形(卡片、按钮)如 borderRadius="4px",圆形(头像)用 borderRadius="50%" 且宽高相等。多行文本示例:<sgds-skeleton width="100%" height="80px" rows="3"></sgds-skeleton>;动画示例:<sgds-skeleton width="200px" height="20px" sheen></sgds-skeleton>。
使用方式:先参考 sgds-components-setup 完成安装与框架集成(React 19+ 与 React ≤18、Vue、Angular)。该组件不暴露自定义属性与 CSS Part,不能做 CSS 样式修改;无插槽、无事件、无公开方法。
限制:宽度、高度、圆角值必须带 CSS 单位;骨架尺寸应尽量贴近真实内容,以避免内容加载后发生布局偏移。