Учебники

Материал Дизайн Лайт — Макеты

Январь 31, 2019

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

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

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

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

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

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

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

<header> — Представляет раздел заголовка.

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

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

<section> — Предоставляет универсальный контейнер для различных типов разделов.

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

Sr.No. Имя класса и описание
1

лея-макет

Определяет контейнер как компонент MDL. Требуется на внешнем элементе контейнера.

2

MDL-JS-макет

Добавляет базовое поведение MDL в макет. Требуется на внешнем элементе контейнера.

3

лея-layout__header

Определяет контейнер как компонент MDL. Обязательный элемент заголовка.

4

лея-макет значок

Используется для добавления значка приложения. Переопределяется значком меню, если оба видны. Дополнительный значок элемента.

5

MDL-layout__header-строка

Определяет контейнер как строку заголовка MDL. Требуется в контейнере содержимого заголовка.

6

лея-layout__title

Определяет текст заголовка макета. Требуется в заголовке контейнера макета.

7

MDL-макет-спейсер

Используется для выравнивания элементов внутри заголовка или ящика. Он растет, чтобы заполнить оставшееся пространство. Обычно используется для выравнивания элементов вправо. Необязательный для div следующий заголовок макета.

8

лея-навигации

Определяет контейнер как группу навигации MDL. Требуется для элемента nav.

9

лея-navigation__link

Определяет привязку как навигационную ссылку MDL. Требуется для элементов крепления жатки и / или ящика.

10

лея-layout__drawer

Определяет контейнер как макет MDL. Требуется на элемент контейнера контейнера.

11

лея-layout__content

Определяет контейнер как содержимое макета MDL. Требуется на основной элемент.

12

лея-layout__header — свиток

Делает заголовок прокрутки с содержимым. Необязательно для элемента заголовка.

13

лея-макет — фиксированный ящик

Делает ящик всегда видимым и открытым на больших экранах. Опционально на внешнем элементе контейнера, а не на элементе контейнера выдвижного ящика.

14

лея-макет — фиксированный заголовок

Делает заголовок всегда видимым, даже на маленьких экранах. Опционально для внешнего элемента контейнера.

15

лея-макет — большой экран только

Скрывает элемент на экранах меньшего размера. Необязательно для любого потомка mdl-layout.

16

лея-макет — маленький экран только

Скрывает элемент на больших экранах. Необязательно для любого потомка mdl-layout.

17

лея-layout__header — водопад

Позволяет эффект «водопад» с несколькими строками заголовка. Необязательно для элемента заголовка.

18

лея-layout__header — прозрачный

Делает заголовок прозрачным и рисует поверх макета фона. Необязательно для элемента заголовка.

19

лея-layout__header — швы

Использует заголовок без тени. Необязательно для элемента заголовка.

20

лея-layout__tab-бар

Определяет контейнер как панель вкладок MDL. Требуется для элемента контейнера внутри заголовка (макет с вкладками).

21

лея-layout__tab

Определяет якорь как вкладку MDL. Обязательные элементы панели вкладок.

22

это-активные

Определяет вкладку как активную вкладку по умолчанию. Необязательный элемент привязки панели вкладок и связанный элемент раздела вкладки.

23

MDL-layout__tab-панель

Определяет контейнер как вкладку панели содержимого. Требуется на вкладке раздел элементов.

24

лея-макет — фиксированные вкладки

Использует фиксированные вкладки вместо прокручиваемых вкладок по умолчанию. Необязательно для внешнего элемента контейнера, а не для контейнера внутри заголовка.

лея-макет

Определяет контейнер как компонент MDL. Требуется на внешнем элементе контейнера.

MDL-JS-макет

Добавляет базовое поведение MDL в макет. Требуется на внешнем элементе контейнера.

лея-layout__header

Определяет контейнер как компонент MDL. Обязательный элемент заголовка.

лея-макет значок

Используется для добавления значка приложения. Переопределяется значком меню, если оба видны. Дополнительный значок элемента.

MDL-layout__header-строка

Определяет контейнер как строку заголовка MDL. Требуется в контейнере содержимого заголовка.

лея-layout__title

Определяет текст заголовка макета. Требуется в заголовке контейнера макета.

MDL-макет-спейсер

Используется для выравнивания элементов внутри заголовка или ящика. Он растет, чтобы заполнить оставшееся пространство. Обычно используется для выравнивания элементов вправо. Необязательный для div следующий заголовок макета.

лея-навигации

Определяет контейнер как группу навигации MDL. Требуется для элемента nav.

лея-navigation__link

Определяет привязку как навигационную ссылку MDL. Требуется для элементов крепления жатки и / или ящика.

лея-layout__drawer

Определяет контейнер как макет MDL. Требуется на элемент контейнера контейнера.

лея-layout__content

Определяет контейнер как содержимое макета MDL. Требуется на основной элемент.

лея-layout__header — свиток

Делает заголовок прокрутки с содержимым. Необязательно для элемента заголовка.

лея-макет — фиксированный ящик

Делает ящик всегда видимым и открытым на больших экранах. Опционально на внешнем элементе контейнера, а не на элементе контейнера выдвижного ящика.

лея-макет — фиксированный заголовок

Делает заголовок всегда видимым, даже на маленьких экранах. Опционально для внешнего элемента контейнера.

лея-макет — большой экран только

Скрывает элемент на экранах меньшего размера. Необязательно для любого потомка mdl-layout.

лея-макет — маленький экран только

Скрывает элемент на больших экранах. Необязательно для любого потомка mdl-layout.

лея-layout__header — водопад

Позволяет эффект «водопад» с несколькими строками заголовка. Необязательно для элемента заголовка.

лея-layout__header — прозрачный

Делает заголовок прозрачным и рисует поверх макета фона. Необязательно для элемента заголовка.

лея-layout__header — швы

Использует заголовок без тени. Необязательно для элемента заголовка.

лея-layout__tab-бар

Определяет контейнер как панель вкладок MDL. Требуется для элемента контейнера внутри заголовка (макет с вкладками).

лея-layout__tab

Определяет якорь как вкладку MDL. Обязательные элементы панели вкладок.

это-активные

Определяет вкладку как активную вкладку по умолчанию. Необязательный элемент привязки панели вкладок и связанный элемент раздела вкладки.

MDL-layout__tab-панель

Определяет контейнер как вкладку панели содержимого. Требуется на вкладке раздел элементов.

лея-макет — фиксированные вкладки

Использует фиксированные вкладки вместо прокручиваемых вкладок по умолчанию. Необязательно для внешнего элемента контейнера, а не для контейнера внутри заголовка.

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

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

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

  • mdl-layout — идентифицирует div как компонент MDL.

  • mdl-js-layout — добавляет базовое поведение MDL во внешний div.

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

  • mdl-layout__drawer — идентифицирует div как блок макета MDL.

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

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

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

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

mdl-layout — идентифицирует div как компонент MDL.

mdl-js-layout — добавляет базовое поведение MDL во внешний div.

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

mdl-layout__drawer — идентифицирует div как блок макета MDL.

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

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

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

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

mdl_fixeddrawer.htm

Live Demo

<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-layout — fixed-header — делает заголовок всегда видимым, даже на маленьких экранах.

mdl_fixedheader.htm

Live Demo 

<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-box — Делает ящик всегда видимым и открытым на больших экранах.

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

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

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

mdl_fixedheader.htm

Live Demo 

<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-layout — header — scroll — делает прокрутку заголовка с содержимым.

mdl_scrollingheader.htm

Live Demo 

<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-layout__header — waterfall — позволяет использовать эффект «водопада» с несколькими строками заголовка.

mdl_waterfallheader.htm

Live Demo 

<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-layout__tab-bar — определяет контейнер как панель вкладок MDL.

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

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

mdl_scrollabletabheader.htm

Live Demo 

<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-layout — fixed-tabs — использует фиксированные вкладки вместо прокручиваемых вкладок по умолчанию.

mdl_fixedtabheader.htm

Live Demo 

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

Результат

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

53
Share: