New-UDCard

Résumé

Crée une nouvelle carte.

Syntaxe

New-UDCard [-Id <String>] [-ClassName <String>] [-Style <Hashtable>] [-Elevation <Int32>] [-Title <String>] [-TitleAlignment <String>] [-Image <String>] [-Text <String>] [-Raised] [-Sx <Object>] [-Variant <String>] [-OnClick <Endpoint>] [-RemoveMargin] [<CommonParameters>]

New-UDCard [-Id <String>] [-ClassName <String>] [-Header <Object>] [-Body <Object>] [-Expand <Object>] [-Footer <Object>] [-Media <Object>] [-Style <Hashtable>] [-Elevation <Int32>] [-Raised] [-Sx <Object>] [-Variant <String>] [-OnClick <Endpoint>] [-RemoveMargin] [<CommonParameters>]

New-UDCard [-Id <String>] [-ClassName <String>] [-Style <Hashtable>] [-Elevation <Int32>] [-Title <String>] [-TitleAlignment <String>] [-Content <ScriptBlock>] [-Image <String>] [-Raised] [-Avatar <Object>] [-Sx <Object>] [-Variant <String>] [-OnClick <Endpoint>] [-RemoveMargin] [<CommonParameters>]

Description

Crée une nouvelle carte. Les cartes servent à afficher du contenu connexe.

Paramètres

-Id

L'ID du composant. Il s'agit par défaut d'un GUID aléatoire.

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

-ClassName

Une classe CSS à assigner à cette carte.

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

-Header

L'en-tête de cette carte. L'en-tête contient généralement un titre pour la carte. Utilisez New-UDCardHeader pour créer un en-tête.

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

-Body

Le corps de cette carte. Il s'agit du contenu principal de la carte. Utilisez New-UDCardHeader pour créer un corps.

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

-Expand

Le contenu d'expansion de cette carte. Le contenu d'expansion s'affiche lorsque l'utilisateur clique sur le bouton d'expansion. Utilisez New-UDCardExpand pour créer une expansion.

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

-Footer

Le pied de page de cette carte. Le contenu du pied de page contient généralement des actions pertinentes à la carte. Utilisez New-UDCardFooter pour créer un pied de page.

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

-Media

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

-Style

Styles à appliquer à la carte.

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

-Elevation

La quantité d'élévation à donner à la carte. Plus l'élévation est grande, plus la carte semblera flotter au-dessus de la page.

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

-Title

Un titre pour la carte.

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

-TitleAlignment

L'alignement du titre.

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

-Content

Le contenu de la carte.

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

-Image

Une image à afficher dans la carte.

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

-Text

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

-Raised

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

-Avatar

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

-Sx

Style basé sur le thème à appliquer à la carte.

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

-Variant

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

-OnClick

L'action à effectuer lorsque l'on clique sur la carte.

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

-RemoveMargin

Required?                    false
Position?                    named
Default value                False
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'informations, consultez about_CommonParameters.

Sorties

Exemples

Exemple 1 : Carte de base

New-UDCard -Title 'My Card' -Text 'This is my card' -Id 'card1'

Une carte de base avec un titre et du texte.

Exemple 2 : Carte avec image

New-UDCard -Title 'My Card' -Text 'This is my card' -Id 'card2' -Image 'https://picsum.photos/200/300' -Style @{ width = '200px' }

Une carte avec une image.

Exemple 3 : Carte avec élévation

New-UDCard -Title 'My Card' -Text 'This is my card' -Id 'card3' -Elevation 10

Une carte avec une élévation plus élevée.

Exemple 4 : Alignement du titre

New-UDCard -Title 'My Card' -Text 'This is my card' -Id 'card4' -TitleAlignment center

Une carte avec un titre centré.

Exemple 5 : OnClick

New-UDCard -Text 'This is my card' -OnClick {
    Show-UDToast -Message 'You clicked the card'
} -Id 'card5'

Une carte avec un gestionnaire d'événement OnClick.

Exemple 6 : Carte complexe

$Header = New-UDCardHeader -Avatar (New-UDAvatar -Content { "R" } -Sx @{ backgroundColor = "#f44336" }) -Action (New-UDIconButton -Icon (New-UDIcon -Icon 'EllipsisVertical')) -Title 'Shrimp and Chorizo Paella' -SubHeader 'September 14, 2016';
$Media = New-UDCardMedia -Image 'https://mui.com/static/images/cards/paella.jpg'
$Body = New-UDCardBody -Content {
    New-UDTypography -Text ' This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like.' -Sx @{
        color = 'text.secondary'
    } -Variant body2
}
$Footer = New-UDCardFooter -Content {
    New-UDIconButton -Icon (New-UDIcon -Icon 'Heart')
    New-UDIconButton -Icon (New-UDIcon -Icon 'ShareAlt')
}
$Expand = New-UDCardExpand -Content {
    $Description = "Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion, salt and pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil."
    New-UDTypography -Text $Description
}
New-UDCard -Header $Header -Media $Media -Body $Body -Footer $Footer -Expand $Expand -Sx @{
    maxWidth = 345
    border   = '2px solid #f0f2f5'
} -Id 'card5'

Une carte avec toutes les fonctionnalités.

Exemple 7 : Expansion dynamique

$Expand = New-UDCardExpand -Content { "$(Get-Random)" } -Dynamic
New-UDCard -Expand $Expand -Id 'card6'

Une carte avec un contenu extensible dynamique. Le contenu sera mis à jour chaque fois que la carte est développée.