Material Design Lite - Guide rapide
Qu'est-ce que Material Design Lite?
Material Design Lite (MDL est une bibliothèque de composants d'interface utilisateur créée avec CSS, JavaScript et HTML. Les composants d'interface utilisateur MDL aident à créer des pages Web et des applications Web attrayantes, cohérentes et fonctionnelles tout en respectant les principes de conception Web modernes tels que la portabilité du navigateur et l'indépendance des appareils. et une dégradation gracieuse.
Voici les principales caractéristiques de Material Design Lite -
Conception réactive intégrée.
CSS standard avec une empreinte minimale.
Inclut de nouvelles versions de contrôles d'interface utilisateur courants tels que des boutons, des cases à cocher et des champs de texte qui sont adaptés pour suivre les concepts de Material Design.
Comprend des fonctionnalités améliorées et spécialisées telles que des cartes, des dispositions de colonnes, des curseurs, des flèches, des onglets, la typographie, etc.
Peut être utilisé avec ou sans bibliothèque ou environnement de développement.
Cross-browser, et peut être utilisé pour créer des composants Web réutilisables.
Conception réactive
Material Design Lite a une conception réactive intégrée afin que le site Web créé à l'aide de Material Design Lite se redessine en fonction de la taille de l'appareil.
Les classes Material Design Lite sont créées de manière à ce que le site Web puisse s'adapter à n'importe quelle taille d'écran.
Les sites Web créés à l'aide de Material Design Lite sont entièrement compatibles avec les PC, les tablettes et les appareils mobiles.
CSS standard
Material Design Lite utilise uniquement le CSS standard et il est très facile à apprendre.
Il n'y a aucune dépendance sur une bibliothèque JavaScript externe telle que jQuery.
ExtensibleMaterial Design Lite est de par sa conception très minimal et plat.
Il est conçu en tenant compte du fait qu'il est beaucoup plus facile d'ajouter de nouvelles règles CSS que d'écraser les règles CSS existantes.
Il prend en charge les ombres et les couleurs vives.
Les couleurs et les nuances restent uniformes sur diverses plates-formes et appareils.
Et le plus important de tous, MDL est totalement gratuit.
Il existe deux façons d'utiliser Material Design Lite -
Local Installation - Vous pouvez télécharger les fichiers. {Primary} - {accent} .min.css et material.min.js sur votre ordinateur local et les inclure dans votre code HTML.
CDN Based Version - Vous pouvez inclure les fichiers material. {Primary} - {accent} .min.css et material.min.js dans votre code HTML directement à partir du réseau de diffusion de contenu (CDN).
Installation locale
Suivez ces étapes pour l'installation de MDL -
Aller à https://www.getmdl.io/started/index.html pour télécharger la dernière version disponible.
Ensuite, mettez le fichier téléchargé material.min.js fichier dans un répertoire de votre site Web, par exemple / js et material.min.css dans / css.
Exemple
Vous pouvez maintenant inclure le fichier css et js dans votre fichier HTML comme suit -
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "material.min.css">
<script src = "material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">Features</a>
<a class = "mdl-navigation__link" href = "">About Us</a>
<a class = "mdl-navigation__link" href = "">Log Out</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>Le programme ci-dessus générera le résultat suivant -
Version basée sur CDN
Vous pouvez inclure les fichiers js et css dans votre code HTML directement à partir du réseau de diffusion de contenu (CDN). storage.googleapis.com fournit du contenu pour la dernière version.
Nous utilisons la version CDN storage.googleapis.com de la bibliothèque tout au long de ce didacticiel.
Exemple
Maintenant, réécrivons l'exemple ci-dessus en utilisant material.css et material.js du CDN Google.
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">Features</a>
<a class = "mdl-navigation__link" href = "">About Us</a>
<a class = "mdl-navigation__link" href = "">Log Out</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>Le programme ci-dessus générera le résultat suivant -
Dans ce chapitre, nous aborderons les différentes dispositions de Material Design Lite. HTML5 contient les éléments de conteneur suivants -
<div> - Fournit un conteneur générique au contenu HTML.
<header> - Représente la section d'en-tête.
<footer> - Représente la section de pied de page.
<article> - Représente des articles.
<section> - Fournit un conteneur générique pour différents types de sections.
MDL fournit diverses classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies aux conteneurs. Le tableau suivant répertorie les classes disponibles et leurs effets.
| Sr.No. | Nom et description de la classe |
|---|---|
| 1 | mdl-layout Identifie un conteneur en tant que composant MDL. Requis sur l'élément de conteneur extérieur. |
| 2 | mdl-js-layout Ajoute un comportement MDL de base à la mise en page. Requis sur l'élément de conteneur extérieur. |
| 3 | mdl-layout__header Identifie le conteneur en tant que composant MDL. Obligatoire sur l'élément d'en-tête. |
| 4 | mdl-layout-icon Utilisé pour ajouter une icône d'application. Obtient remplacé par l'icône de menu si les deux sont visibles. Élément d'icône facultatif. |
| 5 | mdl-layout__header-row Identifie le conteneur en tant que ligne d'en-tête MDL. Obligatoire sur le conteneur de contenu d'en-tête. |
| 6 | mdl-layout__title Identifie le texte du titre de la mise en page. Obligatoire sur le conteneur de titre de mise en page. |
| sept | mdl-layout-spacer Utilisé pour aligner des éléments à l'intérieur d'un en-tête ou d'un tiroir. Il pousse pour remplir l'espace restant. Couramment utilisé pour aligner des éléments vers la droite. Facultatif sur div suivant le titre de la mise en page. |
| 8 | mdl-navigation Identifie le conteneur en tant que groupe de navigation MDL. Requis sur l'élément de navigation. |
| 9 | mdl-navigation__link Identifie l'ancre comme lien de navigation MDL. Requis sur les éléments d'ancrage de la tête et / ou du tiroir. |
| dix | mdl-layout__drawer Identifie le conteneur comme tiroir de présentation MDL. Requis sur l'élément de conteneur de tiroir. |
| 11 | mdl-layout__content Identifie le conteneur en tant que contenu de mise en page MDL. Requis sur l'élément principal. |
| 12 | mdl-layout__header--scroll Fait défiler l'en-tête avec le contenu. Facultatif sur l'élément d'en-tête. |
| 13 | mdl-layout--fixed-drawer Rend le tiroir toujours visible et ouvert sur de plus grands écrans. Facultatif sur l'élément de conteneur extérieur et non sur l'élément de conteneur de tiroir. |
| 14 | mdl-layout--fixed-header Rend l'en-tête toujours visible, même sur de petits écrans. Facultatif sur l'élément de conteneur extérieur. |
| 15 | mdl-layout--large-screen-only Cache un élément sur des écrans plus petits. Facultatif sur tout descendant de mdl-layout. |
| 16 | mdl-layout--small-screen-only Cache un élément sur des écrans plus grands. Facultatif sur tout descendant de mdl-layout. |
| 17 | mdl-layout__header--waterfall Permet un effet "cascade" avec plusieurs lignes d'en-tête. Facultatif sur l'élément d'en-tête. |
| 18 | mdl-layout__header--transparent Rend l'en-tête transparent et dessine au-dessus de l'arrière-plan de la disposition. Facultatif sur l'élément d'en-tête. |
| 19 | mdl-layout__header--seamed Utilise un en-tête sans ombre. Facultatif sur l'élément d'en-tête. |
| 20 | mdl-layout__tab-bar Identifie le conteneur en tant que barre d'onglets MDL. Obligatoire sur l'élément de conteneur à l'intérieur de l'en-tête (mise en page à onglets). |
| 21 | mdl-layout__tab Identifie l'ancre comme lien d'onglet MDL. Obligatoire sur les éléments d'ancrage de la barre d'onglets. |
| 22 | is-active Identifie l'onglet comme onglet actif par défaut. Facultatif sur l'élément d'ancrage de la barre d'onglets et l'élément de section d'onglet associé. |
| 23 | mdl-layout__tab-panel Identifie le conteneur comme panneau de contenu de l'onglet. Obligatoire sur les éléments de section d'onglets. |
| 24 | mdl-layout--fixed-tabs Utilise des onglets fixes au lieu des onglets déroulants par défaut. Facultatif sur l'élément de conteneur externe, pas sur le conteneur à l'intérieur de l'en-tête. |
Les exemples suivants illustrent l'utilisation de la classe mdl-layout pour styliser divers conteneurs.
Tiroir fixe
Pour créer un modèle avec un tiroir fixe mais sans en-tête, les classes MDL suivantes sont utilisées.
mdl-layout - Identifie un div comme un composant MDL.
mdl-js-layout - Ajoute un comportement MDL de base à la division externe.
mdl-layout--fixed-drawer - Rend le tiroir toujours visible et ouvert dans les grands écrans.
mdl-layout__drawer - Identifie div comme tiroir de mise en page MDL.
mdl-layout-title - Identifie le texte du titre de la mise en page.
mdl-navigation - Identifie div comme groupe de navigation MDL.
mdl-navigation__link - Identifie l'ancre comme lien de navigation MDL.
mdl-layout__content - Identifie div comme contenu de mise en page MDL.
mdl_fixeddrawer.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- No header, and the drawer stays open on larger screens (fixed drawer).-->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>Résultat
Vérifiez le résultat.
En-tête fixe
Pour créer un modèle avec un en-tête fixe, une classe MDL supplémentaire est utilisée.
mdl-layout--fixed-header - Rend l'en-tête toujours visible, même sur les petits écrans.
mdl_fixedheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__link" href = ""
style = "color:gray">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content">Hello World!</div>
</main>
</div>
</body>
</html>Résultat
Vérifiez le résultat.
En-tête et tiroir fixes
Pour créer un modèle avec un en-tête fixe et un tiroir fixe, les classes MDL supplémentaires suivantes sont utilisées.
mdl-layout--fixed-drawer - Rend le tiroir toujours visible et ouvert dans les grands écrans.
mdl-layout--fixed-header - Rend l'en-tête toujours visible, même sur les petits écrans.
mdl_fixedheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__link" href = ""
style = "color:gray">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content">Hello World!</div>
</main>
</div>
</body>
</html>Résultat
Vérifiez le résultat.
En-tête défilant
Pour créer un modèle avec un en-tête défilant, les classes MDL suivantes sont utilisées.
mdl-layout--header--scroll - Fait défiler l'en-tête avec le contenu.
mdl_scrollingheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Uses a header that scrolls with the text, rather than
staying locked at the top -->
<div class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--scroll">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>Résultat
Vérifiez le résultat.
En-tête de contrat
Pour créer un modèle avec un en-tête qui se contracte lorsque la page défile vers le bas, la classe MDL suivante est utilisée.
mdl-layout__header--waterfall - Permet un effet "cascade" avec plusieurs lignes d'en-tête.
mdl_waterfallheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
</div>
<!-- Bottom row, not visible on scroll -->
<div class = "mdl-layout__header-row">
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>Résultat
Vérifiez le résultat.
En-tête fixe avec onglets déroulants
Pour créer un modèle avec un en-tête comportant des onglets déroulants, les classes MDL suivantes sont utilisées.
mdl-layout__tab-bar - Identifie le conteneur comme une barre d'onglets MDL.
mdl-layout__tab - Identifie l'ancre en tant que lien d'onglet MDL.
mdl-layout__tab-panel - Identifie le conteneur en tant que panneau de contenu d'onglet.
mdl_scrollabletabheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
<a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
<a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
<a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<div class = "page-content">Tab 1 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<div class = "page-content">Tab 2 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<div class = "page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>Résultat
Vérifiez le résultat.
En-tête fixe avec onglets fixes
Pour créer un modèle avec un en-tête comportant des onglets fixes, la classe MDL supplémentaire suivante est utilisée.
mdl-layout--fixed-tabs - Utilise des onglets fixes au lieu des onglets déroulants par défaut.
mdl_fixedtabheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
<a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
<a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
<a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<div class = "page-content">Tab 1 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<div class = "page-content">Tab 2 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<div class = "page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>Résultat
Vérifiez le résultat.
La grille Material Design Lite (MDL) est un composant permettant de disposer du contenu pour différentes tailles d'écran. La grille MDL est définie et entourée par un élément container / div. Une grille comporte 12 colonnes dans l'écran de la taille du bureau, 8 dans l'écran de la taille de la tablette et 4 dans l'écran de la taille du téléphone, où chaque taille a des marges et des gouttières prédéfinies. Les cellules sont disposées de manière séquentielle dans une ligne, dans l'ordre dans lequel elles sont définies, avec les exceptions suivantes:
Si une cellule de la grille n'est pas adaptée à la ligne dans l'une des tailles d'écran, elle passe dans la ligne suivante.
Si une cellule de la grille a une taille de colonne spécifiée égale ou supérieure au nombre de colonnes pour la taille d'écran, elle occupe la ligne entière.
MDL fournit diverses classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies à la grille. Le tableau suivant répertorie les classes disponibles et leurs effets.
| Sr.No. | Nom et description de la classe |
|---|---|
| 1 | mdl-layout Identifie un conteneur en tant que composant MDL. Requis sur l'élément de conteneur extérieur. |
| 2 | mdl-grid Identifie un conteneur en tant que composant de grille MDL. Obligatoire sur l'élément div "externe". |
| 3 | mdl-cell Identifie un conteneur en tant que cellule MDL. Requis sur les éléments div "internes". |
| 4 | mdl-grid--no-spacing Met à jour les cellules de la grille pour ne pas avoir de marge entre elles. Facultatif pour le conteneur de grille. |
| 5 | mdl-cell--N-col Cela aide à mettre la taille de colonne de la cellule à N, N est compris entre 1 et 12, la valeur par défaut est 4; facultatif pour les éléments div "internes". |
| 6 | mdl-cell--N-col-desktop Cela permet de mettre la taille de colonne de la cellule à N en mode bureau uniquement, N étant compris entre 1 et 12; facultatif pour les éléments div "internes". |
| sept | mdl-cell--N-col-tablet Cela permet de mettre la taille de colonne de la cellule à N en mode tablette uniquement, N étant compris entre 1 et 8; facultatif pour les éléments div "internes". |
| 8 | mdl-cell--N-col-phone Cela permet de mettre la taille de la colonne de la cellule sur N en mode téléphone uniquement, N étant compris entre 1 et 4; facultatif pour les éléments div "internes". |
| 9 | mdl-cell--hide-desktop Masque la cellule en mode bureau. Facultatif pour les éléments div "internes". |
| dix | mdl-cell--hide-tablet Masque la cellule en mode tablette. Facultatif pour les éléments div "internes". |
| 11 | mdl-cell--hide-phone Masque la cellule en mode téléphone. Facultatif pour les éléments div "internes". |
| 12 | mdl-cell--stretch Étire la cellule verticalement pour remplir le parent, par défaut; facultatif pour les éléments div "internes". |
| 13 | mdl-cell--top Aligne la cellule sur le haut du parent. Facultatif pour les éléments div "internes". |
| 14 | mdl-cell--middle Aligne la cellule au milieu du parent. Facultatif pour les éléments div "internes". |
| 15 | mdl-cell--bottom Aligne la cellule sur le bas du parent. Facultatif pour les éléments div "internes". |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation de la classe mdl-grid pour mettre en page le contenu sur différents écrans.
Les classes MDL données ci-dessous seront utilisées dans cet exemple.
mdl-layout - Identifie un div comme un composant MDL.
mdl-js-layout - Ajoute un comportement MDL de base à la division externe.
mdl-layout--fixed-header - Rend l'en-tête toujours visible, même sur les petits écrans.
mdl-layout__header-row - Identifie le conteneur comme ligne d'en-tête MDL.
mdl-layout__drawer - Identifie div comme tiroir de mise en page MDL.
mdl-layout-title - Identifie le texte du titre de la mise en page.
mdl-navigation - Identifie div comme groupe de navigation MDL.
mdl-navigation__link - Identifie l'ancre comme lien de navigation MDL.
mdl-layout__content - Identifie div comme contenu de mise en page MDL.
mdl-grid - Identifie div comme un composant de grille MDL.
mdl-cell - Identifie div comme cellule MDL.
mdl-cell--1-col - Définit la taille de la colonne de la cellule sur celle d'une cellule sur 12 dans la taille de l'écran du bureau.
mdl-cell--2-col - Définit la taille de la colonne de la cellule sur celle de 2 cellules sur 12 dans la taille de l'écran du bureau.
mdl-cell--4-col - Définit la taille de la colonne de la cellule sur celle de 4 cellules sur 12 dans la taille de l'écran du bureau.
mdl-cell--6-col - Définit la taille de la colonne de la cellule sur celle de 6 cellules sur 12 dans la taille de l'écran du bureau.
mdl-cell--4-col-phone - Définit la taille de la colonne de la cellule sur celle de 4 cellules sur 4 dans la taille de l'écran du téléphone.
mdl-cell--6-col-tablet - Définit la taille de la colonne de la cellule sur celle de 6 cellules sur 8 dans la taille de l'écran de la tablette.
mdl-cell--8-col-tablet - Définit la taille de la colonne de la cellule sur celle de 8 cellules sur 8 dans la taille de l'écran de la tablette.
mdl_grid.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.graybox {
background-color:#ddd;
}
</style>
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Grid</span>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--1-col graybox">1</div>
<div class = "mdl-cell mdl-cell--1-col graybox">2</div>
<div class = "mdl-cell mdl-cell--1-col graybox">3</div>
<div class = "mdl-cell mdl-cell--1-col graybox">4</div>
<div class = "mdl-cell mdl-cell--1-col graybox">5</div>
<div class = "mdl-cell mdl-cell--1-col graybox">6</div>
<div class = "mdl-cell mdl-cell--1-col graybox">7</div>
<div class = "mdl-cell mdl-cell--1-col graybox">8</div>
<div class = "mdl-cell mdl-cell--1-col graybox">9</div>
<div class = "mdl-cell mdl-cell--1-col graybox">10</div>
<div class = "mdl-cell mdl-cell--1-col graybox">11</div>
<div class = "mdl-cell mdl-cell--1-col graybox">12</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--4-col graybox">1</div>
<div class = "mdl-cell mdl-cell--4-col graybox">2</div>
<div class = "mdl-cell mdl-cell--4-col graybox">3</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col graybox">6</div>
<div class = "mdl-cell mdl-cell--4-col graybox">4</div>
<div class = "mdl-cell mdl-cell--2-col graybox">2</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
6 on desktop, 8 on tablet</div>
<div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
4 on desktop, 6 on tablet</div>
<div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
2 on desktop, 4 on phone</div>
</div>
</main>
</div>
</body>
</html>Résultat
Vérifiez le résultat.
Le composant d'onglet Material Design Lite (MDL) est un composant d'interface utilisateur qui permet d'afficher plusieurs écrans dans un seul espace de manière exclusive.
MDL fournit diverses classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies aux onglets. Le tableau suivant mentionne les classes disponibles et leurs effets.
| Sr.No. | Nom et description de la classe |
|---|---|
| 1 | mdl-layout Identifie un conteneur en tant que composant MDL. Requis sur l'élément de conteneur extérieur. |
| 2 | mdl-tabs Identifie un conteneur d'onglets en tant que composant MDL. Obligatoire sur l'élément div "externe". |
| 3 | mdl-js-tabs Définit le comportement MDL de base du conteneur d'onglets. Obligatoire sur l'élément div "externe". |
| 4 | mdl-js-ripple-effect Ajoute un effet de clic ondulé aux liens d'onglet. Optionnel; passe sur l'élément div "externe". |
| 5 | mdl-tabs__tab-bar Identifie un conteneur en tant que barre de liens d'onglets MDL. Requis sur le premier élément div "interne". |
| 6 | mdl-tabs__tab Identifie une ancre (lien) comme activateur d'onglet MDL. Obligatoire sur tous les liens du premier élément div "interne". |
| sept | is-active Identifie un onglet comme onglet d'affichage par défaut. Obligatoire sur un (et un seul) des éléments div (tab) "intérieurs". |
| 8 | mdl-tabs__panel Identifie un conteneur comme contenu d'onglet. Obligatoire sur chacun des éléments div (tab) "intérieurs". |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation de la classe mdl-tab pour mettre en page le contenu sur divers onglets.
Les classes MDL données ci-dessous seront utilisées dans cet exemple -
mdl-layout - Identifie un div comme un composant MDL.
mdl-js-layout - Ajoute un comportement MDL de base à la division externe.
mdl-layout--fixed-header - Rend l'en-tête toujours visible, même sur les petits écrans.
mdl-layout__header-row - Identifie le conteneur comme ligne d'en-tête MDL.
mdl-layout-title - Identifie le texte du titre de la mise en page.
mdl-layout__content - Identifie div comme contenu de mise en page MDL.
mdl-tabs - Identifie un conteneur d'onglets en tant que composant MDL.
mdl-js-tabs - Définit le comportement MDL de base pour le conteneur d'onglets.
mdl-tabs__tab-bar - Identifie un conteneur en tant que barre de liens d'onglets MDL.
mdl-tabs__tab - Identifie une ancre (lien) en tant qu'activateur d'onglet MDL.
is-active - Identifie un onglet comme onglet d'affichage par défaut.
mdl-tabs__panel - Identifie un conteneur comme contenu d'onglet.
mdl_tabs.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<div class = "mdl-tabs mdl-js-tabs">
<div class = "mdl-tabs__tab-bar">
<a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
<a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
<a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
</div>
<div class = "mdl-tabs__panel is-active" id = "tab1-panel">
<p>Tab 1 Content</p>
</div>
<div class = "mdl-tabs__panel" id = "tab2-panel">
<p>Tab 2 Content</p>
</div>
<div class = "mdl-tabs__panel" id = "tab3-panel">
<p>Tab 3 Content</p>
</div>
</div>
</main>
</div>
</body>
</html>Résultat
Vérifiez le résultat.
Un composant de pied de page MDL se présente sous deux formes principales: mega-footer et mini-footer. méga-pied de page contient un contenu plus complexe que le mini-pied de page. Un méga-pied de page peut représenter plusieurs sections de contenu qui sont séparées par des règles horizontales, tandis qu'un mini-pied de page présente une seule section de contenu. Les pieds de page contiennent généralement du contenu informatif et cliquable, tel que des liens.
MDL fournit diverses classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies au méga-pied de page et au mini-pied de page. Le tableau suivant répertorie les classes disponibles et leurs effets.
| Sr.No. | Nom et description de la classe |
|---|---|
| 1 | mdl-mega-footer Identifie le conteneur en tant que composant de méga-pied de page MDL. Requis pour l'élément de pied de page. |
| 2 | mdl-mega-footer__top-section Identifie le conteneur en tant que section supérieure du pied de page. Requis pour l'élément div "externe" de la section supérieure. |
| 3 | mdl-mega-footer__left-section Identifie le conteneur comme une section de gauche. Requis pour l'élément div "interne" de la section gauche. |
| 4 | mdl-mega-footer__social-btn Identifie un carré décoratif dans le méga-pied de page. Requis pour l'élément bouton (s'il est utilisé). |
| 5 | mdl-mega-footer__right-section Identifie le conteneur comme une section de droite. Requis pour l'élément div "interne" de la section droite. |
| 6 | mdl-mega-footer__middle-section Identifie le conteneur en tant que section centrale du pied de page. Requis pour l'élément div "externe" de la section centrale. |
| sept | mdl-mega-footer__drop-down-section Identifie le conteneur en tant que zone de contenu déroulante (verticale). Requis pour les éléments div "internes" déroulants. |
| 8 | mdl-mega-footer__heading Identifie un en-tête comme un titre de méga-pied de page. Requis pour l'élément h1 dans la section déroulante. |
| 9 | mdl-mega-footer__link-list Identifie une liste non ordonnée en tant que liste déroulante (verticale). Requis pour l'élément ul dans la section déroulante. |
| dix | mdl-mega-footer__bottom-section Identifie le conteneur en tant que section inférieure du pied de page. Requis pour l'élément div "externe" de la section inférieure. |
| 11 | mdl-logo Identifie un conteneur comme un en-tête de section stylisé. Requis pour l'élément div "interne" dans la section inférieure du méga-pied de page ou la section gauche du mini-pied de page. |
| 12 | mdl-mini-footer Identifie le conteneur en tant que composant de mini-pied de page MDL. Requis pour l'élément de pied de page. |
| 13 | mdl-mini-footer__left-section Identifie le conteneur comme une section de gauche. Requis pour l'élément div "interne" de la section gauche. |
| 14 | mdl-mini-footer__link-list Identifie une liste non ordonnée en tant que liste en ligne (horizontale). Requis pour l'élément ul frère de l'élément div "mdl-logo". |
| 15 | mdl-mini-footer__right-section Identifie le conteneur comme une section de droite. Requis pour l'élément div "interne" de la section droite. |
| 16 | mdl-mini-footer__social-btn Identifie un carré décoratif dans le mini-pied de page. Requis pour l'élément bouton (s'il est utilisé). |
Voyons maintenant quelques exemples pour comprendre l'utilisation des classes de pied de page MDL pour styliser les pieds de page.
Mega Footer
Laissez-nous discuter de l'utilisation du mdl-mega-footerclasse pour mettre en page le contenu dans un pied de page. Les classes MDL suivantes seront utilisées dans cet exemple.
mdl-layout - Identifie un div comme un composant MDL.
mdl-js-layout - Ajoute un comportement MDL de base à la division externe.
mdl-layout--fixed-header - Rend l'en-tête toujours visible, même sur les petits écrans.
mdl-layout__header-row - Identifie le conteneur comme ligne d'en-tête MDL.
mdl-layout-title - Identifie le texte du titre de la mise en page.
mdl-layout__content - Identifie div comme contenu de mise en page MDL.
mdl-mega-footer - Identifie le conteneur en tant que composant de méga-pied de page MDL.
mdl-mega-footer__top-section - Identifie le conteneur en tant que section supérieure du pied de page.
mdl-mega-footer__left-section - Identifie le conteneur comme une section de gauche.
mdl-mega-footer__social-btn - Identifie un carré décoratif dans le mini-pied de page.
mdl-mega-footer__right-section - Identifie le conteneur comme une section droite.
mdl-mega-footer__middle-section - Identifie le conteneur en tant que section centrale du pied de page.
mdl-mega-footer__drop-down-section - Identifie le conteneur en tant que zone de contenu déroulante (verticale).
mdl-mega-footer__heading - Identifie un titre comme un titre de méga-pied de page.
mdl-mega-footer__link-list - Identifie une liste non ordonnée comme une liste en ligne (horizontale).
mdl-mega-footer__bottom-section - Identifie le conteneur en tant que section inférieure du pied de page.
mdl-logo - Identifie un conteneur comme un en-tête de section stylisé.
mdl_megafooter.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<footer class = "mdl-mega-footer">
<div class = "mdl-mega-footer__top-section">
<div class = "mdl-mega-footer__left-section">
<button class = "mdl-mega-footer__social-btn">1</button>
<button class = "mdl-mega-footer__social-btn">2</button>
<button class = "mdl-mega-footer__social-btn">3</button>
</div>
<div class = "mdl-mega-footer__right-section">
<a href = "">Link 1</a>
<a href = "">Link 2</a>
<a href = "">Link 3</a>
</div>
</div>
<div class = "mdl-mega-footer__middle-section">
<div class = "mdl-mega-footer__drop-down-section">
<h1 class = "mdl-mega-footer__heading">Heading </h1>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link A</a></li>
<li><a href = "">Link B</a></li>
</ul>
</div>
<div class = "mdl-mega-footer__drop-down-section">
<h1 class = "mdl-mega-footer__heading">Heading </h1>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link C</a></li>
<li><a href = "">Link D</a></li>
</ul>
</div>
</div>
<div class = "mdl-mega-footer__bottom-section">
<div class = "mdl-logo">
Bottom Section
</div>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link A</a></li>
<li><a href = "">Link B</a></li>
</ul>
</div>
</footer>
</main>
</div>
</body>
</html>Résultat
Vérifiez le résultat.
Mini pied de page
L'exemple suivant vous aidera à comprendre l'utilisation du mdl-mini-footer classe pour mettre en page le contenu dans un pied de page.
Les classes MDL données ci-dessous seront utilisées dans cet exemple.
mdl-layout - Identifie un div comme un composant MDL.
mdl-js-layout - Ajoute un comportement MDL de base à la division externe.
mdl-layout--fixed-header - Rend l'en-tête toujours visible, même sur les petits écrans.
mdl-layout__header-row - Identifie le conteneur comme ligne d'en-tête MDL.
mdl-layout-title - Identifie le texte du titre de la mise en page.
mdl-layout__content - Identifie div comme contenu de mise en page MDL.
mdl-mini-footer - Identifie le conteneur en tant que composant de mini-pied de page MDL.
mdl-mini-footer__left-section - Identifie le conteneur comme une section de gauche.
mdl-logo - Identifie un conteneur comme un en-tête de section stylisé.
mdl-mini-footer__link-list - Identifie une liste non ordonnée comme une liste en ligne (horizontale).
mdl-mini-footer__right-section - Identifie le conteneur comme une section droite.
mdl_minifooter.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<footer class = "mdl-mini-footer">
<div class = "mdl-mini-footer__left-section">
<div class = "mdl-logo">
Copyright Information
</div>
<ul class = "mdl-mini-footer__link-list">
<li><a href = "#">Help</a></li>
<li><a href = "#">Privacy and Terms</a></li>
<li><a href = "#">User Agreement</a></li>
</ul>
</div>
<div class = "mdl-mini-footer__right-section">
<button class = "mdl-mini-footer__social-btn">1</button>
<button class = "mdl-mini-footer__social-btn">2</button>
<button class = "mdl-mini-footer__social-btn">3</button>
</div>
</footer>
</main>
</div>
</body>
</html>Résultat
Vérifiez le résultat.
Un composant de badge MDL est une notification à l'écran qui peut être un nombre ou une icône. Il est généralement utilisé pour souligner le nombre d'éléments.
MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies aux badges. Le tableau suivant répertorie les classes disponibles et leurs effets.
| Sr.No. | Nom et description de la classe |
|---|---|
| 1 | mdl-badge Identifie l'élément en tant que composant de badge MDL. Requis pour l'élément span ou link. |
| 2 | mdl-badge--no-background Applique un effet de cercle ouvert au badge et est facultatif. |
| 3 | mdl-badge--overlap Fait chevaucher le badge avec son conteneur et est facultatif. |
| 4 | data-badge="value" Attribue une valeur de chaîne au badge utilisé comme attribut; requis sur la travée ou le lien. |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation du mdl-badge classe pour ajouter des notifications aux éléments span et lier.
Les classes MDL données ci-dessous seront utilisées dans cet exemple.
mdl-badge - Identifie l'élément en tant que composant de badge MDL.
data-badge- Attribue une valeur de chaîne au badge. Des icônes peuvent lui être attribuées à l'aide de symboles HTML.
mdl_badges.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>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style>
</head>
<body>
<span class = "material-icons mdl-badge" data-badge = "1">account_box</span>
<span class = "material-icons mdl-badge" data-badge = "★">account_box</span>
<span class = "mdl-badge" data-badge = "4">Unread Messages</span>
<span class = "mdl-badge" data-badge = "⚑">Rating</span>
<a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
</body>
</html>Résultat
Vérifiez le résultat.
MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies aux boutons. Le tableau suivant répertorie les classes disponibles et leurs effets.
| Sr.No. | Nom et description de la classe |
|---|---|
| 1 | mdl-button Définit le bouton comme un composant MDL, requis. |
| 2 | mdl-js-button Ajoute un comportement MDL de base au bouton, requis. |
| 3 | (none) Définit l'effet d'affichage plat sur bouton, par défaut. |
| 4 | mdl-button--raised Définit l'effet d'affichage surélevé; ceci est mutuellement exclusif avec fab, mini-fab et icon. |
| 5 | mdl-button--fab Définit l'effet d'affichage fab (circulaire); ceci est mutuellement exclusif avec surélevé, mini-fab et icône. |
| 6 | mdl-button--mini-fab Définit un effet d'affichage mini-fab (petit fab circulaire); ceci est mutuellement exclusif avec augmenté, fab et icône. |
| sept | mdl-button--icon Définit l'effet d'affichage de l'icône (petite circulaire simple); ceci est mutuellement exclusif avec elevé, fab et mini-fab. |
| 8 | mdl-button--colored Définit l'effet d'affichage coloré dans lequel les couleurs sont définies dans material.min.css. |
| 9 | mdl-button--primary Définit l'effet d'affichage des couleurs primaires où les couleurs sont définies dans material.min.css. |
| dix | mdl-button--accent Définit l'effet d'affichage des couleurs d'accentuation où les couleurs sont définies dans material.min.css. |
| 11 | mdl-js-ripple-effect Définit l'effet de clic ondulé, peut être utilisé en combinaison avec n'importe quelle autre classe. |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation du mdl-button classes pour afficher les différents types de boutons.
mdl_buttons.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">
</head>
<body>
<table border = "0">
<tbody>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Colored fab (circular) display effect</td>
<td>Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Plain fab (circular) display effect</td>
<td>Plain fab (circular) with ripple display effect</td>
<td>Plain fab (circular) and disabled</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--raised">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Raised button</td>
<td>Raised button with ripple display effect</td>
<td>Raised button and disabled</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Colored Raised button</td>
<td>Accent-colored Raised button</td>
<td>Accent-colored raised button with ripple effect</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Flat button</td>
<td>Flat button with ripple effect</td>
<td>Disabled flat button</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--primary">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--accent">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Primary Flat button</td>
<td>Accent-colored Flat button</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--icon">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Icon button</td>
<td>Colored Icon button</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Mini Colored fab (circular) display effect</td>
<td>Mini Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>Résultat
Vérifiez le résultat.
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.
| Sr.No. | 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 Place 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 support de carte et est requis sur le div de support "interne". |
| 8 | mdl-card__supporting-text Identifie div comme un 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.
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 barres de progression. Le tableau suivant mentionne les classes disponibles et leurs effets.
| Sr.No. | Nom et description de la classe |
|---|---|
| 1 | mdl-js-progress Définit le comportement MDL de base en indicateur de progression et est une classe obligatoire. |
| 2 | mdl-progress__indeterminate Définit l'animation sur l'indicateur de progression et est une classe facultative. |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation du mdl-js-progress classes pour afficher les différents types de barres de progression.
mdl_progressbars.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">
</head>
<body>
<h4>Default Progress bar</h4>
<div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
<h4>Indeterminate Progress bar</h4>
<div id = "progressbar2"
class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<h4>Buffering Progress bar</h4>
<div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>
<script language = "javascript">
document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(33);
this.MaterialProgress.setBuffer(87);
});
</script>
</body>
</html>Résultat
Vérifiez le résultat.
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 fileurs. Le tableau suivant répertorie les classes disponibles et leurs effets.
| Sr.No. | Nom et description de la classe |
|---|---|
| 1 | mdl-spinner Identifie un conteneur en tant que composant de rotation MDL et est une classe obligatoire. |
| 2 | mdl-js-spinner Définit le comportement MDL de base sur spinner et est une classe obligatoire. |
| 3 | is-active Affiche et anime le spinner et est facultatif. |
| 4 | mdl-spinner--single-color Utilise une seule couleur au lieu de changer de couleur et est facultatif. |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation du mdl-spinner classes et les différents types de fileurs.
mdl_spinners.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">
</head>
<body>
<h4>Default Spinner</h4>
<div class = "mdl-spinner mdl-js-spinner is-active"></div>
<h4>Single Color Spinner</h4>
<div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
</body>
</html>Résultat
Vérifiez le résultat.
MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher différents types de menu. Le tableau suivant répertorie les classes disponibles et leurs effets
| Sr.No. | Nom et description de la classe |
|---|---|
| 1 | mdl-button Identifie le bouton comme un composant MDL et est requis sur l'élément bouton. |
| 2 | mdl-js-button Définit le comportement MDL de base sur bouton et est requis sur l'élément bouton. |
| 3 | mdl-button--icon Définit l'icône sur bouton et est requis sur l'élément bouton. |
| 4 | material-icons Identifie la travée en tant qu'icône de matériau et est requise sur un élément en ligne. |
| 5 | mdl-menu Identifie un conteneur de liste non ordonné en tant que composant MDL et est requis sur l'élément ul. |
| 6 | mdl-js-menu Définit le comportement MDL de base sur le menu et est requis sur l'élément ul. |
| sept | mdl-menu__item Identifie les boutons comme options de menu MDL et définit le comportement MDL de base, requis sur les éléments d'élément de liste. |
| 8 | mdl-js-ripple-effect Définit l'effet de clic ondulé sur les liens d'options et est facultatif; requis sur un élément de liste non ordonné. |
| 9 | mdl-menu--top-left Définit la position du menu au-dessus du bouton, aligne le bord gauche du menu avec le bouton et est facultatif; requis sur un élément de liste non ordonné. |
| dix | (none) Par défaut, le menu est positionné sous le bouton, s'aligne sur le bord gauche avec le bouton. |
| 11 | mdl-menu--top-right Le menu est positionné au-dessus du bouton, s'aligne sur le bord droit avec le bouton, facultatif et va sur un élément de liste non ordonné. |
| 12 | mdl-menu--bottom-right Le menu est positionné sous le bouton, s'aligne sur le bord droit avec le bouton, facultatif et va sur un élément de liste non ordonné. |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation du mdl-spinner classes pour montrer les différents types de fileurs.
mdl_menu.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>
.container {
position: relative;
width: 200px;
}
.background {
background: white;
height: 148px;
width: 100%;
}
.bar {
box-sizing: border-box;
background: #BBBBBB;
color: white;
width: 100%;
height: 64px;
padding: 16px;
}
.wrapper {
box-sizing: border-box;
position: absolute;
right: 16px;
}
</style>
</head>
<body>
<table>
<tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
<td>Top Right Menu</td></tr>
<tr>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "bar">
<button id = "demo_menu-lower-left"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-lower-left">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
<div class = "background"></div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "bar">
<div class = "wrapper">
<button id = "demo_menu-lower-right"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-lower-right">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
<div class = "background"></div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "background"></div>
<div class = "bar">
<button id = "demo_menu-top-left"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-top-left">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "background"></div>
<div class = "bar">
<div class = "wrapper">
<button id = "demo_menu-top-right"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-top-right">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>Résultat
Vérifiez le résultat.
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 menu. Le tableau suivant répertorie les classes disponibles et leurs effets.
| Sr.No. | Nom et description de la classe |
|---|---|
| 1 | mdl-slider Identifie l'élément d'entrée en tant que composant MDL et est obligatoire. |
| 2 | mdl-js-slider Définit le comportement MDL de base sur l'élément d'entrée et est obligatoire. |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation des classes mdl-slider pour afficher les différents types de curseurs.
mdl_sliders.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">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default Slider</td><td>Slider with initial value</td>
<td>Disabled Slider</td></tr>
<tr><td><input id = "slider1" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "0" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "slider2" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "25" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "slider3" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "25" tabindex = "0" step = "2" disabled
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
</tr>
</table>
Value: <div id = "message" >25</div>
</body>
</html>Résultat
Vérifiez le résultat.
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 cases à cocher. Le tableau suivant répertorie les classes disponibles et leurs effets.
| Sr.No. | Nom et description de la classe |
|---|---|
| 1 | mdl-checkbox Identifie l'étiquette en tant que composant MDL et est obligatoire sur l'élément d'étiquette. |
| 2 | mdl-js-checkbox Définit le comportement MDL de base sur label et est requis sur l'élément label. |
| 3 | mdl-checkbox__input Définit le comportement MDL de base sur la case à cocher et est obligatoire sur l'élément d'entrée (case à cocher). |
| 4 | mdl-checkbox__label Définit le comportement MDL de base sur légende et est requis sur l'élément span (légende). |
| 5 | mdl-js-ripple-effect Définit l'effet de clic ondulé et est facultatif; va sur l'élément label et non sur l'élément d'entrée (case à cocher). |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation des classes mdl-slider pour afficher les différents types de cases à cocher.
mdl_checkboxes.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">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
<td>Disabled CheckBox</td></tr>
<tr>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
<input type = "checkbox" id = "checkbox1"
class = "mdl-checkbox__input" checked>
<span class = "mdl-checkbox__label">Married</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"
for = "checkbox2">
<input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
<span class = "mdl-checkbox__label">Single</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
<input type = "checkbox" id = "checkbox3"
class = "mdl-checkbox__input" disabled>
<span class = "mdl-checkbox__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>Résultat
Vérifiez le résultat.
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 boutons radio. Le tableau suivant répertorie les classes disponibles et leurs effets.
| Sr.No. | Nom et description de la classe |
|---|---|
| 1 | mdl-radio Identifie l'étiquette en tant que composant MDL et est obligatoire sur l'élément d'étiquette. |
| 2 | mdl-js-radio Définit le comportement MDL de base sur label et est requis sur l'élément label. |
| 3 | mdl-radio__button Définit le comportement MDL de base sur radio et est requis sur l'élément d'entrée (bouton radio). |
| 4 | mdl-radio__label Définit le comportement MDL de base sur légende et est requis sur l'élément span (légende). |
| 5 | mdl-js-ripple-effect Définit l'effet de clic ondulé et est facultatif; va sur l'élément label et non sur l'élément d'entrée (bouton radio). |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation des classes mdl-slider pour afficher les différents types de boutons radio.
mdl_radio.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">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default Radio Button</td><td>Radio Button with Ripple Effect</td>
<td>Disabled Radio Button</td></tr>
<tr>
<td>
<label class = "mdl-radio mdl-js-radio" for = "option1">
<input type = "radio" id = "option1" name = "gender"
class = "mdl-radio__button" checked>
<span class = "mdl-radio__label">Male</span>
</label>
</td>
<td>
<label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect"
for = "option2">
<input type = "radio" id = "option2" name = "gender"
class = "mdl-radio__button" >
<span class = "mdl-radio__label">Female</span>
</label>
</td>
<td>
<label class = "mdl-radio mdl-js-radio" for = "option3">
<input type = "radio" id = "option3" name = "gender"
class = "mdl-radio__button" disabled>
<span class = "mdl-radio__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>Résultat
Vérifiez le résultat.
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 cases à cocher sous forme d'icônes. Les tableaux suivants répertorient les classes disponibles et leurs effets.
| Sr.No. | Nom et description de la classe |
|---|---|
| 1 | mdl-icon-toggle Identifie l'étiquette en tant que composant MDL et est obligatoire sur l'élément d'étiquette. |
| 2 | mdl-js-icon-toggle Définit le comportement MDL de base sur label et est requis sur l'élément label. |
| 3 | mdl-icon-toggle__input Définit le comportement MDL de base sur icon-toggle et est requis sur l'élément d'entrée (icon-toggle). |
| 4 | mdl-icon-toggle__label Définit le comportement MDL de base sur la légende et est requis sur l'élément i (icône). |
| 5 | mdl-js-ripple-effect Définit l'effet de clic ondulé et est facultatif; va sur l'élément label et non sur l'élément d'entrée (icône-bascule). |
Exemple
L'exemple suivant présente l'utilisation de mdl-icon-toggle classes pour afficher différents types de cases à cocher sous forme d'icônes.
mdl_icons.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">
</head>
<body>
<table>
<tr><td>On Icon</td><td>Off Icon</td>
<td>Disabled Icon</td></tr>
<tr>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-1">
<input type = "checkbox" id = "icon-toggle-1"
class = "mdl-icon-toggle__input" checked>
<i class = "mdl-icon-toggle__label material-icons">format_bold</i>
</label>
</td>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-2">
<input type = "checkbox" id = "icon-toggle-2"
class = "mdl-icon-toggle__input">
<i class = "mdl-icon-toggle__label material-icons">format_italic</i>
</label>
</td>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-2">
<input type = "checkbox" id = "icon-toggle-2"
class = "mdl-icon-toggle__input" disabled>
<i class = "mdl-icon-toggle__label material-icons">format_underline</i>
</label>
</td>
</tr>
</table>
</body>
</html>Résultat
Vérifiez le résultat.
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 cases à cocher en tant que commutateurs. Le tableau suivant répertorie les classes disponibles et leurs effets.
| Sr.No. | Nom et description de la classe |
|---|---|
| 1 | mdl-switch Identifie l'étiquette en tant que composant MDL et est obligatoire sur l'élément d'étiquette. |
| 2 | mdl-js-switch Définit le comportement MDL de base sur label et est requis sur l'élément label. |
| 3 | mdl-switch__input Définit le comportement MDL de base pour basculer et est requis sur l'élément d'entrée (commutateur). |
| 4 | mdl-switch__label Définit le comportement MDL de base sur la légende et est requis sur l'élément d'entrée (légende). |
| 5 | mdl-js-ripple-effect Définit l'effet de clic ondulé et est facultatif; va sur l'élément d'étiquette et non sur l'élément d'entrée (commutateur). |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation des classes mdl-switch et les différents types de cases à cocher en tant que switch.
mdl_switches.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">
</head>
<body>
<table>
<tr><td>On Switch</td><td>Off Switch</td>
<td>Disabled Switch</td></tr>
<tr>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-1">
<input type = "checkbox" id = "switch-1"
class = "mdl-switch__input" checked>
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input">
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input" disabled>
</label>
</td>
</tr>
</table>
</body>
</html>Résultat
Vérifiez le résultat.
MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher une table en tant que table de données. Le tableau suivant répertorie les classes disponibles et leurs effets.
| Sr.No. | Nom et description de la classe |
|---|---|
| 1 | mdl-data-table Identifie la table en tant que composant MDL et est obligatoire sur l'élément de table. |
| 2 | mdl-js-data-table Définit le comportement MDL de base sur table et est requis sur l'élément de table. |
| 3 | mdl-data-table--selectable Définit le comportement sélectionnable tout / individuel (cases à cocher) et est facultatif; va sur l'élément de table. |
| 4 | mdl-data-table__cell--non-numeric Définit la mise en forme du texte sur la cellule de données et est facultative; va à la fois sur les cellules d'en-tête et de données de tableau |
| 5 | (none) Par défaut, définit le formatage numérique sur l'en-tête ou la cellule de données. |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation du mdl-data-table classes pour afficher une table de données.
mdl_data_tables.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">
</head>
<body>
<table class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
<th>Class</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
<td>VI</td><td>A</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
<td>VI</td><td>B</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
<td>VI</td><td>A</td></tr>
</tbody>
</table>
</body>
</html>Résultat
Vérifiez le résultat.
MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher les différents types d'entrées de texte. Le tableau suivant répertorie les classes disponibles et leurs effets.
| Sr.No. | Nom et description de la classe |
|---|---|
| 1 | mdl-textfield Identifie le conteneur en tant que composant MDL et est requis sur l'élément div "externe". |
| 2 | mdl-js-textfield Définit le comportement MDL de base en entrée et est requis sur l'élément div "externe". |
| 3 | mdl-textfield__input Identifie l'élément comme entrée de champ de texte et est requis sur l'élément d'entrée ou de zone de texte. |
| 4 | mdl-textfield__label Identifie l'élément comme étiquette de champ de texte et est requis sur l'élément d'étiquette pour les éléments d'entrée ou de zone de texte. |
| 5 | mdl-textfield--floating-label Applique un effet d'étiquette flottante et est facultatif; passe sur l'élément div "externe". |
| 6 | mdl-textfield__error Identifie span comme un message d'erreur MDL et est facultatif; passe sur l'élément span pour l'élément d'entrée MDL avec motif. |
| sept | mdl-textfield--expandable Identifie un div comme un conteneur de champ de texte extensible MDL; utilisé pour les champs de saisie extensibles, et est requis sur l'élément div "externe". |
| 8 | mdl-button Identifie l'étiquette comme un bouton d'icône MDL; utilisé pour les champs d'entrée extensibles, et est requis sur l'élément d'étiquette de div "externe". |
| 9 | mdl-js-button Définit le comportement de base du conteneur d'icônes; utilisé pour les champs d'entrée extensibles, et est requis sur l'élément d'étiquette de div "externe". |
| dix | mdl-button--icon Identifie l'étiquette en tant que conteneur d'icônes MDL; utilisé pour les champs d'entrée extensibles, et est requis sur l'élément d'étiquette de div "externe". |
| 11 | mdl-input__expandable-holder Identifie un conteneur en tant que composant MDL; utilisé pour les champs de saisie extensibles, et est requis sur l'élément div "interne". |
| 12 | is-invalid Identifie le champ de texte comme non valide lors du chargement initial et est facultatif sur l'élément mdl-textfield. |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation des classes mdl-textfield pour afficher les différents types de champs de texte.
mdl_textfields.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">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Text Field</td><td>Numeric Text Field</td>
<td>Disabled Text Field</td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text" id = "text1">
<label class = "mdl-textfield__label" for = "text1">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
<label class = "mdl-textfield__label" for = "text2">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
id = "text3" disabled>
<label class = "mdl-textfield__label" for = "text3">
Disabled...</label>
</div>
</form>
</td>
</tr>
<tr><td>Simple Text Field with Floating Label</td>
<td>Numeric Text Field with Floating Label</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text" id = "text4">
<label class = "mdl-textfield__label" for = "text4">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
<label class = "mdl-textfield__label" for = "text5">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td> </td>
</tr>
<tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<textarea class = "mdl-textfield__input" type = "text" rows = "3"
id = "text7" ></textarea>
<label class = "mdl-textfield__label" for = "text7">Lines...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class = "mdl-button mdl-js-button mdl-button--icon"
for = "text8">
<i class = "material-icons">search</i>
</label>
<div class = "mdl-textfield__expandable-holder">
<input class = "mdl-textfield__input" type = "text" id = "text8">
<label class = "mdl-textfield__label" for = "sample-expandable">
Expandable Input</label>
</div>
</div>
</form>
</td>
<td> </td>
</tr>
</table>
</body>
</html>Résultat
Vérifiez le résultat.
MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher les différents types d'infobulles. Le tableau suivant répertorie les classes disponibles et leurs effets.
| Sr.No. | Nom et description de la classe |
|---|---|
| 1 | mdl-tooltip Identifie le conteneur comme une info-bulle MDL et est requis sur l'élément de conteneur de l'info-bulle. |
| 2 | mdl-tooltip--large Définit un effet de grande police et est facultatif; continue sur l'élément de conteneur d'info-bulle. |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation du mdl-tooltip classes pour afficher les différents types d'infobulles.
mdl_tooltips.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">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Tooltip</td><td>Large Tooltip</td></tr>
<tr>
<td>
<div id = "tooltip1" class = "icon material-icons">add</div>
<div class = "mdl-tooltip" for = "tooltip1">Follow</div>
</td>
<td>
<div id = "tooltip2" class = "icon material-icons">print</div>
<div class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</div>
</td>
</tr>
<tr>
<td>Rich Tooltip</td><td>Multiline Tooltip</td></tr>
<tr>
<td>
<div id = "tooltip3" class = "icon material-icons">cloud_upload </div>
<div class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></div>
</td>
<td>
<div id = "tooltip4" class = "icon material-icons">share</div>
<div class = "mdl-tooltip" for = "tooltip4">
Share your content<br>using social media</div>
</td>
</tr>
</table>
</body>
</html>Résultat
Vérifiez le résultat.