New-UDCard

Sinopsis

Crea una nueva tarjeta.

Sintaxis

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

Descripción

Crea una nueva tarjeta. Las tarjetas se utilizan para mostrar contenido relacionado.

Parámetros

-Id

El ID del componente. De forma predeterminada, es un GUID aleatorio.

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

-ClassName

Una clase CSS que asignar a esta tarjeta.

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

-Header

El encabezado de esta tarjeta. El encabezado suele contener un título para la tarjeta. Utilice New-UDCardHeader para crear un encabezado.

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

-Body

El cuerpo de esta tarjeta. Es el contenido principal de la tarjeta. Utilice New-UDCardHeader para crear un cuerpo.

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

-Expand

El contenido de expansión de esta tarjeta. El contenido de expansión se muestra cuando el usuario hace clic en el botón de expansión. Utilice New-UDCardExpand para crear una expansión.

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

-Footer

El pie de página de esta tarjeta. El contenido del pie de página suele contener acciones relevantes para la tarjeta. Utilice New-UDCardFooter para crear un pie de página.

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

Estilos que aplicar a la tarjeta.

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

-Elevation

La cantidad de elevación que se aplica a la tarjeta. Cuanta más elevación, más parecerá que la tarjeta flota sobre la página.

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

-Title

Un título para la tarjeta.

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

-TitleAlignment

La alineación del título.

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

-Content

El contenido de la tarjeta.

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

-Image

Una imagen que mostrar en la tarjeta.

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

Estilo basado en el tema que aplicar a la tarjeta.

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

La acción que se ejecuta cuando se hace clic en la tarjeta.

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

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: tarjeta básica

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

Una tarjeta básica con un título y texto.

Ejemplo 2: tarjeta con imagen

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

Una tarjeta con una imagen.

Ejemplo 3: tarjeta con elevación

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

Una tarjeta con una elevación mayor.

Ejemplo 4: alineación del título

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

Una tarjeta con un título centrado.

Ejemplo 5: OnClick

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

Una tarjeta con un controlador de eventos OnClick.

Ejemplo 6: tarjeta compleja

$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 tarjeta con todas las funciones.

Ejemplo 7: expansión dinámica

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

Una tarjeta con contenido expandible dinámico. El contenido se actualizará cada vez que se expanda la tarjeta.