مكوّن Breadcrumbs لـ Angular | ng-hub-ui-breadcrumbs
مكوّن breadcrumbs لـ Angular مع التكامل مع Router وقوالب مخصّصة ودعم RTL ورموز تنسيق مرنة.
مرجع API
إليك العقد الكامل لـ breadcrumbs: كل ما يمكنك ربطه والاستماع إليه وإسقاطه وتنسيقه، مجموعاً في مكان واحد. اربط ما تحتاجه ونسّق ما تريده — إنه standalone وملائم للـ Signals.
المدخلات
اضبط breadcrumbs عبر 1 مدخلات. اربطها مثل أي @Input في Angular.
| الاسم | النوع | الافتراضي | الوصف |
|---|---|---|---|
breadcrumbs$ | Observable<BreadcrumbItem[]> | — | تدفّق Observable لعناصر مسار التنقل المُنشأة تلقائيًا من بيانات المسار. |
المخرجات
لم يتم توثيق أي مخرجات بعد.
القوالب
اجعله خاصاً بك — 1 فتحات قوالب تتيح لك إسقاط ترميز مخصّص.
| الاسم | الوصف | مثال |
|---|---|---|
hubBreadcrumbItem | قالب مخصص لعرض عناصر مسار التنقل الفردية | <ng-template hubBreadcrumbItem let-item let-isLast="isLast">
@if (!isLast) {
<a [routerLink]="item.url" class="breadcrumb-link">{{ item.label }}</a>
} @else {
<span class="breadcrumb-current">{{ item.label }}</span>
}
</ng-template> |
متغيّرات CSS
نسّق كل بكسل عبر 17 متغيّرات CSS. تجاوزها عند :root أو حدّد نطاقها على غلاف.
الفاصل والتخطيط
تحكَّم في مظهر الفاصل وبنية التخطيط العامة
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-breadcrumb-divider | '/' | string | الحرف أو الرمز المستخدم كفاصل بين عناصر breadcrumbs '>''→''•''|' |
--hub-breadcrumb-divider-color | #6c757d | color | لون فاصل الفصل #666666var(--bs-secondary)rgba(0,0,0,0.5) |
--hub-breadcrumb-padding-x | 0 | length | الحشو الأفقي حول مكوّن breadcrumbs بالكامل 0.5rem1rem0.75rem |
--hub-breadcrumb-padding-y | 0 | length | الحشو الرأسي حول مكوّن breadcrumbs بالكامل 0.25rem0.5rem0.75rem |
الألوان والخلفية
خصِّص الألوان ومظهر خلفية عناصر breadcrumbs
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-breadcrumb-bg | transparent | color | لون خلفية حاوية breadcrumbs #f8f9fa#ffffffvar(--bs-light) |
--hub-breadcrumb-item-color | #6c757d | color | لون نص عناصر breadcrumbs غير النشطة (الروابط) #495057var(--bs-secondary)#666666 |
--hub-breadcrumb-item-active-color | #212529 | color | لون نص عنصر breadcrumbs النشط (الحالي) #000000var(--bs-dark)#333333 |
--hub-breadcrumb-item-hover-color | #0d6efd | color | لون النص عند المرور فوق روابط breadcrumbs #0056b3var(--bs-primary)#007bff |
التباعد والطباعة
تحكَّم في التباعد بين العناصر وإعدادات الطباعة
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-breadcrumb-item-padding-x | 0.5rem | length | الحشو الأفقي حول عناصر breadcrumbs الفردية 0.25rem0.75rem1rem |
--hub-breadcrumb-item-padding-y | 0 | length | الحشو الرأسي حول عناصر breadcrumbs الفردية 0.25rem0.5rem0.75rem |
--hub-breadcrumb-font-size | 1rem | length | حجم خط نص breadcrumbs 0.875rem1.125rem1.25rem |
--hub-breadcrumb-font-weight | 400 | string | وزن خط نص breadcrumbs 500600bold |
الحدود والتأثيرات البصرية
اضبط الحدود ونصف القطر والتحسينات البصرية
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-breadcrumb-border-radius | 0 | length | نصف قطر استدارة حاوية breadcrumbs 0.25rem0.375rem0.5rem |
--hub-breadcrumb-border | none | border | الحدود حول حاوية breadcrumbs 1px solid #dee2e62px solid #e9ecefnone |
--hub-breadcrumb-margin-bottom | 1rem | length | الهامش السفلي لمكوّن breadcrumbs 0.5rem1.5rem2rem |
دعم RTL
متغيرات لدعم التخطيط من اليمين إلى اليسار
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-breadcrumb-rtl-divider | '' | string | حرف الفاصل المستخدم في تخطيطات RTL (اتجاه معكوس) '<''←''' |
--hub-breadcrumb-direction | ltr | string | اتجاه النص لتخطيط breadcrumbs rtlltr |
التنسيق والسمات
متغيرات CSS والتنسيق المظهري
تحكُّم كامل في المظهر باستخدام خصائص CSS المخصصة للفواصل والألوان والتباعد والمظهر البصري.
أمثلة:
CSS Variables Customization
Customize breadcrumbs appearance using CSS custom properties for complete theming
Breadcrumbs - CSS Variables Styling
Customization of dividers, colors, and spacing through CSS variables
Custom Divider
Custom Colors (via CSS class)
Spacing & Radius
الشفرة
الكود
الاستيراد:
القالب:
المكوّن: