فاصل
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" ويبقى خارج شجرة الوصول.
يقرأ الفاصل ذو التسمية تسميته نصاً.