New-UDCard

Sintesi

Crea una nuova card.

Sintassi

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>]

Descrizione

Crea una nuova card. Le card vengono utilizzate per visualizzare contenuti correlati.

Parametri

-Id

L'ID del componente. Per impostazione predefinita è un GUID casuale.

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

-ClassName

Una classe CSS da assegnare a questa card.

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

-Header

L'intestazione di questa card. L'intestazione contiene in genere un titolo per la card. Utilizzi New-UDCardHeader per creare un'intestazione.

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

-Body

Il corpo di questa card. Rappresenta il contenuto principale della card. Utilizzi New-UDCardHeader per creare un corpo.

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

-Expand

Il contenuto espandibile di questa card. Il contenuto espandibile viene mostrato quando l'utente fa clic sul pulsante di espansione. Utilizzi New-UDCardExpand per creare un'espansione.

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

-Footer

Il piè di pagina di questa card. I contenuti del piè di pagina in genere includono azioni pertinenti alla card. Utilizzi New-UDCardFooter per creare un piè di pagina.

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

Stili da applicare alla card.

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

-Elevation

La quantità di elevazione da assegnare alla card. Maggiore è l'elevazione, più la card apparirà sollevata rispetto alla pagina.

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

-Title

Un titolo per la card.

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

-TitleAlignment

L'allineamento del titolo.

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

-Content

Il contenuto della card.

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

-Image

Un'immagine da mostrare nella card.

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

Stile basato sul tema da applicare alla card.

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'azione da eseguire quando si fa clic sulla card.

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

Parametri comuni

Questo cmdlet supporta i parametri comuni: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable e OutVariable. Per maggiori informazioni, consulti about_CommonParameters.

Output

Esempi

Esempio 1: card di base

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

Una card di base con un titolo e del testo.

Esempio 2: card con immagine

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

Una card con un'immagine.

Esempio 3: card con elevazione

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

Una card con un'elevazione maggiore.

Esempio 4: allineamento del titolo

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

Una card con un titolo centrato.

Esempio 5: OnClick

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

Una card con un gestore di eventi OnClick.

Esempio 6: card complessa

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

Una card con tutte le funzionalità.

Esempio 7: espansione dinamica

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

Una card con contenuto espandibile dinamico. Il contenuto verrà aggiornato ogni volta che la card viene espansa.