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.
مرجع API
إليك العقد الكامل لـ badges: كل ما يمكنك ربطه والاستماع إليه وإسقاطه وتنسيقه، مجموعاً في مكان واحد. اربط ما تحتاجه ونسّق ما تريده — إنه standalone وملائم للـ Signals.
المدخلات
اضبط badges عبر 7 مدخلات. اربطها مثل أي @Input في Angular.
| الاسم | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | HubBadgeVariant | 'solid' | Visual treatment of the badge shell. |
color | HubBadgeColor | 'primary' | Semantic colour family. Built-ins map to the design-system token families and custom names are supported. |
size | HubBadgeSize | 'md' | Badge size scale. |
shape | HubBadgeShape | 'pill' | Corner treatment of the badge shell. |
dot | boolean | false | Renders a leading status dot before the label. |
removable | boolean | false | Enables the dismiss affordance, turning the badge into a removable filter/tag. |
removeLabel | string | 'Remove badge' | Accessible label applied to the dismiss button. |
المخرجات
تفاعل مع ما يفعله badges — 1 أحداث لربط منطقك بها.
| الاسم | النوع | الوصف |
|---|---|---|
removed | EventEmitter<void> | Emitted when the dismiss action of a removable badge is activated. |
القوالب
لم يتم توثيق أي قوالب بعد.
متغيّرات CSS
نسّق كل بكسل عبر 14 متغيّرات CSS. تجاوزها عند :root أو حدّد نطاقها على غلاف.
Layout & Spacing
Typography, padding, radius and internal gap tokens for the badge shell.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-badge-font-size | 0.875rem | length | Base font size of the badge shell. 0.75rem1rem |
--hub-badge-padding-x | 0.625rem | length | Horizontal padding inside the badge shell. 0.5rem0.875rem |
--hub-badge-padding-y | 0.375rem | length | Vertical padding inside the badge shell. 0.25rem0.5rem |
--hub-badge-border-radius | 50rem | length | Corner radius of the badge shell. 0.25rem9999px |
--hub-badge-gap | 0.375rem | length | Gap between dot, icons, label and remove button. 0.25rem0.5rem |
--hub-badge-direction | row | string | Flex direction of the badge content (projected icon, label and dismiss button). rowrow-reverse |
--hub-badge-align | center | string | Cross-axis alignment of the badge content. centerbaseline |
Semantic Colour Roles
Accent, subtle, emphasis and border roles derived from the selected semantic family.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-badge-accent | var(--hub-sys-color-primary) | color | Root semantic accent from which the badge derives its look. var(--hub-sys-color-success)#7c3aed |
--hub-badge-accent-subtle | var(--hub-sys-color-primary-subtle) | color | Tinted surface used by soft and subtle variants. #e7f1ff#ede9fe |
--hub-badge-accent-emphasis | var(--hub-sys-color-primary-emphasis) | color | Emphasis foreground used by outline, ghost and soft variants. #0a58ca#5b21b6 |
--hub-badge-accent-border | var(--hub-sys-color-primary-border-subtle) | color | Border role used by subtle and surface variants. #9ec5fe#c4b5fd |
Dot & Dismiss Controls
Tokens driving the status-dot size and the removable action affordance.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-badge-dot-size | 0.5rem | length | Diameter of the optional status dot. 0.375rem0.625rem |
--hub-badge-remove-size | 1rem | length | Size of the dismiss hit area. 0.875rem1.25rem |
--hub-badge-remove-hover-bg | color-mix(in srgb, currentColor 12%, transparent) | color | Hover surface of the dismiss affordance. rgba(0,0,0,.08)transparent |
التنسيق والسمات
لم يتم توثيق أي أمثلة تنسيق بعد. سيتضمّن هذا القسم وصفات التخصيص وأمثلة السمات.