Separator.tsx

基本信息

• 类型: React 组件 (shadcn/ui)
• 路径: ./src/components/ui/separator.tsx

功能描述

分隔线组件，用于视觉上分隔内容。支持水平和垂直方向。

导出内容

• Separator - 分隔线组件

Props 接口

Separator

属性	类型	必填	默认值	说明
orientation	`'horizontal' \	'vertical'`	否	'horizontal'	方向
decorative	boolean	否	true	是否为装饰性（无障碍）
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<typeof SeparatorPrimitive.Root>	否	-	Radix Separator 属性

依赖

• @radix-ui/react-separator - Radix UI 分隔线原语
• @/lib/utils - 工具函数 (cn)

使用示例

import { Separator } from "@/components/ui/separator";

// 水平分隔线
<div>
  <h3>第一部分</h3>
  <p>内容...</p>
  <Separator className="my-4" />
  <h3>第二部分</h3>
  <p>内容...</p>
</div>

// 垂直分隔线
<div className="flex h-5 items-center space-x-4 text-sm">
  <div>首页</div>
  <Separator orientation="vertical" />
  <div>关于</div>
  <Separator orientation="vertical" />
  <div>联系</div>
</div>