用途:<sgds-divider> 用于渲染分隔线,在视觉上分组或分隔相邻内容。需要 SGDS 统一样式时,应使用它而不是原生 <hr>。
主要能力:通过 orientation 属性控制方向,取值为 horizontal(默认)或 vertical;通过 thickness 属性控制视觉粗细,取值为 thin(默认)、thick、thicker。组件会自动设置 role="separator" 与 aria-orientation,无需手动添加。组件没有插槽、事件或公开方法,也不暴露自定义属性与 CSS part,因此不支持自定义 CSS 样式修改。
使用方式:默认水平分隔线写作 <sgds-divider></sgds-divider>;加粗可写 <sgds-divider thickness="thicker"></sgds-divider>。垂直分隔线需放在具有显式高度的 flex 或 grid 父容器中,例如 <div style="display: flex; height: 100px;"><sgds-divider orientation="vertical"></sgds-divider></div>,也可同时指定 thickness。使用前需参考 sgds-components-setup 完成安装与框架集成(React 19+ 与 React ≤18、Vue、Angular 的集成方式不同)。
适用场景:分隔上下堆叠的内容行时用默认水平方向;分隔并排的列时用 vertical。
限制:垂直分隔线依赖父容器的显式高度,缺少高度会塌缩为零高度;用户请求 vertical 但未提及容器高度时应提醒。不要建议使用原生 <hr> 或边框工具类。资料未提供安装命令、版本要求细节与浏览器兼容性信息。