Divider
خط رفيع يفصل المحتوى إلى أقسام. أفقي أو عمودي، وأربعة ألوان.
الإصدار 0.2.0 ·
التثبيت
bunx --bun shadcn@latest add @dga/dividerالاستخدام
import { Divider } from "@/components/ui/divider";
<Divider />
<Divider orientation="vertical" />مبني على Base UI Separator.
أمثلة
الألوان
neutral (الافتراضي) وprimary، وalpha-white وwhite لتعبئات العلامة.
العمودي
اضبط orientation="vertical" داخل صف flex بارتفاع ثابت.
اتجاه RTL
الخط بلا اتجاه. تقع الفواصل العمودية بين العناصر وفق ترتيب القراءة.
إمكانية الوصول
- يعرض
role="separator"معaria-orientation، فتعلن قارئات الشاشة الفاصل بين الأقسام. - إذا كان الخط بصريًا فقط، مرّر
role="none".
مرجع API
Divider
يفصل المحتوى إلى أقسام. يُعلَن كفاصل؛ مرّر role="none" إن كان بصريًا فقط.
| الخاصية | النوع | القيمة الافتراضية |
|---|---|---|
"alpha-white" | "neutral" | "primary" | "white"اللون. `alpha-white` و`white` للفواصل على خلفيات لون العلامة. | "neutral" | |
| ||
"horizontal" | "vertical"اتجاه الفاصل. | "horizontal" | |
| ||
يقبل أيضًا جميع خصائص Base UI Separator (يفتح في نافذة جديدة).
الاختلافات عن DGA
| التغيير | السبب |
|---|---|
Divider: colours | Mapped to the closest semantic border tokens. border-white flips to black in dark mode, so white uses a token that stays white. |
عرض جميع الاختلافات (1) لهذا المكوّن أسباب الاختلافات مكتوبة بالإنجليزية.
التباين
لا توجد أزواج للتباين: هذا المكوّن تزييني. يجب ألا يعتمد عليه أي محتوى يحمل معنى (يسري WCAG 1.4.11 على الرسوم اللازمة لفهم المحتوى فقط).