概要

チームがこのライブラリを探す理由

オーバーレイ、フォーカストラップ、翻訳ヘルパー、一般的なテンプレートユーティリティの背後にある低レベルな部品を書き直さずに済むよう、この Angular ユーティリティライブラリを使ってください。

インストール

npm install ng-hub-ui-utils

ジャンプ

最適な用途

共有 UI インフラ
オーバーレイシステム
フォーカス管理
テンプレートヘルパー

について utils

ng-hub-ui-utils は、多くの再利用可能な UI パターンの背後にある共有基盤です。オーバーレイシステム、フォーカス管理、パイプ、翻訳ヘルパーをプロジェクト間で一貫させる低レベルな部品を、Angular チームが一元化したいときに役立ちます。

機能ガイド

フォーカス管理

要素内でキーボードフォーカスをトラップして管理します

サンプル:

フォーカストラップ

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）

多言語サポートのための翻訳サービスとパイプ

サンプル:

翻訳サービス

翻訳を管理する 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

Translate パイプ

テンプレートベースの翻訳のための 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

外部 i18n アダプター

すべての Hub UI ライブラリ用に app.config.ts でリアクティブな翻訳ブリッジを設定します。

コード

Import:

Template:

Component:

オーバーレイシステム

配置されたオーバーレイとフローティング要素を作成します

サンプル:

オーバーレイサービス

プログラムによるオーバーレイ作成のための HubOverlayService

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

オーバーレイ参照

オーバーレイのライフサイクルを管理する OverlayRef

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.

ポップアップサービス

簡素化されたポップアップ管理

サンプル:

ポップアップの作成

素早くポップアップを作成するための HubPopupService

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

パイプ

テンプレート向けのユーティリティパイプ

サンプル:

型チェックのパイプ

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

テンプレート内で observable と promise をアンラップします

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

ユーティリティ関数

汎用のヘルパー関数

サンプル:

型ガード

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 ユーティリティ

NgZone 統合のための runInZone() オペレーター

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

スクロールバーのユーティリティ

スクロールバーの幅を測定して補正します

サンプル:

スクロールバーの幅

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 トランジションのヘルパー

サンプル:

トランジションの実行

プログラムによる CSS トランジションのための hubRunTransition()

このサンプルのライブプレビューはまだ利用できません。

ツールチップ

[tooltip] ディレクティブにより、任意の要素に軽量でテーマ設定可能なツールチップを表示します。

サンプル:

ツールチップディレクティブ

[tooltip] を配置位置とともに適用すると、ホバーまたはフォーカス時に位置指定されたラベルを表示します。--hub-tooltip-* 変数でテーマ設定できます。

Placements (hover the buttons)

Themed with --hub-tooltip-* variables