New-UDStack

Sinopsis

El componente Stack gestiona la disposición de los hijos inmediatos a lo largo del eje vertical u horizontal con espaciado y/o divisores opcionales entre cada hijo.

Sintaxis

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

Descripción

Stack se ocupa de las disposiciones unidimensionales, mientras que Grid gestiona las disposiciones bidimensionales. La dirección predeterminada es column, que apila los hijos verticalmente.

Parámetros

-Id

El ID de este componente.

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

-Children

Los hijos que se van a apilar.

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

-Divider

Un componente divisor opcional.

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

-Spacing

El espaciado entre los elementos.

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

-Direction

La dirección de la pila. La dirección predeterminada es column, que apila los hijos verticalmente. Los valores válidos son row, column, row-reverse y column-reverse.

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

-FullWidth

Si se establece, la pila ocupará todo el ancho de su contenedor.

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

-AlignItems

Define la propiedad de estilo align-items. Se aplica a todos los tamaños de pantalla. Los valores válidos son flex-start, flex-end, center, stretch y baseline.

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

-JustifyContent

Define la propiedad de estilo justify-content. Se aplica a todos los tamaños de pantalla. Los valores válidos son flex-start, flex-end, center, space-between, space-around y space-evenly.

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

Parámetros comunes

Este cmdlet admite los parámetros comunes: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable y OutVariable. Para obtener más información, consulte about_CommonParameters.

Salidas

Ejemplos

Ejemplo 1: pila básica

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'

Una pila básica.

Ejemplo 2: dirección

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'

Una pila en dirección de columna.

Ejemplo 3: fila invertida

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'

Una pila de fila invertida.

Ejemplo 4: alineación

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'

Una pila centrada.

Ejemplo 5: divisor

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
}

Una pila con un divisor.

Ejemplo 6: justificar contenido

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'

Una pila con contenido justificado.