Material Design Lite - Guida rapida
Cos'è Material Design Lite?
Material Design Lite (MDL è una libreria di componenti dell'interfaccia utente creata con CSS, JavaScript e HTML. I componenti dell'interfaccia utente di MDL aiutano a costruire pagine web e app web accattivanti, coerenti e funzionali rispettando i moderni principi di web design come la portabilità del browser e l'indipendenza dal dispositivo e grazioso degrado.
Di seguito sono riportate le caratteristiche salienti di Material Design Lite:
Progettazione reattiva integrata.
CSS standard con ingombro minimo.
Include nuove versioni dei controlli dell'interfaccia utente comuni come pulsanti, caselle di controllo e campi di testo adattati per seguire i concetti di Material Design.
Include funzionalità avanzate e specializzate come carte, layout di colonne, cursori, rotazioni, schede, tipografia e così via.
Può essere utilizzato con o senza libreria o ambiente di sviluppo.
Cross-browser e può essere utilizzato per creare componenti Web riutilizzabili.
Design reattivo
Material Design Lite ha una progettazione reattiva integrata in modo che il sito Web creato utilizzando Material Design Lite si riprogetti in base alle dimensioni del dispositivo.
Le classi di Material Design Lite sono create in modo tale che il sito web possa adattarsi a qualsiasi dimensione dello schermo.
I siti Web creati utilizzando Material Design Lite sono completamente compatibili con PC, tablet e dispositivi mobili.
CSS standard
Material Design Lite utilizza solo CSS standard ed è molto facile da imparare.
Non c'è dipendenza da alcuna libreria JavaScript esterna come jQuery.
ExtensibleMaterial Design Lite è dal design molto minimale e piatto.
È stato progettato considerando il fatto che è molto più facile aggiungere nuove regole CSS che sovrascrivere le regole CSS esistenti.
Supporta ombre e colori audaci.
I colori e le sfumature rimangono uniformi su varie piattaforme e dispositivi.
E, cosa più importante di tutte, MDL è assolutamente gratuito.
Esistono due modi per utilizzare Material Design Lite:
Local Installation - Puoi scaricare il materiale. {Primary} - {accent} .min.css e material.min.js file sul tuo computer locale e includerlo nel tuo codice HTML.
CDN Based Version - Puoi includere i file material. {Primary} - {accent} .min.css e material.min.js nel tuo codice HTML direttamente dalla Content Delivery Network (CDN).
Installazione locale
Segui questi passaggi per l'installazione di MDL:
Vai a https://www.getmdl.io/started/index.html per scaricare l'ultima versione disponibile.
Quindi, metti il file scaricato material.min.js file in una directory del tuo sito web, ad esempio / js e material.min.css in / css.
Esempio
Ora puoi includere il file css e js nel tuo file HTML come segue:
<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>Il programma sopra genererà il seguente risultato:
Versione basata su CDN
Puoi includere i file js e css nel tuo codice HTML direttamente dalla Content Delivery Network (CDN). storage.googleapis.com fornisce contenuti per l'ultima versione.
Stiamo utilizzando la versione CDN storage.googleapis.com della libreria in questo tutorial.
Esempio
Ora, riscriviamo l'esempio sopra usando material.css e material.js dal CDN di 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>Il programma sopra genererà il seguente risultato:
In questo capitolo, discuteremo i diversi layout in Material Design Lite. HTML5 ha i seguenti elementi contenitore:
<div> - Fornisce un contenitore generico al contenuto HTML.
<header> - Rappresenta la sezione dell'intestazione.
<footer> - Rappresenta la sezione del piè di pagina.
<article> - Rappresenta articoli.
<section> - Fornisce un contenitore generico per vari tipi di sezioni.
MDL fornisce varie classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti ai contenitori. La tabella seguente elenca le classi disponibili e i loro effetti.
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-layout Identifica un contenitore come componente MDL. Obbligatorio sull'elemento contenitore esterno. |
| 2 | mdl-js-layout Aggiunge il comportamento MDL di base al layout. Obbligatorio sull'elemento contenitore esterno. |
| 3 | mdl-layout__header Identifica il contenitore come un componente MDL. Obbligatorio sull'elemento di intestazione. |
| 4 | mdl-layout-icon Utilizzato per aggiungere un'icona dell'applicazione. Viene sovrascritto dall'icona del menu se entrambi sono visibili. Elemento icona opzionale. |
| 5 | mdl-layout__header-row Identifica il contenitore come riga di intestazione MDL. Obbligatorio nel contenitore del contenuto dell'intestazione. |
| 6 | mdl-layout__title Identifica il testo del titolo del layout. Obbligatorio nel contenitore del titolo del layout. |
| 7 | mdl-layout-spacer Utilizzato per allineare gli elementi all'interno di un'intestazione o di un cassetto. Cresce per riempire lo spazio rimanente. Comunemente utilizzato per allineare gli elementi a destra. Facoltativo su div dopo il titolo del layout. |
| 8 | mdl-navigation Identifica il contenitore come gruppo di navigazione MDL. Obbligatorio sull'elemento nav. |
| 9 | mdl-navigation__link Identifica l'ancoraggio come collegamento di navigazione MDL. Richiesto sugli elementi di ancoraggio dell'intestazione e / o del cassetto. |
| 10 | mdl-layout__drawer Identifica il contenitore come cassetto del layout MDL. Richiesto su elemento contenitore cassetto. |
| 11 | mdl-layout__content Identifica il contenitore come contenuto del layout MDL. Obbligatorio sull'elemento principale. |
| 12 | mdl-layout__header--scroll Fa scorrere l'intestazione con il contenuto. Opzionale sull'elemento di intestazione. |
| 13 | mdl-layout--fixed-drawer Rende il cassetto sempre visibile e aperto negli schermi più grandi. Opzionale su elemento contenitore esterno e non su elemento contenitore cassetto. |
| 14 | mdl-layout--fixed-header Rende l'intestazione sempre visibile, anche nei piccoli schermi. Opzionale su elemento contenitore esterno. |
| 15 | mdl-layout--large-screen-only Nasconde un elemento su schermi più piccoli. Facoltativo su qualsiasi discendente di mdl-layout. |
| 16 | mdl-layout--small-screen-only Nasconde un elemento su schermi più grandi. Facoltativo su qualsiasi discendente di mdl-layout. |
| 17 | mdl-layout__header--waterfall Consente un effetto "cascata" con più righe di intestazione. Opzionale sull'elemento di intestazione. |
| 18 | mdl-layout__header--transparent Rende trasparente l'intestazione e disegna sopra lo sfondo del layout. Opzionale sull'elemento di intestazione. |
| 19 | mdl-layout__header--seamed Utilizza un'intestazione senza ombre. Opzionale sull'elemento di intestazione. |
| 20 | mdl-layout__tab-bar Identifica il contenitore come una barra delle schede MDL. Obbligatorio sull'elemento contenitore all'interno dell'intestazione (layout a schede). |
| 21 | mdl-layout__tab Identifica l'ancoraggio come collegamento a una scheda MDL. Obbligatorio sugli elementi di ancoraggio della barra delle schede. |
| 22 | is-active Identifica la scheda come scheda attiva predefinita. Facoltativo sull'elemento di ancoraggio della barra delle schede e sull'elemento di sezione della scheda associato. |
| 23 | mdl-layout__tab-panel Identifica il contenitore come pannello del contenuto della scheda. Obbligatorio sugli elementi della sezione della scheda. |
| 24 | mdl-layout--fixed-tabs Utilizza le schede fisse invece delle schede scorrevoli predefinite. Facoltativo sull'elemento contenitore esterno, non contenitore all'interno dell'intestazione. |
I seguenti esempi mostrano l'uso della classe mdl-layout per definire vari contenitori.
Cassetto fisso
Per creare un modello con un cassetto fisso ma senza intestazione, vengono utilizzate le seguenti classi MDL.
mdl-layout - Identifica un div come un componente MDL.
mdl-js-layout - Aggiunge il comportamento MDL di base al div esterno.
mdl-layout--fixed-drawer - Rende il cassetto sempre visibile e aperto negli schermi più grandi.
mdl-layout__drawer - Identifica div come cassetto del layout MDL.
mdl-layout-title - Identifica il testo del titolo del layout.
mdl-navigation - Identifica div come gruppo di navigazione MDL.
mdl-navigation__link - Identifica l'ancora come collegamento di navigazione MDL.
mdl-layout__content - Identifica div come contenuto del layout 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>Risultato
Verifica il risultato.
Intestazione fissa
Per creare un modello con intestazione fissa viene utilizzata la seguente classe MDL aggiuntiva.
mdl-layout--fixed-header - Rende l'intestazione sempre visibile, anche nei piccoli schermi.
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>Risultato
Verifica il risultato.
Intestazione e cassetto fissi
Per creare un modello con intestazione fissa e un cassetto fisso, vengono utilizzate le seguenti classi MDL aggiuntive.
mdl-layout--fixed-drawer - Rende il cassetto sempre visibile e aperto negli schermi più grandi.
mdl-layout--fixed-header - Rende l'intestazione sempre visibile, anche nei piccoli schermi.
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>Risultato
Verifica il risultato.
Intestazione scorrevole
Per creare un modello con intestazione scorrevole, vengono utilizzate le seguenti classi MDL.
mdl-layout--header--scroll - Fa scorrere l'intestazione con il contenuto.
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>Risultato
Verifica il risultato.
Intestazione contrattuale
Per creare un modello con un'intestazione che si contrae mentre la pagina scorre verso il basso, viene utilizzata la seguente classe MDL.
mdl-layout__header--waterfall - Consente un effetto "cascata" con più righe di intestazione.
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>Risultato
Verifica il risultato.
Intestazione fissa con schede scorrevoli
Per creare un modello con un'intestazione con schede scorrevoli, vengono utilizzate le seguenti classi MDL.
mdl-layout__tab-bar - Identifica il contenitore come una barra delle schede MDL.
mdl-layout__tab - Identifica l'ancoraggio come un collegamento a una scheda MDL.
mdl-layout__tab-panel - Identifica il contenitore come un pannello del contenuto della scheda.
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>Risultato
Verifica il risultato.
Intestazione fissa con schede fisse
Per creare un modello con un'intestazione con schede fisse, viene utilizzata la seguente classe MDL aggiuntiva.
mdl-layout--fixed-tabs - Utilizza schede fisse invece delle schede scorrevoli predefinite.
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>Risultato
Verifica il risultato.
La griglia Material Design Lite (MDL) è un componente per la disposizione dei contenuti per schermi di dimensioni variabili. La griglia MDL è definita e racchiusa da un elemento contenitore / div. Una griglia ha 12 colonne nella schermata delle dimensioni del desktop, 8 nella schermata delle dimensioni del tablet e 4 nella schermata delle dimensioni del telefono, dove ogni dimensione ha margini e margini predefiniti. Le celle sono disposte in modo sequenziale in una riga, nell'ordine in cui sono definite, con le seguenti eccezioni:
Se una cella della griglia non è adatta per la riga in una delle dimensioni dello schermo, scorre nella riga successiva.
Se una cella della griglia ha una dimensione di colonna specificata uguale o maggiore del numero di colonne per la dimensione dello schermo, occupa l'intera riga.
MDL fornisce varie classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti alla griglia. La tabella seguente elenca le classi disponibili e i loro effetti.
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-layout Identifica un contenitore come componente MDL. Obbligatorio sull'elemento contenitore esterno. |
| 2 | mdl-grid Identifica un contenitore come componente della griglia MDL. Obbligatorio per l'elemento div "esterno". |
| 3 | mdl-cell Identifica un contenitore come cella MDL. Obbligatorio per gli elementi div "interni". |
| 4 | mdl-grid--no-spacing Aggiorna le celle della griglia in modo che non abbiano margini tra di loro. Opzionale per contenitore a griglia. |
| 5 | mdl-cell--N-col Questo aiuta a mettere la dimensione della colonna per la cella su N, N è compreso tra 1 e 12, il valore predefinito è 4; opzionale per gli elementi div "interni". |
| 6 | mdl-cell--N-col-desktop Questo aiuta a mettere la dimensione della colonna per la cella su N solo in modalità desktop, N è compreso tra 1 e 12; opzionale per gli elementi div "interni". |
| 7 | mdl-cell--N-col-tablet Questo aiuta a mettere la dimensione della colonna per la cella su N solo in modalità tablet, N è compreso tra 1 e 8; opzionale per gli elementi div "interni". |
| 8 | mdl-cell--N-col-phone Questo aiuta a mettere la dimensione della colonna per la cella su N solo in modalità telefono, N è 1-4 compreso; opzionale per gli elementi div "interni". |
| 9 | mdl-cell--hide-desktop Nasconde la cella in modalità desktop. Facoltativo per elementi div "interni". |
| 10 | mdl-cell--hide-tablet Nasconde la cella in modalità tablet. Facoltativo per elementi div "interni". |
| 11 | mdl-cell--hide-phone Nasconde il cellulare in modalità telefono. Facoltativo per elementi div "interni". |
| 12 | mdl-cell--stretch Allunga la cella verticalmente per riempire il genitore, predefinito; opzionale per gli elementi div "interni". |
| 13 | mdl-cell--top Allinea la cella alla parte superiore del genitore. Facoltativo per elementi div "interni". |
| 14 | mdl-cell--middle Allinea la cella al centro del genitore. Facoltativo per elementi div "interni". |
| 15 | mdl-cell--bottom Allinea la cella alla parte inferiore del genitore. Facoltativo per elementi div "interni". |
Esempio
Il seguente esempio ti aiuterà a capire l'uso della classe mdl-grid per il layout dei contenuti su vari schermi.
Le classi MDL fornite di seguito verranno utilizzate in questo esempio.
mdl-layout - Identifica un div come un componente MDL.
mdl-js-layout - Aggiunge il comportamento MDL di base al div esterno.
mdl-layout--fixed-header - Rende l'intestazione sempre visibile, anche nei piccoli schermi.
mdl-layout__header-row - Identifica il contenitore come riga di intestazione MDL.
mdl-layout__drawer - Identifica div come cassetto del layout MDL.
mdl-layout-title - Identifica il testo del titolo del layout.
mdl-navigation - Identifica div come gruppo di navigazione MDL.
mdl-navigation__link - Identifica l'ancora come collegamento di navigazione MDL.
mdl-layout__content - Identifica div come contenuto del layout MDL.
mdl-grid - Identifica div come un componente della griglia MDL.
mdl-cell - Identifica div come cella MDL.
mdl-cell--1-col - Imposta la dimensione della colonna per la cella su quella di 1 cella su 12 celle nella dimensione dello schermo del desktop.
mdl-cell--2-col - Imposta la dimensione della colonna per la cella su quella di 2 celle su 12 celle nella dimensione dello schermo del desktop.
mdl-cell--4-col - Imposta la dimensione della colonna per la cella su quella di 4 celle su 12 celle nella dimensione dello schermo del desktop.
mdl-cell--6-col - Imposta la dimensione della colonna per la cella su quella di 6 celle su 12 celle nella dimensione dello schermo del desktop.
mdl-cell--4-col-phone - Imposta la dimensione della colonna per la cella su quella di 4 celle su 4 celle nella dimensione dello schermo del telefono.
mdl-cell--6-col-tablet - Imposta la dimensione della colonna per la cella su quella di 6 celle su 8 celle nella dimensione dello schermo del tablet.
mdl-cell--8-col-tablet - Imposta la dimensione della colonna per la cella su quella di 8 celle su 8 celle nella dimensione dello schermo del tablet.
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>Risultato
Verifica il risultato.
Il componente della scheda Material Design Lite (MDL) è un componente dell'interfaccia utente che aiuta a mostrare più schermate in un unico spazio in modo esclusivo.
MDL fornisce varie classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti alle schede. La tabella seguente menziona le classi disponibili e i loro effetti.
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-layout Identifica un contenitore come componente MDL. Obbligatorio sull'elemento contenitore esterno. |
| 2 | mdl-tabs Identifica un contenitore di schede come componente MDL. Obbligatorio per l'elemento div "esterno". |
| 3 | mdl-js-tabs Imposta il comportamento MDL di base sul contenitore di schede. Obbligatorio per l'elemento div "esterno". |
| 4 | mdl-js-ripple-effect Aggiunge l'effetto clic a catena ai collegamenti delle schede. Opzionale; va sull'elemento div "esterno". |
| 5 | mdl-tabs__tab-bar Identifica un contenitore come barra dei collegamenti delle schede MDL. Obbligatorio sul primo elemento div "interno". |
| 6 | mdl-tabs__tab Identifica un'ancora (collegamento) come attivatore di schede MDL. Obbligatorio su tutti i link nel primo elemento div "interno". |
| 7 | is-active Identifica una scheda come scheda di visualizzazione predefinita. Obbligatorio su uno (e solo uno) degli elementi div (tab) "interni". |
| 8 | mdl-tabs__panel Identifica un contenitore come contenuto della scheda. Obbligatorio su ciascuno degli elementi div (tab) "interni". |
Esempio
Il seguente esempio ti aiuterà a capire l'uso della classe mdl-tab per il layout dei contenuti su varie schede.
Le classi MDL fornite di seguito verranno utilizzate in questo esempio:
mdl-layout - Identifica un div come un componente MDL.
mdl-js-layout - Aggiunge il comportamento MDL di base al div esterno.
mdl-layout--fixed-header - Rende l'intestazione sempre visibile, anche nei piccoli schermi.
mdl-layout__header-row - Identifica il contenitore come riga di intestazione MDL.
mdl-layout-title - Identifica il testo del titolo del layout.
mdl-layout__content - Identifica div come contenuto del layout MDL.
mdl-tabs - Identifica un contenitore di schede come un componente MDL.
mdl-js-tabs - Imposta il comportamento MDL di base sul contenitore di schede.
mdl-tabs__tab-bar - Identifica un contenitore come barra dei collegamenti delle schede MDL.
mdl-tabs__tab - Identifica un'ancora (collegamento) come attivatore di schede MDL.
is-active - Identifica una scheda come scheda di visualizzazione predefinita.
mdl-tabs__panel - Identifica un contenitore come contenuto della scheda.
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>Risultato
Verifica il risultato.
Un componente piè di pagina MDL è disponibile in due forme principali: mega-footer e mini-footer. mega-footer contiene contenuti più complessi del mini-footer. Un mega piè di pagina può rappresentare più sezioni di contenuto separate da regole orizzontali, mentre un mini piè di pagina presenta una singola sezione di contenuto. I piè di pagina in genere contengono sia contenuti informativi che cliccabili, come i collegamenti.
MDL fornisce varie classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti al mega-footer e mini-footer. La tabella seguente elenca le classi disponibili e i loro effetti.
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-mega-footer Identifica il contenitore come un componente mega-footer MDL. Obbligatorio per l'elemento piè di pagina. |
| 2 | mdl-mega-footer__top-section Identifica il contenitore come sezione superiore del piè di pagina. Obbligatorio per l'elemento div "esterno" della sezione superiore. |
| 3 | mdl-mega-footer__left-section Identifica il contenitore come una sezione di sinistra. Obbligatorio per l'elemento div "interno" della sezione sinistra. |
| 4 | mdl-mega-footer__social-btn Identifica un quadrato decorativo all'interno di un megapiede. Obbligatorio per l'elemento button (se utilizzato). |
| 5 | mdl-mega-footer__right-section Identifica il contenitore come una sezione giusta. Richiesto per l'elemento div "interno" della sezione destra. |
| 6 | mdl-mega-footer__middle-section Identifica il contenitore come sezione centrale del piè di pagina. Obbligatorio per l'elemento div "esterno" della sezione centrale. |
| 7 | mdl-mega-footer__drop-down-section Identifica il contenitore come un'area di contenuto a discesa (verticale). Obbligatorio per gli elementi div "interni" a discesa. |
| 8 | mdl-mega-footer__heading Identifica un'intestazione come un'intestazione di mega piè di pagina. Necessario per l'elemento h1 all'interno della sezione a discesa. |
| 9 | mdl-mega-footer__link-list Identifica un elenco non ordinato come elenco a discesa (verticale). Richiesto per l'elemento ul all'interno della sezione a discesa. |
| 10 | mdl-mega-footer__bottom-section Identifica il contenitore come sezione inferiore del piè di pagina. Obbligatorio per l'elemento div "esterno" della sezione inferiore. |
| 11 | mdl-logo Identifica un contenitore come un'intestazione di sezione con stile. Obbligatorio per l'elemento div "interno" nella sezione inferiore del megapiede o nella sezione sinistra del mini piè di pagina. |
| 12 | mdl-mini-footer Identifica il contenitore come un componente mini piè di pagina MDL. Obbligatorio per l'elemento piè di pagina. |
| 13 | mdl-mini-footer__left-section Identifica il contenitore come una sezione di sinistra. Obbligatorio per l'elemento div "interno" della sezione sinistra. |
| 14 | mdl-mini-footer__link-list Identifica un elenco non ordinato come un elenco in linea (orizzontale). Necessario per l'elemento gemello ul per l'elemento div "mdl-logo". |
| 15 | mdl-mini-footer__right-section Identifica il contenitore come una sezione giusta. Richiesto per l'elemento div "interno" della sezione destra. |
| 16 | mdl-mini-footer__social-btn Identifica un quadrato decorativo all'interno del mini piè di pagina. Obbligatorio per l'elemento button (se utilizzato). |
Vediamo ora alcuni esempi per comprendere l'uso delle classi piè di pagina MDL per applicare lo stile ai piè di pagina.
Mega Footer
Parliamo dell'uso di mdl-mega-footerclass per impaginare i contenuti in un piè di pagina. Le seguenti classi MDL verranno utilizzate in questo esempio.
mdl-layout - Identifica un div come un componente MDL.
mdl-js-layout - Aggiunge il comportamento MDL di base al div esterno.
mdl-layout--fixed-header - Rende l'intestazione sempre visibile, anche nei piccoli schermi.
mdl-layout__header-row - Identifica il contenitore come riga di intestazione MDL.
mdl-layout-title - Identifica il testo del titolo del layout.
mdl-layout__content - Identifica div come contenuto del layout MDL.
mdl-mega-footer - Identifica il contenitore come un componente mega-footer MDL.
mdl-mega-footer__top-section - Identifica il contenitore come sezione superiore del piè di pagina.
mdl-mega-footer__left-section - Identifica il contenitore come una sezione di sinistra.
mdl-mega-footer__social-btn - Identifica un quadrato decorativo all'interno del mini-piè di pagina.
mdl-mega-footer__right-section - Identifica il contenitore come una sezione giusta.
mdl-mega-footer__middle-section - Identifica il contenitore come sezione centrale del piè di pagina.
mdl-mega-footer__drop-down-section - Identifica il contenitore come un'area di contenuto a discesa (verticale).
mdl-mega-footer__heading - Identifica un'intestazione come un'intestazione di mega piè di pagina.
mdl-mega-footer__link-list - Identifica un elenco non ordinato come un elenco in linea (orizzontale).
mdl-mega-footer__bottom-section - Identifica il contenitore come sezione inferiore del piè di pagina.
mdl-logo - Identifica un contenitore come un'intestazione di sezione con stile.
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>Risultato
Verifica il risultato.
Mini piè di pagina
Il seguente esempio ti aiuterà a capire l'uso di mdl-mini-footer class per impaginare i contenuti in un piè di pagina.
Le classi MDL fornite di seguito verranno utilizzate in questo esempio.
mdl-layout - Identifica un div come un componente MDL.
mdl-js-layout - Aggiunge il comportamento MDL di base al div esterno.
mdl-layout--fixed-header - Rende l'intestazione sempre visibile, anche nei piccoli schermi.
mdl-layout__header-row - Identifica il contenitore come riga di intestazione MDL.
mdl-layout-title - Identifica il testo del titolo del layout.
mdl-layout__content - Identifica div come contenuto del layout MDL.
mdl-mini-footer - Identifica il contenitore come un componente mini piè di pagina MDL.
mdl-mini-footer__left-section - Identifica il contenitore come una sezione di sinistra.
mdl-logo - Identifica un contenitore come un'intestazione di sezione con stile.
mdl-mini-footer__link-list - Identifica un elenco non ordinato come un elenco in linea (orizzontale).
mdl-mini-footer__right-section - Identifica il contenitore come una sezione giusta.
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>Risultato
Verifica il risultato.
Un componente badge MDL è una notifica su schermo che può essere un numero o un'icona. Viene generalmente utilizzato per enfatizzare il numero di elementi.
MDL fornisce una gamma di classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti ai badge. La tabella seguente elenca le classi disponibili e i loro effetti.
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-badge Identifica l'elemento come componente del badge MDL. Richiesto per elemento span o link. |
| 2 | mdl-badge--no-background Applica l'effetto cerchio aperto al badge ed è opzionale. |
| 3 | mdl-badge--overlap Fa sovrapporre il badge al suo contenitore ed è opzionale. |
| 4 | data-badge="value" Assegna un valore stringa al badge utilizzato come attributo; richiesto su span o link. |
Esempio
Il seguente esempio ti aiuterà a capire l'uso di mdl-badge class per aggiungere notifiche agli elementi di estensione e collegamento.
Le classi MDL fornite di seguito verranno utilizzate in questo esempio.
mdl-badge - Identifica l'elemento come un componente del badge MDL.
data-badge- Assegna un valore di stringa al badge. Le icone possono essere assegnate ad esso utilizzando i simboli 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>Risultato
Verifica il risultato.
MDL fornisce una gamma di classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti ai pulsanti. La tabella seguente elenca le classi disponibili e i loro effetti.
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-button Imposta il pulsante come componente MDL, obbligatorio. |
| 2 | mdl-js-button Aggiunge il comportamento MDL di base al pulsante, obbligatorio. |
| 3 | (none) Imposta l'effetto di visualizzazione piatta sul pulsante, impostazione predefinita. |
| 4 | mdl-button--raised Imposta l'effetto di visualizzazione in rilievo; questo si esclude a vicenda con fab, mini-fab e icon. |
| 5 | mdl-button--fab Imposta l'effetto di visualizzazione favoloso (circolare); questo si esclude a vicenda con in rilievo, mini-fab e icona. |
| 6 | mdl-button--mini-fab Imposta l'effetto di visualizzazione mini-fab (circolare piccolo fab); questo si esclude a vicenda con rilievo, favoloso e icona. |
| 7 | mdl-button--icon Imposta l'effetto di visualizzazione dell'icona (piccola circolare semplice); questo si esclude a vicenda con alzato, fab e mini-fab. |
| 8 | mdl-button--colored Imposta l'effetto di visualizzazione colorato in cui i colori sono definiti in material.min.css. |
| 9 | mdl-button--primary Imposta l'effetto di visualizzazione del colore primario in cui i colori sono definiti in material.min.css. |
| 10 | mdl-button--accent Imposta l'effetto di visualizzazione dei colori accentati in cui i colori sono definiti in material.min.css. |
| 11 | mdl-js-ripple-effect Imposta l'effetto clic ondulato, può essere utilizzato in combinazione con qualsiasi altra classe. |
Esempio
Il seguente esempio ti aiuterà a capire l'uso di mdl-button classi per mostrare i diversi tipi di pulsanti.
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>Risultato
Verifica il risultato.
MDL fornisce una gamma di classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti e visualizzare i diversi tipi di carte. La tabella seguente elenca le classi disponibili e i loro effetti.
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-card Identifica l'elemento div come un contenitore di schede MDL, obbligatorio nel div "esterno". |
| 2 | mdl-card--border Mette un bordo alla sezione della carta a cui è applicato e viene utilizzato sui div "interni". |
| 3 | mdl-shadow--2dp through mdl-shadow--16dp Imposta la profondità dell'ombra variabile (2, 3, 4, 6, 8 o 16) sulla scheda ed è opzionale, va su div "esterno"; se omesso, non viene mostrata alcuna ombra. |
| 4 | mdl-card__title Identifica div come contenitore del titolo della carta ed è obbligatorio nel div del titolo "interno". |
| 5 | mdl-card__title-text Aggiunge le caratteristiche del testo appropriate al titolo della carta ed è richiesto sul tag head (H1 - H6) all'interno del titolo div. |
| 6 | mdl-card__subtitle-text Aggiunge le caratteristiche del testo ai sottotitoli di una scheda ed è opzionale. Dovrebbe essere un figlio dell'elemento titolo. |
| 7 | mdl-card__media Identifica div come contenitore di supporti per schede ed è obbligatorio nel div media "interno". |
| 8 | mdl-card__supporting-text Identifica div come contenitore del corpo del testo della carta e assegna le caratteristiche del testo appropriate al corpo del testo ed è obbligatorio nel div del corpo del testo "interno"; il testo va direttamente all'interno del div senza contenitori intermedi. |
| 9 | mdl-card__actions Identifica div come contenitore di azioni della carta e assegna le caratteristiche del testo appropriate al testo delle azioni ed è richiesto per le azioni "interne" div; il contenuto va direttamente all'interno del div senza contenitori intermedi. |
Esempio
Il seguente esempio ti aiuterà a capire l'uso delle classi mdl-tooltip per mostrare diversi tipi di suggerimenti.
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>Risultato
Verifica il risultato.
MDL fornisce una gamma di classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti e visualizzare i diversi tipi di barre di avanzamento. La tabella seguente menziona le classi disponibili e i loro effetti.
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-js-progress Imposta il comportamento MDL di base sull'indicatore di avanzamento ed è una classe obbligatoria. |
| 2 | mdl-progress__indeterminate Imposta l'animazione sull'indicatore di avanzamento ed è una classe opzionale. |
Esempio
Il seguente esempio ti aiuterà a capire l'uso di mdl-js-progress classi per mostrare i diversi tipi di barre di avanzamento.
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>Risultato
Verifica il risultato.
MDL fornisce una gamma di classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti e visualizzare i diversi tipi di spinner. La tabella seguente elenca le classi disponibili e i loro effetti.
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-spinner Identifica un contenitore come componente di selezione MDL ed è una classe richiesta. |
| 2 | mdl-js-spinner Imposta il comportamento MDL di base su spinner ed è una classe obbligatoria. |
| 3 | is-active Mostra e anima lo spinner ed è opzionale. |
| 4 | mdl-spinner--single-color Utilizza un unico colore invece di cambiare i colori ed è opzionale. |
Esempio
Il seguente esempio ti aiuterà a capire l'uso di mdl-spinner classi e i diversi tipi di filatori.
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>Risultato
Verifica il risultato.
MDL fornisce una gamma di classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti e visualizzare diversi tipi di menu. La tabella seguente elenca le classi disponibili e i loro effetti
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-button Identifica il pulsante come componente MDL ed è obbligatorio sull'elemento pulsante. |
| 2 | mdl-js-button Imposta il comportamento MDL di base su button ed è obbligatorio sull'elemento button. |
| 3 | mdl-button--icon Imposta l'icona sul pulsante ed è obbligatorio sull'elemento pulsante. |
| 4 | material-icons Identifica l'intervallo come un'icona del materiale ed è obbligatorio su un elemento in linea. |
| 5 | mdl-menu Identifica un contenitore di elenchi non ordinato come componente MDL ed è obbligatorio sull'elemento ul. |
| 6 | mdl-js-menu Imposta il comportamento MDL di base su menu ed è richiesto sull'elemento ul. |
| 7 | mdl-menu__item Identifica i pulsanti come opzioni di menu MDL e imposta il comportamento MDL di base, richiesto per gli elementi dell'elenco. |
| 8 | mdl-js-ripple-effect Imposta l'effetto del clic con increspatura sui collegamenti delle opzioni ed è opzionale; obbligatorio su un elemento di elenco non ordinato. |
| 9 | mdl-menu--top-left Imposta la posizione del menu sopra il pulsante, allinea il bordo sinistro del menu con il pulsante ed è opzionale; obbligatorio su un elemento di elenco non ordinato. |
| 10 | (none) Per impostazione predefinita, il menu è posizionato sotto il pulsante, allineato al bordo sinistro con il pulsante. |
| 11 | mdl-menu--top-right Il menu è posizionato sopra il pulsante, si allinea al bordo destro con il pulsante, opzionale e va su un elemento dell'elenco non ordinato. |
| 12 | mdl-menu--bottom-right il menu è posizionato sotto il pulsante, si allinea al bordo destro con il pulsante, opzionale e va su un elemento dell'elenco non ordinato. |
Esempio
Il seguente esempio ti aiuterà a capire l'uso di mdl-spinner classi per mostrare i diversi tipi di filatori.
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>Risultato
Verifica il risultato.
MDL fornisce una gamma di classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti e visualizzare i diversi tipi di menu. La tabella seguente elenca le classi disponibili e i loro effetti.
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-slider Identifica l'elemento di input come componente MDL ed è obbligatorio. |
| 2 | mdl-js-slider Imposta il comportamento MDL di base sull'elemento di input ed è obbligatorio. |
Esempio
Il seguente esempio ti aiuterà a capire l'uso delle classi mdl-slider per mostrare i diversi tipi di cursori.
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>Risultato
Verifica il risultato.
MDL fornisce una gamma di classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti e visualizzare i diversi tipi di caselle di controllo. La tabella seguente elenca le classi disponibili e i loro effetti.
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-checkbox Identifica l'etichetta come un componente MDL ed è obbligatorio sull'elemento etichetta. |
| 2 | mdl-js-checkbox Imposta il comportamento MDL di base su etichetta ed è obbligatorio sull'elemento etichetta. |
| 3 | mdl-checkbox__input Imposta il comportamento MDL di base sulla casella di controllo ed è obbligatorio sull'elemento di input (casella di controllo). |
| 4 | mdl-checkbox__label Imposta il comportamento MDL di base sulla didascalia ed è obbligatorio per l'elemento span (didascalia). |
| 5 | mdl-js-ripple-effect Imposta l'effetto clic con increspatura ed è opzionale; va sull'elemento etichetta e non sull'elemento di input (casella di controllo). |
Esempio
Il seguente esempio ti aiuterà a capire l'uso delle classi mdl-slider per mostrare i diversi tipi di caselle di controllo.
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>Risultato
Verifica il risultato.
MDL fornisce una gamma di classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti e visualizzare i diversi tipi di pulsanti di opzione. La tabella seguente elenca le classi disponibili e i loro effetti.
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-radio Identifica l'etichetta come un componente MDL ed è obbligatorio sull'elemento etichetta. |
| 2 | mdl-js-radio Imposta il comportamento MDL di base su etichetta ed è obbligatorio sull'elemento etichetta. |
| 3 | mdl-radio__button Imposta il comportamento MDL di base su radio ed è richiesto sull'elemento di input (pulsante di opzione). |
| 4 | mdl-radio__label Imposta il comportamento MDL di base sulla didascalia ed è obbligatorio per l'elemento span (didascalia). |
| 5 | mdl-js-ripple-effect Imposta l'effetto clic con increspatura ed è opzionale; va sull'elemento etichetta e non sull'elemento di input (pulsante di opzione). |
Esempio
Il seguente esempio ti aiuterà a capire l'uso delle classi mdl-slider per mostrare i diversi tipi di pulsanti di opzione.
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>Risultato
Verifica il risultato.
MDL fornisce una gamma di classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti e visualizzare i diversi tipi di caselle di controllo come icone. Le tabelle seguenti elencano le classi disponibili e i loro effetti.
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-icon-toggle Identifica l'etichetta come un componente MDL ed è obbligatorio sull'elemento etichetta. |
| 2 | mdl-js-icon-toggle Imposta il comportamento MDL di base su etichetta ed è obbligatorio sull'elemento etichetta. |
| 3 | mdl-icon-toggle__input Imposta il comportamento MDL di base su icon-toggle ed è richiesto sull'elemento di input (icon-toggle). |
| 4 | mdl-icon-toggle__label Imposta il comportamento MDL di base sulla didascalia ed è richiesto sull'elemento i (icona). |
| 5 | mdl-js-ripple-effect Imposta l'effetto clic con increspatura ed è opzionale; va sull'elemento etichetta e non sull'elemento di input (icon-toggle). |
Esempio
L'esempio seguente mostra l'uso di mdl-icon-toggle classi per mostrare diversi tipi di caselle di controllo come icone.
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>Risultato
Verifica il risultato.
MDL fornisce una gamma di classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti e visualizzare i diversi tipi di caselle di controllo come interruttori. La tabella seguente elenca le classi disponibili e i loro effetti.
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-switch Identifica l'etichetta come un componente MDL ed è obbligatorio sull'elemento etichetta. |
| 2 | mdl-js-switch Imposta il comportamento MDL di base su etichetta ed è obbligatorio sull'elemento etichetta. |
| 3 | mdl-switch__input Imposta il comportamento MDL di base su switch ed è richiesto sull'elemento di input (switch). |
| 4 | mdl-switch__label Imposta il comportamento MDL di base su didascalia ed è obbligatorio per l'elemento di input (didascalia). |
| 5 | mdl-js-ripple-effect Imposta l'effetto clic con increspatura ed è opzionale; va sull'elemento label e non sull'elemento input (switch). |
Esempio
Il seguente esempio ti aiuterà a capire l'uso delle classi mdl-switch e dei diversi tipi di caselle di controllo come 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>Risultato
Verifica il risultato.
MDL fornisce una gamma di classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti e visualizzare una tabella come tabella di dati. La tabella seguente elenca le classi disponibili e i loro effetti.
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-data-table Identifica la tabella come un componente MDL ed è richiesta sull'elemento della tabella. |
| 2 | mdl-js-data-table Imposta il comportamento MDL di base su table ed è obbligatorio sull'elemento table. |
| 3 | mdl-data-table--selectable Imposta il comportamento selezionabile tutto / individualmente (caselle di controllo) ed è opzionale; va sull'elemento della tabella. |
| 4 | mdl-data-table__cell--non-numeric Imposta la formattazione del testo sulla cella di dati ed è opzionale; va sull'intestazione della tabella e sulle celle dei dati della tabella. |
| 5 | (none) Per impostazione predefinita, imposta la formattazione numerica sull'intestazione o sulla cella di dati. |
Esempio
Il seguente esempio ti aiuterà a capire l'uso di mdl-data-table classi per mostrare una tabella di dati.
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>Risultato
Verifica il risultato.
MDL fornisce una gamma di classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti e visualizzare i diversi tipi di input di testo. La tabella seguente elenca le classi disponibili e i loro effetti.
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-textfield Identifica il contenitore come un componente MDL ed è obbligatorio per l'elemento div "esterno". |
| 2 | mdl-js-textfield Imposta il comportamento MDL di base sull'input ed è obbligatorio per l'elemento div "esterno". |
| 3 | mdl-textfield__input Identifica l'elemento come input del campo di testo ed è richiesto sull'elemento di input o textarea. |
| 4 | mdl-textfield__label Identifica l'elemento come etichetta del campo di testo ed è richiesto sull'elemento etichetta per gli elementi di input o textarea. |
| 5 | mdl-textfield--floating-label Applica l'effetto etichetta mobile ed è opzionale; va sull'elemento div "esterno". |
| 6 | mdl-textfield__error Identifica l'intervallo come messaggio di errore MDL ed è facoltativo; continua l'elemento span per l'elemento di input MDL con pattern. |
| 7 | mdl-textfield--expandable Identifica un div come un contenitore di campi di testo espandibile MDL; utilizzato per campi di input espandibili ed è obbligatorio per l'elemento div "esterno". |
| 8 | mdl-button Identifica l'etichetta come un pulsante icona MDL; utilizzato per campi di input espandibili ed è obbligatorio per l'elemento etichetta del div "esterno". |
| 9 | mdl-js-button Imposta il comportamento di base al contenitore di icone; utilizzato per campi di input espandibili ed è obbligatorio per l'elemento etichetta del div "esterno". |
| 10 | mdl-button--icon Identifica l'etichetta come un contenitore di icone MDL; utilizzato per campi di input espandibili ed è obbligatorio per l'elemento etichetta del div "esterno". |
| 11 | mdl-input__expandable-holder Identifica un contenitore come componente MDL; utilizzato per i campi di input espandibili ed è obbligatorio per l'elemento div "interno". |
| 12 | is-invalid Identifica il campo di testo come non valido al caricamento iniziale ed è facoltativo sull'elemento mdl-textfield. |
Esempio
Il seguente esempio ti aiuterà a capire l'uso delle classi mdl-textfield per mostrare i diversi tipi di campi di testo.
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>Risultato
Verifica il risultato.
MDL fornisce una gamma di classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti e visualizzare i diversi tipi di suggerimenti. La tabella seguente elenca le classi disponibili e i loro effetti.
| Sr.No. | Nome e descrizione della classe |
|---|---|
| 1 | mdl-tooltip Identifica il contenitore come una descrizione comando MDL ed è obbligatorio nell'elemento contenitore della descrizione comando. |
| 2 | mdl-tooltip--large Imposta l'effetto per caratteri grandi ed è opzionale; va sull'elemento contenitore del tooltip. |
Esempio
Il seguente esempio ti aiuterà a capire l'uso di mdl-tooltip classi per mostrare i diversi tipi di suggerimenti.
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>Risultato
Verifica il risultato.