UG666

UG666 UI
React 组件

UGSeparator 分割线

UGSeparator 是轻量的视觉分隔组件，支持水平与垂直方向，常用于卡片内容分区和按钮组之间的间隔。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx
import { UGSeparator } from '@ug666/ui-react'

水平分隔

水平分割线默认占满父容器宽度，适合分隔卡片标题与正文内容。

服务上线公告

2026-04-17 · UG

本次更新完善了数据看板与任务通知流程，覆盖表单、布局、反馈等核心场景。

垂直分隔

垂直分割线适合分隔同行按钮组或标签组，父容器需设定高度。

首页任务通知报表

综合示例

水平与垂直分割线组合使用，适合卡片底部元数据区域。

任务处理记录

表单选择、状态分组与分隔布局已完成，可在侧边栏中访问各页面。

标签：
表单布局2026-04-17

代码示例

典型的卡片分区使用方式。

tsx
import { UGSeparator } from '@ug666/ui-react'

export function ArticleCard() {
  return (
    <div className="w-full max-w-md rounded-xl border border-border-base bg-surface-1 p-5">
      <div className="space-y-1">
        <h3 className="text-base font-semibold text-text-primary">服务上线公告</h3>
        <p className="text-xs text-text-secondary">2026-04-17 · UG</p>
      </div>

      <UGSeparator className="my-4" />

      <p className="text-sm leading-6 text-text-secondary">
        本次更新完善了数据看板与任务通知流程，覆盖表单、布局、反馈等核心场景。
      </p>

      <UGSeparator className="my-4" />

      <div className="flex items-center gap-3">
        <span className="text-sm text-text-secondary">标签：</span>
        <div className="flex h-5 items-center gap-3">
          <span className="text-sm text-text-primary">看板</span>
          <UGSeparator orientation="vertical" />
          <span className="text-sm text-text-primary">通知</span>
          <UGSeparator orientation="vertical" />
          <span className="text-sm text-text-primary">报表</span>
        </div>
      </div>
    </div>
  )
}

Props

属性类型默认值说明
orientation'horizontal' | 'vertical''horizontal'分割线方向。垂直时父容器需设定高度。
classNamestring—扩展自定义样式（如 my-4 调整间距）。