Modal

Le finestre modali informano gli utenti su un'attività e possono contenere informazioni critiche, richiedere decisioni o coinvolgere più attività.

Base

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

Schermo intero

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

Larghezza intera

Le finestre modali a larghezza intera occupano l'intera larghezza definita dal parametro -MaxWidth.

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

Persistente

Le finestre modali persistenti non si chiudono quando si fa clic al di fuori di esse. Dovrà chiuderla con Hide-UDModal.

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

Nascondere una finestra modale

Può usare il pulsante Hide-UDModal per nascondere una finestra modale attualmente visualizzata.

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

Quando apre più finestre modali, può anche usare il parametro -All di Hide-UDModal per nasconderle tutte anziché una alla volta.

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

Stile

Può applicare uno stile ai moduli usando i parametri -Style, -HeaderStyle, -ContentStyle e -FooterStyle. Lo stile viene applicato all'intera finestra modale, mentre gli stili delle singole sezioni vengono applicati solo a tali sezioni. Il valore di questi parametri è costituito da hashtable di valori CSS.

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

API

• Show-UDModal
• Hide-UDModal

Vedi anche

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