الثيم الافتراضي

المكوّنات

رأس القسم

يفتتح قسمًا من الصفحة: تسمية قصيرة فوق عنوان كبير، وبجانبه وصف قصير ورابط واحد.

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.

npx ritla add section-header

ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/section-header

التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

import { SectionHeader } from "@/components/ui/section-header";

<SectionHeader
  eyebrow="Blocks"
  title="From parts to whole products."
  description="Ready-made blocks for the screens Gulf products need."
  action={<TextLink href="/blocks" iconTrailing={ArrowRightIcon}>Browse all blocks</TextLink>}
/>

أمثلة

الأجزاء التي يحتاجها القسم فقط

العنوان وحده، أو التسمية والعنوان دون وصف. يأخذ العنوان مستوى level في ترتيب عناوين الصفحة.

احصل على الكود ›

مرجع الخصائص

SectionHeader

الخاصية	النوع	الافتراضي	الوصف
`title`	`ReactNode`	لا يوجد	عنوان القسم.
`level`	`1 \| 2 \| 3`	`2`	مستوى العنوان في ترتيب عناوين الصفحة.
`eyebrow`	`ReactNode`	لا يوجد	تسمية قصيرة فوق العنوان.
`description`	`ReactNode`	لا يوجد	جملة أو جملتان بجانب العنوان، وتحته على الهاتف.
`action`	`ReactNode`	لا يوجد	رابط أو زر واحد تحت الوصف، وغالبًا `TextLink` إلى الصفحة الكاملة.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	إلى الرابط أو الزر في `action`. لا شيء آخر في الرأس يتلقى التركيز.

ARIA

العنوان عنوان حقيقي بالمستوى level، فيظهر في قائمة عناوين قارئ الشاشة.
الرأس div لا header، لأن header خارج section يصير معلم الصفحة الرئيسي.
الأحرف الكبيرة في التسمية تنسيق CSS، فيقرأ قارئ الشاشة الكلمات كما كُتبت.

ملاحظات العربية والاتجاه

ينعكس

العنوان يبدأ من اليمين، والوصف والرابط على يساره.
سهم الرابط يشير إلى اليسار.

لا ينعكس

ترتيب العنوان ثم الوصف على الهاتف: عمود واحد في الاتجاهين.

الأرقام: لا أرقام يكتبها الرأس بنفسه؛ الأرقام في نصوصك كما تمرّرها.
الخط العربي: التسمية بالإنجليزية label-12 بوزن Medium وبأحرف كبيرة متباعدة؛ وبالعربية label-14 بوزن Semibold دون تغيير حالة الأحرف ودون تباعد، فالعربية بلا أحرف كبيرة والحروف المتصلة لا تُباعَد. العنوان heading-36 ثم heading-48 من md وheading-54 من lg.