CardTarjeta

El componente Tarjeta es versátil y se usa para agrupar contenido y acciones relacionadas con un mismo tema.

Uso

Importa el componente cuando lo necesites:

import 'mdui/components/card.js';

Importa el tipo TypeScript cuando lo necesites:

import type { Card } from 'mdui/components/card.js';

Uso:

Tarjeta

<mdui-card style="width: 200px;height: 124px">Tarjeta</mdui-card>

Ejemplos

Forma

El atributo variant define la forma de la tarjeta.

<mdui-card variant="elevated" style="width: 200px;height: 124px"></mdui-card>
<mdui-card variant="filled" style="width: 200px;height: 124px"></mdui-card>
<mdui-card variant="outlined" style="width: 200px;height: 124px"></mdui-card>

Fuente

Clicable

El atributo clickable hace que la tarjeta sea interactiva, con elevación al pasar el cursor y efecto de onda al hacer clic.

<mdui-card clickable style="width: 200px;height: 124px"></mdui-card>

Fuente

Enlace

Con el atributo href, la tarjeta actúa como enlace; también puedes usar download, target y rel.

<mdui-card href="https://www.mdui.org" target="_blank" style="width: 200px;height: 124px"></mdui-card>

Fuente

Estado deshabilitado

El atributo disabled deshabilita la tarjeta.

<mdui-card disabled style="width: 200px;height: 124px"></mdui-card>

Fuente

API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`variant`	`variant`	`'elevated' \| 'filled' \| 'outlined'`	`'elevated'`
Variante de la tarjeta. Los valores posibles son: `elevated`: Tarjeta con sombra, mayor separación visual del fondo `filled`: Tarjeta con color de relleno, menor separación visual del fondo `outlined`: Tarjeta con borde, máxima separación visual del fondo
`clickable`	`clickable`	`boolean`	`false`
Indica si se puede hacer clic. Cuando es `true`, la tarjeta tendrá un efecto hover y un efecto de ondulación al hacer clic.
`disabled`	`disabled`	`boolean`	`false`
Indica si está deshabilitado.
`href`	`href`	`string`	-
URL de destino del enlace. Si se define esta propiedad, el componente se representará como un elemento `<a>` y podrá usar las propiedades de enlace.
`download`	`download`	`string`	-
Nombre del archivo para el enlace de descarga. Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Especifica dónde abrir el enlace. Los valores posibles son: `_blank`: Abrir el enlace en una nueva ventana `_parent`: Abrir el enlace en el marco principal `_self`: Predeterminado. Abrir el enlace en el marco actual `_top`: Abrir el enlace en la ventana completa Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relación entre el documento actual y el documento enlazado. Los valores posibles son: `alternate`: Versión alternativa del documento actual `author`: Autor del documento o artículo actual `bookmark`: Enlace permanente a la sección contenedora más cercana `external`: El documento referenciado no está en el mismo sitio que el documento actual `help`: Enlace a la documentación de ayuda relacionada `license`: El contenido principal del documento actual está cubierto por la licencia de derechos de autor del documento referenciado `me`: El documento actual representa al propietario del contenido enlazado `next`: El documento actual es parte de una serie y el documento referenciado es el siguiente de la serie `nofollow`: El autor o editor del documento actual no respalda el documento referenciado `noreferrer`: No incluye el encabezado `Referer`. Similar al efecto de `noopener` `opener`: Si el hipervínculo crea un contexto de navegación de nivel superior (es decir, el valor del atributo `target` es `_blank`), crea un contexto de navegación auxiliar `prev`: El documento actual es parte de una serie y el documento referenciado es el anterior de la serie `search`: Proporciona un enlace a un recurso que se puede utilizar para buscar el archivo actual y sus páginas relacionadas `tag`: Proporciona una etiqueta adecuada para el documento actual (identificada por la dirección dada) Nota: Disponible solo cuando se especifica el atributo `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
`tabindex`	`tabIndex`	`number`	-
Orden del elemento al navegar con la tecla Tab.

Métodos

Nombre	Parámetros	Valor de retorno
`click`		`void`
Simula un clic del ratón en el elemento.
`focus`	`options: FocusOptions` (Opcional)	`void`
Establece el foco en el elemento actual. Puede pasarse un objeto como parámetro con las siguientes propiedades: `preventScroll`: Por defecto, cuando el elemento recibe el foco, la página se desplaza hasta mostrarlo. Si no quiere que la página se desplace, defina esta propiedad como `true`.
`blur`		`void`
Quita el foco del elemento actual.

Eventos

Nombre
`focus`
Se dispara cuando recibe el foco.
`blur`
Se dispara cuando pierde el foco.

Slots

Nombre
(predeterminado)
Contenido de la tarjeta.

CSS Custom Properties

Nombre
`--shape-corner`
Tamaño de la esquina redondeada del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.

Capítulo anterior

ButtonIcon Botón de icono

Capítulo siguiente

Checkbox Checkbox