New-UDGrid

Synopsis

La grille est un système de grille à 12 points qui peut s'adapter en fonction de la taille de l'écran qui affiche les contrôles.

Syntaxe

New-UDGrid [-Id <String>] [-ExtraSmallSize <Int32>] [-SmallSize <Int32>] [-MediumSize <Int32>] [-LargeSize <Int32>] [-ExtraLargeSize <Int32>] [-Item] [-Children <ScriptBlock>] [-ClassName <String>] [-Direction <String>] [-RowSpacing <Object>] [-ColumnSpacing <Object>] [-JustifyContent <String>] [-AlignItems <String>] [-Version <String>] [-Style <Hashtable>] [<CommonParameters>]

New-UDGrid [-Id <String>] [-Container] [-Spacing <Int32>] [-Children <ScriptBlock>] [-ClassName <String>] [-Direction <String>] [-RowSpacing <Object>] [-ColumnSpacing <Object>] [-JustifyContent <String>] [-AlignItems <String>] [-Version <String>] [-Style <Hashtable>] [<CommonParameters>]

Description

Crée une grille pour disposer les composants. La grille est un système de grille à 12 points qui peut s'adapter en fonction de la taille de l'écran qui affiche les contrôles.

Paramètres

-Id

L'ID du composant. Sa valeur par défaut est un GUID aléatoire.

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

-ExtraSmallSize

La taille (1-12) pour les très petits appareils.

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

-SmallSize

La taille (1-12) pour les petits appareils.

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

-MediumSize

La taille (1-12) pour les appareils moyens.

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

-LargeSize

La taille (1-12) pour les grands appareils.

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

-ExtraLargeSize

La taille (1-12) pour les très grands appareils.

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

-Container

S'il s'agit d'un conteneur. Un conteneur peut être décrit comme une rangée.

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

-Spacing

Espacement entre les éléments.

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

-Item

S'il s'agit d'un élément dans un conteneur.

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

-Children

Composants inclus dans cet élément de grille.

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

-ClassName

Une classe CSS à appliquer à la grille.

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

-Direction

La direction de la grille. Peut être row, column, row-reverse ou column-reverse.

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

-RowSpacing

L'espacement entre les rangées.

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

-ColumnSpacing

L'espacement entre les colonnes.

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

-JustifyContent

L'alignement des éléments de la grille le long de l'axe principal. Peut être flex-start, flex-end, center, space-between, space-around ou space-evenly.

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

-AlignItems

L'alignement des éléments de la grille le long de l'axe transversal. Peut être flex-start, flex-end, center, baseline ou stretch.

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

-Version

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

-Style

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

Paramètres communs

Cette applet de commande prend en charge les paramètres communs : Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable et OutVariable. Pour plus d'information, voir about_CommonParameters.

Sorties

Exemples

Exemple 1 : Grille de base

New-UDGrid -Container -Children {
    New-UDGrid -Item -ExtraSmallSize 4 -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 1"
       }
   }
    New-UDGrid -Item -ExtraSmallSize 4 -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 2"
       }
   }
    New-UDGrid -Item -ExtraSmallSize 4 -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 3"
       }
   }
} -Id "grid1"

Une grille de base avec 3 cartes dans une rangée.

Exemple 2 : Grille responsive

New-UDGrid -Container -Children {
    New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4 -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 1"
       }
   }
    New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4  -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 2"
       }
   }
    New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4 -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 3"
       }
   }
} -Id "grid2"

Une grille responsive avec 3 cartes dans une rangée. Les cartes s'empileront sur les écrans de petits appareils.

Exemple 3 : Espacement de la grille

New-UDDynamic -Id 'grid4' -Content {
   $Spacing = (Get-UDElement -Id 'gridSpacingSelect').value
   New-UDGrid -Container -Children {
     New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4 -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 1"
       }
   }
    New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4  -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 2"
       }
   }
   New-UDGrid -Item -ExtraSmallSize 12 -LargeSize 4 -Children {
       New-UDCard -Title "Card 1" -Content {
           New-UDButton -Text "Button 3"
       }
   }
  } -Spacing $Spacing
}
New-UDSelect -Id 'gridSpacingSelect' -Label Spacing -Option {
  for ($i = 0; $i -lt 10; $i++) {
      New-UDSelectOption -Name $i -Value $i
  }
} -OnChange { Sync-UDElement -Id 'grid4' } -DefaultValue 3

Une grille responsive avec 3 cartes dans une rangée. L'espacement entre les cartes peut être modifié avec la zone de sélection.

Exemple 4 : Rangées et colonnes

New-UDRow -Columns {
    New-UDColumn -Size 4 -Content {
        New-UDCard -Title "Card 1" -Content {}
    }
    New-UDColumn -Size 4 -Content {
        New-UDCard -Title "Card 2" -Content {}
    }
    New-UDColumn -Size 4 -Content {
        New-UDCard -Title "Card 3" -Content {}
    }
} -Id 'grid5'

Les alias row et column peuvent être utilisés pour créer une grille.

Exemple 5 : Alignement

$Session:direction = 'row'
$Session:justifyContent = 'center'
$Session:alignItems = 'center'
New-UDSelect -Label 'direction' -Option {
    New-UDSelectOption -Name 'row'
    New-UDSelectOption -Name 'row-reverse'
    New-UDSelectOption -Name 'column'
    New-UDSelectOption -Name 'column-reverse'
} -DefaultValue 'row' -OnChange {
    $Session:direction = $EventData
    Sync-UDElement -Id 'example'
}
New-UDSelect -Label 'justifyContent' -Option {
    New-UDSelectOption -Name 'flex-start'
    New-UDSelectOption -Name 'center'
    New-UDSelectOption -Name 'flex-end'
    New-UDSelectOption -Name 'space-between'
    New-UDSelectOption -Name 'space-around'
    New-UDSelectOption -Name 'space-evenly'
} -DefaultValue 'center' -OnChange {
    $Session:justifyContent = $EventData
    Sync-UDElement -Id 'example'
}
New-UDSelect -Label 'alignItems' -Option {
    New-UDSelectOption -Name 'flex-start'
    New-UDSelectOption -Name 'center'
    New-UDSelectOption -Name 'flex-end'
    New-UDSelectOption -Name 'stretch'
    New-UDSelectOption -Name 'baseline'
} -DefaultValue 'center' -OnChange {
    $Session:alignItems = $EventData
    Sync-UDElement -Id 'example'
}
New-UDDynamic -Id 'example' -Content {
    New-UDGrid -Container -Children {
        New-UDGrid -Item -Children {
            New-UDPaper -Children { "Cell 1" } -Style @{
                backgroundColor = 'rgb(26, 32, 39)'
                color           = 'white'
            }
        }
        New-UDGrid -Item -Children {
            New-UDPaper -Children { "Cell 2" } -Style @{
                backgroundColor = 'rgb(26, 32, 39)'
                color           = 'white'
            }
        }
        New-UDGrid -Item -Children {
            New-UDPaper -Children { "Cell 3" } -Style @{
                backgroundColor = 'rgb(26, 32, 39)'
                color           = 'white'
            }
        }
    } -Direction $Session:Direction -JustifyContent $Session:justifyContent -AlignItems $Session:alignItems
}

L'alignement des éléments de la grille peut être modifié avec les paramètres direction, justifyContent et alignItems.

[Component("Grid", "Grid", "Creates a new card.")]