Tarjeta
Las tarjetas contienen contenidos y acciones sobre un mismo tema.
Introducción
Las tarjetas son superficies que muestran contenidos y acciones sobre un único tema. El componente Tarjeta de U-Ui incluye varios componentes de utilidad complementarios para gestionar diversos casos de uso:
- Tarjeta (
Card): un contenedor a nivel de superficie para agrupar componentes relacionados. - Contenido de la tarjeta (
CardContent): envoltura del contenido de la tarjeta. - Encabezado de la tarjeta (
CardHeader): una envoltura opcional para la cabecera de la Tarjeta. - Tarjeta multimedia (
CardMedia): un contenedor opcional para mostrar imágenes, videos, etc. - Acciones de la tarjeta (
CardActions): una envoltura opcional que agrupa un conjunto de botones. - Área de Acción de la Tarjeta (
CardActionArea): una envoltura opcional que permite a los usuarios interactuar con el área especificada de la Tarjeta.
Palabra del día
adjetivo
Que es valiente, atrevido o arriesgado.
"Con un plan audaz, logró el éxito que tanto deseaba"
Conceptos básicos
import Card from '@u_ui/u-ui/Card';
import CardContent from '@u_ui/u-ui/CardContent';
Tarjeta delineada
Establezca variant="outlined" para mostrar una tarjeta con contorno.
Palabra del día
adjetivo
Que es valiente, atrevido o arriesgado.
"Con un plan audaz, logró el éxito que tanto deseaba"
Interacción compleja
En el escritorio, el contenido de la tarjeta puede expandirse. (Haga clic en el la flecha hacia abajo para ver la receta).
Esta impresionante paella es un plato de fiesta perfecto y una comida divertida para cocinar con tus invitados. Añada 1 taza de guisantes congelados junto con los mejillones si lo desea.
Medios
Ejemplo de tarjeta que utiliza una imagen para reforzar el contenido.
Los lagartos son un extenso grupo de reptiles escamosos, con más de 6.000 especies. especies, repartidas por todos los continentes excepto la Antártida.
Por defecto, utilizamos la combinación de un elemento <div> y una background image para mostrar los medios. Esto puede ser problemático en algunas situaciones, por ejemplo, si quieres mostrar un vídeo o una imagen responsiva. Utiliza la propiedad component para estos casos:
Los lagartos son un extenso grupo de reptiles escamosos, con más de 6.000 especies. especies, repartidas por todos los continentes excepto la Antártida.
Acción principal
A menudo una tarjeta permite a los usuarios interactuar con la totalidad de su superficie para desencadenar su acción principal, ya sea una expansión, un enlace a otra pantalla o algún otro comportamiento. El área de acción de la tarjeta puede especificarse envolviendo su contenido en un componente CardActionArea.
Una tarjeta también puede ofrecer acciones suplementarias que deben estar separadas del área de acción principal para evitar el solapamiento de eventos.
Controles de IU
Las acciones complementarias dentro de la tarjeta se indican explícitamente mediante iconos, texto y controles de interfaz de usuario, situados normalmente en la parte inferior de la tarjeta.
He aquí un ejemplo de tarjeta de control multimedia.
Estilos de estado activo
Para personalizar los estilos de una Tarjeta cuando está en estado activo, puede adjuntar un atributo data-active al componente Área de acción (CardAction) de la Tarjeta y aplicar estilos con el selector &[data-active], como se muestra a continuación:
🎨 Si buscas inspiración, puedes consultar Ejemplos de personalización de MUI Treasury.
API
Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.