New-UDStack

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

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

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 Stack

New-UDStack -Content {
   New-UDCard -Text "Card 1" -RemoveMargin
   New-UDCard -Text "Card 2" -RemoveMargin
   New-UDCard -Text "Card 3" -RemoveMargin
} -Spacing 2 -Id 'stack1'

A basic stack.

Example 2: Direction

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

A stack in a column direction.

Example 3: Row Reverse

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

A row reverse stack.

Example 4: Alignment

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

A center stack.

Example 5: Divider

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

A stack with a divider.

Example 6: Justify Content

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

A stack with justify content.