Show-UDModal

Synopsis

Le composant modal fournit une base solide pour créer des boîtes de dialogue, des popovers, des lightbox ou tout autre élément.

Syntaxe

Show-UDModal [-FullScreen] [[-Footer] <ScriptBlock>] [[-Header] <ScriptBlock>] [[-Content] <ScriptBlock>] [-Persistent] [-FullWidth] [-FullHeight] [[-MaxWidth] <String>] [[-Style] <Hashtable>] [[-HeaderStyle] <Hashtable>] [[-ContentStyle] <Hashtable>] [[-FooterStyle] <Hashtable>] [-Dividers] [[-PaperStyle] <Hashtable>] [<CommonParameters>]

Description

Affiche une fenêtre modale.

Paramètres

-Footer

Les composants du pied de page de la fenêtre modale.

Required?                    false
Position?                    1
Default value                {}
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Header

Les composants de l'en-tête de la fenêtre modale.

Required?                    false
Position?                    2
Default value                {}
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Content

Le contenu de la fenêtre modale.

Required?                    false
Position?                    3
Default value                {}
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Persistent

Indique si la fenêtre modale peut être fermée en cliquant à l'extérieur de celle-ci.

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-FullWidth

Indique si la fenêtre modale occupe toute la largeur.

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-FullHeight

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-MaxWidth

La largeur maximale de la fenêtre modale.

Required?                    false
Position?                    4
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Style

Le style CSS de la fenêtre modale.

Required?                    false
Position?                    5
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-HeaderStyle

Le style CSS de la portion d'en-tête de la fenêtre modale.

Required?                    false
Position?                    6
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-ContentStyle

Le style CSS de la portion de contenu de la fenêtre modale.

Required?                    false
Position?                    7
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-FooterStyle

Le style CSS de la portion de pied de page de la fenêtre modale.

Required?                    false
Position?                    8
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Dividers

Place un séparateur entre le contenu de l'en-tête et celui du pied de page

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-PaperStyle

Required?                    false
Position?                    9
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

Paramètres communs

Cette applet de commande prend en charge les paramètres communs : Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable et OutVariable. Pour plus d'informations, consultez about_CommonParameters.

Sorties

Exemples

Exemple 1 : Fenêtre modale de base

New-UDButton -Text 'Basic' -OnClick {
   Show-UDModal -Content {
       New-UDTypography -Text "Hello" -Id 'typography1'
   }
} -Id 'button1'

Une fenêtre modale de base.

Exemple 2 : Fenêtre modale plein écran

New-UDButton -Text 'Full Screen' -OnClick {
   Show-UDModal -Content {
       New-UDTypography -Text "Hello"
   } -FullScreen -Footer {
       New-UDButton -Text "Close" -OnClick { Hide-UDModal }
   }
} -Id 'button2'

Une fenêtre modale plein écran.

Exemple 3 : Fenêtre modale pleine largeur

New-UDButton -Text 'Full Width' -OnClick {
   Show-UDModal -Content {
       New-UDTypography -Text "Hello"
   } -FullWidth -MaxWidth 'md'
} -Id 'button3'

Une fenêtre modale pleine largeur.

Exemple 4 : Fenêtre modale persistante

New-UDButton -Text 'Persistent' -OnClick {
   Show-UDModal -Content {
       New-UDTypography -Text "Hello"
   } -Persistent -Footer {
       New-UDButton -Text "Close" -OnClick { Hide-UDModal } -Id 'button5'
   }
} -Id 'button4'

Une fenêtre modale persistante.

Exemple 5 : Fenêtre modale avec en-tête et pied de page

New-UDButton -Text 'Header And Footer' -OnClick {
   Show-UDModal -Content {
       New-UDTypography -Text "Hello"
   } -Header {
       New-UDTypography -Text "Header" -Id 'header'
   } -Footer {
       New-UDButton -Text "Close" -OnClick { Hide-UDModal } -Id 'button6'
   } -Dividers
} -Id 'button5'

Une fenêtre modale avec un en-tête et un pied de page.