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.