Show-UDModal

Sinopsis

El componente modal proporciona una base sólida para crear diálogos, popovers, lightboxes o cualquier otra cosa.

Sintaxis

Show-UDModal [-FullScreen] [[-Footer] <ScriptBlock>] [[-Header] <ScriptBlock>] [[-Content] <ScriptBlock>] [-Persistent] [-FullWidth] [-FullHeight] [[-MaxWidth] <String>] [[-Style] <Hashtable>] [[-HeaderStyle] <Hashtable>] [[-ContentStyle] <Hashtable>] [[-FooterStyle] <Hashtable>] [-Dividers] [[-PaperStyle] <Hashtable>] [<CommonParameters>]

Descripción

Muestra un modal.

Parámetros

-Footer

Los componentes del pie de página del modal.

Required?                    false
Position?                    1
Default value                {}
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Header

Los componentes del encabezado del modal.

Required?                    false
Position?                    2
Default value                {}
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Content

El contenido del modal.

Required?                    false
Position?                    3
Default value                {}
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Persistent

Si el modal se puede cerrar haciendo clic fuera de él.

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-FullWidth

Si el modal ocupa todo el ancho.

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-FullHeight

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-MaxWidth

El ancho máximo del modal.

Required?                    false
Position?                    4
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Style

El estilo CSS del modal.

Required?                    false
Position?                    5
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-HeaderStyle

El estilo CSS de la parte del encabezado del modal.

Required?                    false
Position?                    6
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-ContentStyle

El estilo CSS de la parte del contenido del modal.

Required?                    false
Position?                    7
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-FooterStyle

El estilo CSS de la parte del pie de página del modal.

Required?                    false
Position?                    8
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Dividers

Coloca un divisor entre el contenido del encabezado y el del pie de página

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-PaperStyle

Required?                    false
Position?                    9
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

Parámetros comunes

Este cmdlet admite los parámetros comunes: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable y OutVariable. Para más información, consulte about_CommonParameters.

Salidas

Ejemplos

Ejemplo 1: modal básico

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

Un modal básico.

Ejemplo 2: modal a pantalla completa

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

Un modal a pantalla completa.

Ejemplo 3: modal de ancho completo

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

Un modal de ancho completo.

Ejemplo 4: modal persistente

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

Un modal persistente.

Ejemplo 5: modal con encabezado y pie de página

New-UDButton -Text 'Header And Footer' -OnClick {
   Show-UDModal -Content {
       New-UDTypography -Text "Hello"
   } -Header {
       New-UDTypography -Text "Header" -Id 'header'
   } -Footer {
       New-UDButton -Text "Close" -OnClick { Hide-UDModal } -Id 'button6'
   } -Dividers
} -Id 'button5'

Un modal con encabezado y pie de página.