مقاييس Angular للتقدّم والمقياس والحلقة | ng-hub-ui-metrics
عناصر مقاييس Angular للقراءة فقط — شريط تقدّم خطّي، ومقياس متدرّج، وعدّاد حلقي دائري — مدفوعة برموز نظام التصميم مع دلالات ARIA كاملة.
مرجع API
إليك العقد الكامل لـ metrics: كل ما يمكنك ربطه والاستماع إليه وإسقاطه وتنسيقه، مجموعاً في مكان واحد. اربط ما تحتاجه ونسّق ما تريده — إنه standalone وملائم للـ Signals.
المدخلات
اضبط metrics عبر 19 مدخلات. اربطها مثل أي @Input في Angular.
| الاسم | النوع | الافتراضي | الوصف |
|---|---|---|---|
hub-progress · value | number | 0 | قيمة التقدّم الحالية، مُعبَّر عنها على مقياس [0, max]. |
hub-progress · max | number | 100 | الحدّ الأعلى لمقياس التقدّم. |
hub-progress · indeterminate | boolean | false | يعرض شريطًا متكرّرًا للعمل غير معلوم المدّة؛ ويُسقِط aria-valuenow. |
hub-progress · color | HubMetricsColor | 'primary' | لون دلالي يحدّد لون المؤشّر، مرتبط بعائلة رموز --hub-sys-color-*. |
hub-progress · size | HubProgressSize | 'md' | رمز حجم يتحكّم في سُمك الشريط (sm أو md أو lg). |
hub-progress · showValue | boolean | false | ما إذا كانت النسبة المئوية المقرَّبة تُعرَض بجوار الشريط. |
hub-progress · label | string | '' | تسمية ميسورة الوصول تصف ما يقيسه شريط التقدّم. |
hub-meter · value | number | 0 | القياس الحالي، مُعبَّر عنه على مقياس [min, max]. |
hub-meter · min | number | 0 | الحدّ الأدنى للمقياس. |
hub-meter · max | number | 1 | الحدّ الأعلى للمقياس. |
hub-meter · low | number | undefined | undefined | الحدّ الأعلى لمنطقة "low"؛ يُضبَط افتراضيًا على min عند حذفه. |
hub-meter · high | number | undefined | undefined | الحدّ الأدنى لمنطقة "high"؛ يُضبَط افتراضيًا على max عند حذفه. |
hub-meter · optimum | number | undefined | undefined | النقطة المفضّلة في المدى؛ تُضبَط افتراضيًا على نقطة المنتصف عند حذفها. |
hub-ring · value | number | 0 | قيمة النتيجة، مُعبَّر عنها كنسبة 0..1 أو رقم 0..max. |
hub-ring · max | number | 1 | الحدّ الأعلى الذي تُطبَّع القيمة نسبةً إليه. |
hub-ring · size | number | string | '4rem' | القطر الخارجي للحلقة (يُعامَل الرقم كـ px، أو أي سلسلة طول CSS). |
hub-ring · thickness | number | string | '0.5rem' | عرض حدّ الحلقة (يُعامَل الرقم كـ px، أو أي سلسلة طول CSS). |
hub-ring · thresholds | HubRingThresholds | undefined | undefined | عتبات ألوان اختيارية تعيد تلوين المؤشّر حسب النطاق (low/high). |
hub-ring · showValue | boolean | true | ما إذا كانت النسبة المئوية المقرَّبة تُعرَض في المنتصف. |
المخرجات
لم يتم توثيق أي مخرجات بعد.
القوالب
اجعله خاصاً بك — 1 فتحات قوالب تتيح لك إسقاط ترميز مخصّص.
| الاسم | الوصف | مثال |
|---|---|---|
hub-ring · <ng-content> | محتوى يُسقَط في مركز الحلقة كتعليق، يُعرَض بجانب (أو بدلًا من) النسبة المئوية المدمجة. | <hub-ring [value]="0.82" [thresholds]="{ low: 0.4, high: 0.75 }">Score</hub-ring> |