Material Design Lite - Fichas

El componente de la pestaña Material Design Lite (MDL) es un componente de interfaz de usuario que ayuda a mostrar múltiples pantallas en un solo espacio de manera exclusiva.

MDL proporciona varias clases de CSS para aplicar varias mejoras visuales y de comportamiento predefinidas a las pestañas. La siguiente tabla menciona las clases disponibles y sus efectos.

No Señor. Nombre y descripción de la clase
1

mdl-layout

Identifica un contenedor como un componente MDL. Requerido en el elemento contenedor exterior.
2

mdl-tabs

Identifica un contenedor de pestañas como componente MDL. Obligatorio en el elemento div "externo".
3

mdl-js-tabs

Establece el comportamiento básico de MDL en el contenedor de pestañas. Obligatorio en el elemento div "externo".
4

mdl-js-ripple-effect

Agrega un efecto de clic ondulado a los enlaces de pestañas Opcional; pasa al elemento div "externo".
5

mdl-tabs__tab-bar

Identifica un contenedor como una barra de vínculos de pestañas MDL. Obligatorio en el primer elemento div "interno".
6

mdl-tabs__tab

Identifica un ancla (enlace) como activador de pestañas MDL. Obligatorio en todos los enlaces del primer elemento div "interno".
7

is-active

Identifica una pestaña como la pestaña de visualización predeterminada. Requerido en uno (y solo uno) de los elementos div (tabulación) "internos".
8

mdl-tabs__panel

Identifica un contenedor como contenido de pestaña. Obligatorio en cada uno de los elementos div (tabulación) "internos".

Ejemplo

El siguiente ejemplo lo ayudará a comprender el uso de la clase mdl-tab para diseñar contenidos en varias pestañas.

Las clases MDL que se indican a continuación se utilizarán en este ejemplo:

  • mdl-layout - Identifica un div como componente MDL.

  • mdl-js-layout - Agrega el comportamiento básico de MDL al div externo.

  • mdl-layout--fixed-header - Hace que el encabezado esté siempre visible, incluso en pantallas pequeñas.

  • mdl-layout__header-row - Identifica el contenedor como fila de encabezado MDL.

  • mdl-layout-title - Identifica el texto del título del diseño.

  • mdl-layout__content - Identifica div como contenido de diseño MDL.

  • mdl-tabs - Identifica un contenedor de pestañas como un componente MDL.

  • mdl-js-tabs - Establece el comportamiento básico de MDL en el contenedor de pestañas.

  • mdl-tabs__tab-bar - Identifica un contenedor como una barra de vínculos de pestañas MDL.

  • mdl-tabs__tab - Identifica un ancla (enlace) como activador de pestañas MDL.

  • is-active - Identifica una pestaña como la pestaña de visualización predeterminada.

  • mdl-tabs__panel - Identifica un contenedor como contenido de pestaña.

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>

Resultado

Verifica el resultado.