Card

Le card sono componenti versatili che fungono da contenitori per contenuti e azioni relativi a un singolo argomento.

Utilizzo

Importa il componente:

import 'mdui/components/card.js';

Importa il tipo TypeScript:

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

Esempio:

Card

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

Esempi

Variante

L'attributo variant determina l'aspetto della 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>

Sorgente

Cliccabile

Aggiungi l'attributo clickable per rendere interattiva la card. Questo aggiunge effetti hover e di ripple al clic.

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

Sorgente

Link

Usa l'attributo href per trasformare la card in un link. Gli attributi download, target e rel sono disponibili per le normali funzionalità dei link.

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

Sorgente

Stato Disabilitato

Usa l'attributo disabled per disabilitare la card.

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

Sorgente

API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`variant`	`variant`	`'elevated' \| 'filled' \| 'outlined'`	`'elevated'`
Variante della card. I valori opzionali includono: `elevated`: card con ombra, che offre maggiore separazione visiva dallo sfondo `filled`: card con sfondo pieno, che offre minore separazione visiva dallo sfondo `outlined`: card con bordo, che offre la massima separazione visiva dallo sfondo
`clickable`	`clickable`	`boolean`	`false`
Se cliccabile. Se `true`, la card avrà un effetto al passaggio del mouse e un effetto a ondulazione al clic.
`disabled`	`disabled`	`boolean`	`false`
Se il componente è disabilitato
`href`	`href`	`string`	-
URL di destinazione del collegamento. Se questa proprietà è impostata, il componente viene renderizzato come elemento `<a>` e sarà possibile utilizzare le proprietà relative ai collegamenti.
`download`	`download`	`string`	-
Destinazione del download del collegamento. Nota: questa proprietà è valida solo se è impostato l'attributo `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Modalità di apertura del collegamento. I valori opzionali includono: `_blank`: apre il collegamento in una nuova finestra `_parent`: apre il collegamento nel frame genitore `_self`: predefinita. Apre il collegamento nel frame corrente `_top`: apre il collegamento nell'intera finestra Nota: questa proprietà è valida solo se è impostato l'attributo `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relazione tra il documento corrente e il documento collegato. I valori opzionali includono: `alternate`: versione alternativa del documento corrente `author`: autore del documento o dell'articolo corrente `bookmark`: collegamento permanente al capitolo antenato più vicino `external`: il documento di destinazione non appartiene allo stesso sito del documento corrente `help`: collegamento alla guida di riferimento `license`: il contenuto principale del documento corrente è coperto dalla licenza indicata nel documento di destinazione `me`: il documento corrente rappresenta il proprietario del contenuto collegato `next`: il documento corrente fa parte di una serie e il documento di destinazione è il successivo `nofollow`: l'autore o l'editore del documento corrente non avalla il documento di destinazione `noreferrer`: non include l'intestazione `Referer`. Simile a `noopener` `opener`: se il collegamento ipertestuale apre un contesto di navigazione di primo livello (cioè il valore dell'attributo `target` è `_blank`), crea un contesto di navigazione ausiliario `prev`: il documento corrente fa parte di una serie e il documento di destinazione è il precedente `search`: fornisce un collegamento a una risorsa per la ricerca nel documento corrente e nelle pagine correlate `tag`: associa un tag al documento corrente (identificato dall'indirizzo specificato) Nota: disponibile solo quando è specificato l'attributo `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Se deve ricevere automaticamente il focus al caricamento della pagina
`tabindex`	`tabIndex`	`number`	-
Ordine di tabulazione dell'elemento

Metodi

Nome	Parametri	Restituisce
`click`		`void`
Simula un clic del mouse sull'elemento
`focus`	`options: FocusOptions` (Opzionale)	`void`
Imposta il focus sull'elemento corrente. È possibile passare un oggetto come parametro, le cui proprietà includono: `preventScroll`: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su `true`.
`blur`		`void`
Rimuove il focus dall'elemento corrente

Eventi

Nome
`focus`
Attivato quando si riceve il focus
`blur`
Attivato quando si perde il focus

Slots

Nome
(predefinito)
Contenuto della card

CSS Custom Property

Nome
`--shape-corner`
Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.

Capitolo precedente

ButtonIcon

Capitolo successivo

Checkbox