MDL – Layouts


Material Design Lite – Layouts

”;


Previous

Next

In this chapter, we will discuss the different layouts in Material Design Lite. HTML5 has the
following container elements −

  • <div> − Provides a generic container to HTML content.

  • <header> − Represents the header section.

  • <footer> − Represents the footer section.

  • <article> − Represents articles.

  • <section> − Provides a generic container for various types of sections.

MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the containers. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-layout

Identifies a container as an MDL component. Required on outer container element.
2

mdl-js-layout

Adds basic MDL behavior to layout. Required on outer container element.
3

mdl-layout__header

Identifies container as an MDL component. Required on header element.
4

mdl-layout-icon

Used to add an application icon. Gets overridden by menu icon if both are visible. Optional icon element.
5

mdl-layout__header-row

Identifies container as MDL header row. Required on header content container.
6

mdl-layout__title

Identifies layout title text. Required on layout title container.
7

mdl-layout-spacer

Used to align elements inside a header or drawer. It grows to fill remaining space. Commonly used for aligning elements to the right. Optional on div following layout title.
8

mdl-navigation

Identifies container as MDL navigation group. Required on nav element.
9

mdl-navigation__link

Identifies anchor as MDL navigation link. Required on header and/or drawer anchor elements.
10

mdl-layout__drawer

Identifies container as MDL layout drawer. Required on drawer container element.
11

mdl-layout__content

Identifies container as MDL layout content. Required on main element.
12

mdl-layout__header–scroll

Makes the header scroll with the content. Optional on header element.
13

mdl-layout–fixed-drawer

Makes the drawer always visible and open in larger screens. Optional on outer container element and not on drawer container element.
14

mdl-layout–fixed-header

Makes the header always visible, even in small screens. Optional on outer container element.
15

mdl-layout–large-screen-only

Hides an element on smaller screens. Optional on any descendant of mdl-layout.
16

mdl-layout–small-screen-only

Hides an element on larger screens. Optional on any descendant of mdl-layout.
17

mdl-layout__header–waterfall

Allows a “waterfall” effect with multiple header lines. Optional on header element.
18

mdl-layout__header–transparent

Makes header transparent and draws on top of layout background. Optional on header element.
19

mdl-layout__header–seamed

Uses a header without a shadow. Optional on header element.
20

mdl-layout__tab-bar

Identifies container as an MDL tab bar. Required on container element inside header (tabbed layout).
21

mdl-layout__tab

Identifies anchor as MDL tab link. Required on tab bar anchor elements.
22

is-active

Identifies tab as default active tab. Optional on tab bar anchor element and associated tab section element.
23

mdl-layout__tab-panel

Identifies container as tab content panel. Required on tab section elements.
24

mdl-layout–fixed-tabs

Uses fixed tabs instead of the default scrollable tabs. Optional on outer container element , not container inside header.

The following examples show the use of mdl-layout class to style various containers.

Fixed Drawer

To create a template with fixed drawer but no header, the following MDL classes are used.

  • mdl-layout − Identifies a div as an MDL component.

  • mdl-js-layout − Adds basic MDL behavior to outer div.

  • mdl-layout–fixed-drawer − Makes the drawer always visible and open in larger screens.

  • mdl-layout__drawer − Identifies div as MDL layout drawer.

  • mdl-layout-title − Identifies layout title text.

  • mdl-navigation − Identifies div as MDL navigation group.

  • mdl-navigation__link − Identifies anchor as MDL navigation link.

  • mdl-layout__content − Identifies div as MDL layout content.

mdl_fixeddrawer.htm

Live Demo 
<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>

Result

Verify the result.