Aug
10
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. Fixed Header To create a template with fixed header following additional MDL class is used. mdl-layout–fixed-header − Makes the header always visible, even in small screens. mdl_fixedheader.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> <!– 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> Result Verify the result. Fixed Header and Drawer To create a template with fixed header and a fixed drawer, following additional MDL classes are used. mdl-layout–fixed-drawer − Makes the drawer always visible and open in larger screens. mdl-layout–fixed-header − Makes the header always visible, even in small screens. mdl_fixedheader.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> <!– 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