New-UDStack

Übersicht

Die Stack-Komponente verwaltet das Layout der direkt untergeordneten Elemente entlang der vertikalen oder horizontalen Achse mit optionalem Abstand und/oder Trennlinien zwischen den einzelnen untergeordneten Elementen.

Syntax

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

Beschreibung

Stack befasst sich mit eindimensionalen Layouts, während Grid zweidimensionale Layouts verarbeitet. Die Standardrichtung ist column, wodurch untergeordnete Elemente vertikal gestapelt werden.

Parameter

-Id

Die ID dieser Komponente.

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

-Children

Die zu stapelnden untergeordneten Elemente.

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

-Divider

Eine optionale Trennlinienkomponente.

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

-Spacing

Der Abstand zwischen den Elementen.

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

-Direction

Die Stapelrichtung. Die Standardrichtung ist column, wodurch untergeordnete Elemente vertikal gestapelt werden. Gültige Werte sind row, column, row-reverse und column-reverse.

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

-FullWidth

Wenn festgelegt, nimmt der Stapel die gesamte Breite seines Containers ein.

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

-AlignItems

Definiert die Stileigenschaft align-items. Sie wird für alle Bildschirmgrößen angewendet. Gültige Werte sind flex-start, flex-end, center, stretch und baseline.

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

-JustifyContent

Definiert die Stileigenschaft justify-content. Sie wird für alle Bildschirmgrößen angewendet. Gültige Werte sind flex-start, flex-end, center, space-between, space-around und space-evenly.

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

Allgemeine Parameter

Dieses Cmdlet unterstützt die allgemeinen Parameter: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable und OutVariable. Weitere Informationen finden Sie unter about_CommonParameters.

Ausgaben

Beispiele

Beispiel 1: Einfacher Stapel

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'

Ein einfacher Stapel.

Beispiel 2: Richtung

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'

Ein Stapel in Spaltenrichtung.

Beispiel 3: Zeile umgekehrt

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'

Ein Stapel mit umgekehrter Zeilenrichtung.

Beispiel 4: Ausrichtung

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'

Ein zentrierter Stapel.

Beispiel 5: Trennlinie

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
}

Ein Stapel mit einer Trennlinie.

Beispiel 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'

Ein Stapel mit Justify Content.