Angular モーダルコンポーネント | ng-hub-ui-modal
スタッキング、フルスクリーンモード、テンプレート、キーボード処理、CSS 変数を備えたアクセシブルな Angular モーダルコンポーネント。standalone アプリ向けです。
インタラクティブなサンプル
一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。
モーダルのコンテンツタイプ
The open() method accepts various content types:
自由な出口のないダイアログ
Look at the top-right corner of each one. In the second dialog the button is not hidden — it is not there.
設定オプション
モーダルの配置
オフキャンバス：縁に接する引き出し
With the switch off, look at the bottom edge and at the corners on the side it slid out of.
モーダル参照による制御
アクティブモーダル（自己クローズ）
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.
Naming the header and footer slots is also what makes the library draw its own header, dismiss button included. That button ships named "Close", in English, and the library translates nothing: closeAriaLabel is how the application passes the string it has already translated — per call, as here, or once for the whole application on HubModalConfig.
名前付きボディスロット
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.
セマンティックバリアント：アクセント一つでダイアログ全体
The nine on the first row are the built-ins. brand is not one of them: it is six declarations in this example's own stylesheet, five of which only name another --hub-modal-accent-* role.
CSS 変数によるスタイリング
Open a modal themed with --hub-modal-* variables.