跳到内容
1.6k

分隔线

用于分隔菜单、工具栏和列表的水平或垂直分隔线——其边框颜色与新粗野主义风格的边框相同。

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

export function SeparatorDemo() {

分隔线在内容块之间画出一条细细的横线或竖线。它基于 Base UI Separator 组件构建，并刻意保持极简：一条以主题 border 色绘制的线——与勾勒每个新粗野主义框体的实线笔触完全相同。

适合以下场景：

  • 菜单与工具栏分区——分隔下拉菜单、侧边栏和命令栏里的操作分组。
  • 纵向堆叠的列表——为设置页、信息流和通知面板划分每一行。
  • 行内元信息——在浏览量、星标数、更新时间这些统计值之间加上竖线。

安装

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/separator.json
npx shadcn@latest add https://neobrutalism.com/r/base/separator.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/separator.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/separator.json

安装以下依赖：

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

将以下代码复制并粘贴到您的项目中。

components/ui/separator.tsx
"use client"

import * as React from "react"
import { Separator as SeparatorPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
        className
      )}
      {...props}
    />
  )
}

export { Separator }

更新导入路径以匹配您的项目结构。

用法

import { Separator } from "@/components/ui/separator"
<Separator />

示例

垂直

对于垂直分隔线，使用 orientation="vertical"。

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

export function SeparatorVertical() {

菜单

带描述的菜单项之间的垂直分隔线。

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

export function SeparatorMenu() {

列表

列表项之间的水平分隔线。

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

export function SeparatorList() {

RTL

若要在 Neobrutalism 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

无障碍

Base UI 的 Separator 始终渲染 role="separator"，并让 aria-orientation 反映 orientation 属性，因此屏幕阅读器会把它播报成一条有语义的分隔线。至于纯装饰性的线条——比如行内统计值之间的那种——请加上 aria-hidden="true"（或者干脆用一个加了样式的 <div>），免得辅助技术去朗读毫无含义的分隔线。请注意这一点与 Radix 变体不同：后者默认是装饰性的（role="none"）。

API 参考

更多信息请参阅 Base UI 文档。