Modal

Modale Dialoge informieren Benutzer über eine Aufgabe und können kritische Informationen enthalten, Entscheidungen erfordern oder mehrere Aufgaben umfassen.

Grundlagen

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

Vollbild

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

Volle Breite

Modale Dialoge mit voller Breite nehmen die gesamte Breite ein, die durch den Parameter -MaxWidth definiert ist.

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

Persistent

Persistente modale Dialoge werden nicht geschlossen, wenn Sie daneben klicken. Sie müssen sie mit Hide-UDModal schließen.

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

Einen modalen Dialog ausblenden

Sie können die Schaltfläche Hide-UDModal verwenden, um einen derzeit angezeigten modalen Dialog auszublenden.

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

Wenn Sie mehrere modale Dialoge öffnen, können Sie auch den Parameter -All von Hide-UDModal verwenden, um alle auf einmal statt einzeln auszublenden.

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

Gestaltung

Sie können Module mit den Parametern -Style, -HeaderStyle, -ContentStyle und -FooterStyle gestalten. Style wird auf den gesamten modalen Dialog selbst angewendet, und die einzelnen Abschnittsstile werden nur auf diese Abschnitte angewendet. Die Werte für diese Parameter sind Hashtables mit CSS-Werten.

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

API

• Show-UDModal
• Hide-UDModal

Siehe auch

• Devolutions Academy – Adding reset user password
• Devolutions Academy – Adding the search users function