Layouts

Navigation layouts

The screen width must be wider than 1024px to see the header in any case.

Navigation Layout with transparent header

Title

Fixed drawer, no header

Title

The content.

Fixed header

Always shows a header, even in smaller screens.

mdl-layout-header-seamed removes the shadow

Title

Fixed header and drawer

The drawer is always open in large screens. The header is always shown, even in small screens.

Title

  
   ...

  ]]>

Scrolling header

Uses a header that scrolls with the text, rather than staying locked at the top

Title

  
   ...

  ]]>

Waterfall header

Uses a header that contracts as the page scrolls down.

Title

  
   ...

  ]]>

Fixed tabs

Title

person

Tab 1

active index:

  
   
      
         
            Title
         
      
      
         Title
      
      
         
					
						personTab 1
					
					
						1
					
         
         
            2
         
         
            3
         
      
   

  ]]>

Grid

Please visit the original material lite documentation how to use the grid system.

Footer

Please visit the original material lite documentation how to create footers.

Layout-Components

Component	Description
mdl-layout	Parent component for a mdl layout. Needs the child components mdl-layout-header (optional), mdl-layout-drawer (optional) and mdl-layout-content. The layout is exportted as mdlLayout in the view. The methods toggleDrawer and closeDrawer are exported.
mdl-layout-drawer	The drawer of the layout. If present a button that toggles the drawer is automatically created.
mdl-layout-header	The header component of a layout. May contain multiple mdl-layout-header-row directives.
mdl-layout-header-row
mdl-layout-spacer	Components that creates a spacer - e.g. a flex-grow:1 div to occupy much space as possible between components.
mdl-layout-tab-panel	A component within the mdl.layout-content that will be used as the tab content. The tabs are created automatically and are placed in the provided mdl-layout-header.
mdl-layout-title	Component that specifies the title with a mdl-layout-header-row.

Layout-Component Attributes

Attribute	Description
mdl-layout-mode	The following modes are supported standard no special handling for the header. waterfall If the content scrolls the header will be reduced to one row if the header consists of multiple header rows. scroll The header scrolls with the content. e.g. is not fixed to the top.
mdl-layout-fixed-drawer	The drawer is fixed - e.g. is always open
mdl-layout-fixed-header	The header is fixed - e.g. is always visible even on small screens (less than 1024px width)
mdl-layout-header-seamed	The header has a drop shadow
mdl-layout-no-drawer-button	If the layout contains a mdl-layout-drawer a button is rendered at the header to toggle the drawer. If mdl-layout-no-drawer-button is present this button will not be drawn to the view.
mdl-layout-tab-active-changed	Event-listener function that will be fired if the activ tab index changed. The changed index is stored in the index property of the event object.
mdl-layout-tab-active-index	Secifies the index of the active tab. Needs mdl-layout-tab-panel components within the mdl-layout-content.
mdl-layout-tab-mouseout	Event-listener function that will be fired if the mouse is over a tab. The index is stored in the index property of the event object.
mdl-layout-tab-mouseover	Event-listener function that will be fired if the mouse is out of a tab. The index is stored in the index property of the event object.
mdl-ripple	BooleanProperty. If present or true the tabs will ripple on click or tap.

Layout-Header-Component Attributes

Attribute	Description
mdl-layout-header-transparent	Creates a header with no background color.

Layout-Tab-Panel-Component Attributes

Attribute	Description
mdl-layout-tab-panel-title	The content of this attribute is used to create the tab title.