Modal

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

Base

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 modales 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'
}

Persistante

Les modales persistantes ne se ferment pas lorsque vous cliquez à l'extérieur de celles-ci. Vous devrez la 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 une modale

Vous pouvez utiliser le bouton Hide-UDModal pour masquer une modale actuellement affichée.

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

Lors de l'ouverture de plusieurs modales, vous pouvez également utiliser le paramètre -All de Hide-UDModal pour toutes les masquer au lieu d'une à la fois.

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

Style

Vous pouvez styliser les modules en utilisant les paramètres -Style, -HeaderStyle, -ContentStyle et -FooterStyle. Le style est appliqué à la modale entière elle-même et les styles de sections individuelles sont appliqués uniquement à ces sections. La valeur de ces paramètres correspond à 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

Voir aussi

• Devolutions Academy – Ajout de la réinitialisation du mot de passe utilisateur
• Devolutions Academy – Ajout de la fonction de recherche d'utilisateurs