Angular モーダルコンポーネント | ng-hub-ui-modal
スタッキング、フルスクリーンモード、テンプレート、キーボード処理、CSS 変数を備えたアクセシブルな Angular モーダルコンポーネント。standalone アプリ向けです。
インタラクティブなサンプル
一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。
モーダルのコンテンツタイプ
The open() method accepts various content types:
設定オプション
モーダルの配置
モーダル参照による制御
アクティブモーダル(自己クローズ)
This example opens a component (not a template) that injects HubActiveModal.
型付きデータペイロード
積み重ねモーダル
HubModal supports multiple stacked modals. The last modal has focus.
フルスクリーンモーダル
コンテンツプロジェクション
This example demonstrates how to create reusable wrapper components for modal content.
名前付きボディスロット
The body used to be the one slot with no name — whatever survived the header and the footer being taken out. bodySelector gives it one, so the order the content happens to be written in stops deciding what the body is.
Nothing is ever dropped: what no selector claims still follows the named body.
CSS 変数によるスタイリング
Open a modal themed with --hub-modal-* variables.