Show-UDModal

Übersicht

Die Modal-Komponente bietet eine solide Grundlage zum Erstellen von Dialogen, Popovers, Lightboxes oder allem anderen.

Syntax

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>]

Beschreibung

Zeigt ein Modal an.

Parameter

-Footer

Die Fußzeilenkomponenten für das Modal.

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

-Header

Die Kopfzeilenkomponenten für das Modal.

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

-Content

Der Inhalt des Modals.

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

-Persistent

Ob das Modal durch Klicken außerhalb davon geschlossen werden kann.

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

-FullWidth

Ob das Modal die volle Breite einnimmt.

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

Die maximale Breite des Modals.

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

-Style

Der CSS-Stil für das Modal.

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

-HeaderStyle

Der CSS-Stil für den Kopfzeilenbereich des Modals.

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

-ContentStyle

Der CSS-Stil für den Inhaltsbereich des Modals.

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

-FooterStyle

Der CSS-Stil für den Fußzeilenbereich des Modals.

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

-Dividers

Platziert einen Trenner zwischen Kopf- und Fußzeileninhalt

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

Allgemeine Parameter

Dieses Cmdlet unterstützt die allgemeinen Parameter: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable und OutVariable. Weitere Informationen finden Sie unter about_CommonParameters.

Ausgaben

Beispiele

Beispiel 1: Einfaches Modal

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

Ein einfaches Modal.

Beispiel 2: Vollbild-Modal

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

Ein Vollbild-Modal.

Beispiel 3: Modal in voller Breite

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

Ein Modal in voller Breite.

Beispiel 4: Persistentes Modal

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'

Ein persistentes Modal.

Beispiel 5: Modal mit Kopf- und Fußzeile

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'

Ein Modal mit einer Kopf- und einer Fußzeile.