Angular ポータルとオーバーレイレンダリング | ng-hub-ui-portal
現在の DOM ツリーの外側にコンポーネント、テンプレート、オーバーレイを動的にレンダリングする Angular ポータルライブラリ。位置制御に対応します。
API リファレンス
portal の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。
インプット
15 個のインプットで portal を調整。通常の Angular @Input と同じようにバインドできます。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
animation | boolean | — | true の場合、ポータルの開閉がアニメーションされます。デフォルト: true |
ariaLabelledBy | string | — | ポータルウィンドウに設定する `aria-labelledby` 属性の値 |
ariaDescribedBy | string | — | ポータルウィンドウに設定する `aria-describedby` 属性の値 |
beforeDismiss | () => boolean | Promise<boolean> | — | ポータルが dismiss される直前に呼び出されるコールバック。dismiss を防ぐには false を返します。 |
container | string | HTMLElement | — | すべての新しいポータルウィンドウを付加する要素を指定するセレクタ。指定しない場合は `body` になります。 |
injector | Injector | — | 依存性注入を有効にするために、ポータルコンテンツで使用する `Injector`。 |
keyboard | boolean | — | true の場合、Escape キーが押されるとポータルが閉じます。デフォルト: true |
scrollable | boolean | — | スクロール可能なポータルコンテンツ（デフォルトは false）。 |
windowClass | string | — | カスタムのスタイルや配置のためにポータルウィンドウに付加するカスタムクラス。 |
portalDialogClass | string | — | ポータルダイアログコンテナに付加するカスタムクラス。 |
portalContentClass | string | — | ポータルコンテンツのラッパーに付加するカスタムクラス。 |
headerSelector | string | — | ポータルウィンドウのヘッダー要素のカスタムセレクタ。特定のポータルセクションを対象にするのに役立ちます。 |
footerSelector | string | — | ポータルウィンドウのフッター要素のカスタムセレクタ。特定のポータルセクションを対象にするのに役立ちます。 |
dismissSelector | string | — | ポータルウィンドウの dismiss をトリガーできる要素のカスタムセレクタ。デフォルト: `[data-dismiss="portal"]` |
closeSelector | string | — | ポータルウィンドウの close をトリガーできる要素のカスタムセレクタ。デフォルト: `[data-close="portal"]` |
アウトプット
アウトプットはまだドキュメント化されていません。
テンプレート
自分好みに — 1 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。
| 名前 | 説明 | サンプル |
|---|---|---|
Portal Template | 動的レンダリングのために HubPortal サービスに渡せるテンプレート参照 | <ng-template #portalTemplate>
<div class="portal-content">
<div class="portal-header">
<h4>Portal Title</h4>
<button data-dismiss="portal">×</button>
</div>
<div class="portal-body">
Portal content goes here
</div>
<div class="portal-footer">
<button data-dismiss="portal">Cancel</button>
<button data-close="portal">OK</button>
</div>
</div>
</ng-template>
<!-- Open the portal -->
<button (click)="portal.open(portalTemplate)">Open Portal</button> |
CSS 変数
15 個の CSS 変数であらゆるピクセルをテーマ設定。:root で上書きするか、ラッパーにスコープを限定できます。
ポータル基本変数
ポータルの構造と配置のためのコアスタイル変数
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--portal-zindex | 1050 | number | ポータルオーバーレイの z-index |
--portal-padding | 1rem | length | ポータルコンテンツのデフォルトパディング |
--portal-margin | 0.5rem | length | ポータルダイアログ周囲のマージン |
ポータルの外観
ポータルの色、ボーダー、視覚効果を制御する変数
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--portal-bg | #ffffff | color | ポータルコンテンツの背景色 |
--portal-color | #212529 | color | ポータルコンテンツのテキスト色 |
--portal-border-color | #dee2e6 | color | ポータルのボーダー色 |
--portal-border-width | 1px | border | ポータルのボーダー幅 |
--portal-border-radius | 0.375rem | border | ポータルの角の角丸半径 |
--portal-box-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | shadow | ポータルの浮き上がり表現のためのボックスシャドウ |
ポータルのヘッダー & フッター
ポータルのヘッダーおよびフッターセクションのスタイル変数
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--portal-header-padding | 1rem | length | ポータルヘッダーのパディング |
--portal-header-border-color | #dee2e6 | color | ポータルヘッダーのボーダー色 |
--portal-footer-padding | 1rem | length | ポータルフッターのパディング |
--portal-footer-border-color | #dee2e6 | color | ポータルフッターのボーダー色 |
背景 & オーバーレイ
バックドロップの外観と動作を制御する変数
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--portal-backdrop-bg | rgba(0, 0, 0, 0.5) | color | ポータルバックドロップの背景色 |
--portal-backdrop-zindex | 1040 | number | バックドロップの z-index（ポータルの z-index より低くする必要があります） |
スタイリングとテーマ設定
スタイリングのサンプルはまだドキュメント化されていません。このセクションには、カスタマイズのレシピやテーマ設定のサンプルが含まれる予定です。