الفاصل
فاصل مرئي لتجميع المحتوى. متاح أفقياً وعمودياً.
Loading demo: divider-real-world
التثبيت
npx sdaia-ui@latest add divider
الاستخدام
import { Divider } from "@/components/ui/divider"<Divider />الأمثلة
أفقي
أفقي divider spanning the full container width.
Loading demo: divider-default
عمودي
عمودي divider used to separate inline content.
Loading demo: divider-vertical
السُّمك
الفاصل in Hairline, Thin, Regular, and Thick weights.
Loading demo: divider-thicknesses
مقصوص
فاصل مقصوص مع حشو على الجانبين.
Loading demo: divider-inset
مرجع الواجهة البرمجية
DividerProps
خصائص مكوّن Divider.
Prop | Type | Default | Required |
|---|---|---|---|
lineType | 'horizontal' | 'vertical' | 'horizontal' | optional |
color | 'neutral' | 'primary' | 'neutral' | optional |
thickness | 'hairline' | 'thin' | 'regular' | 'thick' | 'hairline' | optional |
length | 'full' | 'inset' | 'inset-start' | 'inset-end' | 'full' | optional |
rtl | boolean | false | optional |