Fenêtre modale

Composant modal pour les applications Universal.

Les modaux informent les utilisateurs d'une tâche et peuvent contenir des informations critiques, exiger des décisions ou impliquer plusieurs tâches.

Basique

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

Plein écran

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

Pleine largeur

Les modaux en pleine largeur occupent toute la largeur définie par le paramètre -MaxWidth.

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

Persistant

Les modaux persistants ne se ferment pas lorsque vous cliquez en dehors. Vous devez les fermer avec Hide-UDModal.

New-UDButton -Text 'Persistent' -OnClick {
    Show-UDModal -Content {
        New-UDTypography -Text "Hello"
    } -Footer {
        New-UDButton -Text "Close" -OnClick { Hide-UDModal }
    } -Persistent
}

Masquer un modal

Vous pouvez utiliser le bouton Hide-UDModal pour masquer un modal actuellement affiché.

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

Lorsque vous ouvrez plusieurs modaux, vous pouvez également utiliser le paramètre -All de Hide-UDModal pour les masquer tous en même temps plutôt qu'un par un.

New-UDButton -Text 'Parent' -OnClick {
    Show-UDModal -Content {
       New-UDButton -Text 'Child' -OnClick {
          Show-UDModal -Content {
              New-UDButton -Text 'hide current' -OnClick {
                  Hide-UDModal
              }
              New-UDButton -Text 'hide all' -OnClick {
                  Hide-UDModal -All
              }
          } 
       }
    }
}

Mise en forme

Vous pouvez mettre en forme les modaux à l'aide des paramètres -Style, -HeaderStyle, -ContentStyle et -FooterStyle. Le style s'applique à l'ensemble du modal lui-même, tandis que les styles de sections individuels ne s'appliquent qu'à ces sections. La valeur de ces paramètres est des tables de hachage de valeurs CSS.

New-UDButton -Text 'Styling' -OnClick {
    Show-UDModal -Content {
        New-UDTypography -Text "Hello"
    } -Style @{
        backgroundColor = "red"
    }
}

API

• Show-UDModal
• Hide-UDModal