Show-UDModal

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

-FullScreen

Displays the modal in full-screen mode.

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

-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

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

Whether the modal is full width.

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

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

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

Common parameters

This cmdlet supports the common parameters: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable, and OutVariable. For more information, see about_CommonParameters.

Outputs

Examples

Example 1: Basic Modal

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

A basic modal.

Example 2: Full Screen 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'

A full screen modal.

Example 3: Full Width Modal

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

A full width modal.

Example 4: Persistent 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'

A persistent modal.

Example 5: Header And Footer Modal

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'

A modal with a header and footer.