Material Design Lite - макеты

В этой главе мы обсудим различные макеты в Material Design Lite. HTML5 имеет следующие элементы контейнера -

• <div> - Предоставляет общий контейнер для содержимого HTML.

• <header> - представляет раздел заголовка.

• <footer> - представляет раздел нижнего колонтитула.

• <article> - представляет статьи.

• <section> - Предоставляет общий контейнер для различных типов разделов.

MDL предоставляет различные классы CSS для применения к контейнерам различных предопределенных визуальных и поведенческих улучшений. В следующей таблице перечислены доступные классы и их эффекты.

Sr. No.	Имя и описание класса
1	mdl-layout Определяет контейнер как компонент MDL. Обязательно для внешнего элемента контейнера.
2	mdl-js-layout Добавляет базовое поведение MDL в макет. Обязательно для внешнего элемента контейнера.
3	mdl-layout__header Определяет контейнер как компонент MDL. Обязательно в элементе заголовка.
4	mdl-layout-icon Используется для добавления значка приложения. Переопределяется значком меню, если видны оба. Необязательный элемент значка.
5	mdl-layout__header-row Определяет контейнер как строку заголовка MDL. Требуется для контейнера содержимого заголовка.
6	mdl-layout__title Обозначает текст заголовка макета. Обязательно в контейнере заголовка макета.
7	mdl-layout-spacer Используется для выравнивания элементов внутри заголовка или ящика. Он увеличивается, чтобы заполнить оставшееся пространство. Обычно используется для выравнивания элементов по правому краю. Необязательно для div после заголовка макета.
8	mdl-navigation Определяет контейнер как группу навигации MDL. Обязательно для элемента навигации.
9	mdl-navigation__link Определяет привязку как ссылку навигации MDL. Требуется для элементов привязки заголовка и / или ящика.
10	mdl-layout__drawer Определяет контейнер как выдвижной ящик макета MDL. Обязательно на элементе контейнера ящика.
11	mdl-layout__content Определяет контейнер как содержимое макета MDL. Обязательно для основного элемента.
12	mdl-layout__header--scroll Заставляет заголовок прокручиваться вместе с содержимым. Необязательный для элемента заголовка.
13	mdl-layout--fixed-drawer Делает ящик всегда видимым и открытым на больших экранах. Необязательный для внешнего элемента контейнера, а не для элемента контейнера выдвижного ящика.
14	mdl-layout--fixed-header Делает заголовок всегда видимым, даже на маленьких экранах. Необязательный для внешнего элемента контейнера.
15	mdl-layout--large-screen-only Скрывает элемент на экранах меньшего размера. Необязательный для любого потомка mdl-layout.
16	mdl-layout--small-screen-only Скрывает элемент на больших экранах. Необязательный для любого потомка mdl-layout.
17	mdl-layout__header--waterfall Позволяет создать эффект «водопада» с несколькими строками заголовка. Необязательный для элемента заголовка.
18	mdl-layout__header--transparent Делает заголовок прозрачным и рисует поверх фона макета. Необязательный для элемента заголовка.
19	mdl-layout__header--seamed Использует заголовок без тени. Необязательный для элемента заголовка.
20	mdl-layout__tab-bar Определяет контейнер как панель вкладок MDL. Обязательно для элемента контейнера внутри заголовка (макет с вкладками).
21 год	mdl-layout__tab Определяет привязку как ссылку на вкладку MDL. Обязательно для элементов привязки панели вкладок.
22	is-active Определяет вкладку как активную вкладку по умолчанию. Необязательно для элемента привязки панели вкладок и связанного элемента раздела вкладки.
23	mdl-layout__tab-panel Определяет контейнер как вкладку панели содержимого. Обязательно для элементов раздела вкладки.
24	mdl-layout--fixed-tabs Использует фиксированные вкладки вместо прокручиваемых вкладок по умолчанию. Необязательный для внешнего элемента контейнера, а не для контейнера внутри заголовка.

В следующих примерах показано использование класса mdl-layout для стилизации различных контейнеров.

Фиксированный ящик

Чтобы создать шаблон с фиксированным ящиком, но без заголовка, используются следующие классы MDL.

• mdl-layout - Определяет div как компонент MDL.

• mdl-js-layout - Добавляет базовое поведение MDL к внешнему div.

• mdl-layout--fixed-drawer - Делает ящик всегда видимым и открывается на больших экранах.

• mdl-layout__drawer - Определяет div как макет MDL.

• mdl-layout-title - Определяет текст заголовка макета.

• mdl-navigation - Определяет div как группу навигации MDL.

• mdl-navigation__link - Определяет привязку как ссылку навигации MDL.

• mdl-layout__content - Определяет div как содержимое макета MDL.

mdl_fixeddrawer.htm

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

Результат

Проверьте результат.

Фиксированный заголовок

Для создания шаблона с фиксированным заголовком используется следующий дополнительный класс MDL.

• mdl-layout--fixed-header - Делает заголовок всегда видимым, даже на маленьких экранах.

mdl_fixedheader.htm

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

Результат

Проверьте результат.

Фиксированный заголовок и ящик

Для создания шаблона с фиксированным заголовком и фиксированным ящиком используются следующие дополнительные классы MDL.

• mdl-layout--fixed-drawer - Делает ящик всегда видимым и открывается на больших экранах.

• mdl-layout--fixed-header - Делает заголовок всегда видимым, даже на маленьких экранах.

mdl_fixedheader.htm

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

Результат

Проверьте результат.

Прокрутка заголовка

Для создания шаблона с прокручивающимся заголовком используются следующие классы MDL.

• mdl-layout--header--scroll - Заставляет заголовок прокручиваться вместе с содержимым.

mdl_scrollingheader.htm

<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>
      <!--  Uses a header that scrolls with the text, rather than 
         staying locked at the top -->
      <div class = "mdl-layout mdl-js-layout ">
         <header class = "mdl-layout__header mdl-layout__header--scroll">      
            <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 = "">Home</a>
                  <a class = "mdl-navigation__link" href = "">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" style = "padding-left:100px;">Hello World!
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
            </div>
         </main>
      </div>
   
   </body>
</html>

Результат

Проверьте результат.

Заголовок контракта

Чтобы создать шаблон с заголовком, который сжимается при прокрутке страницы вниз, используется следующий класс MDL.

• mdl-layout__header--waterfall - Позволяет эффект «водопада» с несколькими строками заголовка.

mdl_waterfallheader.htm

<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 ">
         <header class = "mdl-layout__header mdl-layout__header--waterfall">
            <!-- Top row, always visible -->
            <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>
            </div>
            
            <!-- Bottom row, not visible on scroll -->
            <div class = "mdl-layout__header-row">
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "">Home</a>
                  <a class = "mdl-navigation__link" href = "">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" style = "padding-left:100px;">Hello World!
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
            </div>
         </main>
      </div>
   
   </body>
</html>

Результат

Проверьте результат.

Фиксированный заголовок с прокручиваемыми вкладками

Для создания шаблона с заголовком, имеющим прокручиваемые вкладки, используются следующие классы MDL.

• mdl-layout__tab-bar - Определяет контейнер как панель вкладок MDL.

• mdl-layout__tab - Определяет привязку как ссылку на вкладку MDL.

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

mdl_scrollabletabheader.htm

<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-header">
         <header class = "mdl-layout__header">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>          
            </div>
         
            <!-- Tabs -->
            <div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
               <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
               <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
               <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>     
            </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">
            <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
               <div class = "page-content">Tab 1 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
               <div class = "page-content">Tab 2 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
               <div class = "page-content">Tab 3 Contents</div>
            </section>
         </main>
      </div>
   
   </body>
</html>

Результат

Проверьте результат.

Фиксированный заголовок с фиксированными вкладками

Для создания шаблона с заголовком, имеющим фиксированные вкладки, используется следующий дополнительный класс MDL.

• mdl-layout--fixed-tabs - Использует фиксированные вкладки вместо прокручиваемых вкладок по умолчанию.

mdl_fixedtabheader.htm

<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-header mdl-layout--fixed-tabs">
         <header class = "mdl-layout__header">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>          
            </div>
         
            <!-- Tabs -->
            <div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
               <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
               <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
               <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>     
            </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">
            <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
               <div class = "page-content">Tab 1 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
               <div class = "page-content">Tab 2 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
               <div class = "page-content">Tab 3 Contents</div>
            </section>
         </main>
      </div>
   
   </body>
</html>

Результат

Проверьте результат.