التثبيت
npx sdaia-ui@latest add form-section
الاستخدام
import { FormSection } from '@/components/ui/FormSection';<FormSection title="Personal information" description="Use the details that appear on your official ID.">
<FieldGroup legend="Full name" layout="horizontal">…</FieldGroup>
</FormSection>الاتجاه من اليمين إلى اليسار
التخطيط الجنبي بالعربية: ينتقل عمود العنوان إلى اليمين.
جارٍ تحميل العرض التوضيحي: form-section-rtl
أمثلة
مكدس
يقع العنوان فوق الحقول.
جارٍ تحميل العرض التوضيحي: form-section-default
جنبًا إلى جنب
يقع العنوان في عمود بجانب الحقول على الشاشات العريضة.
جارٍ تحميل العرض التوضيحي: form-section-side-by-side
بدون وصف
أخفِ الوصف عندما يكفي العنوان.
جارٍ تحميل العرض التوضيحي: form-section-without-description
صفحة الإعدادات
لكل موضوع قسم خاص في صفحة ضيقة.
جارٍ تحميل العرض التوضيحي: form-section-settings
متى تستخدمه
- النماذج الطويلة المقسمة إلى موضوعات
- صفحات الإعدادات ذات المجموعات المتعددة
- صفحات التعديل التي تضم أجزاء شخصية وحساب وأمان
- أي نموذج بأكثر من ستة حقول
متى لا تستخدمه
- النماذج القصيرة ذات الموضوع الواحد
- بديلًا عن عنوان الصفحة
- لتغليف حقل واحد
- النوافذ الحوارية واللوحات الضيقة — استخدم مجموعة الحقول
الخصائص
الخاصية | النوع | القيمة الافتراضية | مطلوبة |
|---|---|---|---|
title | ReactNode | — | اختيارية |
description | ReactNode | — | اختيارية |
layout | "stacked" | "side-by-side" | "stacked" | اختيارية |
headingLevel | 2 | 3 | 4 | 5 | 6 | 2 | اختيارية |
dir | "ltr" | "rtl" | inherited | اختيارية |
children | ReactNode | — | اختيارية |
إمكانية الوصول
- يُعرض كعنصر <section> يسمّيه عنوانه (aria-labelledby)، فيظهر في بنية الصفحة.
- اختر headingLevel بحيث تتبع العناوين ترتيب عناوين الصفحة.
- يرتبط الوصف عبر aria-describedby ويأتي قبل الحقول.
- تُميَّز الحقول المطلوبة نصًا في تسمياتها.
السلوك المتجاوب
- استخدم التخطيط الجنبي على الشاشات العريضة: يعود مكدسًا تلقائيًا كلما قل عرض القسم عن 40rem (استعلام حاوية، فيعمل داخل الأعمدة الضيقة أيضًا).
- تستخدم المسافات والخطوط الرموز المتجاوبة.
- يتقلص عمود الحقول مع الصفحة؛ لا عرض ثابتًا سوى عمود العنوان 280px في التخطيط الجنبي.