البناء · جديد

رأس التطبيق

أعلى الشاشة: الرجوع، وعنوان الشاشة، وبعض الإجراءات. الصغير يبقي العنوان في السطر نفسه، والمتوسط والكبير يضعان عنوانًا أكبر تحت الإجراءات للشاشات الرئيسية.

المعاينة

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

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/app-header

الاستخدام

import { AppHeader } from "@/components/ui/app-header";

<AppHeader
  title="Transfer money"
  leading={<IconButton variant="ghost" shape="square" size="md" icon={ArrowLeftIcon} label="Back" />}
  actions={<IconButton variant="ghost" shape="round" size="md" icon={DotsThreeVerticalIcon} label="More" />}
/>

أمثلة

المتوسط والكبير والإجراءات فقط

للشاشات الرئيسية: العنوان تحت الإجراءات، مع صورة رمزية. «الإجراءات فقط» بلا عنوان.

عنوان في الوسط وخانة البحث

‏align="center" يبقي العنوان في منتصف الشريط مهما اختلف عرض الجانبين، والرجوع رابط <Link>. الأبناء تملأ الخانة تحت الشريط (حقل بحث أو تبويبات).

مرجع الخصائص

AppHeader

الخاصية	النوع	الافتراضي	الوصف
`type`	`"small" \| "medium" \| "large" \| "actions-only"`	`"small"`	خاصية Type.
`title`	`ReactNode`		عنوان الشاشة، وهو عنوان الصفحة.
`subtitle`	`ReactNode`		خاصية Supporting text.
`align`	`"default" \| "center"`	`"default"`	خاصية Alignment.
`leading`	`ReactNode`		العنصر في البداية، عادة زر رجوع `IconButton`.
`actions`	`ReactNode`		إجراءان أو ثلاثة وصورة رمزية أو قائمة.
`headingLevel`	`1 \| 2 \| 3`	`1`	مستوى عنوان الشاشة.
`children`	`ReactNode`		خاصية slot: حقل بحث أو تبويبات تحت الشريط.

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

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

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

المفتاح	ما يفعله
`Tab`	بين عناصر التحكم بترتيب القراءة: الرجوع ثم الإجراءات.

ARIA

الشريط عنصر header، والعنوان عنوان الصفحة (h1 افتراضيًا).
كل زر أيقونة له اسم: رجوع، بحث، الإشعارات، المزيد. ومساحة اللمس 48 بكسل.
لا تضع زر الحفظ أو الإرسال في الشريط وحده.

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

ينعكس

الرجوع على اليمين ويتجه لليمين، والإجراءات على اليسار.
العنوان يبدأ من اليمين، والعنوان في الوسط يبقى في الوسط.

لا ينعكس

أيقونات البحث والإشعارات والمزيد، والصورة الرمزية.

الأرقام: الأرقام في العنوان الفرعي (الخطوة 2 من 3) كما تمرّرها.
الخط العربي: الصغير body-16، والمتوسط body-20، والكبير heading-36، بوزن Medium؛ والارتفاعات حدود دنيا لأن العناوين العربية أطول.
النص ثنائي الاتجاه: لا تثبّت سهمًا لليسار: ArrowLeftIcon ينعكس وحده في العربية.

كل المكونات ›