72Başlayın
HextaUI

Separator

İçeriği yatay ya da dikey olarak ayıran ince bir çizgi; isteğe bağlı etiket ve yalnızca görsel çizgiler için dekoratif bir mod içerir.

HextaUI

Components that feel great to use and to write.

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

export function SeparatorDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4 text-sm">
      <div className="flex flex-col gap-1">
        <h4 className="font-medium">HextaUI</h4>
        <p className="text-muted-foreground">
          Components that feel great to use and to write.
        </p>
      </div>
      <Separator />
      <div className="flex h-5 items-center gap-4">
        <a href="#">Docs</a>
        <Separator orientation="vertical" />
        <a href="#">Components</a>
        <Separator orientation="vertical" />
        <a href="#">Source</a>
      </div>
    </div>
  )
}

Kurulum

pnpm dlx shadcn@latest add https://hextaui.com/r/separator.json

Bileşeni, HextaUI tema token'larını ve bileşenin bağımlı olduğu tüm HextaUI bileşenlerini ekler.

Kullanım

import { Separator } from "@/components/ui/separator"
<Separator />
<Separator orientation="vertical" />
<Separator>Or continue with</Separator>

Çizgi her ekranda bir fiziksel piksel kalınlığındadır, kenarlıklarla aynı ince çizgidir; böylece çevresindeki kartlar ve girdilerle hizalanır. Boşluğu üst öğenin gap değeri veya bir margin ile verin.

Örnekler

Dikey

orientation="vertical" ile çizgi flex satırının yüksekliğine uzanır. Flex satırı dışında ona bir yükseklik verin.

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

export function SeparatorVertical() {
  return (
    <div className="flex items-center gap-4 text-sm">
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">2,481</span>
        <span className="text-muted-foreground">Stars</span>
      </div>
      <Separator orientation="vertical" />
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">164</span>
        <span className="text-muted-foreground">Forks</span>
      </div>
      <Separator orientation="vertical" />
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">38</span>
        <span className="text-muted-foreground">Contributors</span>
      </div>
    </div>
  )
}

Label

Alt öğeler çizginin ortasında durur; çizgi iki yandaki boşluğu doldurur.

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

export function SeparatorLabel() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <Button>Continue with email</Button>
      <Separator>Or continue with</Separator>
      <div className="grid grid-cols-2 gap-2">
        <Button variant="outline">GitHub</Button>
        <Button variant="outline">Google</Button>
      </div>
    </div>
  )
}

Hizalama

align etiketi start veya end konumuna taşır; bu, bölüm ve tarih başlıklarına uygundur. Simgeler metne göre boyutlandırılır.

import { IconCalendar } from "@tabler/icons-react"

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

export function SeparatorAlign() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Separator align="start">
        <IconCalendar aria-hidden="true" />
        Today
      </Separator>
      <Separator>Yesterday</Separator>
      <Separator align="end">Last week</Separator>
    </div>
  )
}

Dikey etiket

Etiketli dikey bir ayırıcı metni dik tutar ve çizgiyi onun üstüne ve altına çizer.

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

export function SeparatorVerticalLabel() {
  return (
    <div className="flex items-stretch gap-4">
      <div className="flex w-32 flex-col gap-2">
        <Button variant="outline">Upload file</Button>
        <Button variant="outline">Browse library</Button>
      </div>
      <Separator orientation="vertical">or</Separator>
      <div className="flex w-32 items-center justify-center rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
        Drop a file here
      </div>
    </div>
  )
}

Dekoratif

decorative tamamen görsel bir çizgiyi ekran okuyuculardan gizler; böylece zaten kendi başına iyi okunan satırlar arasında bir ayırıcı duyurmazlar.

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

export function SeparatorDecorative() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-3 rounded-xl border p-4 text-sm">
      <div className="flex items-center justify-between">
        <span className="text-muted-foreground">Subtotal</span>
        <span className="tabular-nums">$48.00</span>
      </div>
      <div className="flex items-center justify-between">
        <span className="text-muted-foreground">Shipping</span>
        <span className="tabular-nums">$4.00</span>
      </div>
      <Separator decorative />
      <div className="flex items-center justify-between font-medium">
        <span>Total</span>
        <span className="tabular-nums">$52.00</span>
      </div>
    </div>
  )
}

Satır içi

Bir paragraf içi gibi <div> öğesine izin verilmeyen yerde bir <span> çıktısı vermek için render kullanın.

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

export function SeparatorRender() {
  return (
    <p className="text-sm text-muted-foreground">
      <span className="inline-flex h-4 items-center gap-2 align-middle">
        <span>Ada Park</span>
        <Separator orientation="vertical" decorative render={<span />} />
        <time dateTime="2026-10-05">Oct 5, 2026</time>
        <Separator orientation="vertical" decorative render={<span />} />
        <span>4 min read</span>
      </span>
    </p>
  )
}

Uzun içerik

Uzun etiketler sarar ve bölünmeyen dizeler kırılır; her iki yanda kısa bir çizgi parçası görünür kalır.

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

export function SeparatorLongContent() {
  return (
    <div className="flex w-full max-w-72 flex-col gap-6">
      <Separator>
        Messages before you joined the channel are kept for ninety days
      </Separator>
      <Separator align="start">
        https://hextaui.com/docs/components/separator/very-long-anchor
      </Separator>
    </div>
  )
}

Sağdan sola

Başlangıç ve bitiş okuma yönünü izler.

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

export function SeparatorRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-sm flex-col gap-6 text-sm">
      <Separator align="start">اليوم</Separator>
      <div className="flex h-5 items-center gap-4">
        <a href="#">الوثائق</a>
        <Separator orientation="vertical" />
        <a href="#">المكونات</a>
        <Separator orientation="vertical" />
        <a href="#">المصدر</a>
      </div>
    </div>
  )
}

Erişilebilirlik

  • Düz bir ayırıcı, bir <hr> gibi role="separator" ve aria-orientation taşır.
  • decorative ile role="none" alır ve ekran okuyucular onu atlar.
  • Etiketli bir ayırıcının rolü yoktur. Separator rolü metnini sunumsal yapardı, bu yüzden etiket düz metin olarak okunur.

API referansı

Base UI Separator üzerine kuruludur. Bir <div> işler ve niteliklerini kabul eder.

Separator

PropTürVarsayılan
orientation
"horizontal" | "vertical""horizontal"
decorativeÇizgi yalnızca görselse ekran okuyuculardan gizler.
booleanfalse
childrenÇizgi içine çizilen bir etiket. Düz bir çizgi için vermeyin.
ReactNode–
alignEtiketin çizgi boyunca durduğu yer.
"start" | "center" | "end""center"
className
string | (state) => string–
render
ReactElement | (props, state) => ReactElement<div>
ÖznitelikAçıklama
data-slot="separator"CSS'te ayırıcıları hedefleyin.
data-orientation"horizontal" veya "vertical".
data-contentAyırıcının bir etiketi olduğunda bulunur.
data-alignBir etiket olduğunda etiketin hizalaması.
data-slot="separator-label"Etiketi saran öğe.

İlgili