Show-UDModal

The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.

Synopsis

The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.

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

Description

Show a modal.

Parameters

-Footer

The footer components for the modal.

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

-Header

The header components for the modal.

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

-Content

The content of the modal.

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

    -Persistent [<SwitchParameter>]
        Whether the modal can be closed by clicking outside of it.

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

    -FullWidth [<SwitchParameter>]
        Whether the modal is full width.

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

    -FullHeight [<SwitchParameter>]

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

-MaxWidth

The max width of the modal.

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

-Style

The CSS style for the modal.

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

-HeaderStyle

The CSS style for the header portion of the modal.

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

-ContentStyle

The CSS style for the content portion of the modal.

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

-FooterStyle

The CSS style for the footer portion of the modal.

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

    -Dividers [<SwitchParameter>]
        Places a divider between header and footer content

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

    <CommonParameters>
        This cmdlet supports the common parameters: Verbose, Debug,
        ErrorAction, ErrorVariable, WarningAction, WarningVariable,
        OutBuffer, PipelineVariable, and OutVariable. For more information, see
        about_CommonParameters (https://go.microsoft.com/fwlink/?LinkID=113216).

Outputs

-------------------------- EXAMPLE 1 --------------------------

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

Basic Modal|A basic modal.




-------------------------- EXAMPLE 2 --------------------------

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

Full Screen Modal|A full screen modal.




-------------------------- EXAMPLE 3 --------------------------

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

Full Width Modal|A full width modal.




-------------------------- EXAMPLE 4 --------------------------

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

Persistent Modal|A persistent modal.




-------------------------- EXAMPLE 5 --------------------------

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

Header And Footer Modal|A modal with a header and footer.