Angular モーダルコンポーネント | ng-hub-ui-modal
スタッキング、フルスクリーンモード、テンプレート、キーボード処理、CSS 変数を備えたアクセシブルな Angular モーダルコンポーネント。standalone アプリ向けです。
API リファレンス
modal の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。
インプット
14 個のインプットで modal を調整。通常の Angular @Input と同じようにバインドできます。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
animation | boolean | — | true の場合、モーダルの開閉がアニメーションされます。デフォルト: true |
backdrop | boolean | "static" | — | true の場合、バックドロップ要素が作成されます。あるいは "static" を指定すると、クリックでモーダルが閉じないバックドロップになります。デフォルト: true |
centered | boolean | — | true の場合、モーダルは垂直方向に中央揃えされます。デフォルト: false |
placement | HubModalPlacement | — | ビューポート内のモーダルの配置位置を制御します。デフォルト: HubModalPlacement.Center |
keyboard | boolean | — | true の場合、Escape キーが押されるとモーダルが閉じます。デフォルト: true |
closeOnNavigation | boolean | — | true の場合、ユーザーがブラウザ履歴を戻ったとき（history.back()、ブラウザの戻るボタン）にモーダルが閉じます。デフォルト: true |
size | "sm" | "lg" | "xl" | string | — | モーダルウィンドウのサイズ |
windowClass | string | — | モーダルウィンドウに付加するカスタムクラス |
backdropClass | string | — | モーダルのバックドロップに付加するカスタムクラス |
dismissSelector | string | — | モーダルウィンドウの dismiss をトリガーできる要素のカスタムセレクタ。デフォルト: "[data-dismiss=\"modal\"]" |
closeSelector | string | — | モーダルウィンドウの close をトリガーできる要素のカスタムセレクタ。デフォルト: "[data-close=\"modal\"]" |
headerSelector | string | — | モーダルウィンドウのヘッダー要素のカスタムセレクタ |
footerSelector | string | — | モーダルウィンドウのフッター要素のカスタムセレクタ |
data | any | — | モーダルウィンドウを開くときに渡す追加データ |
アウトプット
アウトプットはまだドキュメント化されていません。
テンプレート
自分好みに — 1 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。
| 名前 | 説明 | サンプル |
|---|---|---|
Modal Template | モーダルサービスに渡せるテンプレート参照 | <ng-template #modalTemplate let-close="close" let-dismiss="dismiss">
<div class="modal-header">
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
Modal content goes here
</div>
<div class="modal-footer">
<button class="btn btn-secondary" (click)="dismiss()">Cancel</button>
<button class="btn btn-primary" (click)="close('result')">OK</button>
</div>
</ng-template> |
CSS 変数
17 個の CSS 変数であらゆるピクセルをテーマ設定。:root で上書きするか、ラッパーにスコープを限定できます。
モーダルのベース変数
モーダルの構造と配置のためのコアスタイル変数
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--bs-modal-zindex | 1055 | number | モーダルの z-index |
--bs-modal-width | 500px | length | モーダルのデフォルト幅 |
--bs-modal-padding | 1rem | length | モーダルコンテンツ周囲のパディング |
--bs-modal-margin | 0.5rem | length | モーダルダイアログ周囲のマージン |
モーダルの外観
モーダルの色、ボーダー、視覚効果を制御する変数
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--bs-modal-color | var(--bs-body-color) | color | モーダルコンテンツのテキスト色 |
--bs-modal-bg | var(--bs-body-bg) | color | モーダルコンテンツの背景色 |
--bs-modal-border-color | var(--bs-border-color-translucent) | color | モーダルのボーダー色 |
--bs-modal-border-width | var(--bs-border-width) | border | モーダルのボーダー幅 |
--bs-modal-border-radius | var(--bs-border-radius-lg) | border | モーダルの角丸半径 |
--bs-modal-box-shadow | 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) | shadow | モーダルのボックスシャドウ |
モーダルヘッダー
モーダルのヘッダー部分のスタイル変数
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--bs-modal-header-padding-x | 1rem | length | モーダルヘッダーの水平パディング |
--bs-modal-header-padding-y | 1rem | length | モーダルヘッダーの垂直パディング |
--bs-modal-header-border-color | var(--bs-border-color) | color | モーダルヘッダーのボーダー色 |
--bs-modal-header-border-width | 0 0 var(--bs-border-width) 0 | border | モーダルヘッダーのボーダー幅 |
モーダルフッター
モーダルのフッター部分のスタイル変数
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--bs-modal-footer-gap | 0.5rem | length | モーダルフッター内の要素間のギャップ |
--bs-modal-footer-border-color | var(--bs-border-color) | color | モーダルフッターのボーダー色 |
--bs-modal-footer-border-width | var(--bs-border-width) 0 0 0 | border | モーダルフッターのボーダー幅 |
スタイリングとテーマ設定
スタイリングのサンプルはまだドキュメント化されていません。このセクションには、カスタマイズのレシピやテーマ設定のサンプルが含まれる予定です。