Material Design Lite - Cartes
MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher les différents types de cartes. Le tableau suivant répertorie les classes disponibles et leurs effets.
| N ° Sr. | Nom et description de la classe |
|---|---|
| 1 | mdl-card Identifie l'élément div comme un conteneur de carte MDL, requis sur le div "externe". |
| 2 | mdl-card--border Met une bordure à la section de carte à laquelle elle est appliquée et est utilisée sur les divs "internes". |
| 3 | mdl-shadow--2dp through mdl-shadow--16dp Définit des profondeurs d'ombre variables (2, 3, 4, 6, 8 ou 16) sur la carte et est facultatif, passe sur le div "externe"; si omis, aucune ombre n'est affichée. |
| 4 | mdl-card__title Identifie div comme conteneur de titre de carte et est requis sur le div de titre "intérieur". |
| 5 | mdl-card__title-text Met les caractéristiques de texte appropriées au titre de la carte et est obligatoire sur l'étiquette de tête (H1 - H6) à l'intérieur de la division du titre. |
| 6 | mdl-card__subtitle-text Place les caractéristiques du texte dans un sous-titre de carte et est facultatif. Il doit s'agir d'un enfant de l'élément title. |
| sept | mdl-card__media Identifie div en tant que conteneur de média de carte et est requis sur le div de média "interne". |
| 8 | mdl-card__supporting-text Identifie div en tant que conteneur de texte de corps de carte et attribue des caractéristiques de texte appropriées au corps de texte et est requis sur le corps de texte div "interne"; le texte va directement à l'intérieur du div sans conteneurs intermédiaires. |
| 9 | mdl-card__actions Identifie div en tant que conteneur d'actions de carte et attribue des caractéristiques de texte appropriées au texte d'actions et est requis sur les actions "internes" div; le contenu va directement à l'intérieur du div sans conteneurs intermédiaires. |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation des classes mdl-tooltip pour afficher différents types d'infobulles.
mdl_cards.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family = Material+Icons">
<style>
.wide-card.mdl-card {
width: 512px;
}
.square-card.mdl-card {
width: 256px;
height: 256px;
}
.image-card.mdl-card {
width: 256px;
height: 256px;
background: url('html5-mini-logo.jpg') center / cover;
}
.image-card-image__filename {
color: #000;
font-size: 14px;
font-weight: bold;
}
.event-card.mdl-card {
width: 256px;
height: 256px;
background: #3E4EB8;
}
.event-card.mdl-card__title {
color: #fff;
height: 176px;
}
.event-card > .mdl-card__actions {
border-color: rgba(255, 255, 255, 0.2);
display: flex;
box-sizing:border-box;
align-items: center;
color: #fff;
}
</style>
</head>
<body>
<table>
<tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
<tr>
<td>
<div class = "wide-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</div>
<div class = "mdl-card__supporting-text">
HTML5 is the next major revision of the HTML standard
superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
HTML5 is a standard for structuring and presenting
content on the World Wide Web.
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</a>
</div>
<div class = "mdl-card__menu">
<button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">share</i></button>
</div>
</div>
</td>
<td>
<div class = "square-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</div>
<div class = "mdl-card__supporting-text">
HTML5 is the next major revision of the HTML standard
superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
HTML5 is a standard for structuring and presenting
content on the World Wide Web.
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</a>
</div>
<div class = "mdl-card__menu">
<button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">share</i></button>
</div>
</div>
</td>
</tr>
<tr><td>Image Card</td><td>Event Card</td></tr>
<tr>
<td>
<div class = "image-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title mdl-card--expand"></div>
<div class = "mdl-card__actions">
<span class = "image-card-image__filename">html5-logo.jpg</span>
</div>
</div>
</td>
<td>
<div class = "event-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title mdl-card--expand">
<h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Add to Calendar</a>
<div class = "mdl-layout-spacer"></div>
<i class = "material-icons">event</i>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>Résultat
Vérifiez le résultat.