Skip to main content

分离器 Separator

Separator 组件用于在布局中添加分隔线，支持水平和垂直方向的分隔线，适用于视觉上的区分不同区域或内容的需求。

📦 引入方式​

import { Separator } from '@npmqg/react-ui-separator';

🧩 使用示例​

📚 创建水平分隔线​

📚 创建垂直分隔线​

📚 自定义分隔线样式​

📚 在容器中使用垂直和水平分隔线​

Section 1
Section 2
Footer

🧩 组件结构​

属性类型默认值说明
orientation'horizontal' | 'vertical''horizontal'设置分隔线的方向，默认为水平
decorativebooleantrue是否是装饰性分隔线，控制是否添加样式和行为
classNamestring—自定义类名，用于扩展组件的样式
childrenReact.ReactNode—子元素，通常为空，表示分隔线

🎨 样式说明​

  • 水平分隔线：当 orientation 为 horizontal 时，Separator 组件渲染为水平线，默认宽度为 100% 和 1px 高度。
  • 垂直分隔线：当 orientation 为 vertical 时，Separator 组件渲染为垂直线，默认高度为 100% 和 1px 宽度。
  • 自定义样式：你可以通过 className 属性扩展 Separator 组件的样式，例如更改颜色、宽度、背景等。

💡 设计说明​

  • 简洁易用：Separator 组件通过简单的 orientation 属性控制方向，适应各种布局需求。
  • 可扩展性强：通过 className 属性，你可以灵活地为分隔线添加额外的样式，满足设计需求。
  • 装饰性：该组件默认设置为装饰性分隔线，可以用于视觉上的区分区域。通过 decorative 属性，你可以控制是否为纯粹的视觉分隔。