البناء · جديد

شريط التنقل

وصول سريع إلى ثلاث إلى خمس وجهات رئيسية أسفل شاشة الهاتف (حتى ست على الجهاز اللوحي)، لكل وجهة أيقونة وتسمية قصيرة.

المعاينة

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

التثبيت

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

npx shadcn@latest add @ritla/navigation-bar

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

الاستخدام

import { NavigationBar, NavigationBarItem } from "@/components/ui/navigation-bar";

<NavigationBar className="fixed inset-x-0 bottom-0">
  <NavigationBarItem href="/" icon={HouseIcon} selected>Home</NavigationBarItem>
  <NavigationBarItem href="/alerts" icon={BellIcon} badge={3} badgeLabel="new alerts">Alerts</NavigationBarItem>
</NavigationBar>

أمثلة

الجهاز اللوحي

‏layout="tablet": حتى ست وجهات، والأيقونة بجانب التسمية، وشارة نقطة.

تلقائي وروابط الموجّه

الافتراضي layout="auto": شريط الهاتف تحت md وشريط الجهاز اللوحي من md. العناصر روابط <Link> عبر render، وshowLabels={false} يخفي التسميات في كل الشريط مع بقائها لقارئ الشاشة.

مرجع الخصائص

NavigationBar

الخاصية	النوع	الافتراضي	الوصف
`layout`	`"auto" \| "phone" \| "tablet"`	`"auto"`	شريط الهاتف أو الجهاز اللوحي، أو كلاهما حسب عرض الشاشة.
`showLabels`	`boolean`	`true`	خاصية Show label للشريط كله: كل التسميات أو لا شيء.
`aria-label`	`string`		اسم عنصر التنقل. الافتراضي «الرئيسية» بلغة الصفحة.

NavigationBarItem

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		خاصية Label: كلمة قصيرة واحدة.
`icon`	`IconComponent`		‏Outline icon؛ يُرسم بوزن Fill حين يكون محددًا.
`selectedIcon`	`IconComponent`		‏Filled icon حين لا يكون الأيقونة نفسها بوزن Fill.
`selected`	`boolean`	`false`	خاصية Selected: الصفحة الحالية.
`href / render`	`string / ReactElement`		الوجهة، أو رابط موجّه بمظهر العنصر.
`badge`	`number \| true`		خاصية Badge: عدد (Number) أو `true` لنقطة (Dot).
`badgeLabel`	`ReactNode`		معنى الشارة لقارئ الشاشة («تنبيهات جديدة»).

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

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

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

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

ARIA

عنصر nav باسم «الرئيسية» بلغة الصفحة، وقائمة ul، والعنصر المحدد aria-current="page".
كل عنصر بارتفاع 64 بكسل، فوق مساحة اللمس 48.
الشارة تُقرأ بمعناها: «3 تنبيهات جديدة»، والنقطة بلا تسمية تُقرأ «جديد».

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

ينعكس

أول وجهة على اليمين، وعلى الجهاز اللوحي تكون الأيقونة يمين التسمية.

لا ينعكس

الأيقونات إلا الاتجاهية منها (قائمة الانعكاس).

الأرقام: عدد الشارة يتبع إعداد الأرقام.
الخط العربي: ‏label-12: عادي، وMedium للمحدد.
النص ثنائي الاتجاه: اجعل التسميات كلمة واحدة؛ الأطول تُقص في الهاتف.

كل المكونات ›