فاصل
Dividerفاصل في React للفصل الأفقي أو العمودي، مع تسمية مضمّنة اختيارية ودرجات ووضع زخرفي. يستخدم دور separator.
يفصل Divider بين المحتوى أفقيًا أو رأسيًا. مرر نصًا داخله لعرض تسمية، أو decorative إذا كان شكليًا فقط.
متى تستخدمه
استخدم Divider لفصل الأقسام داخل بطاقة أو نموذج أو شريط أدوات. أضف تسمية لفواصل «أو» بين الإجراءات البديلة.
فضّل المسافات على الفواصل حين يكون التخطيط واضحًا أصلًا؛ فكثرة الخطوط تضيف ضوضاء.
أمثلة
الخصائص
الخصائص التي يعرّفها Divider. سمات العنصر الأصلي تمرّ كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
orientation | "vertical" | "horizontal" | ||
variant | "solid" | "dashed" | ||
tone | "primary" | "neutral" | "white" | "alpha-white" | SDGA Color axis. neutral (gray-300, default) · primary (SA green) ·
alpha-white (30% white) · white. The white tones are fixed for use on
colored / dark surfaces. Override per-instance via --ddga-divider-color. | |
children | react.ReactNode | Optional label rendered inside a horizontal divider. Ignored when
orientation="vertical". When set, the divider renders as a three-part
flex (line - label - line) instead of a single bar. | |
labelPosition | "center" | "start" | "end" | Where to place the label along the divider. Defaults to center. Ignored
when no label is provided. start and end are logical (LTR/RTL aware). | |
decorative | boolean | If true, the divider is treated as purely decorative and removed from
the accessibility tree (role="none"). Defaults to false. |
إمكانية الوصول
يعرض Divider الدور role="separator" مع aria-orientation لتعرف التقنيات المساعدة اتجاهه. مرّر decorative للخطوط البصرية البحتة ليُعرض role="none" وتبقى خارج شجرة الوصول.
الفاصل ذو التسمية يقرأ تسميته نصًّا.