Material Design Lite. Layout

Для основной разметки страницы используются классы, которые как правило имеют в составе слово mdl_layout.

mdl-layout - Identifies a container as an MDL component. Required on outer container element.
mdl-js-layout - Adds basic MDL behavior to layout. Required on outer container element.
mdl-layout__header - Identifies container as an MDL component. Required on header element.
mdl-layout-icon - Used to add an application icon. Gets overridden by menu icon if both are visible. Optional icon element.
mdl-layout__header-row - Identifies container as MDL header row. Required on header content container.
mdl-layout__title - Identifies layout title text. Required on layout title container.
mdl-layout-spacer - Used to align elements inside a header or drawer. It grows to fill remaining space. Commonly used for right aligning elements. Optional on div following layout title.
mdl-navigation - Identifies container as MDL navigation group. Required on nav element.
mdl-navigation__link - навигационные ссылки. Используются в шапках и шторках.
mdl-layout__drawer - Identifies container as MDL layout drawer. Required on drawer container element.
mdl-layout__content - Identifies container as MDL layout content. Required on main element.
mdl-layout__header--scroll - Makes the header scroll with the content. Optional on header element.
mdl-layout--fixed-drawer - Makes the drawer always visible and open in larger screens. Optional on outer container element not on drawer container element.
mdl-layout--fixed-header - Makes the header always visible, even in small screens. Optional on outer container element.
mdl-layout--large-screen-only - Hides an element on smaller screens. Optional on any descendant of mdl-layout.
mdl-layout--small-screen-only - Hides an element on larger screens. Optional on any descendant of mdl-layout.
mdl-layout__header--waterfall - Allows a "waterfall" effect with multiple header lines. Optional on header element.
mdl-layout__header--transparent - Makes header transparent and draws on top of layout background. Optional on header element.
mdl-layout__header--seamed - Uses a header without a shadow. Optional on header element.
mdl-layout__tab-bar - Identifies container as an MDL tab bar. Required on container element inside header (tabbed layout).
mdl-layout__tab - Identifies anchor as MDL tab link. Required on tab bar anchor elements.
is-active - Identifies tab as default active tab. Optional on tab bar anchor element and associated tab section element.
mdl-layout__tab-panel - Identifies container as tab content panel. Required on tab section elements.
mdl-layout--fixed-tabs - Uses fixed tabs instead of the default scrollable tabs. Optional on outer container element , not container inside header.

Фиксированная шторка

Для создания шаблона с фиксированной шторкой на больших экранах и без заголовка используйте классы:

mdl-layout - div для контейнера.
mdl-js-layout - добавляет базовое поведение к внешнему div.
mdl-layout--fixed-drawer - шторка всегда видима и открыта на больших экранах.
mdl-layout__drawer - блок div для разметки шторки.
mdl-layout-title - текст для заголовка разметки.
mdl-navigation - div для навигационной группы.
mdl-navigation__link - навигационные ссылки.
mdl-layout__content - div для содержимого страницы.

Содержимое шторки формируется в блоке mdl-layout__drawer. В нёй можно разместить заголовок mdl-layout-title и навигационные ссылки mdl-navigation__link.


<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
    <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Заголовок шторки</span>
        <nav class="mdl-navigation">
           <a class="mdl-navigation__link" href="">Первая ссылка</a>
           <a class="mdl-navigation__link" href="">Вторая ссылка</a>
           <a class="mdl-navigation__link" href="">Третья ссылка в шторке</a>           
        </nav>
    </div>
    <main class="mdl-layout__content">
        <div class="page-content" style="padding-left:100px;">
          <h1>Фиксированная шторка</h1>
          
          <p>Без заголовка. Шторка открыта на больших экранах.</p>
        </div>
    </main>
</div>

Пример с фиксированной шторкой

Шапка

Если требуется добавить шапку к странице, то используйте класс mdl-layout--fixed-header. Содержимое шапки реализуется в теге header.

Пример с фиксированной шторкой и шапкой

Если нужна шапка, но не нужна открытая шторка на больших экранах, то в главном контейнере не используйте класс mdl-layout--fixed-drawer. Шторку можно добавить отдельно через mdl-layout__drawer

Пример с шапкой и закрытой шторкой.

Чтобы шапка прокручивалась вместе с содержимым страницы, то к header добавьте ещё один класс mdl-layout__header--scroll.

Пример с прокручиваемой шапкой.

Динамическая шапка

Эффект, когда шапка сворачивается при прокрутке страницы, достигается классом mdl-layout__header--waterfall в шапке header.

Пример динамической шапки

Фиксированная шапка с прокручиваемыми вкладками

Для создания вкладок в шапке используются классы.

mdl-layout__tab-bar - контейнер для вкладок.
mdl-layout__tab - якорь для ссылок вкладки
mdl-layout__tab-panel - контейнер для содержимого вкладки

Активная вкладка определяется классом is-active.

Содержимое размещается в section с классом mdl-layout__tab-panel, активное содержимое задаётся с помощью is-active.

Пример с прокручиваемыми вкладками

Фиксированная шапка с фиксированными вкладками

Фиксированные вкладки равномерно растягиваются во всю ширину страницы с помощью класса mdl-layout--fixed-tabs.

Пример с фиксированными вкладками