Angular ポータルとオーバーレイレンダリング | ng-hub-ui-portal
現在の DOM ツリーの外側にコンポーネント、テンプレート、オーバーレイを動的にレンダリングする Angular ポータルライブラリ。位置制御に対応します。
スタイル
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 より低くする必要があります） |