UG666

UG666 UI
@ug666/react 文档演示

Separator 分割线

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

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Separator } from '@ug666/react'

水平分隔

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

Vue 文档区上线公告

2026-04-17 · UG

本次更新新增了 24 个 Vue 3 组件的独立文档页面，覆盖表单、布局、反馈等核心场景。

垂直分隔

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

首页组件文档更新日志

综合示例

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

组件发布记录

Checkbox、Radio、Separator 三组件文档已完成，可在侧边栏中访问各页面。

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

代码示例

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

import { Separator } from '@ug666/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">Vue 文档区上线公告</h3>
        <p className="text-xs text-text-secondary">2026-04-17 · UG</p>
      </div>

      <Separator className="my-4" />

      <p className="text-sm leading-6 text-text-secondary">
        本次更新新增了 24 个 Vue 3 组件的独立文档页面，覆盖表单、布局、反馈等核心场景。
      </p>

      <Separator 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">Vue</span>
          <Separator orientation="vertical" />
          <span className="text-sm text-text-primary">文档</span>
          <Separator orientation="vertical" />
          <span className="text-sm text-text-primary">组件库</span>
        </div>
      </div>
    </div>
  )
}

Props 说明

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