New-UDGrid

The grid is a 12-point grid system that can adapt based on the size of the screen that is showing the controls.

Synopsis

The grid is a 12-point grid system that can adapt based on the size of the screen that is showing the controls.

Syntax

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

Description

Creates a grid to layout components. The grid is a 12-point grid system that can adapt based on the size of the screen that is showing the controls.

Parameters

-Id

The ID of the component. It defaults to a random GUID.

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

-ExtraSmallSize

The size (1-12) for extra small devices.

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

-SmallSize

The size (1-12) for small devices.

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

-MediumSize

The size (1-12) for medium devices.

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

-LargeSize

The size (1-12) for large devices.

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

-ExtraLargeSize

The size (1-12) for extra large devices.

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

    -Container [<SwitchParameter>]
        Whether this is a container. A container can be best described as a row.

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

-Spacing

Spacing between the items.

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

    -Item [<SwitchParameter>]
        Whether this is an item in a container.

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

-Children

Components included in this grid item.

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

-ClassName

A CSS class to apply to the grid.

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

-Direction

The direction of the grid. Can be row, column, row-reverse or column-reverse.

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

-RowSpacing The spacing between rows.Required? falsePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-ColumnSpacing The spacing between columns.Required? falsePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-JustifyContentThe alignment of the grid items along the main axis. Can be flex-start, flex-end, center, space-between, space-around or space-evenly.Required? falsePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-AlignItemsThe alignment of the grid items along the cross axis. Can be flex-start, flex-end, center, baseline or stretch.Required? falsePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-VersionRequired? falsePosition? namedDefault value 1Accept pipeline input? falseAliasesAccept wildcard characters? false-StyleRequired? falsePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false <CommonParameters> This cmdlet supports the common parameters: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable, and OutVariable. For more information, see about_CommonParameters (https://go.microsoft.com/fwlink/?LinkID=113216).Outputs-------------------------- EXAMPLE 1 --------------------------PS >New-UDGrid -Container -Children {PS > New-UDGrid -Item -ExtraSmallSize 4 -Children {PS > New-UDCard -Title "Card 1" -Content {PS > New-UDButton -Text "Button 1"PS > }PS > }PS > New-UDGrid -Item -ExtraSmallSize 4 -Children {PS > New-UDCard -Title "Card 1" -Content {PS > New-UDButton -Text "Button 2"PS > }PS > }PS > New-UDGrid -Item -ExtraSmallSize 4 -Children {PS > New-UDCard -Title "Card 1" -Content {PS > New-UDButton -Text "Button 3"PS > }PS > }PS > } -Id "grid1"Basic grid|A basic grid with 3 cards in a row.-------------------------- EXAMPLE 2 --------------------------PS >New-UDGrid -Container -Children {PS > New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4 -Children {PS > New-UDCard -Title "Card 1" -Content {PS > New-UDButton -Text "Button 1"PS > }PS > }PS > New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4 -Children {PS > New-UDCard -Title "Card 1" -Content {PS > New-UDButton -Text "Button 2"PS > }PS > }PS > New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4 -Children {PS > New-UDCard -Title "Card 1" -Content {PS > New-UDButton -Text "Button 3"PS > }PS > }PS > } -Id "grid2"Responsive Grid|A responsive grid with 3 cards in a row. The cards will stack on small device screens.-------------------------- EXAMPLE 3 --------------------------PS >New-UDDynamic -Id 'grid4' -Content {PS > $Spacing = (Get-UDElement -Id 'gridSpacingSelect').valuePS > New-UDGrid -Container -Children {PS > New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4 -Children {PS > New-UDCard -Title "Card 1" -Content {PS > New-UDButton -Text "Button 1"PS > }PS > }PS > New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4 -Children {PS > New-UDCard -Title "Card 1" -Content {PS > New-UDButton -Text "Button 2"PS > }PS > }PS > New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4 -Children {PS > New-UDCard -Title "Card 1" -Content {PS > New-UDButton -Text "Button 3"PS > }PS > }PS > } -Spacing $SpacingPS > }PS > New-UDSelect -Id 'gridSpacingSelect' -Label Spacing -Option {PS > for ($i = 0; $i -lt 10; $i++) {PS > New-UDSelectOption -Name $i -Value $iPS > }PS >} -OnChange { Sync-UDElement -Id 'grid4' } -DefaultValue 3Grid Spacing|A responsive grid with 3 cards in a row. The spacing between the cards can be changed with the select box.-------------------------- EXAMPLE 4 --------------------------PS >New-UDRow -Columns {PS > New-UDColumn -Size 4 -Content {PS > New-UDCard -Title "Card 1" -Content {}PS > }PS > New-UDColumn -Size 4 -Content {PS > New-UDCard -Title "Card 2" -Content {}PS > }PS > New-UDColumn -Size 4 -Content {PS > New-UDCard -Title "Card 3" -Content {}PS > }PS > } -Id 'grid5'Row and Columns|The row and column aliases can be used to create a grid.-------------------------- EXAMPLE 5 --------------------------PS >$Session:direction = 'row'PS > $Session:justifyContent = 'center'PS > $Session:alignItems = 'center'PS > New-UDSelect -Label 'direction' -Option {PS > New-UDSelectOption -Name 'row'PS > New-UDSelectOption -Name 'row-reverse'PS > New-UDSelectOption -Name 'column'PS > New-UDSelectOption -Name 'column-reverse'PS > } -DefaultValue 'row' -OnChange {PS > $Session:direction = $EventDataPS > Sync-UDElement -Id 'example'PS > }PS > New-UDSelect -Label 'justifyContent' -Option {PS > New-UDSelectOption -Name 'flex-start'PS > New-UDSelectOption -Name 'center'PS > New-UDSelectOption -Name 'flex-end'PS > New-UDSelectOption -Name 'space-between'PS > New-UDSelectOption -Name 'space-around'PS > New-UDSelectOption -Name 'space-evenly'PS > } -DefaultValue 'center' -OnChange {PS > $Session:justifyContent = $EventDataPS > Sync-UDElement -Id 'example'PS > }PS > New-UDSelect -Label 'alignItems' -Option {PS > New-UDSelectOption -Name 'flex-start'PS > New-UDSelectOption -Name 'center'PS > New-UDSelectOption -Name 'flex-end'PS > New-UDSelectOption -Name 'stretch'PS > New-UDSelectOption -Name 'baseline'PS > } -DefaultValue 'center' -OnChange {PS > $Session:alignItems = $EventDataPS > Sync-UDElement -Id 'example'PS > }PS > New-UDDynamic -Id 'example' -Content {PS > New-UDGrid -Container -Children {PS > New-UDGrid -Item -Children {PS > New-UDPaper -Children { "Cell 1" } -Style @{PS > backgroundColor = 'rgb(26, 32, 39)'PS > color = 'white'PS > }PS > }PS > New-UDGrid -Item -Children {PS > New-UDPaper -Children { "Cell 2" } -Style @{PS > backgroundColor = 'rgb(26, 32, 39)'PS > color = 'white'PS > }PS > }PS > New-UDGrid -Item -Children {PS > New-UDPaper -Children { "Cell 3" } -Style @{PS > backgroundColor = 'rgb(26, 32, 39)'PS > color = 'white'PS > }PS > }PS > } -Direction $Session:Direction -JustifyContent $Session:justifyContent -AlignItems $Session:alignItemsPS > }Alignment|The alignment of the grid items can be changed with the direction, justifyContent and alignItems parameters.[Component("Grid", "Grid", "Creates a new card.")]