Circular Progress

New-UDProgress -Circular -Color Blue

Linear Indeterminate

New-UDProgress

Linear Determinate

New-UDProgress -PercentComplete 75

New-UDProgress

Modals inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

Basic

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

Full Screen

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.

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.

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.

New-UDButton -Text 'Basic' -OnClick {
    Show-UDModal -Content {
        New-UDTypography -Text "Hello"
    }
    Start-Sleep 5
    Hide-UDModal
}

Show-UDModal

The backdrop component places an overlay over the drop of the entire page. It's useful for displaying loading states.

Basic Backdrop

To create a basic backdrop, you can use the New-UDBackdrop cmdlet and include content to show within the backdrop. The content will be centered on the page. To show the backdrop, use the -Open switch parameter.

New-UDBackdrop -Content {
    New-UDTypography -Text "Loading..." -Variant h2
} -Open

OnClick Handler

The backdrop provides an -OnClick handler that you can use to close the backdrop when clicked. You can use Set-UDElement to open and close the backdrop.

New-UDBackdrop -Id 'backdrop' -Content {
    New-UDTypography -Text "Loading..." -Variant h2
} -Open -OnClick {
    Set-UDElement -Id 'backdrop' -Properties @{
        open = $false
    }
}

A skeleton is a form of a loading component that can show a placeholder while data is received.

Variants

There are three variants that you can use for a skeleton. You can use a circle, text or a rectangle. You can also define the height and width of the skeleton.

New-UDSkeleton
New-UDSkeleton -Variant circle -Width 40 -Height 40
New-UDSkeleton -Variant rect -Width 210 -Height 118

Animations

Skeletons will use the pulsate animation by default. You can also disable animation or use a wave animation.

New-UDSkeleton
New-UDSkeleton -Animation disabled
New-UDSkeleton -Animation wave