مرجع API

إليك العقد الكامل لـ utils: كل ما يمكنك ربطه والاستماع إليه وإسقاطه وتنسيقه، مجموعاً في مكان واحد. اربط ما تحتاجه ونسّق ما تريده — إنه standalone وملائم للـ Signals.

المدخلات

اضبط utils عبر 4 مدخلات. اربطها مثل أي @Input في Angular.

الاسم	النوع	الافتراضي	الوصف
`HubTranslationService`	`Service`	`-`	خدمة قابلة للحقن لإدارة الترجمات. الطرق: getTranslation()، setTranslations()
`HubOverlayService`	`Service`	`-`	خدمة لإنشاء وإدارة الطبقات المتراكبة برمجيًا
`HubPopupService`	`Service`	`-`	خدمة مبسّطة لإنشاء عناصر منبثقة
`TooltipDirective`	`Directive`	`-`	Directive ([tooltip]) that shows a positioned, themeable tooltip on hover/focus. Inputs: tooltip (text), placement, delay, offset.

المخرجات

تفاعل مع ما يفعله utils — 7 أحداث لربط منطقك بها.

الاسم	النوع	الوصف
`TranslatePipe`	`Pipe`	يترجم مفتاحًا باستخدام HubTranslationService. الاستخدام: {{ "key" \| translate }}
`GetPipe`	`Pipe`	يحصل على قيمة خاصية متداخلة. الاستخدام: {{ object \| get:"path.to.property" }}
`IsStringPipe`	`Pipe`	يتحقق مما إذا كانت القيمة سلسلة نصية. الاستخدام: {{ value \| isString }}
`IsObjectPipe`	`Pipe`	يتحقق مما إذا كانت القيمة كائنًا. الاستخدام: {{ value \| isObject }}
`IsObservablePipe`	`Pipe`	يتحقق مما إذا كانت القيمة Observable. الاستخدام: {{ value \| isObservable }}
`UcfirstPipe`	`Pipe`	يحوّل الحرف الأول إلى كبير. الاستخدام: {{ "hello" \| ucfirst }} → "Hello"
`UnwrapAsyncPipe`	`Pipe`	يفكّ قيم Observable أو Promise في القوالب

القوالب

اجعله خاصاً بك — 4 فتحات قوالب تتيح لك إسقاط ترميز مخصّص.

الاسم	الوصف	مثال
`hubFocusTrap()`	يحصر تركيز لوحة المفاتيح داخل عنصر. مفيد للنوافذ المنبثقة ومربعات الحوار.	`hubFocusTrap(zone, element, stopFocusTrap$, refocusOnClick)`
`interpolateString()`	يستبدل العناصر النائبة {{ placeholders }} بقيم من كائن	`interpolateString("Hello {{name}}", { name: "World" }) → "Hello World"`
`getValue()`	يحصل على خاصية متداخلة باستخدام ترميز النقاط	`getValue(obj, "user.profile.name")`
`equals()`	مقارنة مساواة عميقة للكائنات والمصفوفات	`equals({ a: 1 }, { a: 1 }) → true`

متغيّرات CSS

نسّق كل بكسل عبر 19 متغيّرات CSS. تجاوزها عند :root أو حدّد نطاقها على غلاف.

Tooltip

Theming tokens for the [tooltip] directive.

المتغيّر	الافتراضي	النوع	الوصف
`--hub-tooltip-bg`	`var(--hub-ref-color-black, #000)`	color	Tooltip background colour. `var(--hub-sys-color-primary)#212529`
`--hub-tooltip-color`	`var(--hub-ref-color-white, #fff)`	color	Tooltip text colour. `#fff#f8f9fa`
`--hub-tooltip-opacity`	`0.9`	number	Opacity of the shown tooltip. `10.85`
`--hub-tooltip-padding-x`	`var(--hub-ref-space-2, 0.5rem)`	length	Horizontal padding inside the tooltip. `0.75rem1rem`
`--hub-tooltip-padding-y`	`var(--hub-ref-space-1, 0.25rem)`	length	Vertical padding inside the tooltip. `0.375rem0.5rem`
`--hub-tooltip-border-radius`	`var(--hub-sys-radius-md, 0.375rem)`	length	Corner radius of the tooltip. `0.25rem999px`
`--hub-tooltip-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	Font size of the tooltip text. `0.75rem1rem`
`--hub-tooltip-font-weight`	`var(--hub-ref-font-weight-base, 400)`	number	Font weight of the tooltip text. `500600`
`--hub-tooltip-line-height`	`var(--hub-ref-line-height-base, 1.5)`	number	Line height of the tooltip text. `1.41.6`
`--hub-tooltip-max-width`	`200px`	length	Maximum width before the text wraps. `160px320px`
`--hub-tooltip-zindex`	`var(--hub-sys-zindex-tooltip, 1080)`	number	Stacking order of the tooltip element. `10802000`
`--hub-tooltip-transition-duration`	`0.15s`	transition	Fade in/out duration. `0.1s0.25s`
`--hub-tooltip-shadow`	`none`	shadow	Box shadow of the tooltip. `var(--hub-sys-shadow)0 2px 8px rgba(0,0,0,.2)`
`--hub-tooltip-font-family`	`var(--hub-ref-font-family-base, inherit)`	string	Font family of the tooltip text. `inheritmonospace`

Overlay

CSS variables consumed by the overlay/popup system (`.hub-overlay-container` / `.hub-overlay-backdrop`).

المتغيّر	الافتراضي	النوع	الوصف
`--hub-overlay-bg`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	Background of the overlay panel. `#fffvar(--hub-sys-surface-page)`
`--hub-overlay-border-radius`	`var(--hub-sys-radius-sm, 0.25rem)`	length	Corner radius of the overlay panel. `0.5rem0`
`--hub-overlay-shadow`	`var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0,0,0,.15))`	shadow	Elevation shadow of the overlay panel. `var(--hub-sys-shadow-lg)none`
`--hub-overlay-zindex`	`var(--hub-sys-zindex-dropdown, 1000)`	number	Stacking order of the overlay panel. `10502000`
`--hub-overlay-backdrop-zindex`	`calc(var(--hub-sys-zindex-dropdown, 1000) - 1)`	number	Stacking order of the overlay backdrop (just below the panel). `10491999`

التنسيق والسمات

لم يتم توثيق أي أمثلة تنسيق بعد. سيتضمّن هذا القسم وصفات التخصيص وأمثلة السمات.