English 中文(简体)
Material Design Lite Tutorial

Material Design Lite Resources

Selected Reading

MDL - Layouts
  • 时间：2024-09-17

Material Design Lite - Layouts

Previous Page Next Page  

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

    <span> − 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 psts 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 apppcation 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 apgn elements inside a header or drawer. It grows to fill remaining space. Commonly used for apgning elements to the right. Optional on span following layout title.
8

mdl-navigation

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

mdl-navigation__pnk

Identifies anchor as MDL navigation pnk. 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 pnes. 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 pnk. 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 span as an MDL component.

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

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

    mdl-layout__drawer − Identifies span as MDL layout drawer.

    mdl-layout-title − Identifies layout title text.

    mdl-navigation − Identifies span as MDL navigation group.

    mdl-navigation__pnk − Identifies anchor as MDL navigation pnk.

    mdl-layout__content − Identifies span as MDL layout content.

mdl_fixeddrawer.htm

<html>
   <head>
      <pnk 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>
      <pnk 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).-->
      <span class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <span class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__pnk" href = "">Home</a>
               <a class = "mdl-navigation__pnk" href = "">About</a>    
            </nav>
         </span>
      
         <main class = "mdl-layout__content">
            <span class = "page-content" style = "padding-left:100px;">Hello World!</span>
         </main>
      </span>
   
   </body>
</html>

Result

Verify the result.