基础组件

Separator 分割线

视觉分隔线，支持水平和垂直方向，decorative 属性控制 ARIA 语义。

安装

bash

npx polyui add separator

方向

Above

Below

Left

Right

tsx

import { Separator } from "@polyui/react/separator"
export function SeparatorOrientation() {
  return (
    <div className="space-y-4">
      <div>
        <p className="text-sm">Above</p>
        <Separator className="my-4" />
        <p className="text-sm">Below</p>
      </div>

      <div className="flex h-8 items-center gap-4">
        <span className="text-sm">Left</span>
        <Separator orientation="vertical" />
        <span className="text-sm">Right</span>
      </div>
    </div>
  )
}

实战场景

Profile

Settings

Logout

tsx

import { Separator } from "@polyui/react/separator"
export function SeparatorRealWorld() {
  return (
    <div className="flex h-5 items-center space-x-4 text-sm">
      <span>Profile</span>
      <Separator orientation="vertical" />
      <span>Settings</span>
      <Separator orientation="vertical" />
      <span>Logout</span>
    </div>
  )
}

属性

属性	类型	默认值	说明
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	分割线的方向。垂直方向需要父容器为 flex 布局。
`decorative`	`boolean`	`true`	为 true 时不向屏幕阅读器暴露语义。
`className`	`string`	`—`	额外的 Tailwind 类名，用于调整间距或颜色。