CardCard

O Card é um componente versátil que contém conteúdo e ações relacionadas a um único tópico.

Como usar

Importe o componente quando necessário:

import 'mdui/components/card.js';

Importe o tipo TypeScript do componente quando necessário:

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

Exemplo de uso:

Card

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

Exemplos

Forma

Use o atributo variant para definir a forma do card.

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

Fonte

Clicável

Use o atributo clickable para tornar o card clicável. Isso adicionará um efeito de hover e ondulação ao clicar.

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

Fonte

Link

Use o atributo href para transformar o card em um link. Assim, você também pode usar os atributos relacionados a links: download, target, rel.

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

Fonte

Estado desabilitado

Use o atributo disabled para desabilitar o card.

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

Fonte

API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`variant`	`variant`	`'elevated' \| 'filled' \| 'outlined'`	`'elevated'`
Forma do card. Os valores possíveis são: `elevated`: Card com sombra, com maior separação visual do fundo. `filled`: Card com cor de fundo, com menor separação visual do fundo. `outlined`: Card com borda, com maior separação visual do fundo.
`clickable`	`clickable`	`boolean`	`false`
Define se o card é clicável. Quando `true`, o card terá efeitos visuais ao passar o mouse e uma ondulação ao clicar.
`disabled`	`disabled`	`boolean`	`false`
Define se o componente está desabilitado.
`href`	`href`	`string`	-
A URL de destino do link. Ao definir esta propriedade, o componente será renderizado internamente como um elemento `<a>` e poderá usar atributos de link.
`download`	`download`	`string`	-
O nome do arquivo para download. Nota: Esta propriedade só é válida quando o atributo `href` está definido.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Define como o link será aberto. Os valores possíveis são: `_blank`: Abre o link em uma nova janela `_parent`: Abre o link no frame pai `_self`: Padrão. Abre o link no frame atual `_top`: Abre o link na janela inteira Nota: Esta propriedade só é válida quando o atributo `href` está definido.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
A relação entre o documento atual e o documento vinculado. Os valores possíveis são: `alternate`: Versão alternativa do documento atual `author`: Autor do documento atual ou artigo `bookmark`: Link permanente para a seção ancestral mais próxima `external`: O documento referenciado não está no mesmo site do documento atual `help`: Link para documentação de ajuda relacionada `license`: O conteúdo principal do documento atual está coberto pela licença de direitos autorais do arquivo referenciado `me`: O documento atual representa o proprietário do conteúdo vinculado `next`: O documento atual faz parte de uma série, e o documento referenciado é o próximo da série `nofollow`: O autor ou editor do documento atual não endossa o arquivo referenciado `noreferrer`: Não inclui o cabeçalho `Referer`. Tem efeito semelhante ao `noopener` `opener`: Se o hiperlink criar um contexto de navegação de nível superior (ou seja, o valor do atributo `target` for `_blank`), cria um contexto de navegação auxiliar `prev`: O documento atual faz parte de uma série, e o documento referenciado é o anterior da série `search`: Fornece um link para um recurso que pode ser usado para pesquisar o arquivo atual e suas páginas relacionadas `tag`: Fornece uma tag (identificada pelo endereço fornecido) aplicável ao documento atual Nota: Disponível apenas quando o atributo `href` é especificado.
`autofocus`	`autofocus`	`boolean`	`false`
Define se o elemento deve receber foco automaticamente após o carregamento da página.
`tabindex`	`tabIndex`	`number`	-
A ordem do elemento ao navegar com a tecla Tab.

Métodos

Nome	Parâmetros	Retorno
`click`		`void`
Simula um clique do mouse no elemento.
`focus`	`options: FocusOptions` (Opcional)	`void`
Define o foco no elemento atual. Você pode passar um objeto como argumento, com as seguintes propriedades: `preventScroll`: Por padrão, após o elemento receber o foco, a página é rolada para que ele fique visível. Se você não quiser que a página role, defina esta propriedade como `true`.
`blur`		`void`
Remove o foco do elemento atual.

Eventos

Nome
`focus`
Disparado ao receber foco.
`blur`
Disparado ao perder o foco.

Slots

Nome
(padrão)
Conteúdo do card.

Propriedades CSS personalizadas

Nome
`--shape-corner`
Tamanho da borda arredondada do componente. Pode ser um valor em pixels, mas é recomendado usar os design tokens.

Capítulo anterior

ButtonIcon Botão de ícone

Próximo capítulo

Checkbox Checkbox