Angular Badges Library | ng-hub-ui-badges
Semantic Angular badges for statuses, counters and removable filter tags, with CSS variables and public SCSS mixins for custom colour families.
الأنماط
الميكسنات والأنماط
Override the key `--hub-badge-*` 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 defaults. Token-based and self-contained.
Theming with hub-badge-theme
| ميكسن | المعاملات | الوصف |
|---|---|---|
| Theming | ||
hub-badge-theme() | $accent--hub-badge-accent$bg--hub-badge-bg$color--hub-badge-color$border-color--hub-badge-border-color$border-radius--hub-badge-border-radius$border-width--hub-badge-border-width$padding-x--hub-badge-padding-x$padding-y--hub-badge-padding-y$gap--hub-badge-gap$font-size--hub-badge-font-size$font-weight--hub-badge-font-weight | One-call token theming for `<hub-badge>` (and `<hub-chip>`) |
متغيّرات CSS
نسّق كل بكسل عبر 49 متغيّرات CSS. تجاوزها عند :root أو حدّد نطاقها على غلاف.
Badge
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-badge-accent | var(--hub-sys-color-primary, #0d6efd) | color | اللون المميّز الدلالي الجذري الذي تشتق منه الشارة مظهرها. |
--hub-badge-accent-border | color-mix(in oklch, var(--hub-badge-accent) 35%, var(--hub-sys-surface-page, #fff)) | color | دور الحدود الذي تستخدمه متغيّرات subtle وsurface. |
--hub-badge-accent-on | oklch(from var(--hub-badge-accent) clamp(0, (0.62 - l) * 1000, 1) 0 h) | color | Badge accent contrast (on-color) |
--hub-badge-accent-emphasis | color-mix(in oklch, var(--hub-badge-accent) 80%, var(--hub-sys-color-ink, #212529)) | color | لون المقدمة المُبرز الذي تستخدمه متغيّرات outline وghost وsoft. |
--hub-badge-accent-subtle | color-mix(in oklch, var(--hub-badge-accent) 12%, var(--hub-sys-surface-page, #fff)) | color | سطح ملوّن تستخدمه متغيّرات soft وsubtle. |
--hub-badge-align | center | string | محاذاة محتوى الشارة على المحور المتقاطع. |
--hub-badge-bg | var(--hub-badge-accent) | color | Badge bg |
--hub-badge-border-color | var(--hub-badge-accent) | color | Badge border color |
--hub-badge-border-radius | var(--hub-ref-radius-pill, 50rem) | length | استدارة زوايا الشارة. |
--hub-badge-border-width | var(--hub-ref-border-width, 1px) | length | Badge border width |
--hub-badge-color | var(--hub-badge-accent-on) | color | Badge color |
--hub-badge-direction | row | string | اتجاه flex لمحتوى الشارة (الأيقونة المعروضة والتسمية وزر الإغلاق). |
--hub-badge-dot-color | currentColor | color | Badge dot color |
--hub-badge-dot-size | var(--hub-ref-space-2, 0.5rem) | length | قطر نقطة الحالة الاختيارية. |
--hub-badge-focus-ring-color | var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25)) | color | Badge focus ring color |
--hub-badge-focus-ring-width | var(--hub-sys-focus-ring-width, 0.25rem) | length | Badge focus ring width |
--hub-badge-font-family | var(--hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif) | string | Badge font family |
--hub-badge-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | حجم الخط الأساسي للشارة. |
--hub-badge-max-width | 100% | length | أقصى عرض للشارة قبل اقتطاع التسمية بعلامة الحذف. |
--hub-badge-font-weight | var(--hub-ref-font-weight-semibold, 600) | number | Badge font weight |
--hub-badge-gap | var(--hub-ref-space-1, 0.25rem) | length | الفجوة بين النقطة والأيقونات والتسمية وزر الإزالة. |
--hub-badge-letter-spacing | 0.01em | length | Badge letter spacing |
--hub-badge-line-height | 1 | number | Badge line height |
--hub-badge-padding-x | var(--hub-ref-space-2, 0.5rem) | length | الحشو الأفقي داخل الشارة. |
--hub-badge-padding-y | var(--hub-ref-space-1, 0.25rem) | length | الحشو الرأسي داخل الشارة. |
--hub-badge-remove-gap | 0.125rem | length | Badge remove gap |
--hub-badge-remove-hover-bg | color-mix(in oklch, currentColor 12%, transparent) | color | سطح التحويم لزر الإغلاق. |
--hub-badge-remove-size | 1rem | length | حجم منطقة النقر لزر الإغلاق. |
--hub-badge-transition | var(--hub-sys-transition-base, all 0.2s ease-in-out) | transition | Badge transition |
--hub-badge-active-bg | var(--hub-badge-accent-emphasis) | color | Active (pressed) background of an interactive badge (.hub-badge--active) |
--hub-badge-overlay-offset | -0.25rem | length | Corner inset of the overlay status dot (dotOverlay) |
--hub-chip-set-gap | var(--hub-ref-space-2, 0.5rem) | length | Gap between chips inside a hub-chip-set |
--hub-chip-transition | var(--hub-sys-transition-base, all 0.2s ease-in-out) | transition | Chip transition |
--hub-chip-focus-ring-width | var(--hub-sys-focus-ring-width, 0.25rem) | length | Chip focus ring width |
--hub-chip-border-radius | var(--hub-ref-radius-pill, 50rem) | length | Chip shell radius |
--hub-chip-border-width | var(--hub-ref-border-width, 1px) | length | Chip border width |
--hub-chip-padding-y | var(--hub-ref-space-1, 0.25rem) | length | Chip vertical padding |
--hub-chip-padding-x | var(--hub-ref-space-2, 0.5rem) | length | Chip horizontal padding |
--hub-chip-font-weight | var(--hub-ref-font-weight-medium, 500) | number | Chip font weight |
--hub-chip-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Chip font size |
--hub-chip-font-family | var(--hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif) | string | Chip font family |
--hub-chip-focus-ring | var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25)) | color | Chip focus ring colour |
--hub-chip-gap | var(--hub-ref-space-1, 0.25rem) | length | Gap between leading slot, label and dismiss button |
--hub-chip-hover-bg | color-mix(in oklch, var(--hub-badge-accent) 20%, var(--hub-sys-surface-page, #fff)) | color | Hover surface for an unselected, enabled chip |
--hub-chip-selected-color | var(--hub-badge-accent-on) | color | Selected chip text colour (on-accent contrast) |
--hub-chip-selected-bg | var(--hub-badge-accent) | color | Selected chip background |
--hub-chip-border-color | var(--hub-badge-accent-border) | color | Resting chip border colour |
--hub-chip-color | var(--hub-badge-accent-emphasis) | color | Resting chip text colour |
--hub-chip-bg | var(--hub-badge-accent-subtle) | color | Resting chip background (shared badge accent family) |