New-UDStack

The Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing and/or dividers between each child.

Synopsis

The Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing and/or dividers between each child.

Syntax

New-UDStack [[-Id] <String>] [-Children] <ScriptBlock> [[-Divider] <ScriptBlock>] [[-Spacing] <Int32>] [[-Direction] <String>] [-FullWidth] [[-AlignItems] <String>] [[-JustifyContent] <String>] [<CommonParameters>]

Description

Stack is concerned with one-dimensional layouts, while Grid handles two-dimensional layouts. The default direction is column which stacks children vertically.

Parameters

-Id

The ID of this component.

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

-Children

The children to stack.

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

-Divider

An optional divider component.

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

-Spacing

The spacing between the items.

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

-Direction

The stack direction. The default direction is column which stacks children vertically. Valid values are row, column, row-reverse, and column-reverse.

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

    -FullWidth [<SwitchParameter>]
        If set, the stack will take up the full width of its container.

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

-AlignItems

Defines the align-items style property. It's applied for all screen sizes. Valid values are flex-start, flex-end, center, stretch, and baseline.

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

-JustifyContent

Defines the justify-content style property. It's applied for all screen sizes. Valid values are flex-start, flex-end, center, space-between, space-around, and space-evenly.

Required?                    false
Position?                    7
Default value
Accept pipeline input?       false
Aliases
Accept 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-UDStack -Content {
PS >    New-UDCard -Text "Card 1" -RemoveMargin
PS >    New-UDCard -Text "Card 2" -RemoveMargin
PS >    New-UDCard -Text "Card 3" -RemoveMargin
PS > } -Spacing 2 -Id 'stack1'

Basic Stack|A basic stack.




-------------------------- EXAMPLE 2 --------------------------

PS >New-UDStack -Content {
PS >    New-UDCard -Text "Card 1" -RemoveMargin
PS >    New-UDCard -Text "Card 2" -RemoveMargin
PS >    New-UDCard -Text "Card 3" -RemoveMargin
PS > } -Spacing 2 -Id 'stack2' -Direction 'column'

Direction|A stack in a column direction.




-------------------------- EXAMPLE 3 --------------------------

PS >New-UDStack -Content {
PS >    New-UDCard -Text "Card 1" -RemoveMargin
PS >    New-UDCard -Text "Card 2" -RemoveMargin
PS >    New-UDCard -Text "Card 3" -RemoveMargin
PS > } -Spacing 2 -Id 'stack3' -Direction 'row-reverse'

Row Reverse|A row reverse stack.




-------------------------- EXAMPLE 4 --------------------------

PS >New-UDStack -Content {
PS >    New-UDCard -Text "Card 1" -RemoveMargin
PS >    New-UDCard -Text "Card 2" -RemoveMargin
PS >    New-UDCard -Text "Card 3" -RemoveMargin
PS > } -Spacing 2 -Id 'stack4' -AlignItems 'center'

Alignment|A center stack.




-------------------------- EXAMPLE 5 --------------------------

PS >New-UDStack -Content {
PS >    New-UDCard -Text "Card 1" -RemoveMargin
PS >    New-UDCard -Text "Card 2" -RemoveMargin
PS >    New-UDCard -Text "Card 3" -RemoveMargin
PS > } -Spacing 2 -Id 'stack5' -Divider {
PS >    New-UDDivider
PS > }

Divider|A stack with a divider.




-------------------------- EXAMPLE 6 --------------------------

PS >New-UDStack -Content {
PS >    New-UDCard -Text "Card 1" -RemoveMargin
PS >    New-UDCard -Text "Card 2" -RemoveMargin
PS >    New-UDCard -Text "Card 3" -RemoveMargin
PS > } -Spacing 2 -Id 'stack6' -AlignItems 'center' -JustifyContent 'space-between'

Justify Content|A stack with justify content.