Ayırıcı

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

export function SeparatorDemo() {

Separator, içerik blokları arasına ince bir yatay veya dikey çizgi çeker. Base UI Separator bileşeni üzerine kuruludur ve bilinçli olarak sade tutulmuştur: temanın border renginde tek bir çizgi — her neobrütalist çerçevenin dış hattını çizen o aynı kesintisiz kontur.

Şu durumlarda tercih edin:

• Menü ve araç çubuğu bölümleri — açılır menülerde, kenar çubuklarında ve komut çubuklarında eylem gruplarını ayırın.
• Üst üste dizilmiş listeler — ayar sayfalarında, akışlarda ve bildirim panellerinde satırları bölün.
• Satır içi meta veriler — görüntülenme, yıldız ve son güncelleme tarihi gibi istatistikler arasında dikey çizgiler.

Kurulum#

pnpmnpmyarnbun
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
Kopyala

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

"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 }

Kullanım#

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

Kopyala<Separator />

Örnekler#

Dikey#

Dikey bir ayırıcı için orientation="vertical" kullanın.

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

export function SeparatorVertical() {

Menü#

Açıklamalar içeren menü öğeleri arasındaki dikey ayırıcılar.

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

export function SeparatorMenu() {

Liste#

Liste öğeleri arasındaki yatay ayırıcılar.

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

export function SeparatorList() {

RTL#

Neobrutalism'de RTL desteğini etkinleştirmek için RTL yapılandırma kılavuzuna bakın.

"use client"

import * as React from "react"

Erişilebilirlik#

Base UI'ın Separator bileşeni her zaman role="separator" olarak işlenir ve aria-orientation, orientation prop'unu yansıtır; böylece ekran okuyucular onu anlamsal bir ayırıcı olarak duyurur. Tamamen dekoratif çizgiler için — örneğin satır içi istatistikler arasında — aria-hidden="true" ekleyin (veya düz, stillendirilmiş bir <div> kullanın) ki yardımcı teknolojiler anlam taşımayan ayırıcıları duyurmasın. Bunun, varsayılan olarak dekoratif (role="none") olan Radix varyantından farklı olduğunu unutmayın.

API Referansı#

Base UI Separator belgelerine bakın.