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

المكوّنات

ترويسة الموقع

شعار الموقع والروابط الرئيسية والإجراءات في شريط ثابت أعلى الصفحة، يطوى في كبسولة عائمة حين تبدأ الصفحة بالتمرير.

المعاينة

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

التثبيت

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

npx ritla add marketing-header

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

الاعتماديات التي يضيفها: @phosphor-icons/react

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

الاستخدام

import { MarketingHeader } from "@/components/ui/marketing-header";

<MarketingHeader
  logo={<Wordmark />}
  links={[
    { label: "Components", href: "/ui" },
    { label: "Docs", href: "/docs" },
    { label: "Pricing", href: "/#pricing" },
  ]}
  menuLinks={[{ label: "Sign in", href: "/login" }]}
  actions={<Button size="sm" render={<a href="/#top" />}>Scan your site free</Button>}
/>

أمثلة

الكبسولة المطويّة

مع folded تبقى الترويسة في حالة الكبسولة: بطاقة بخلفية شبه شفافة وحدّ رفيع وظل. ارتفاعها مثل الشريط المفتوح، فلا تتحرك الصفحة تحت إصبع القارئ حين تطوى.

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

مرجع الخصائص

MarketingHeader

الخاصية	النوع	الافتراضي	الوصف
`logo`	`ReactNode`	لا يوجد	شعار الموقع، مرتبطًا بالصفحة الرئيسية.
`links`	`{ label, href, current?, lang? }[]`	لا يوجد	الروابط الرئيسية بترتيب القراءة. `current` يضع `aria-current="page"`، و`lang` لنص بلغة أخرى مثل Figma.
`actions`	`ReactNode`	لا يوجد	نهاية الشريط: اللغة وتسجيل الدخول وإجراء واحد. تبقى في الشريط على الهاتف.
`menuLinks`	`{ label, href }[]`	لا يوجد	روابط إضافية في قائمة الهاتف فقط، بعد `links`.
`folded`	`boolean`	لا يوجد	دون هذه الخاصية تُطوى الترويسة مع التمرير؛ `true` أو `false` يثبّت حالة واحدة.
`copy`	`{ nav, menu, close }`	لا يوجد	اسم التنقل واسما زر القائمة؛ الافتراضي بلغة الصفحة.

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

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

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

المفتاح	ما يفعله
`Tab`	الشعار ثم الروابط ثم الإجراءات، وزر القائمة على الشاشات الضيقة.
`Enter`	يفتح زر القائمة قائمة الروابط تحت الشريط أو يغلقها.

ARIA

الترويسة معلم الصفحة (header)، والروابط معلم تنقّل باسم («الرئيسية»).
رابط الصفحة الحالية يحمل aria-current="page".
زر القائمة يعلن حالته بـ aria-expanded ويسمّي ما سيفعله («القائمة» أو «إغلاق القائمة»).

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

ينعكس

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

لا ينعكس

الشعار نفسه لاتيني ولا ينعكس.

الأرقام: لا أرقام تكتبها الترويسة.
الخط العربي: الروابط body-14 بوزن Medium، وbody-16 في قائمة الهاتف.