الفاصل
خط أفقي يفصل المحتوى، وحده أو مع عنوان أو نص أو زر في منتصفه.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
التثبيت
أضف المكوّن
npx ritla add separatorويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/separatorأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { Separator } from "@/components/ui/separator";<Separator /><Separator>Today</Separator><Separator type="heading" variant="dual">Notifications</Separator>أمثلة
الأنماط
خط على الجانبين، أو خطان أعلى وأسفل، أو شريط بخلفية هادئة.
مع زر
زر أو زر أيقونة أو مجموعة أزرار بين كتلتين، مثل «عرض ١٢ أخرى».
مرجع الخصائص
Separator
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
children | ReactNode | لا يوجد | التسمية في المنتصف. بدونها يظهر خط فقط. |
type | "heading" | "text" | "action" | "text" | خاصية Type: عنوان أو نص أو عنصر تحكم (زر أو مجموعة أزرار). |
variant | "single" | "dual" | "fill" | "single" | خاصية Style: خط واحد أو خطان أو خلفية. |
orientation | "horizontal" | "vertical" | "horizontal" | للخط وحده: أفقي أو عمودي. |
decorative | boolean | false | خط للزينة فقط، يُخفى عن قارئ الشاشة. |
إرشادات الاستخدام
الفاصل خط بين كتلتين. هنا: الخط أم المسافة، والفواصل المسمّاة، وكيف تعمل في العربية، وما تتحقق منه قبل التسليم.
1. خط أم مسافة
استخدم المسافة أولًا. وأضف خطًا حين تتشارك كتلتان خلفية واحدة ويمكن أن تُقرآ كتلة واحدة.
افعل
- 24 بكسل فوق الفاصل وتحته.
- اللون الباهت داخل البطاقات.
تجنّب
- خط تحت عنوان.
- فاصل في أعلى الحاوية أو أسفلها.
2. الفواصل المسمّاة
تسمية العنوان تسمّي الكتلة التي تحتها: «في وقت سابق اليوم». وتسمية الزر تقدّم إجراءً بين كتلتين: «عرض 12 أخرى».
افعل
- التسمية ثلاث كلمات على الأكثر.
- وسّط التسمية؛ فهي علامة، لا عنوان.
تجنّب
- فاصل مسمّى بدل رأس قسم.
- زران فيه دون نوع مجموعة الأزرار.
3. العربية والاتجاه من اليمين إلى اليسار
التسمية في الوسط فلا يتحرك شيء؛ وأيقونة الزر تنعكس مع اتجاه النص.
قبل التسليم
- كل الأنواع في الاتجاهين.
- لون الخط مختار لكل سطح.
- فواصل الأزرار مربوطة بالإجراء الذي تصفه.
إمكانية الوصول
ARIA
- الخط وحده
role="separator"، والعمودي يضيفaria-orientation. - الفاصل ذو التسمية يعرض نصه كما هو، وفاصل الزر يعرض الزر فقط؛ الخطوط مخفية عن قارئ الشاشة.
- التسمية ليست عنوانًا: استخدم رأس القسم للأقسام.
ملاحظات العربية والاتجاه
ينعكس
- أيقونة الزر تنعكس مع اتجاه النص، وترتيب مجموعة الأزرار يبدأ من اليمين.
لا ينعكس
- التسمية في المنتصف، فلا شيء يتحرك.
- الخط نفسه لا ينعكس.
- الأرقام
- الأرقام في التسمية تتبع إعداد الأرقام في
RitlaProvider. - الخط العربي
- العنوان
body-18بوزن Semibold، والنصbody-14بوزن Medium؛ أسطر العربية أطول، فارتفاع الفاصل يزيد قليلًا.
افعل
- النسخة العربية للتسميات العربية، فتُصفّ بالخطوط العربية.
- تحقّق من مسافات الخط المزدوج مع صواعد الحروف العربية.
تجنّب
- عكس الخط نفسه.
- ترجمة تسميات هي أرقام فقط.