New-UDGrid

Sinopsis

La cuadrícula es un sistema de cuadrícula de 12 puntos que puede adaptarse en función del tamaño de la pantalla que muestra los controles.

Sintaxis

New-UDGrid [-Id <String>] [-ExtraSmallSize <Int32>] [-SmallSize <Int32>] [-MediumSize <Int32>] [-LargeSize <Int32>] [-ExtraLargeSize <Int32>] [-Item] [-Children <ScriptBlock>] [-ClassName <String>] [-Direction <String>] [-RowSpacing <Object>] [-ColumnSpacing <Object>] [-JustifyContent <String>] [-AlignItems <String>] [-Version <String>] [-Style <Hashtable>] [<CommonParameters>]

New-UDGrid [-Id <String>] [-Container] [-Spacing <Int32>] [-Children <ScriptBlock>] [-ClassName <String>] [-Direction <String>] [-RowSpacing <Object>] [-ColumnSpacing <Object>] [-JustifyContent <String>] [-AlignItems <String>] [-Version <String>] [-Style <Hashtable>] [<CommonParameters>]

Descripción

Crea una cuadrícula para distribuir componentes. La cuadrícula es un sistema de cuadrícula de 12 puntos que puede adaptarse en función del tamaño de la pantalla que muestra los controles.

Parámetros

-Id

El ID del componente. De forma predeterminada, es un GUID aleatorio.

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

-ExtraSmallSize

El tamaño (1-12) para dispositivos muy pequeños.

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

-SmallSize

El tamaño (1-12) para dispositivos pequeños.

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

-MediumSize

El tamaño (1-12) para dispositivos medianos.

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

-LargeSize

El tamaño (1-12) para dispositivos grandes.

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

-ExtraLargeSize

El tamaño (1-12) para dispositivos muy grandes.

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

-Container

Si se trata de un contenedor. Un contenedor puede describirse mejor como una fila.

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

-Spacing

Espaciado entre los elementos.

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

-Item

Si se trata de un elemento dentro de un contenedor.

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

-Children

Componentes incluidos en este elemento de la cuadrícula.

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

-ClassName

Una clase CSS que aplicar a la cuadrícula.

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

-Direction

La dirección de la cuadrícula. Puede ser row, column, row-reverse o column-reverse.

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

-RowSpacing

El espaciado entre filas.

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

-ColumnSpacing

El espaciado entre columnas.

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

-JustifyContent

La alineación de los elementos de la cuadrícula a lo largo del eje principal. Puede ser flex-start, flex-end, center, space-between, space-around o space-evenly.

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

-AlignItems

La alineación de los elementos de la cuadrícula a lo largo del eje transversal. Puede ser flex-start, flex-end, center, baseline o stretch.

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

-Version

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

-Style

Required?                    false
Position?                    named
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: cuadrícula básica

New-UDGrid -Container -Children {
    New-UDGrid -Item -ExtraSmallSize 4 -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 1"
       }
   }
    New-UDGrid -Item -ExtraSmallSize 4 -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 2"
       }
   }
    New-UDGrid -Item -ExtraSmallSize 4 -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 3"
       }
   }
} -Id "grid1"

Una cuadrícula básica con 3 tarjetas en una fila.

Ejemplo 2: cuadrícula adaptable

New-UDGrid -Container -Children {
    New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4 -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 1"
       }
   }
    New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4  -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 2"
       }
   }
    New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4 -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 3"
       }
   }
} -Id "grid2"

Una cuadrícula adaptable con 3 tarjetas en una fila. Las tarjetas se apilarán en pantallas de dispositivos pequeños.

Ejemplo 3: espaciado de la cuadrícula

New-UDDynamic -Id 'grid4' -Content {
   $Spacing = (Get-UDElement -Id 'gridSpacingSelect').value
   New-UDGrid -Container -Children {
     New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4 -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 1"
       }
   }
    New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4  -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 2"
       }
   }
   New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4 -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 3"
       }
   }
  } -Spacing $Spacing
}
New-UDSelect -Id 'gridSpacingSelect' -Label Spacing -Option {
  for ($i = 0; $i -lt 10; $i++) {
      New-UDSelectOption -Name $i -Value $i
  }
} -OnChange { Sync-UDElement -Id 'grid4' } -DefaultValue 3

Una cuadrícula adaptable con 3 tarjetas en una fila. El espaciado entre las tarjetas puede cambiarse con el cuadro de selección.

Ejemplo 4: filas y columnas

New-UDRow -Columns {
    New-UDColumn -Size 4 -Content {
        New-UDCard -Title "Card 1" -Content {}
    }
    New-UDColumn -Size 4 -Content {
        New-UDCard -Title "Card 2" -Content {}
    }
    New-UDColumn -Size 4 -Content {
        New-UDCard -Title "Card 3" -Content {}
    }
} -Id 'grid5'

Los alias de fila y columna pueden utilizarse para crear una cuadrícula.

Ejemplo 5: alineación

$Session:direction = 'row'
$Session:justifyContent = 'center'
$Session:alignItems = 'center'
New-UDSelect -Label 'direction' -Option {
    New-UDSelectOption -Name 'row'
    New-UDSelectOption -Name 'row-reverse'
    New-UDSelectOption -Name 'column'
    New-UDSelectOption -Name 'column-reverse'
} -DefaultValue 'row' -OnChange {
    $Session:direction = $EventData
    Sync-UDElement -Id 'example'
}
New-UDSelect -Label 'justifyContent' -Option {
    New-UDSelectOption -Name 'flex-start'
    New-UDSelectOption -Name 'center'
    New-UDSelectOption -Name 'flex-end'
    New-UDSelectOption -Name 'space-between'
    New-UDSelectOption -Name 'space-around'
    New-UDSelectOption -Name 'space-evenly'
} -DefaultValue 'center' -OnChange {
    $Session:justifyContent = $EventData
    Sync-UDElement -Id 'example'
}
New-UDSelect -Label 'alignItems' -Option {
    New-UDSelectOption -Name 'flex-start'
    New-UDSelectOption -Name 'center'
    New-UDSelectOption -Name 'flex-end'
    New-UDSelectOption -Name 'stretch'
    New-UDSelectOption -Name 'baseline'
} -DefaultValue 'center' -OnChange {
    $Session:alignItems = $EventData
    Sync-UDElement -Id 'example'
}
New-UDDynamic -Id 'example' -Content {
    New-UDGrid -Container -Children {
        New-UDGrid -Item -Children {
            New-UDPaper -Children { "Cell 1" } -Style @{
                backgroundColor = 'rgb(26, 32, 39)'
                color           = 'white'
            }
        }
        New-UDGrid -Item -Children {
            New-UDPaper -Children { "Cell 2" } -Style @{
                backgroundColor = 'rgb(26, 32, 39)'
                color           = 'white'
            }
        }
        New-UDGrid -Item -Children {
            New-UDPaper -Children { "Cell 3" } -Style @{
                backgroundColor = 'rgb(26, 32, 39)'
                color           = 'white'
            }
        }
    } -Direction $Session:Direction -JustifyContent $Session:justifyContent -AlignItems $Session:alignItems
}

La alineación de los elementos de la cuadrícula puede cambiarse con los parámetros direction, justifyContent y alignItems.

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