Separator
İsteğe bağlı etiketli yatay veya dikey içerik ayracı.
Separator.tsx
Merkez Etiketli (Solid)
Mimari Katmanlar
Sol Hizalı Kesikli (Dashed)
Bileşen Bağımlılıkları
Merkezden Solan Degrade (Gradient)
Dikey Ayırıcı (Vertical)
DashboardAyarlarCanlı Ortam
Kurulum
shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:
$
npx shadcn@latest add https://ui.cagriozay.com.tr/r/separator.jsonKullanım Örneği
import { Separator } from "@/components/ui/Separator"
<Separator />
<Separator label="Ayarlar" variant="dashed" />
<Separator orientation="vertical" decorative={false} aria-label="Araç grupları" />Özellikler & Parametreler (API)
| Prop | Tür | Varsayılan | Açıklama |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Ayırıcının yönü. |
| variant | "solid" | "dashed" | "dotted" | "gradient" | "solid" | Çizginin görsel biçimi. |
| label | ReactNode | — | Yatay çizginin üzerindeki içerik. |
| labelPosition | "left" | "center" | "right" | "center" | Etiketin yatay hizası. |
| height | string | "self-stretch" | Dikey ayırıcı için Tailwind yükseklik sınıfı. |
| decorative | boolean | — | Ayırıcıyı erişilebilirlik ağacından gizler; etiketsiz kullanımda varsayılan true. |
| labelClassName | string | — | Etiket yüzeyi için ek sınıflar. |
| lineClassName | string | — | Çizgi öğesi için ek sınıflar. |