Card

Les Cartes sont des conteneurs polyvalents qui regroupent du contenu et des actions liés à un même sujet.

Utilisation

Importez le composant :

import 'mdui/components/card.js';

Importez le type TypeScript correspondant :

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

Exemple d'utilisation :

Carte

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

Exemples

Variante

Utilisez l'attribut variant pour définir la variante de la Carte.

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

Source

Cliquable

Ajoutez l'attribut clickable pour rendre la Carte cliquable, ce qui ajoute un effet de survol et une ondulation au clic.

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

Source

Lien

Ajoutez l'attribut href pour utiliser la Carte comme un lien. Les attributs liés aux liens (download, target, rel) sont alors également disponibles.

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

Source

État désactivé

Ajoutez l'attribut disabled pour désactiver la Carte.

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

Source

API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`variant`	`variant`	`'elevated' \| 'filled' \| 'outlined'`	`'elevated'`
Forme de la carte. Les valeurs possibles incluent : `elevated` : Carte avec ombre, séparation visuelle élevée de l'arrière-plan `filled` : Carte avec couleur de fond, séparation visuelle faible de l'arrière-plan `outlined` : Carte avec bordure, séparation visuelle la plus élevée de l'arrière-plan
`clickable`	`clickable`	`boolean`	`false`
Si la carte est cliquable. Lorsqu'elle est `true`, la carte aura un effet de survol de la souris et un effet d'ondulation au clic.
`disabled`	`disabled`	`boolean`	`false`
Si le composant est désactivé
`href`	`href`	`string`	-
URL cible du lien. Si cette propriété est définie, le composant sera rendu en tant qu'élément `<a>` et pourra utiliser les attributs liés aux liens.
`download`	`download`	`string`	-
Nom du fichier à télécharger. Remarque : Cette propriété ne s'applique que si l'attribut `href` est défini.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Cible d'ouverture du lien. Les valeurs possibles incluent : `_blank` : Ouvre le lien dans une nouvelle fenêtre `_parent` : Ouvre le lien dans le contexte parent `_self` : Par défaut. Ouvre le lien dans le contexte courant `_top` : Ouvre le lien dans toute la fenêtre Remarque : Cette propriété ne s'applique que si l'attribut `href` est défini.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relation entre le document actuel et le document lié. Les valeurs possibles incluent : `alternate` : Version alternative du document actuel `author` : Auteur du document actuel ou de l'article `bookmark` : Lien permanent vers la section ancêtre la plus proche `external` : Le document référencé n'est pas sur le même site que le document actuel `help` : Lien vers un document d'aide associé `license` : Le contenu principal du document actuel est couvert par la licence de droits d'auteur du fichier référencé `me` : Le document actuel représente le propriétaire du contenu lié `next` : Le document actuel fait partie d'une série, le document référencé est le suivant dans la série `nofollow` : L'auteur ou l'éditeur du document actuel n'approuve pas le fichier référencé `noreferrer` : N'inclut pas l'en-tête `Referer`. Effet similaire à `noopener` `opener` : Si l'hyperlien crée un contexte de navigation de premier niveau (c'est-à-dire que la valeur de l'attribut `target` est `_blank`), crée un contexte de navigation auxiliaire `prev` : Le document actuel fait partie d'une série, le document référencé est le précédent dans la série `search` : Fournit un lien vers une ressource pouvant être utilisée pour rechercher le fichier actuel et ses pages associées `tag` : Fournit une balise (identifiée par l'adresse donnée) applicable au document actuel Remarque : Disponible uniquement lorsque l'attribut `href` est spécifié.
`autofocus`	`autofocus`	`boolean`	`false`
Si le focus doit être automatiquement obtenu après le chargement de la page
`tabindex`	`tabIndex`	`number`	-
Ordre de l'élément lors de la navigation au clavier avec la touche Tab

Méthodes

Nom	Paramètres	Valeur de retour
`click`		`void`
Simule un clic sur l'élément
`focus`	`options: FocusOptions` (Optionnel)	`void`
Place le focus sur l'élément. Vous pouvez passer un objet en paramètre, dont les propriétés incluent : `preventScroll` : Par défaut, après la prise de focus, la page défile pour amener l'élément à l'écran. Si vous ne souhaitez pas que la page défile, vous pouvez définir cette propriété sur `true`.
`blur`		`void`
Retire le focus de l'élément

Événements

Nom
`focus`
Se déclenche lorsque l'élément obtient le focus
`blur`
Se déclenche lorsque l'élément perd le focus

Slots

Nom
Défaut
Contenu de la carte

Propriétés CSS personnalisées

Nom
`--shape-corner`
Taille des coins arrondis du composant. Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.

Chapitre précédent

ButtonIcon

Chapitre suivant

Checkbox