مكتبة الأدوات المساعدة لـ Angular | ng-hub-ui-utils

مكتبة أدوات مساعدة لـ Angular مع pipes وإدارة التركيز والطبقات العلوية والانتقالات ومساعِدات الترجمة المشتركة عبر مكوّنات الواجهة القابلة لإعادة الاستخدام.

نظرة عامة

لماذا تبحث الفِرَق عن هذه المكتبة

استخدم مكتبة الأدوات المساعدة هذه لـ Angular لتجنّب إعادة كتابة القطع منخفضة المستوى وراء الطبقات العلوية ومصائد التركيز ومساعِدات الترجمة وأدوات القوالب الشائعة.

التثبيت

npm install ng-hub-ui-utils

انتقل إلى

مثالي لـ

  • البنية التحتية المشتركة للواجهة
  • أنظمة الطبقات العلوية
  • إدارة التركيز
  • مساعِدات القوالب

حول utils

تُعدّ ng-hub-ui-utils الأساس المشترك وراء العديد من أنماط الواجهة القابلة لإعادة الاستخدام. وهي مفيدة عندما تريد فرق Angular مركزة القطع منخفضة المستوى التي تحافظ على اتساق أنظمة الطبقات العلوية وإدارة التركيز وpipes ومساعِدات الترجمة عبر المشاريع.

أدلّة الميزات

إدارة التركيز

احصر وأدر تركيز لوحة المفاتيح داخل العناصر

أمثلة:
حصر التركيز

حافظ على احتواء التركيز داخل modal أو حوار باستخدام hubFocusTrap().

Focus Trap Demo

Click "Enable Focus Trap" and try to Tab outside the blue box. Focus will stay trapped inside.

Focus Trap Area

Status: 🔓 Free

Focusable Elements

The selector FOCUSABLE_ELEMENTS_SELECTOR finds all focusable elements.

getFocusableBoundaryElements(container)→ [first, last] elements
العناصر القابلة للتركيز

استعلم عن العناصر القابلة للتركيز عند الحدود باستخدام getFocusableBoundaryElements().

Focus Trap Demo

Click "Enable Focus Trap" and try to Tab outside the blue box. Focus will stay trapped inside.

Focus Trap Area

Status: 🔓 Free

Focusable Elements

The selector FOCUSABLE_ELEMENTS_SELECTOR finds all focusable elements.

getFocusableBoundaryElements(container)→ [first, last] elements

التدويل (i18n)

خدمات وpipes الترجمة لدعم تعدّد اللغات

أمثلة:
خدمة الترجمة

HubTranslationService لإدارة الترجمات

TranslatePipe - Basic usage

'welcome' | translate→ Welcome to ng-hub-ui

TranslatePipe - With parameters

'greeting' | translate:{ name: 'Carlos' }→ Hello, Carlos!

TranslatePipe - Nested keys

'buttons.save' | translate→ Save
'buttons.cancel' | translate→ Cancel

Programmatic access

translationService.getTranslation('buttons.delete')→ Delete
pipe الترجمة

TranslatePipe للترجمات القائمة على القوالب

TranslatePipe - Basic usage

'welcome' | translate→ Welcome to ng-hub-ui

TranslatePipe - With parameters

'greeting' | translate:{ name: 'Carlos' }→ Hello, Carlos!

TranslatePipe - Nested keys

'buttons.save' | translate→ Save
'buttons.cancel' | translate→ Cancel

Programmatic access

translationService.getTranslation('buttons.delete')→ Delete
مزوّد الترجمة

provideHubTranslations() لإعداد التطبيق

TranslatePipe - Basic usage

'welcome' | translate→ Welcome to ng-hub-ui

TranslatePipe - With parameters

'greeting' | translate:{ name: 'Carlos' }→ Hello, Carlos!

TranslatePipe - Nested keys

'buttons.save' | translate→ Save
'buttons.cancel' | translate→ Cancel

Programmatic access

translationService.getTranslation('buttons.delete')→ Delete

نظام التراكب

أنشئ overlays متموضعة وعناصر عائمة

أمثلة:
خدمة الـ overlay

HubOverlayService لإنشاء الـ overlay برمجياً

A connected overlay positioned below the trigger, with a backdrop that closes it on outside click.

مرجع الـ overlay

OverlayRef لإدارة دورة حياة الـ overlay

A connected overlay positioned below the trigger, with a backdrop that closes it on outside click.

التموضع

ConnectionPositionPair للتموضع المرن

A connected overlay positioned below the trigger, with a backdrop that closes it on outside click.

خدمة الـ popup

إدارة مبسّطة للـ popup

أمثلة:
إنشاء الـ popup

HubPopupService لإنشاء الـ popup بسرعة

A connected overlay positioned below the trigger, with a backdrop that closes it on outside click.

Pipes

pipes مساعدة للقوالب

أمثلة:
pipes التحقّق من النوع

IsStringPipe, IsObjectPipe, IsObservablePipe

GetPipe - Access nested properties

user | get:'profile.name'→ John Doe
user | get:'profile.address.city'→ New York

IsStringPipe - Type checking

'Hello' | isString→ true
123 | isString→ false

IsObjectPipe - Object detection

{ a: 1 } | isObject→ true
'string' | isObject→ false

UcfirstPipe - Capitalize first letter

'hello world' | ucfirst→ Hello world
GetPipe

الوصول إلى خصائص الكائنات المتداخلة بترميز النقطة

GetPipe - Access nested properties

user | get:'profile.name'→ John Doe
user | get:'profile.address.city'→ New York

IsStringPipe - Type checking

'Hello' | isString→ true
123 | isString→ false

IsObjectPipe - Object detection

{ a: 1 } | isObject→ true
'string' | isObject→ false

UcfirstPipe - Capitalize first letter

'hello world' | ucfirst→ Hello world
UcfirstPipe

تحويل الحرف الأول من السلسلة إلى حرف كبير

GetPipe - Access nested properties

user | get:'profile.name'→ John Doe
user | get:'profile.address.city'→ New York

IsStringPipe - Type checking

'Hello' | isString→ true
123 | isString→ false

IsObjectPipe - Object detection

{ a: 1 } | isObject→ true
'string' | isObject→ false

UcfirstPipe - Capitalize first letter

'hello world' | ucfirst→ Hello world
UnwrapAsyncPipe

فكّ تغليف observables وpromises في القوالب

GetPipe - Access nested properties

user | get:'profile.name'→ John Doe
user | get:'profile.address.city'→ New York

IsStringPipe - Type checking

'Hello' | isString→ true
123 | isString→ false

IsObjectPipe - Object detection

{ a: 1 } | isObject→ true
'string' | isObject→ false

UcfirstPipe - Capitalize first letter

'hello world' | ucfirst→ Hello world

دوال مساعدة

دوال مساعدة عامة الغرض

أمثلة:
type guards

isString(), isNumber(), isDefined(), isPromise()

Type Guards

isString('hello')→ true
isNumber(42)→ true
isDefined(null)→ false
isDefined('value')→ true

Deep Equality

equals({a:1}, {a:1})→ true
equals([1,2], [1,2])→ true

Object Access

getValue(user, 'profile.name')→ John Doe

String Interpolation

interpolateString('Hello {{name}}', {name: 'World'})→ Hello World

String Utilities

removeAccents('Ñoño café')→ Nono cafe
padNumber(5)→ 05
أدوات السلاسل النصية

removeAccents(), interpolateString(), regExpEscape()

Type Guards

isString('hello')→ true
isNumber(42)→ true
isDefined(null)→ false
isDefined('value')→ true

Deep Equality

equals({a:1}, {a:1})→ true
equals([1,2], [1,2])→ true

Object Access

getValue(user, 'profile.name')→ John Doe

String Interpolation

interpolateString('Hello {{name}}', {name: 'World'})→ Hello World

String Utilities

removeAccents('Ñoño café')→ Nono cafe
padNumber(5)→ 05
أدوات الكائنات

equals() للمقارنة العميقة، getValue() لترميز النقاط

Type Guards

isString('hello')→ true
isNumber(42)→ true
isDefined(null)→ false
isDefined('value')→ true

Deep Equality

equals({a:1}, {a:1})→ true
equals([1,2], [1,2])→ true

Object Access

getValue(user, 'profile.name')→ John Doe

String Interpolation

interpolateString('Hello {{name}}', {name: 'World'})→ Hello World

String Utilities

removeAccents('Ñoño café')→ Nono cafe
padNumber(5)→ 05
أدوات DOM

closest(), reflow(), getActiveElement()

Type Guards

isString('hello')→ true
isNumber(42)→ true
isDefined(null)→ false
isDefined('value')→ true

Deep Equality

equals({a:1}, {a:1})→ true
equals([1,2], [1,2])→ true

Object Access

getValue(user, 'profile.name')→ John Doe

String Interpolation

interpolateString('Hello {{name}}', {name: 'World'})→ Hello World

String Utilities

removeAccents('Ñoño café')→ Nono cafe
padNumber(5)→ 05
أدوات RxJS

مُشغِّل runInZone() لتكامل NgZone

Type Guards

isString('hello')→ true
isNumber(42)→ true
isDefined(null)→ false
isDefined('value')→ true

Deep Equality

equals({a:1}, {a:1})→ true
equals([1,2], [1,2])→ true

Object Access

getValue(user, 'profile.name')→ John Doe

String Interpolation

interpolateString('Hello {{name}}', {name: 'World'})→ Hello World

String Utilities

removeAccents('Ñoño café')→ Nono cafe
padNumber(5)→ 05

أدوات scrollbar

قِس عرض الـ scrollbar وعوّضه

أمثلة:
عرض الـ scrollbar

الدالتان scrollbarWidth() وscrollbarPadding()

ScrollBar Service

The ScrollBar service helps manage scrollbar visibility and compensate for layout shifts when hiding scrollbars (e.g., when opening modals).

Use Case: Modal Body Lock

When opening a modal, you typically hide the body scrollbar. The ScrollBar.hide() method handles this automatically and returns a reverter function.

Status: 🔓 Normal scrolling

Code Example

import { inject } from '@angular/core';
import { ScrollBar } from 'ng-hub-ui-utils';

export class ModalService {
  private scrollBar = inject(ScrollBar);
  private revertScrollbar: (() => void) | null = null;

  openModal() {
    // Hide scrollbar and get reverter function
    this.revertScrollbar = this.scrollBar.hide();
  }

  closeModal() {
    // Restore scrollbar
    if (this.revertScrollbar) {
      this.revertScrollbar();
      this.revertScrollbar = null;
    }
  }
}

الانتقالات

مساعدات انتقالات CSS

أمثلة:
تشغيل الانتقال

hubRunTransition() لانتقالات CSS البرمجية

المعاينة الحيّة غير متاحة لهذا المثال بعد.

Tooltip

Lightweight, themeable tooltips for any element via the [tooltip] directive.

أمثلة:
Tooltip Directive

Apply [tooltip] with a placement to show a positioned label on hover or focus, themed with --hub-tooltip-* variables.

Placements (hover the buttons)
Themed with --hub-tooltip-* variables

الميزات الرئيسية

التغييرات الأخيرة

لا توجد إدخالات سجلّ تغييرات متاحة.

المكتبات ذات الصلة

ng-hub-ui-modal ng-hub-ui-portal ng-hub-ui-paginable