New-UDGrid

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

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

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?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-ColumnSpacing

The spacing between columns.

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

-JustifyContent

The alignment of the grid items along the main axis. Can be flex-start, flex-end, center, space-between, space-around or space-evenly.

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

-AlignItems

The alignment of the grid items along the cross axis. Can be flex-start, flex-end, center, baseline or 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

Common parameters

This cmdlet supports the common parameters: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable, and OutVariable. For more information, see about_CommonParameters.

Outputs

Examples

Example 1: Basic grid

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"

A basic grid with 3 cards in a row.

Example 2: Responsive Grid

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"

A responsive grid with 3 cards in a row. The cards will stack on small device screens.

Example 3: Grid Spacing

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

A responsive grid with 3 cards in a row. The spacing between the cards can be changed with the select box.

Example 4: Row and Columns

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'

The row and column aliases can be used to create a grid.

Example 5: Alignment

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

The alignment of the grid items can be changed with the direction, justifyContent and alignItems parameters.

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