Saltearse al contenido

ElevatedCard

Material 3
Imagen del componente OutlinedButton - Material

Las tarjetas elevadas contienen contenidos y acciones que relacionan información sobre un tema. Tienen una sombra que las separa más del fondo que las tarjetas con relleno, pero menos que las tarjetas con contorno.

Implementación

Defenición del componente

Terminal window
@Composable
fun ElevatedCard(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
shape: Shape = CardDefaults.elevatedShape,
colors: CardColors = CardDefaults.elevatedCardColors(),
elevation: CardElevation = CardDefaults.elevatedCardElevation(),
interactionSource: MutableInteractionSource? = null,
content: @Composable ColumnScope.() -> Unit
)
AtributoDescripción
onClickcuando se hace clic en esta tarjeta
modifierel [Modificador] que se aplicará a esta tarjeta
enabledcontrola el estado activado de esta tarjeta. Cuando es falso, este componente no responderá a la entrada del usuario, y aparecerá visualmente desactivado y deshabilitado para los servicios de accesibilidad.
shapedefine la forma del contenedor y la sombra de esta tarjeta (cuando se utiliza [elevación])
colors[CardColors] que se utilizará para resolver el color o colores utilizados para esta tarjeta en diferentes estados. Véase [CardDefaults.elevatedCardElevation].
elevation[CardElevation] utilizado para resolver la elevación de esta tarjeta en diferentes estados. Esto controla el tamaño de la sombra debajo de la tarjeta. Además, cuando el color del contenedor es [ColorScheme.surface], controla la cantidad de color primario aplicado como superposición. Véase también: [Superficie].
interactionSourceuna [MutableInteractionSource] opcional para observar y emitir [Interaction]s para esta tarjeta. Puede utilizarlo para cambiar la apariencia de la tarjeta o previsualizarla en diferentes estados. Tenga en cuenta que si se proporciona null, las interacciones seguirán ocurriendo internamente.

Ejemplo

Imagen del componente ExtendedFloatingActionButton - Material
Terminal window
@Composable
fun ElevatedCardExample() {
ElevatedCard(
elevation = CardDefaults.cardElevation(
defaultElevation = 6.dp
),
modifier = Modifier
.size(width = 240.dp, height = 100.dp)
) {
Text(
text = "Elevated",
modifier = Modifier
.padding(16.dp),
textAlign = TextAlign.Center,
)
}
}