Modal Modal component for Universal Dashboard.
Modals inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
Basic
Copy New-UDButton - Text 'Basic' - OnClick {
Show-UDModal - Content {
New-UDTypography - Text "Hello"
}
} Full Screen
Copy New-UDButton - Text 'Full Screen' - OnClick {
Show-UDModal - Content {
New-UDTypography - Text "Hello"
} - Footer {
New-UDButton - Text "Close" - OnClick { Hide-UDModal }
} - FullScreen
} Full Width
Full width modals take up the full width as defined by the -MaxWidth parameter.
Copy New-UDButton - Text 'Full Width' - OnClick {
Show-UDModal - Content {
New-UDTypography - Text "Hello"
} - FullWidth - MaxWidth 'md'
} Persistent
Persistent modals do not close when you click off of them. You will have to close it with Hide-UDModal.
Copy New-UDButton - Text 'Persistent' - OnClick {
Show-UDModal - Content {
New-UDTypography - Text "Hello"
} - Footer {
New-UDButton - Text "Close" - OnClick { Hide-UDModal }
} - Persistent
} Hide a Modal
You can use the Hide-UDModal button to hide a modal that is currently show.
Copy New-UDButton - Text 'Basic' - OnClick {
Show-UDModal - Content {
New-UDTypography - Text "Hello"
}
Start-Sleep 5
Hide-UDModal
} Styling
You can style modules using the -Style, -HeaderStyle, -ContentStyle and -FooterStyle parameters. Style is applied to the entire modal itself and the individual section styles are only applied to those sections. The value for these parameters are hashtables of CSS values.
Copy New-UDButton - Text 'Styling' - OnClick {
Show-UDModal - Content {
New-UDTypography - Text "Hello"
} - Style @ {
backgroundColor = "red"
}
} API
