Portal et Rendu Overlay Angular | ng-hub-ui-portal
Bibliothèque portal pour Angular permettant le rendu dynamique de composants, templates et overlays en dehors de l'arbre DOM actuel avec contrôle du positionnement.
Référence API
Voici le contrat complet de portal : tout ce que vous pouvez lier, écouter, projeter et personnaliser, réuni au même endroit. Branchez ce dont vous avez besoin et stylisez ce que vous voulez — c’est standalone et compatible avec les signals.
Inputs
Réglez portal à votre goût avec 15 inputs. Liez-les comme n’importe quel @Input Angular.
| Nom | Type | Par défaut | Description |
|---|---|---|---|
animation | boolean | — | Si true, l'ouverture et la fermeture du portal seront animées. Par défaut : true. |
ariaLabelledBy | string | — | Valeur de l'attribut `aria-labelledby` à définir sur la fenêtre portal. |
ariaDescribedBy | string | — | Valeur de l'attribut `aria-describedby` à définir sur la fenêtre portal. |
beforeDismiss | () => boolean | Promise<boolean> | — | Callback juste avant le rejet du portal. Renvoyez false pour empêcher le rejet. |
container | string | HTMLElement | — | Un sélecteur spécifiant l'élément auquel toutes les nouvelles fenêtres portal doivent être ajoutées. S'il n'est pas spécifié, ce sera `body`. |
injector | Injector | — | L'`Injector` à utiliser pour le contenu du portal afin d'activer l'injection de dépendances. |
keyboard | boolean | — | Si true, le portal sera fermé lorsque la touche Échap est pressée. Par défaut : true. |
scrollable | boolean | — | Contenu du portal défilable (false par défaut). |
windowClass | string | — | Une classe personnalisée à ajouter à la fenêtre portal pour un style et un positionnement personnalisés. |
portalDialogClass | string | — | Une classe personnalisée à ajouter au conteneur de dialogue du portal. |
portalContentClass | string | — | Une classe personnalisée à ajouter au wrapper de contenu du portal. |
headerSelector | string | — | Sélecteur personnalisé pour l'élément d'en-tête de la fenêtre portal. Utile pour cibler des sections spécifiques du portal. |
footerSelector | string | — | Sélecteur personnalisé pour l'élément de pied de page de la fenêtre portal. Utile pour cibler des sections spécifiques du portal. |
dismissSelector | string | — | Sélecteur personnalisé pour les éléments qui peuvent déclencher le rejet de la fenêtre portal. Par défaut : `[data-dismiss="portal"]`. |
closeSelector | string | — | Sélecteur personnalisé pour les éléments qui peuvent déclencher la fermeture de la fenêtre portal. Par défaut : `[data-close="portal"]`. |
Outputs
Aucun output documenté pour le moment.
Templates
Faites-le vôtre — 1 emplacements de template vous permettent de projeter votre propre balisage.
| Nom | Description | Exemple |
|---|---|---|
Portal Template | Référence de modèle pouvant être transmise au service HubPortal pour le rendu dynamique. | <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> |
Variables CSS
Personnalisez chaque pixel avec 15 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.
Variables de base du portail
Variables de style principales pour la structure et le positionnement du portal.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--portal-zindex | 1050 | number | Z-index de la superposition du portal. |
--portal-padding | 1rem | length | Marge intérieure par défaut du contenu du portal. |
--portal-margin | 0.5rem | length | Marge autour de la boîte de dialogue du portal. |
Apparence du portail
Variables contrôlant les couleurs, les bordures et les effets visuels du portal.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--portal-bg | #ffffff | color | Couleur d'arrière-plan du contenu du portal. |
--portal-color | #212529 | color | Couleur du texte du contenu du portal. |
--portal-border-color | #dee2e6 | color | Couleur de la bordure du portal. |
--portal-border-width | 1px | border | Épaisseur de la bordure du portal. |
--portal-border-radius | 0.375rem | border | Rayon des angles du portal. |
--portal-box-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | shadow | Ombre portée pour l'élévation du portal. |
En-tête et pied de page du portail
Variables de style pour les sections d'en-tête et de pied de page du portal.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--portal-header-padding | 1rem | length | Marge intérieure de l'en-tête du portal. |
--portal-header-border-color | #dee2e6 | color | Couleur de la bordure de l'en-tête du portal. |
--portal-footer-padding | 1rem | length | Marge intérieure du pied de page du portal. |
--portal-footer-border-color | #dee2e6 | color | Couleur de la bordure du pied de page du portal. |
Arrière-plan et superposition
Variables contrôlant l'apparence et le comportement du backdrop.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--portal-backdrop-bg | rgba(0, 0, 0, 0.5) | color | Couleur d'arrière-plan du backdrop du portal. |
--portal-backdrop-zindex | 1040 | number | Z-index du backdrop (doit être inférieur au z-index du portal). |
Styles et theming
Aucun exemple de style n’est encore documenté. Cette section inclura des recettes de personnalisation et des exemples de theming.