مكوّن قائمة التنقّل لـ Angular | ng-hub-ui-nav
مكوّن تنقّل لـ Angular مع قوائم منسدلة ولوحات تفصيلية وطيّ متجاوب والتكامل مع Router وتنسيق عبر متغيرات CSS.
نظرة عامة
لماذا تبحث الفِرَق عن هذه المكتبة
اعتمد على مكوّن التنقّل هذا لـ Angular عندما تحتاج إلى قوائم أفقية أو عمودية أو تفصيلية مع وعي بـ Router وأنماط تجربة مستخدم قابلة لإعادة الاستخدام.
التثبيت
npm install ng-hub-ui-navانتقل إلى
مثالي لـ
- أغلفة التطبيقات
- لوحات تحكم الإدارة
- قوائم التوثيق
- التنقّل المتجاوب
حول nav
يكون ng-hub-ui-nav مفيدًا عندما تتجاوز تطبيقات Angular القائمة العلوية البسيطة. يغطّي الأشرطة الجانبية العمودية وأشجار القوائم المنسدلة والتنقّل المتداخل وأنماط الطيّ المتجاوب التي تظهر في مواقع التوثيق ولوحات التحكم والأغلفة المؤسسية.
أدلّة الميزات
التنقّل الأساسي
تنقّل أفقي ورأسي أساسي مع عرض عناصر مدفوع بالبيانات وأيقونات وشارات وحالات معطّلة.
أمثلة:
تنقّل أفقي أساسي
تنقّل أفقي أساسي
تنقّل أكورديون عمودي
تنقّل أكورديون عمودي
تنقّل منبثق عمودي
تنقّل منبثق عمودي
تداخل القوائم المنسدلة
قوائم dropdown متعددة المستويات غير محدودة مع أوضاع تشغيل بالنقر أو التحويم أو مدمجة. تشمل عناصر فاصل وترويسة.
أمثلة:
قوائم منسدلة متعددة المستويات متداخلة
قوائم منسدلة متعددة المستويات متداخلة
الرؤوس والفواصل
الرؤوس والفواصل
مُشغّلات القوائم المنسدلة
مُشغّلات القوائم المنسدلة
الحالات
يوضّح العناصر الجذرية والمتداخلة المعطّلة وسلوك تفاعلها.
أمثلة:
الحالات المعطّلة
الحالات المعطّلة
سلوك متجاوب
طيّ متجاوب وعرض على الجوّال وسلوك فتحات RTL.
أمثلة:
أوضاع طيّ متجاوبة
أوضاع طيّ متجاوبة
Offcanvas mode
Click the toggler to open the mobile panel.
Dropdown mode
Click the toggler to open the mobile panel.
Fullscreen mode
Click the toggler to open the mobile panel.
RTL مع فتحات البداية/النهاية
RTL مع فتحات البداية/النهاية
الفتحات والقوالب
إسقاط فتحات البداية/النهاية وقوالب عناصر مخصّصة لبناء واجهات تنقّل مصمّمة خصّيصاً.
أمثلة:
فتحات البداية والنهاية
فتحات البداية والنهاية
قالب عنصر مخصص
قالب عنصر مخصص
تكامل Router
روابط router ومعاملات الاستعلام والشظايا ومطابقة الحالة النشطة عبر خيارات routerLinkActive.
أمثلة:
تكامل الموجّه والحالات النشطة
تكامل الموجّه والحالات النشطة
This example uses real router links. Items pointing to /nav and /nav/api can show active state while browsing nav documentation tabs.
الأحداث
راقب أحداث التفاعل للروابط والقوائم المنسدلة ومفاتيح تبديل الجوّال وتنقّل اللوحات.
أمثلة:
واجهة برمجة الأحداث
واجهة برمجة الأحداث
Last event:
{
"name": "none",
"payload": null
}التعمّق في اللوحات
تنقّل بلوحات متراكمة حيث يفتح النقر على dropdown عناصره الفرعية في لوحة جانبية. يدعم حدّاً أقصى قابلاً للتهيئة للوحات، والتعمّق مع التنقّل للخلف، وتموضع الشريط الجانبي على اليسار/اليمين.
أمثلة:
تنقّل تفصيلي عبر اللوحات
تنقّل تفصيلي عبر اللوحات
تجاوز expandMode لكل عنصر
تجاوز expandMode لكل عنصر
وضع لوحة الشريط الجانبي الأيمن
وضع لوحة الشريط الجانبي الأيمن
Main content area — the sidebar is placed on the right and panels extend to the left.
الميزات الرئيسية
التغييرات الأخيرة
Version 21.1.0 - 3/19/26, 12:00 AM
added: Panel drill-down expand mode with stacked side panels, configurable max visible panels, and drill-down with back navigation.
added: Per-item expandMode override (accordion, flyout, or panel) on HubNavItem.
added: Sidebar positioning with sidebarSide config (left or right).
added: Panel keyboard navigation (Escape, ArrowLeft) and automatic focus management.
added: Mobile fallback: panel mode degrades to accordion when collapsed.
added: CSS custom properties for panel styling (--hub-nav-panel-*).
Version 21.0.0 - 3/19/26, 12:00 AM
added: Initial release with horizontal and vertical navigation.
added: Data-driven API with HubNavItem interface supporting link, dropdown, header, separator, and custom types.
added: Unlimited dropdown nesting with recursive rendering.
added: Responsive collapsing with offcanvas, dropdown, and fullscreen mobile panel modes.
added: Vertical accordion and flyout expand modes.
added: Start/end slots via hubNavStart and hubNavEnd directives, plus custom item templates via hubNavItemTemplate.
added: Full Angular Router integration with routerLink, routerLinkActive, fragment, and queryParams support.
added: WCAG 2.1 AA keyboard navigation with WAI-ARIA menubar/menu pattern.
added: Complete CSS custom properties token set with 60+ variables.
added: HubNavConfigService with InjectionToken for global default configuration.