Material Design Lite - Diseños
En este capítulo, analizaremos los diferentes diseños de Material Design Lite. HTML5 tiene los siguientes elementos de contenedor:
<div> - Proporciona un contenedor genérico para contenido HTML.
<header> : Representa la sección del encabezado.
<footer> - Representa la sección de pie de página.
<article> - Representa artículos.
<section> - Proporciona un contenedor genérico para varios tipos de secciones.
MDL proporciona varias clases de CSS para aplicar varias mejoras visuales y de comportamiento predefinidas a los contenedores. La siguiente tabla enumera 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-js-layout Agrega el comportamiento básico de MDL al diseño. Requerido en el elemento contenedor exterior. |
| 3 | mdl-layout__header Identifica el contenedor como un componente MDL. Requerido en el elemento de encabezado. |
| 4 | mdl-layout-icon Se usa para agregar un ícono de aplicación. Se reemplaza por el icono de menú si ambos están visibles. Elemento de icono opcional. |
| 5 | mdl-layout__header-row Identifica el contenedor como fila de encabezado MDL. Obligatorio en el contenedor de contenido del encabezado. |
| 6 | mdl-layout__title Identifica el texto del título del diseño. Requerido en el contenedor de título de diseño. |
| 7 | mdl-layout-spacer Se utiliza para alinear elementos dentro de un encabezado o cajón. Crece para llenar el espacio restante. Se usa comúnmente para alinear elementos a la derecha. Opcional en div siguiendo el título del diseño. |
| 8 | mdl-navigation Identifica el contenedor como grupo de navegación MDL. Requerido en el elemento de navegación. |
| 9 | mdl-navigation__link Identifica el ancla como enlace de navegación MDL. Requerido en elementos de anclaje de cabecera y / o cajón. |
| 10 | mdl-layout__drawer Identifica el contenedor como cajón de diseño MDL. Requerido en el elemento contenedor del cajón. |
| 11 | mdl-layout__content Identifica el contenedor como contenido de diseño MDL. Requerido en el elemento principal. |
| 12 | mdl-layout__header--scroll Hace que el encabezado se desplace con el contenido. Opcional en el elemento de encabezado. |
| 13 | mdl-layout--fixed-drawer Hace que el cajón esté siempre visible y abierto en pantallas más grandes. Opcional en el elemento contenedor exterior y no en el elemento contenedor de cajón. |
| 14 | mdl-layout--fixed-header Hace que el encabezado esté siempre visible, incluso en pantallas pequeñas. Opcional en el elemento contenedor exterior. |
| 15 | mdl-layout--large-screen-only Oculta un elemento en pantallas más pequeñas. Opcional en cualquier descendiente de mdl-layout. |
| dieciséis | mdl-layout--small-screen-only Oculta un elemento en pantallas más grandes. Opcional en cualquier descendiente de mdl-layout. |
| 17 | mdl-layout__header--waterfall Permite un efecto de "cascada" con múltiples líneas de encabezado. Opcional en el elemento de encabezado. |
| 18 | mdl-layout__header--transparent Hace que el encabezado sea transparente y se dibuja sobre el fondo del diseño. Opcional en el elemento de encabezado. |
| 19 | mdl-layout__header--seamed Utiliza un encabezado sin sombra. Opcional en el elemento de encabezado. |
| 20 | mdl-layout__tab-bar Identifica el contenedor como una barra de pestañas MDL. Requerido en el elemento contenedor dentro del encabezado (diseño con pestañas). |
| 21 | mdl-layout__tab Identifica el ancla como enlace de pestaña MDL. Obligatorio en los elementos de ancla de la barra de pestañas. |
| 22 | is-active Identifica la pestaña como pestaña activa predeterminada. Opcional en el elemento de anclaje de la barra de pestañas y el elemento de sección de pestaña asociado. |
| 23 | mdl-layout__tab-panel Identifica el contenedor como panel de contenido de la pestaña. Obligatorio en los elementos de la sección de pestañas. |
| 24 | mdl-layout--fixed-tabs Utiliza pestañas fijas en lugar de las pestañas desplazables predeterminadas. Opcional en el elemento contenedor exterior, no en el encabezado interior del contenedor. |
Los siguientes ejemplos muestran el uso de la clase mdl-layout para diseñar varios contenedores.
Cajón fijo
Para crear una plantilla con cajón fijo pero sin encabezado, se utilizan las siguientes clases de MDL.
mdl-layout - Identifica un div como componente MDL.
mdl-js-layout - Agrega el comportamiento básico de MDL al div externo.
mdl-layout--fixed-drawer - Hace que el cajón esté siempre visible y abierto en mamparas más grandes.
mdl-layout__drawer - Identifica div como cajón de diseño MDL.
mdl-layout-title - Identifica el texto del título del diseño.
mdl-navigation - Identifica div como grupo de navegación MDL.
mdl-navigation__link - Identifica el ancla como enlace de navegación MDL.
mdl-layout__content - Identifica div como contenido de diseño 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>Resultado
Verifique el resultado.
Encabezado fijo
Para crear una plantilla con encabezado fijo, se utiliza la siguiente clase MDL adicional.
mdl-layout--fixed-header - Hace que el encabezado esté siempre visible, incluso en pantallas pequeñas.
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>Resultado
Verifique el resultado.
Cabecera y cajón fijos
Para crear una plantilla con encabezado fijo y un cajón fijo, se utilizan las siguientes clases MDL adicionales.
mdl-layout--fixed-drawer - Hace que el cajón esté siempre visible y abierto en mamparas más grandes.
mdl-layout--fixed-header - Hace que el encabezado esté siempre visible, incluso en pantallas pequeñas.
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>Resultado
Verifique el resultado.
Encabezado de desplazamiento
Para crear una plantilla con encabezado de desplazamiento, se utilizan las siguientes clases de MDL.
mdl-layout--header--scroll - Hace que el encabezado se desplace con el contenido.
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>Resultado
Verifique el resultado.
Encabezado de contratación
Para crear una plantilla con un encabezado que se contrae a medida que la página se desplaza hacia abajo, se utiliza la siguiente clase MDL.
mdl-layout__header--waterfall - Permite un efecto de "cascada" con múltiples líneas de encabezado.
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>Resultado
Verifique el resultado.
Encabezado fijo con pestañas desplazables
Para crear una plantilla con un encabezado que tenga pestañas desplazables, se utilizan las siguientes clases de MDL.
mdl-layout__tab-bar - Identifica el contenedor como una barra de pestañas MDL.
mdl-layout__tab - Identifica el ancla como un enlace de pestaña MDL.
mdl-layout__tab-panel - Identifica el contenedor como un panel de contenido de pestaña.
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>Resultado
Verifique el resultado.
Encabezado fijo con pestañas fijas
Para crear una plantilla con un encabezado con pestañas fijas, se utiliza la siguiente clase MDL adicional.
mdl-layout--fixed-tabs - Utiliza pestañas fijas en lugar de las pestañas desplazables predeterminadas.
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>Resultado
Verifique el resultado.