Référence API

Voici le contrat complet de modal : 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 modal à votre goût avec 14 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 modal seront animées. Par défaut : true.
`backdrop`	`boolean \| "static"`	—	Si true, l'élément backdrop sera créé. Vous pouvez aussi spécifier "static" pour un backdrop qui ne ferme pas le modal au clic. Par défaut : true.
`centered`	`boolean`	—	Si true, le modal sera centré verticalement. Par défaut : false.
`placement`	`HubModalPlacement`	—	Contrôle l'emplacement du modal dans le viewport. Par défaut : HubModalPlacement.Center.
`keyboard`	`boolean`	—	Si true, le modal sera fermé lorsque la touche Échap est pressée. Par défaut : true.
`closeOnNavigation`	`boolean`	—	Si true, le modal sera fermé lorsque l'utilisateur revient en arrière dans l'historique du navigateur (history.back(), bouton retour du navigateur). Par défaut : true.
`size`	`"sm" \| "lg" \| "xl" \| string`	—	Taille de la fenêtre modale.
`windowClass`	`string`	—	Une classe personnalisée à ajouter à la fenêtre modale.
`backdropClass`	`string`	—	Une classe personnalisée à ajouter au backdrop du modal.
`dismissSelector`	`string`	—	Sélecteur personnalisé pour les éléments qui peuvent déclencher le rejet de la fenêtre modale. Par défaut : "[data-dismiss=\"modal\"]".
`closeSelector`	`string`	—	Sélecteur personnalisé pour les éléments qui peuvent déclencher la fermeture de la fenêtre modale. Par défaut : "[data-close=\"modal\"]".
`headerSelector`	`string`	—	Sélecteur personnalisé pour l'élément d'en-tête de la fenêtre modale.
`footerSelector`	`string`	—	Sélecteur personnalisé pour l'élément de pied de page de la fenêtre modale.
`data`	`any`	—	Données supplémentaires à transmettre à la fenêtre modale lors de son ouverture.

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
`Modal Template`	Référence de modèle pouvant être transmise au service modal.	`<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>`

Variables CSS

Personnalisez chaque pixel avec 17 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.

Variables de base de la modale

Variables de style de base pour la structure et le positionnement de la modale

Variable	Par défaut	Type	Description
`--bs-modal-zindex`	`1055`	number	Z-index du modal.
`--bs-modal-width`	`500px`	length	Largeur par défaut du modal.
`--bs-modal-padding`	`1rem`	length	Marge intérieure autour du contenu du modal.
`--bs-modal-margin`	`0.5rem`	length	Marge autour de la boîte de dialogue du modal.

Apparence de la modale

Variables contrôlant les couleurs, les bordures et les effets visuels de la modale

Variable	Par défaut	Type	Description
`--bs-modal-color`	`var(--bs-body-color)`	color	Couleur du texte du contenu du modal.
`--bs-modal-bg`	`var(--bs-body-bg)`	color	Couleur d'arrière-plan du contenu du modal.
`--bs-modal-border-color`	`var(--bs-border-color-translucent)`	color	Couleur de la bordure du modal.
`--bs-modal-border-width`	`var(--bs-border-width)`	border	Épaisseur de la bordure du modal.
`--bs-modal-border-radius`	`var(--bs-border-radius-lg)`	border	Rayon de la bordure du modal.
`--bs-modal-box-shadow`	`0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)`	shadow	Ombre portée du modal.

En-tête de la modale

Variables de style pour la section d'en-tête de la modale

Variable	Par défaut	Type	Description
`--bs-modal-header-padding-x`	`1rem`	length	Marge intérieure horizontale de l'en-tête du modal.
`--bs-modal-header-padding-y`	`1rem`	length	Marge intérieure verticale de l'en-tête du modal.
`--bs-modal-header-border-color`	`var(--bs-border-color)`	color	Couleur de la bordure de l'en-tête du modal.
`--bs-modal-header-border-width`	`0 0 var(--bs-border-width) 0`	border	Épaisseur de la bordure de l'en-tête du modal.

Pied de la modale

Variables de style pour la section de pied de la modale

Variable	Par défaut	Type	Description
`--bs-modal-footer-gap`	`0.5rem`	length	Espacement entre les éléments du pied de page du modal.
`--bs-modal-footer-border-color`	`var(--bs-border-color)`	color	Couleur de la bordure du pied de page du modal.
`--bs-modal-footer-border-width`	`var(--bs-border-width) 0 0 0`	border	Épaisseur de la bordure du pied de page du modal.

Styles et theming

Aucun exemple de style n’est encore documenté. Cette section inclura des recettes de personnalisation et des exemples de theming.