Comment on page
Grid
Grid layout component for Universal Dashboard.
The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design’s responsive UI is based on a 12-column grid layout.

New-UDGrid -Container -Content {
New-UDGrid -Item -ExtraSmallSize 12 -Content {
New-UDPaper -Content { "xs-12" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 6 -Content {
New-UDPaper -Content { "xs-6" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 6 -Content {
New-UDPaper -Content { "xs-6" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 3 -Content {
New-UDPaper -Content { "xs-3" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 3 -Content {
New-UDPaper -Content { "xs-3" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 3 -Content {
New-UDPaper -Content { "xs-3" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 3 -Content {
New-UDPaper -Content { "xs-3" } -Elevation 2
}
}
Adjust the spacing between items in the grid
New-UDDynamic -Id 'spacingGrid' -Content {
$Spacing = (Get-UDElement -Id 'spacingSelect').value
New-UDGrid -Spacing $Spacing -Container -Content {
New-UDGrid -Item -ExtraSmallSize 3 -Content {
New-UDPaper -Content { "xs-3" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 3 -Content {
New-UDPaper -Content { "xs-3" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 3 -Content {
New-UDPaper -Content { "xs-3" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 3 -Content {
New-UDPaper -Content { "xs-3" } -Elevation 2
}
}
}
New-UDSelect -Id 'spacingSelect' -Label Spacing -Option {
for($i = 0; $i -lt 10; $i++)
{
New-UDSelectOption -Name $i -Value $i
}
} -OnChange { Sync-UDElement -Id 'spacingGrid' } -DefaultValue 3
You can also use the
New-UDRow
and New-UDColumn
functions when working with the grid.New-UDRow -Columns {
New-UDColumn -SmallSize 12 -Content {
New-UDPaper -Content { "xs-12" } -Elevation 2
}
New-UDColumn -SmallSize 12 -Content {
New-UDPaper -Content { "xs-12" } -Elevation 2
}
}
New-UDGrid
Name | Type | Description | Required |
Id | String | The ID of the component. It defaults to a random GUID. | false |
ExtraSmallSize | Int32 | The size (1-12) for extra small devices. | false |
SmallSize | Int32 | The size (1-12) for small devices. | false |
MediumSize | Int32 | The size (1-12) for medium devices. | false |
LargeSize | Int32 | The size (1-12) for large devices. | false |
ExtraLargeSize | Int32 | The size (1-12) for extra large devices. | false |
Container | SwitchParameter | Whether this is a container. A container can be best described as a row. | false |
Spacing | Int32 | Spacing between the items. | false |
Item | SwitchParameter | Whether this is an item in a container. | false |
Children | ScriptBlock | Components included in this grid item. | false |
Last modified 2yr ago