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>

Результат

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