Angular モーダルコンポーネント | ng-hub-ui-modal
スタッキング、フルスクリーンモード、テンプレート、キーボード処理、CSS 変数を備えたアクセシブルな Angular モーダルコンポーネント。standalone アプリ向けです。
概要
チームがこのライブラリを探す理由
この Angular モーダルコンポーネントは、standalone な Angular アプリで、アクセシブルなダイアログ、構成可能なコンテンツ、サービス駆動の制御、デザインシステムに優しいスタイルを必要とするチーム向けに作られています。
インストール
npm install ng-hub-ui-modalジャンプ
最適な用途
- 確認ダイアログ
- オーバーレイ内のフォーム
- 詳細パネル
- スタックしたワークフロー
について modal
ng-hub-ui-modal は、Angular プロダクトで最も一般的な UI ニーズの 1 つを解決します。本番でも堅牢に感じられるダイアログを開くことです。スタックしたモーダル、フルスクリーンフロー、キーボード処理、プロジェクション、サービスベースの利用に対応し、モーダルロジックをプロジェクトごとの問題にしません。
機能ガイド
モーダルを開く（コンテンツタイプ）
TemplateRef、Component、String のコンテンツでモーダルを開く方法を示します。
設定とオプション
モーダルの外観と動作をカスタマイズします
モーダル参照（HubModalRef）
開いたモーダルの状態を制御・参照します
アクティブモーダル（HubActiveModal）
モーダルのコンテンツ内からモーダルを操作します
スタック管理
複数の積み重なったモーダルを管理します
主な機能
最近の変更
Version 21.0.2 - 3/31/26, 12:00 AM
changed: Standardized padding variables and improved fullscreen layout responsiveness.
Version 21.0.1 - 3/19/26, 12:00 AM
changed: Removed hardcoded design system token defaults from stylesheet; all --hub-modal-* variables retain literal fallback values.
fixed: Fixed modal-backdrop and modal unit test reliability.
Version 21.0.0 - 3/10/26, 12:00 AM
added: HubModalPlacement configuration for anchored modal positioning.
changed: BREAKING: Standardized CSS class names to hub-modal BEM convention.
Version 1.2.0 - 1/7/25, 12:00 AM
added: Documentation and examples update