مكوّن Breadcrumbs لـ Angular | ng-hub-ui-breadcrumbs
مكوّن breadcrumbs لـ Angular مع التكامل مع Router وقوالب مخصّصة ودعم RTL ورموز تنسيق مرنة.
الأنماط
الميكسنات والأنماط
Override any of the `--hub-breadcrumb-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults. Token-based and self-contained (no Bootstrap dependencies).
Theming with hub-breadcrumb-theme
| ميكسن | المعاملات | الوصف |
|---|---|---|
| Theming | ||
hub-breadcrumb-theme() | $bg--hub-breadcrumb-bg$color--hub-breadcrumb-color$border-radius--hub-breadcrumb-border-radius$padding-x--hub-breadcrumb-padding-x$padding-y--hub-breadcrumb-padding-y$margin-bottom--hub-breadcrumb-margin-bottom$font-size--hub-breadcrumb-font-size$divider--hub-breadcrumb-divider$divider-flipped--hub-breadcrumb-divider-flipped$divider-color--hub-breadcrumb-divider-color$item-padding-x--hub-breadcrumb-item-padding-x$item-active-color--hub-breadcrumb-item-active-color$accent--hub-breadcrumb-accent$link-color--hub-breadcrumb-link-color$link-hover-color--hub-breadcrumb-link-hover-color$link-decoration--hub-breadcrumb-link-decoration$link-hover-decoration--hub-breadcrumb-link-hover-decoration | One-call theming for `<hub-breadcrumb>` |
متغيّرات CSS
نسّق كل بكسل عبر 18 متغيّرات CSS. تجاوزها عند :root أو حدّد نطاقها على غلاف.
Breadcrumbs
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-breadcrumb-padding-x | var(--hub-ref-space-3, 1rem) | length | الحشو الأفقي حول مكوّن breadcrumbs بالكامل |
--hub-breadcrumb-padding-y | 0.25rem | length | الحشو الرأسي حول مكوّن breadcrumbs بالكامل |
--hub-breadcrumb-margin-bottom | var(--hub-ref-space-0, 0) | length | الهامش السفلي لمكوّن breadcrumbs |
--hub-breadcrumb-bg | var(--hub-sys-surface-page, transparent) | color | لون خلفية حاوية breadcrumbs |
--hub-breadcrumb-color | var(--hub-sys-text-primary, #212529) | color | Base text color of the breadcrumb list |
--hub-breadcrumb-font-size | inherit | length | حجم خط نص breadcrumbs |
--hub-breadcrumb-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | نصف قطر استدارة حاوية breadcrumbs |
--hub-breadcrumb-divider-color | var(--hub-sys-text-muted, #6c757d) | color | لون فاصل الفصل |
--hub-breadcrumb-divider | '>' | string | الحرف أو الرمز المستخدم كفاصل بين عناصر breadcrumbs |
--hub-breadcrumb-divider-flipped | '<' | string | حرف الفاصل المستخدم في تخطيطات RTL (اتجاه معكوس) |
--hub-breadcrumb-item-padding-x | var(--hub-ref-space-1, 0.25rem) | length | الحشو الأفقي حول عناصر breadcrumbs الفردية |
--hub-breadcrumb-item-active-color | var(--hub-sys-text-muted, #6c757d) | color | لون نص عنصر breadcrumbs النشط (الحالي) |
--hub-breadcrumb-accent | var(--hub-sys-color-primary, #0d6efd) | color | Semantic accent for the links — re-based per variant (default = link colour) |
--hub-breadcrumb-link-color | var(--hub-breadcrumb-accent) | color | لون نص عناصر breadcrumbs غير النشطة (الروابط) |
--hub-breadcrumb-link-hover-color | var(--hub-breadcrumb-accent-emphasis, var(--hub-sys-link-hover-color, #0a58ca)) | color | لون النص عند المرور فوق روابط breadcrumbs |
--hub-breadcrumb-link-decoration | none | string | Text decoration of breadcrumb links |
--hub-breadcrumb-link-hover-decoration | underline | string | Text decoration of breadcrumb links on hover |
--hub-breadcrumb-max-item-width | 12rem | length | أقصى عرض لتسمية واحدة عند تفعيل الاقتطاع. |
التنسيق والسمات
متغيرات 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
الشفرة
الكود
الاستيراد:
القالب:
المكوّن: