New-UDGridLayout

Sinopsis

Crea un nuevo diseño de cuadrícula. El diseño de cuadrícula permite arrastrar y soltar componentes en una cuadrícula.

Sintaxis

New-UDGridLayout [[-Id] <String>] [[-RowHeight] <Int32>] [-Content] <ScriptBlock> [[-Layout] <String>] [[-LargeColumns] <Int32>] [[-MediumColumns] <Int32>] [[-SmallColumns] <Int32>] [[-ExtraSmallColumns] <Int32>] [[-ExtraExtraSmallColumns] <Int32>] [[-LargeBreakpoint] <Int32>] [[-MediumBreakpoint] <Int32>] [[-SmallBreakpoint] <Int32>] [[-ExtraSmallBreakpoint] <Int32>] [[-ExtraExtraSmallBreakpoint] <Int32>] [-Draggable] [-Resizable] [-Persist] [-Design] [<CommonParameters>]

Descripción

Crea un nuevo diseño de cuadrícula. El diseño de cuadrícula permite arrastrar y soltar componentes en una cuadrícula.

Parámetros

-Id

El ID de este componente. El valor predeterminado es un GUID aleatorio.

Required?                    false
Position?                    1
Default value                ([Guid]::NewGuid()).ToString()
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-RowHeight

La altura de cada fila en píxeles. El valor predeterminado es 30.

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

-Content

El contenido del diseño de cuadrícula. Es un bloque de script que devuelve una lista de componentes. Los componentes deben tener ID estáticos.

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

-Layout

El diseño de la cuadrícula. Debe ser una cadena JSON.

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

-LargeColumns

El número de columnas en el punto de interrupción grande. El valor predeterminado es 12.

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

-MediumColumns

El número de columnas en el punto de interrupción medio. El valor predeterminado es 10.

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

-SmallColumns

El número de columnas en el punto de interrupción pequeño. El valor predeterminado es 6.

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

-ExtraSmallColumns

El número de columnas en el punto de interrupción extra pequeño. El valor predeterminado es 4.

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

-ExtraExtraSmallColumns

El número de columnas en el punto de interrupción extra extra pequeño. El valor predeterminado es 2.

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

-LargeBreakpoint

El ancho del punto de interrupción grande en píxeles. El valor predeterminado es 1200.

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

-MediumBreakpoint

El ancho del punto de interrupción medio en píxeles. El valor predeterminado es 996.

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

-SmallBreakpoint

El ancho del punto de interrupción pequeño en píxeles. El valor predeterminado es 768.

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

-ExtraSmallBreakpoint

El ancho del punto de interrupción extra pequeño en píxeles. El valor predeterminado es 480.

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

-ExtraExtraSmallBreakpoint

El ancho del punto de interrupción extra extra pequeño en píxeles. El valor predeterminado es 0.

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

-Draggable

Si los componentes se pueden arrastrar o no.

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

-Resizable

Si los componentes se pueden redimensionar o no.

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

-Persist

Si el diseño debe persistir o no en la sesión actual del navegador.

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

-Design

Si el diseño de cuadrícula está o no en modo de diseño. El modo de diseño permite copiar el diseño JSON actual.

Required?                    false
Position?                    named
Default value                False
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: diseño de cuadrícula básico

New-UDGridLayout -Content {
    New-UDCard -Text "Card 1" -Id "card1"
    New-UDCard -Text "Card 2" -Id "card2"
} -Id 'gridLayout1' -Draggable -Resizable -Layout '{"lg":[{"w":2,"h":3,"x":0,"y":0,"i":"grid-element-card1","moved":false,"static":false},{"w":2,"h":3,"x":2,"y":0,"i":"grid-element-card2","moved":false,"static":false}]}'

Cree un diseño de cuadrícula básico con dos tarjetas.

Ejemplo 2: arrastrable y redimensionable

New-UDGridLayout -Content {
    New-UDCard -Text "Card 3" -Id "card3"
    New-UDCard -Text "Card 4" -Id "card4"
} -Id 'gridLayout2' -Design -Draggable -Resizable -Layout '{"lg":[{"w":2,"h":3,"x":0,"y":0,"i":"grid-element-card3","moved":false,"static":false},{"w":2,"h":3,"x":2,"y":0,"i":"grid-element-card4","moved":false,"static":false}]}'

Cree un diseño de cuadrícula con dos tarjetas que se pueden arrastrar y redimensionar. Este diseño también está en modo de diseño, lo que le permite copiar el diseño actual como JSON.

Ejemplo 3: diseño persistente

New-UDGridLayout -Content {
    New-UDCard -Text "Card 5" -Id "card5"
    New-UDCard -Text "Card 6" -Id "card6"
} -Id 'gridLayout3' -Design -Draggable -Resizable -Persist -Layout '{"lg":[{"w":2,"h":3,"x":0,"y":0,"i":"grid-element-card5","moved":false,"static":false},{"w":2,"h":3,"x":2,"y":0,"i":"grid-element-card6","moved":false,"static":false}]}'

Este diseño también persiste en la sesión actual del navegador. Actualice la página para ver el diseño persistido.

[Component("Grid Layout", "TableLayout", "Creates a new card.")]