Modal

Los modales informan a los usuarios sobre una tarea y pueden contener información crítica, requerir decisiones o implicar varias tareas.

Básico

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

Pantalla completa

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

Ancho completo

Los modales de ancho completo ocupan todo el ancho definido por el parámetro -MaxWidth.

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

Persistente

Los modales persistentes no se cierran al hacer clic fuera de ellos. Tendrá que cerrarlo con Hide-UDModal.

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

Ocultar un modal

Puede usar el botón Hide-UDModal para ocultar un modal que se está mostrando actualmente.

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

Al abrir varios modales, también puede usar el parámetro -All de Hide-UDModal para ocultarlos todos en lugar de uno por uno.

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

Estilos

Puede aplicar estilos a los módulos mediante los parámetros -Style, -HeaderStyle, -ContentStyle y -FooterStyle. El estilo se aplica a todo el modal en sí y los estilos de secciones individuales solo se aplican a esas secciones. El valor de estos parámetros son tablas hash de valores CSS.

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

API

• Show-UDModal
• Hide-UDModal

Véase también

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