مكوّن قائمة التنقّل لـ Angular | ng-hub-ui-nav
مكوّن تنقّل لـ Angular مع قوائم منسدلة ولوحات تفصيلية وطيّ متجاوب والتكامل مع Router وتنسيق عبر متغيرات CSS.
مرجع API
إليك العقد الكامل لـ nav: كل ما يمكنك ربطه والاستماع إليه وإسقاطه وتنسيقه، مجموعاً في مكان واحد. اربط ما تحتاجه ونسّق ما تريده — إنه standalone وملائم للـ Signals.
المدخلات
اضبط nav عبر 4 مدخلات. اربطها مثل أي @Input في Angular.
| الاسم | النوع | الافتراضي | الوصف |
|---|---|---|---|
itemsمطلوب | HubNavItem[] | — | مصفوفة عناصر التنقل المراد عرضها. يحدّد كل عنصر نوعه (link، dropdown، header، separator، custom)، والتسمية، والمسار، والأيقونة، والشارة، والعناصر الفرعية، والمزيد. |
config | Partial<HubNavConfig> | {} | تجاوزات إعداد جزئية مدمجة مع الإعدادات الافتراضية العامة. تتحكم في الاتجاه، ومُشغِّل القائمة المنسدلة، ووضع الطيّ، ونقطة التوقف، والموضع، والمزيد. |
navClass | string | '' | فئة CSS إضافية تُطبَّق على عنصر حاوية nav. |
itemTemplate | TemplateRef<HubNavItemTemplateContext> | null | null | قالب مخصص اختياري لعرض عناصر nav عبر ربط الإدخال. يكون لموجِّه hubNavItemTemplate الأولوية على هذا الإدخال. |
المخرجات
تفاعل مع ما يفعله nav — 5 أحداث لربط منطقك بها.
| الاسم | النوع | الوصف |
|---|---|---|
itemClick | OutputEmitterRef<HubNavItem> | يُطلَق عند النقر على عنصر link. يوفّر HubNavItem المنقور. |
dropdownOpen | OutputEmitterRef<HubNavItem> | يُطلَق عند فتح عنصر dropdown. |
dropdownClose | OutputEmitterRef<HubNavItem> | يُطلَق عند إغلاق عنصر dropdown. |
mobileToggle | OutputEmitterRef<boolean> | يُطلَق عند تبديل اللوحة على الجوال. يوفّر true عند الفتح، و false عند الإغلاق. |
panelChange | OutputEmitterRef<HubNavPanelEvent> | يُطلَق عند فتح لوحة أو إغلاقها أو التعمّق فيها أو التنقل للخلف. يوفّر العنصر، وفهرس اللوحة، ونوع الإجراء. |
القوالب
اجعله خاصاً بك — 3 فتحات قوالب تتيح لك إسقاط ترميز مخصّص.
| الاسم | الوصف | مثال |
|---|---|---|
hubNavStart | يعرض محتوى مخصصًا في الفتحة start. أفقيًا: البداية المرئية (يسار في LTR، يمين في RTL). رأسيًا: أعلى العمود الأساسي. | <hub-nav [items]="items">
<ng-template hubNavStart let-collapsed="collapsed">
<img src="logo.svg" alt="Brand" />
@if (!collapsed) { <span>App Name</span> }
</ng-template>
</hub-nav> |
hubNavEnd | يعرض محتوى مخصصًا في الفتحة end. أفقيًا: النهاية المرئية (يمين في LTR، يسار في RTL). رأسيًا: أسفل العمود الأساسي. | <hub-nav [items]="items">
<ng-template hubNavEnd>
<button type="button">Sign out</button>
</ng-template>
</hub-nav> |
hubNavItemTemplate | يتجاوز العرض الافتراضي للعنصر بقالب مخصص. يستقبل HubNavItemTemplateContext مع الخصائص $implicit (العنصر) و active و expanded و depth. | <hub-nav [items]="items">
<ng-template hubNavItemTemplate let-item let-active="active">
<span [class.fw-bold]="active">{{ item.label }}</span>
@if (item.badge) { <span class="badge">{{ item.badge }}</span> }
</ng-template>
</hub-nav> |
متغيّرات CSS
نسّق كل بكسل عبر 42 متغيّرات CSS. تجاوزها عند :root أو حدّد نطاقها على غلاف.
التخطيط
تحكَّم في أبعاد nav العامة والحشو والتباعد.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-nav-height | 3.5rem | length | ارتفاع شريط التنقل. 3rem4remauto |
--hub-nav-padding-x | 1rem | length | الحشو الأفقي لحاوية nav. 0.5rem1.5rem2rem |
--hub-nav-padding-y | 0.5rem | length | الحشو الرأسي لحاوية nav. 0.25rem0.75rem1rem |
--hub-nav-gap | 0.25rem | length | الفجوة بين عناصر nav. 00.5rem1rem |
الألوان والخلفية
تحكَّم في نظام ألوان nav والحدود.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-nav-bg | #fff | color | لون خلفية شريط التنقل. #f8f9fatransparentvar(--hub-sys-surface-page) |
--hub-nav-color | #212529 | color | لون النص الأساسي للتنقل. #333#fffvar(--hub-sys-text-primary) |
--hub-nav-border-color | #dee2e6 | color | لون حدود شريط التنقل. transparent#cccvar(--hub-sys-border-color-default) |
العناصر
تنسيق عناصر التنقل الفردية في جميع الحالات.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-nav-item-padding-x | 1rem | length | الحشو الأفقي داخل عناصر nav. 0.5rem1.25rem1.5rem |
--hub-nav-item-padding-y | 0.5rem | length | الحشو الرأسي داخل عناصر nav. 0.25rem0.75rem1rem |
--hub-nav-item-color | #212529 | color | لون نص عناصر nav. #495057#fffinherit |
--hub-nav-item-border-radius | 0.25rem | length | نصف قطر استدارة عناصر nav. 00.375rem50rem |
--hub-nav-item-hover-bg | rgba(0, 0, 0, 0.04) | color | لون الخلفية عند المرور. #e9ecefrgba(255, 255, 255, 0.1)transparent |
--hub-nav-item-hover-color | #0d6efd | color | لون النص عند المرور. #0a58ca#fffvar(--hub-sys-color-primary) |
--hub-nav-item-active-bg | #0d6efd | color | لون الخلفية عندما يكون العنصر نشطاً. #0a58catransparentvar(--hub-sys-color-primary) |
--hub-nav-item-active-color | #fff | color | لون النص عندما يكون العنصر نشطاً. #0d6efd#212529var(--hub-sys-text-inverse) |
--hub-nav-item-disabled-color | #6c757d | color | لون نص العناصر المعطَّلة. #adb5bdvar(--hub-sys-text-muted) |
--hub-nav-item-disabled-opacity | 0.65 | number | شفافية العناصر المعطَّلة. 0.50.41 |
القائمة المنسدلة
خصِّص مظهر لوحة القائمة المنسدلة وموضعها.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-nav-dropdown-bg | #fff | color | لون خلفية لوحات القائمة المنسدلة. #f8f9fa#343a40var(--hub-sys-surface-elevated) |
--hub-nav-dropdown-border-color | #dee2e6 | color | لون حدود لوحات القائمة المنسدلة. transparent#ccc |
--hub-nav-dropdown-border-radius | 0.375rem | length | نصف قطر استدارة لوحات القائمة المنسدلة. 00.25rem0.5rem |
--hub-nav-dropdown-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | shadow | ظل صندوق لوحات القائمة المنسدلة. none0 4px 8px rgba(0,0,0,0.1)0 1rem 3rem rgba(0,0,0,0.175) |
--hub-nav-dropdown-min-width | 12rem | length | الحد الأدنى لعرض لوحات القائمة المنسدلة. 10rem15rem200px |
العلامة
تنسيق منطقة فتحة العلامة.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-nav-brand-font-size | 1.25rem | length | حجم خط نص العلامة. 1rem1.5rem2rem |
--hub-nav-brand-font-weight | 600 | number | وزن خط نص العلامة. 400700800 |
--hub-nav-brand-color | #212529 | color | لون نص العلامة. #fff#0d6efdinherit |
لوحة الجوال
إعداد لوحة التنقل المتجاوبة للجوال.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-nav-mobile-bg | #fff | color | لون خلفية لوحة الجوال. #f8f9fa#212529var(--hub-sys-surface-page) |
--hub-nav-mobile-width | 18rem | length | عرض لوحة الجوال خارج اللوحة (offcanvas). 15rem20rem80vw |
--hub-nav-mobile-backdrop-bg | rgba(0, 0, 0, 0.5) | color | لون الخلفية خلف لوحة الجوال. rgba(0, 0, 0, 0.3)rgba(0, 0, 0, 0.75)transparent |
--hub-nav-mobile-transition | 300ms ease | transition | توقيت الانتقال لحركة فتح/إغلاق لوحة الجوال. 200ms ease-in-out400ms ease150ms linear |
accordion والأيقونات
إزاحة accordion الرأسية وتحجيم الأيقونات.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-nav-accordion-indent | 1rem | length | الإزاحة اليسرى لكل مستوى تداخل في وضع accordion الرأسي. 0.5rem1.5rem2rem |
--hub-nav-icon-size | 1.25rem | length | حجم أيقونات عناصر التنقل. 1rem1.5rem2rem |
--hub-nav-icon-gap | 0.5rem | length | الفجوة بين الأيقونة ونص التسمية. 0.25rem0.75rem1rem |
اللوحة
تنسيق تنقل التعمُّق للوحات المكدَّسة.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-nav-panel-width | 16rem | length | العرض الافتراضي لكل لوحة. 14rem18rem20rem |
--hub-nav-panel-zindex | 100 | number | ترتيب تكديس اللوحات (يجب أن يكون أقل من z-index للقائمة المنسدلة). 50100200 |
--hub-nav-panel-bg | var(--hub-sys-surface-page, #fff) | color | لون خلفية اللوحات. #f8f9fa#fffvar(--hub-sys-surface-elevated) |
--hub-nav-panel-color | var(--hub-sys-text-primary, #212529) | color | لون النص داخل اللوحات. #333#fffinherit |
--hub-nav-panel-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | لون الحدود بين اللوحات. transparent#ccc |
--hub-nav-panel-shadow | inset 4px 0 8px -4px rgba(0, 0, 0, 0.1) | shadow | ظل صندوق اللوحات. none2px 0 4px rgba(0,0,0,0.05) |
--hub-nav-panel-header-height | 3rem | length | ارتفاع رأس اللوحة. 2.5rem3.5rem4rem |
--hub-nav-panel-header-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | لون خلفية رأس اللوحة. #fff#e9eceftransparent |
--hub-nav-panel-back-color | var(--hub-sys-text-secondary, #6c757d) | color | لون زر الرجوع في رأس اللوحة. #212529#0d6efdinherit |
--hub-nav-panel-back-hover-bg | rgba(0, 0, 0, 0.04) | color | خلفية المرور لأزرار رأس اللوحة. #e9ecefrgba(0,0,0,0.08) |
التنسيق والسمات
لم يتم توثيق أي أمثلة تنسيق بعد. سيتضمّن هذا القسم وصفات التخصيص وأمثلة السمات.