Material Design Lite - Краткое руководство

Что такое Material Design Lite?

Material Design Lite (MDL - это библиотека компонентов пользовательского интерфейса, созданная с помощью CSS, JavaScript и HTML. Компоненты пользовательского интерфейса MDL помогают создавать привлекательные, согласованные и функциональные веб-страницы и веб-приложения, соблюдая современные принципы веб-дизайна, такие как переносимость браузера, независимость от устройства. , и изящная деградация.

Ниже приведены основные особенности Material Design Lite.

  • Встроенное адаптивное проектирование.

  • Стандартный CSS с минимальным размером.

  • Включает новые версии общих элементов управления пользовательского интерфейса, таких как кнопки, флажки и текстовые поля, которые адаптированы в соответствии с концепциями Material Design.

  • Включает расширенные и специализированные функции, такие как карточки, макеты столбцов, ползунки, счетчики, вкладки, типографику и т. Д.

  • Может использоваться с любой библиотекой или средой разработки или без них.

  • Кроссбраузерность и может использоваться для создания повторно используемых веб-компонентов.

Адаптивный дизайн

  • В Material Design Lite встроен адаптивный дизайн, поэтому веб-сайт, созданный с помощью Material Design Lite, будет изменять свой дизайн в соответствии с размером устройства.

  • Классы Material Design Lite созданы таким образом, что веб-сайт может соответствовать любому размеру экрана.

  • Веб-сайты, созданные с помощью Material Design Lite, полностью совместимы с ПК, планшетами и мобильными устройствами.

Стандартный CSS

  • Material Design Lite использует только стандартный CSS, и его очень легко изучить.

  • Нет зависимости от какой-либо внешней библиотеки JavaScript, такой как jQuery.

  • ExtensibleMaterial Design Lite по дизайну очень простой и плоский.

  • Он разработан с учетом того факта, что намного проще добавить новые правила CSS, чем перезаписать существующие правила CSS.

  • Он поддерживает тени и жирные цвета.

  • Цвета и оттенки остаются одинаковыми для разных платформ и устройств.

И самое главное, MDL можно использовать абсолютно бесплатно.

Есть два способа использовать Material Design Lite:

  • Local Installation - Вы можете загрузить материалы. {Primary} - {accent} .min.css и material.min.js файлы на свой локальный компьютер и включить их в свой HTML-код.

  • CDN Based Version - Вы можете включить файлы material. {Primary} - {accent} .min.css и material.min.js в свой HTML-код непосредственно из сети доставки контента (CDN).

Локальная установка

Выполните следующие шаги для установки MDL -

  • Идти к https://www.getmdl.io/started/index.html чтобы загрузить последнюю доступную версию.

  • Затем поставьте скачанный material.min.js файл в каталоге вашего веб-сайта, например / js и material.min.css в / css.

пример

Теперь вы можете включить файлы css и js в свой HTML-файл следующим образом:

<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "material.min.css">
      <script src = "material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

Вышеупомянутая программа сгенерирует следующий результат -

Версия на основе CDN

Вы можете включить файлы js и css в свой HTML-код непосредственно из сети доставки контента (CDN). storage.googleapis.com предоставляет контент для последней версии.

В этом руководстве мы используем CDN-версию библиотеки storage.googleapis.com.

пример

Теперь давайте перепишем приведенный выше пример, используя material.css и material.js из Google CDN.

<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <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>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

Вышеупомянутая программа сгенерирует следующий результат -

В этой главе мы обсудим различные макеты в 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>

Результат

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

Сетка Material Design Lite (MDL) - это компонент для размещения контента для экранов разных размеров. Сетка MDL определяется и заключена в элемент контейнера / div. Сетка имеет 12 столбцов на экране размера рабочего стола, 8 на экране размера планшета и 4 на экране размера телефона, где каждый размер имеет предварительно определенные поля и желоба. Ячейки располагаются последовательно в порядке, в котором они определены, со следующими исключениями:

  • Если ячейка сетки не подходит для строки одного из размеров экрана, она перетекает в следующую строку.

  • Если ячейка сетки имеет указанный размер столбца, равный или больший, чем количество столбцов для размера экрана, она занимает всю строку.

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

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

mdl-layout

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

2

mdl-grid

Определяет контейнер как компонент сетки MDL. Обязательно для «внешнего» элемента div.

3

mdl-cell

Определяет контейнер как ячейку MDL. Требуется для «внутренних» элементов div.

4

mdl-grid--no-spacing

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

5

mdl-cell--N-col

Это помогает установить размер столбца для ячейки равным N, N равно 1–12 включительно, по умолчанию - 4; необязательный для «внутренних» элементов div.

6

mdl-cell--N-col-desktop

Это помогает установить размер столбца для ячейки равным N только в режиме рабочего стола, N равно 1–12 включительно; необязательный для «внутренних» элементов div.

7

mdl-cell--N-col-tablet

Это помогает установить размер столбца для ячейки равным N только в режиме планшета, N равно 1–8 включительно; необязательный для «внутренних» элементов div.

8

mdl-cell--N-col-phone

Это помогает установить размер столбца для ячейки равным N только в режиме телефона, N равно 1–4 включительно; необязательный для «внутренних» элементов div.

9

mdl-cell--hide-desktop

Скрывает ячейку в режиме рабочего стола. Необязательный для «внутренних» элементов div.

10

mdl-cell--hide-tablet

Скрывает ячейку в режиме планшета. Необязательный для «внутренних» элементов div.

11

mdl-cell--hide-phone

Скрывает ячейку в режиме телефона. Необязательный для «внутренних» элементов div.

12

mdl-cell--stretch

Растягивает ячейку по вертикали, чтобы заполнить родительскую, по умолчанию; необязательный для «внутренних» элементов div.

13

mdl-cell--top

Выравнивает ячейку по верхнему краю родительского элемента. Необязательный для «внутренних» элементов div.

14

mdl-cell--middle

Выравнивает ячейку по середине родительского элемента. Необязательный для «внутренних» элементов div.

15

mdl-cell--bottom

Выравнивает ячейку по нижнему краю родительского элемента. Необязательный для «внутренних» элементов div.

пример

Следующий пример поможет вам понять использование класса mdl-grid для размещения содержимого на различных экранах.

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

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

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

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

  • mdl-layout__header-row - Определяет контейнер как строку заголовка MDL.

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

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

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

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

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

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

  • mdl-cell - Определяет div как ячейку MDL.

  • mdl-cell--1-col - Устанавливает размер столбца для ячейки равным размеру 1 ячейки из 12 в размере экрана рабочего стола.

  • mdl-cell--2-col - Устанавливает размер столбца для ячейки равным 2 ячейкам из 12 ячеек в размере экрана рабочего стола.

  • mdl-cell--4-col - Устанавливает размер столбца для ячейки равным 4 ячейкам из 12 в размере экрана рабочего стола.

  • mdl-cell--6-col - Устанавливает размер столбца для ячейки равным 6 ячейкам из 12 в размере экрана рабочего стола.

  • mdl-cell--4-col-phone - Устанавливает размер столбца для ячейки равным 4 ячейкам из 4 в размере экрана телефона.

  • mdl-cell--6-col-tablet - Устанавливает размер столбца для ячейки равным 6 ячейкам из 8 ячеек в размере экрана планшета.

  • mdl-cell--8-col-tablet - Устанавливает размер столбца для ячейки равным 8 ячейкам из 8 ячеек в размере экрана планшета.

mdl_grid.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">
      
      <style> 
         .graybox {
            background-color:#ddd;
         }
      </style>
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Grid</span>          
            </div>       
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design 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 = "mdl-grid">
               <div class = "mdl-cell mdl-cell--1-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">3</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">5</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">7</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">8</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">9</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">10</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">11</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">12</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--4-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">3</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--2-col graybox">2</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
                  6 on desktop, 8 on tablet</div>
               <div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
                  4 on desktop, 6 on tablet</div>
               <div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
                  2 on desktop, 4 on phone</div>
            </div>
         </main>
      </div>
   
   </body>
</html>

Результат

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

Компонент вкладки Material Design Lite (MDL) - это компонент пользовательского интерфейса, который помогает отображать несколько экранов в одном пространстве эксклюзивным образом.

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

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

mdl-layout

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

2

mdl-tabs

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

3

mdl-js-tabs

Устанавливает базовое поведение MDL для контейнера вкладок. Обязательно для «внешнего» элемента div.

4

mdl-js-ripple-effect

Добавляет эффект пульсации щелчка для ссылок на вкладки. Необязательный; переходит к «внешнему» элементу div.

5

mdl-tabs__tab-bar

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

6

mdl-tabs__tab

Определяет привязку (ссылку) как активатор вкладки MDL. Требуется для всех ссылок в первом «внутреннем» элементе div.

7

is-active

Определяет вкладку как вкладку отображения по умолчанию. Требуется для одного (и только одного) из «внутренних» элементов div (tab).

8

mdl-tabs__panel

Определяет контейнер как содержимое вкладки. Требуется для каждого из «внутренних» элементов div (tab).

пример

Следующий пример поможет вам понять использование класса mdl-tab для размещения содержимого на различных вкладках.

В этом примере будут использоваться классы MDL, приведенные ниже -

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

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

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

  • mdl-layout__header-row - Определяет контейнер как строку заголовка MDL.

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

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

  • mdl-tabs - Определяет контейнер вкладок как компонент MDL.

  • mdl-js-tabs - Устанавливает базовое поведение MDL для контейнера вкладок.

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

  • mdl-tabs__tab - Определяет привязку (ссылку) как активатор вкладки MDL.

  • is-active - Определяет вкладку как вкладку отображения по умолчанию.

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

mdl_tabs.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>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <div class = "mdl-tabs mdl-js-tabs">
               <div class = "mdl-tabs__tab-bar">
                  <a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
                  <a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
                  <a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
               </div>
            
               <div class = "mdl-tabs__panel is-active" id = "tab1-panel">
                  <p>Tab 1 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab2-panel">
                  <p>Tab 2 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab3-panel">
                  <p>Tab 3 Content</p>
               </div>
            </div>
         </main>
      </div>  
   </body>
</html>

Результат

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

Компонент нижнего колонтитула MDL бывает двух основных форм: mega-footer и mini-footer. Мега-нижний колонтитул содержит более сложное содержание, чем мини-нижний колонтитул. Мега-нижний колонтитул может представлять несколько разделов контента, разделенных горизонтальными правилами, тогда как мини-нижний колонтитул представляет собой один раздел контента. Нижние колонтитулы обычно содержат как информационное, так и интерактивное содержимое, например ссылки.

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

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

mdl-mega-footer

Определяет контейнер как компонент мегафутера MDL. Обязательно для элемента нижнего колонтитула.

2

mdl-mega-footer__top-section

Определяет контейнер как верхнюю часть нижнего колонтитула. Требуется для "внешнего" элемента div верхней части.

3

mdl-mega-footer__left-section

Обозначает контейнер как левую секцию. Обязателен для "внутреннего" элемента div левой секции.

4

mdl-mega-footer__social-btn

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

5

mdl-mega-footer__right-section

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

6

mdl-mega-footer__middle-section

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

7

mdl-mega-footer__drop-down-section

Определяет контейнер как раскрывающуюся (вертикальную) область содержимого. Требуется для раскрывающихся «внутренних» элементов div.

8

mdl-mega-footer__heading

Определяет заголовок как заголовок мегафутера. Обязательно для элемента h1 в раскрывающемся разделе.

9

mdl-mega-footer__link-list

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

10

mdl-mega-footer__bottom-section

Определяет контейнер как нижнюю часть нижнего колонтитула. Требуется для "внешнего" элемента div нижней части.

11

mdl-logo

Определяет контейнер как стилизованный заголовок раздела. Требуется для «внутреннего» элемента div в нижней части мегафутера или левой части мини-колонтитула.

12

mdl-mini-footer

Определяет контейнер как компонент мини-нижнего колонтитула MDL. Обязательно для элемента нижнего колонтитула.

13

mdl-mini-footer__left-section

Обозначает контейнер как левую секцию. Обязателен для "внутреннего" элемента div левой секции.

14

mdl-mini-footer__link-list

Определяет неупорядоченный список как встроенный (горизонтальный) список. Требуется для элемента ul, родственного элементу div "mdl-logo".

15

mdl-mini-footer__right-section

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

16

mdl-mini-footer__social-btn

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

Теперь давайте рассмотрим несколько примеров, чтобы понять использование классов нижних колонтитулов MDL для стилизации нижних колонтитулов.

Мега Нижний колонтитул

Давайте обсудим использование mdl-mega-footerдля размещения содержимого в нижнем колонтитуле. В этом примере будут использоваться следующие классы MDL.

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

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

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

  • mdl-layout__header-row - Определяет контейнер как строку заголовка MDL.

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

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

  • mdl-mega-footer - Определяет контейнер как компонент мегафутера MDL.

  • mdl-mega-footer__top-section - Определяет контейнер как верхнюю часть нижнего колонтитула.

  • mdl-mega-footer__left-section - Обозначает контейнер как левую секцию.

  • mdl-mega-footer__social-btn - Обозначает декоративный квадрат в нижнем колонтитуле.

  • mdl-mega-footer__right-section - Определяет контейнер как правую секцию.

  • mdl-mega-footer__middle-section - Определяет контейнер как средний раздел нижнего колонтитула.

  • mdl-mega-footer__drop-down-section - Определяет контейнер как раскрывающуюся (вертикальную) область содержимого.

  • mdl-mega-footer__heading - Определяет заголовок как заголовок мегафутера.

  • mdl-mega-footer__link-list - Определяет неупорядоченный список как встроенный (горизонтальный) список.

  • mdl-mega-footer__bottom-section - Определяет контейнер как нижнюю часть нижнего колонтитула.

  • mdl-logo - Определяет контейнер как стилизованный заголовок раздела.

mdl_megafooter.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>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <footer class = "mdl-mega-footer">
               <div class = "mdl-mega-footer__top-section">
                  <div class = "mdl-mega-footer__left-section">
                     <button class = "mdl-mega-footer__social-btn">1</button>
                     <button class = "mdl-mega-footer__social-btn">2</button>
                     <button class = "mdl-mega-footer__social-btn">3</button>
                  </div>
                  
                  <div class = "mdl-mega-footer__right-section">
                     <a href = "">Link 1</a>
                     <a href = "">Link 2</a>
                     <a href = "">Link 3</a>
                  </div>
               </div>
               
               <div class = "mdl-mega-footer__middle-section">
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link A</a></li>
                        <li><a href = "">Link B</a></li>      
                     </ul>
                  </div>  
               
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link C</a></li>
                        <li><a href = "">Link D</a></li>      
                     </ul>
                  </div>  	
               </div>
            
               <div class = "mdl-mega-footer__bottom-section">
                  <div class = "mdl-logo">
                     Bottom Section
                  </div>
                  <ul class = "mdl-mega-footer__link-list">
                     <li><a href = "">Link A</a></li>
                     <li><a href = "">Link B</a></li>
                  </ul>
               </div>
            
            </footer>
         </main>
      </div>
   </body>
</html>

Результат

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

Мини-нижний колонтитул

Следующий пример поможет вам понять использование mdl-mini-footer для размещения содержимого в нижнем колонтитуле.

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

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

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

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

  • mdl-layout__header-row - Определяет контейнер как строку заголовка MDL.

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

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

  • mdl-mini-footer - Определяет контейнер как компонент мини-нижнего колонтитула MDL.

  • mdl-mini-footer__left-section - Обозначает контейнер как левую секцию.

  • mdl-logo - Определяет контейнер как стилизованный заголовок раздела.

  • mdl-mini-footer__link-list - Определяет неупорядоченный список как встроенный (горизонтальный) список.

  • mdl-mini-footer__right-section - Определяет контейнер как правую секцию.

mdl_minifooter.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>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <footer class = "mdl-mini-footer">
               <div class = "mdl-mini-footer__left-section">
                  <div class = "mdl-logo">
                     Copyright Information
                  </div>
                  <ul class = "mdl-mini-footer__link-list">
                     <li><a href = "#">Help</a></li>
                     <li><a href = "#">Privacy and Terms</a></li>
                     <li><a href = "#">User Agreement</a></li>
                  </ul>
               </div>
               
               <div class = "mdl-mini-footer__right-section">
                  <button class = "mdl-mini-footer__social-btn">1</button>
                  <button class = "mdl-mini-footer__social-btn">2</button>
                  <button class = "mdl-mini-footer__social-btn">3</button>
               </div>
            
            </footer>
         </main>
      </div>
   </body>
</html>

Результат

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

Компонент значка MDL - это экранное уведомление, которое может быть числом или значком. Обычно используется, чтобы подчеркнуть количество элементов.

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

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

mdl-badge

Определяет элемент как компонент значка MDL. Требуется для элемента span или link.

2

mdl-badge--no-background

Применяет эффект открытого круга к значку и является необязательным.

3

mdl-badge--overlap

Заставляет значок перекрывать свой контейнер и является необязательным.

4

data-badge="value"

Присваивает строковое значение значку, используемому в качестве атрибута; требуется для диапазона или ссылки.

пример

Следующий пример поможет вам понять использование mdl-badge класс для добавления уведомлений для охвата и связывания элементов.

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

  • mdl-badge - Определяет элемент как компонент значка MDL.

  • data-badge- Присваивает значку строковое значение. Иконки могут быть назначены ему с помощью символов HTML.

mdl_badges.htm

<html>
   <head>
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         body {
            padding: 20px;
            background: #fafafa;
            position: relative;
         }
      </style>
   </head>
   
   <body>
      <span class = "material-icons mdl-badge" data-badge = "1">account_box</span>    
      <span class = "material-icons mdl-badge" data-badge = "★">account_box</span>	
      <span class = "mdl-badge" data-badge = "4">Unread Messages</span>
      <span class = "mdl-badge" data-badge = "⚑">Rating</span>
      <a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
   </body>
</html>

Результат

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

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

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

mdl-button

Устанавливает кнопку как обязательный компонент MDL.

2

mdl-js-button

Добавляет базовое поведение MDL к кнопке, требуется.

3

(none)

Устанавливает эффект плоского отображения для кнопки по умолчанию.

4

mdl-button--raised

Устанавливает эффект приподнятого дисплея; это взаимоисключающе с fab, mini-fab и icon.

5

mdl-button--fab

Устанавливает потрясающий (круговой) эффект отображения; это взаимоисключающе с поднятым, мини-фабричным и значком.

6

mdl-button--mini-fab

Устанавливает эффект отображения mini-fab (small fab round); это взаимоисключающе с поднятым, fab и icon.

7

mdl-button--icon

Устанавливает эффект отображения значков (маленькие круглые); это взаимоисключающе с поднятым, фабричным и мини-фабричным.

8

mdl-button--colored

Устанавливает эффект цветного отображения, где цвета определены в material.min.css.

9

mdl-button--primary

Устанавливает эффект отображения основного цвета, где цвета определены в material.min.css.

10

mdl-button--accent

Устанавливает эффект отображения акцентного цвета, когда цвета определены в material.min.css.

11

mdl-js-ripple-effect

Устанавливает эффект пульсации щелчка, может использоваться в сочетании с любым другим классом.

пример

Следующий пример поможет вам понять использование mdl-button классы, чтобы показать различные типы кнопок.

mdl_buttons.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table border = "0">
         <tbody>
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Colored fab (circular) display effect</td>
               <td>Colored fab (circular) with ripple display effect</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Plain fab (circular) display effect</td>
               <td>Plain fab (circular) with ripple display effect</td>
               <td>Plain fab (circular) and disabled</td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Raised button</td>
               <td>Raised button with ripple display effect</td>
               <td>Raised button and disabled</td>
            </tr>
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Colored Raised button</td>
               <td>Accent-colored Raised button</td>
               <td>Accent-colored raised button with ripple effect</td>
            </tr>				
            
            <tr>
               <td><button class = "mdl-button mdl-js-button">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Flat button</td>
               <td>Flat button with ripple effect</td>
               <td>Disabled flat button</td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--primary">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Primary Flat button</td>
               <td>Accent-colored Flat button</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--icon">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Icon button</td>
               <td>Colored Icon button</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Mini Colored fab (circular) display effect</td>
               <td>Mini Colored fab (circular) with ripple display effect</td>
               <td> </td>
            </tr>			
         </tbody>
      </table>
   
   </body>
</html>

Результат

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

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

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

mdl-card

Определяет элемент div как контейнер карты MDL, необходимый для «внешнего» div.

2

mdl-card--border

Помещает рамку в раздел карточки, к которому она применяется, и используется на «внутренних» div.

3

mdl-shadow--2dp through mdl-shadow--16dp

Устанавливает переменную глубину тени (2, 3, 4, 6, 8 или 16) для карты и является необязательной, переходит во "внешний" div; если не указан, тень не отображается.

4

mdl-card__title

Определяет div как контейнер заголовка карты и является обязательным для «внутреннего» заголовка div.

5

mdl-card__title-text

Помещает соответствующие текстовые характеристики в заголовок карточки и требуется в теге заголовка (H1 - H6) внутри div заголовка.

6

mdl-card__subtitle-text

Помещает текстовые характеристики в подзаголовок карточки и является необязательным. Это должен быть дочерний элемент элемента title.

7

mdl-card__media

Определяет div как медиа-контейнер карты и является обязательным для "внутреннего" медиа-блока.

8

mdl-card__supporting-text

Определяет div как контейнер основного текста карточки и присваивает соответствующие текстовые характеристики основному тексту и требуется для «внутреннего» основного текста div; текст идет прямо внутри div без промежуточных контейнеров.

9

mdl-card__actions

Определяет div как контейнер действий с карточкой и назначает соответствующие текстовые характеристики тексту действий и требуется для "внутренних" действий div; содержимое идет прямо внутри div без промежуточных контейнеров.

пример

Следующий пример поможет вам понять использование классов mdl-tooltip для отображения различных типов всплывающих подсказок.

mdl_cards.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
   
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family = Material+Icons"> 
      <style>
         .wide-card.mdl-card {
            width: 512px;
         }
      
         .square-card.mdl-card {
            width: 256px;
            height: 256px;
         }

         .image-card.mdl-card {
            width: 256px;
            height: 256px;   
            background: url('html5-mini-logo.jpg') center / cover;          
         }       
      
         .image-card-image__filename {
            color: #000;
            font-size: 14px;
            font-weight: bold;
         }

         .event-card.mdl-card {
            width: 256px;
            height: 256px;
            background: #3E4EB8;
         }
      
         .event-card.mdl-card__title {
            color: #fff;
            height: 176px;
         }

         .event-card > .mdl-card__actions {
            border-color: rgba(255, 255, 255, 0.2);
            display: flex;
            box-sizing:border-box;
            align-items: center;
            color: #fff;
         }     
      </style>
   </head>
   
   <body>
      <table>
         <tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
         <tr>
            <td>
               <div class = "wide-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>
               
                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </div>
               
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>
               
                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                     <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         
            <td>
               <div class = "square-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>
               
                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>
               
                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                        <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         </tr>
            
         <tr><td>Image Card</td><td>Event Card</td></tr>
         <tr>
            <td>
               <div class = "image-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand"></div>
                  <div class = "mdl-card__actions">
                     <span class = "image-card-image__filename">html5-logo.jpg</span>
                  </div>
               </div>
            </td>
            
            <td>
               <div class = "event-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand">
                     <h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Add to Calendar</a>
                     <div class = "mdl-layout-spacer"></div>
                     <i class = "material-icons">event</i>
                  </div>
               </div>
            </td>
         </tr>          
      </table>   
   
   </body>
</html>

Результат

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

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

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

mdl-js-progress

Устанавливает базовое поведение MDL для индикатора прогресса и является обязательным классом.

2

mdl-progress__indeterminate

Устанавливает анимацию для индикатора прогресса и является необязательным классом.

пример

Следующий пример поможет вам понять использование mdl-js-progress классы, чтобы показать различные типы индикаторов выполнения.

mdl_progressbars.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <h4>Default Progress bar</h4>
      <div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
      <h4>Indeterminate Progress bar</h4>
      <div id = "progressbar2" 
         class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
      <h4>Buffering Progress bar</h4>
      <div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>
      
      <script language = "javascript">
         document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded', 
            function() {
            this.MaterialProgress.setProgress(44);
         });
         document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded', 
            function() {
            this.MaterialProgress.setProgress(33);
            this.MaterialProgress.setBuffer(87);
         });
      </script>
   
   </body>
</html>

Результат

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

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

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

mdl-spinner

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

2

mdl-js-spinner

Устанавливает базовое поведение MDL для счетчика и является обязательным классом.

3

is-active

Показывает и анимирует счетчик и является необязательным.

4

mdl-spinner--single-color

Использует один цвет вместо изменения цветов и не является обязательным.

пример

Следующий пример поможет вам понять использование mdl-spinner классы и разные виды спиннеров.

mdl_spinners.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <h4>Default Spinner</h4>
      <div class = "mdl-spinner mdl-js-spinner is-active"></div>
      <h4>Single Color Spinner</h4>
      <div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
   </body>
</html>

Результат

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

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

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

mdl-button

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

2

mdl-js-button

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

3

mdl-button--icon

Устанавливает значок на кнопку и является обязательным для элемента кнопки.

4

material-icons

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

5

mdl-menu

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

6

mdl-js-menu

Устанавливает базовое поведение MDL в меню и требуется для элемента ul.

7

mdl-menu__item

Определяет кнопки как опции меню MDL и устанавливает базовое поведение MDL, требуемое для элементов элементов списка.

8

mdl-js-ripple-effect

Устанавливает эффект пульсации щелчка для ссылок параметров и является необязательным; Требуется для элемента неупорядоченного списка.

9

mdl-menu--top-left

Устанавливает позицию меню над кнопкой, выравнивает левый край меню с кнопкой и является необязательным; Требуется для элемента неупорядоченного списка.

10

(none)

По умолчанию меню располагается под кнопкой, выравнивается по левому краю с кнопкой.

11

mdl-menu--top-right

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

12

mdl-menu--bottom-right

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

пример

Следующий пример поможет вам понять использование mdl-spinner классы, чтобы показать различные типы блесен.

mdl_menu.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <style>
         .container {
            position: relative;
            width: 200px;
         }

         .background {
            background: white;
            height: 148px;
            width: 100%;
         }

         .bar {
            box-sizing: border-box;
            background: #BBBBBB;
            color: white;
            width: 100%;
            height: 64px;
            padding: 16px;
         }

         .wrapper {
            box-sizing: border-box;
            position: absolute;
            right: 16px;
         }
      </style>
   </head>
   
   <body>
      <table>
         <tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
            <td>Top Right Menu</td></tr>
         <tr>
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">    
                     <button id = "demo_menu-lower-left" 
                        class = "mdl-button mdl-js-button mdl-button--icon" 
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-lower-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>     
                     </ul>        
                  </div>
                  <div class = "background"></div>
               </div>
            </td>
            
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">
                     <div class = "wrapper">     
                        <button id = "demo_menu-lower-right" 
                           class = "mdl-button mdl-js-button mdl-button--icon" 
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-lower-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>     
                        </ul>
                     </div>
                  </div>
                  <div class = "background"></div>
               </div>
            </td>
            
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">    
                     <button id = "demo_menu-top-left" 
                        class = "mdl-button mdl-js-button mdl-button--icon" 
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-top-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>     
                     </ul>        
                  </div>         
               </div>
            </td>
            
            <td>     
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">
                     <div class = "wrapper">     
                        <button id = "demo_menu-top-right" 
                           class = "mdl-button mdl-js-button mdl-button--icon" 
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-top-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>
                        </ul>
                     </div>
                  </div>
               </div>
            </td>

         </tr>
      </table>
   </body>
</html>

Результат

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

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

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

mdl-slider

Идентифицирует входной элемент как компонент MDL и является обязательным.

2

mdl-js-slider

Устанавливает базовое поведение MDL для входного элемента и является обязательным.

пример

Следующий пример поможет вам понять использование классов mdl-slider для отображения различных типов ползунков.

mdl_sliders.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default Slider</td><td>Slider with initial value</td>
            <td>Disabled Slider</td></tr>
         <tr><td><input id = "slider1" class = "mdl-slider mdl-js-slider" type = "range" 
            min = "0" max = "100" value = "0" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider2" class = "mdl-slider mdl-js-slider" type = "range"  
            min = "0" max = "100" value = "25" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider3" class = "mdl-slider mdl-js-slider" type = "range"  
            min = "0" max = "100" value = "25" tabindex = "0" step = "2" disabled 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         </tr>
      </table>
      Value: <div id = "message" >25</div>
   </body>
</html>

Результат

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

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

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

mdl-checkbox

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

2

mdl-js-checkbox

Устанавливает базовое поведение MDL для label и является обязательным для элемента label.

3

mdl-checkbox__input

Устанавливает базовое поведение MDL для флажка и является обязательным для элемента ввода (флажок).

4

mdl-checkbox__label

Устанавливает базовое поведение MDL для caption и является обязательным для элемента span (caption).

5

mdl-js-ripple-effect

Устанавливает эффект пульсации щелчка и является необязательным; переходит на элемент метки, а не на элемент ввода (флажок).

пример

Следующий пример поможет вам понять использование классов mdl-slider для отображения различных типов флажков.

mdl_checkboxes.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
            <td>Disabled CheckBox</td></tr>
         
         <tr>
            <td> 
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
                  <input type = "checkbox" id = "checkbox1" 
                     class = "mdl-checkbox__input" checked>
                  <span class = "mdl-checkbox__label">Married</span>
               </label>
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" 
                  for = "checkbox2">
                  <input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
                  <span class = "mdl-checkbox__label">Single</span>
               </label>	  
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
                  <input type = "checkbox" id = "checkbox3" 
                     class = "mdl-checkbox__input" disabled>
                  <span class = "mdl-checkbox__label">Don't know (Disabled)</span>
               </label>	   
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Результат

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

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

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

mdl-radio

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

2

mdl-js-radio

Устанавливает базовое поведение MDL для label и является обязательным для элемента label.

3

mdl-radio__button

Устанавливает базовое поведение MDL для радио и требуется для элемента ввода (радио-кнопка).

4

mdl-radio__label

Устанавливает базовое поведение MDL для caption и является обязательным для элемента span (caption).

5

mdl-js-ripple-effect

Устанавливает эффект пульсации щелчка и является необязательным; идет на элемент метки, а не на элемент ввода (переключатель).

пример

Следующий пример поможет вам понять использование классов mdl-slider для отображения различных типов переключателей.

mdl_radio.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default Radio Button</td><td>Radio Button with Ripple Effect</td>
            <td>Disabled Radio Button</td></tr>
         <tr>
            <td> 
               <label class = "mdl-radio mdl-js-radio" for = "option1">
                  <input type = "radio" id = "option1" name = "gender" 
                     class = "mdl-radio__button" checked>
                  <span class = "mdl-radio__label">Male</span>
               </label>
            </td>
            
            <td>
               <label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect" 
                  for = "option2">
                  <input type = "radio" id = "option2" name = "gender" 
                     class = "mdl-radio__button" >
                  <span class = "mdl-radio__label">Female</span>
               </label>
            </td>
            
            <td>
               <label class = "mdl-radio mdl-js-radio" for = "option3">
                  <input type = "radio" id = "option3" name = "gender" 
                     class = "mdl-radio__button" disabled>
                  <span class = "mdl-radio__label">Don't know (Disabled)</span>
               </label>      
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Результат

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

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

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

mdl-icon-toggle

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

2

mdl-js-icon-toggle

Устанавливает базовое поведение MDL для label и является обязательным для элемента label.

3

mdl-icon-toggle__input

Устанавливает базовое поведение MDL на icon-toggle и требуется для элемента ввода (icon-toggle).

4

mdl-icon-toggle__label

Устанавливает базовое поведение MDL для заголовка и требуется для элемента i (значок).

5

mdl-js-ripple-effect

Устанавливает эффект пульсации щелчка и является необязательным; переходит к элементу метки, а не к элементу ввода (значок-переключатель).

пример

В следующем примере демонстрируется использование mdl-icon-toggle классы для отображения различных типов флажков в виде значков.

mdl_icons.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table>
         <tr><td>On Icon</td><td>Off Icon</td>
            <td>Disabled Icon</td></tr>
         <tr>
            <td> 
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-1">
                  <input type = "checkbox" id = "icon-toggle-1" 
                     class = "mdl-icon-toggle__input" checked>
                  <i class = "mdl-icon-toggle__label material-icons">format_bold</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input">
                  <i class = "mdl-icon-toggle__label material-icons">format_italic</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input" disabled>
                  <i class = "mdl-icon-toggle__label material-icons">format_underline</i>
               </label>
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Результат

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

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

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

mdl-switch

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

2

mdl-js-switch

Устанавливает базовое поведение MDL для label и является обязательным для элемента label.

3

mdl-switch__input

Устанавливает базовое поведение MDL для переключения и требуется для элемента ввода (переключателя).

4

mdl-switch__label

Устанавливает базовое поведение MDL для caption и является обязательным для элемента ввода (caption).

5

mdl-js-ripple-effect

Устанавливает эффект пульсации щелчка и является необязательным; идет на элемент метки, а не на элемент ввода (переключатель).

пример

Следующий пример поможет вам понять использование классов mdl-switch и различных типов флажков в качестве переключателя.

mdl_switches.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table>
         <tr><td>On Switch</td><td>Off Switch</td>
            <td>Disabled Switch</td></tr>
         <tr>
            <td> 
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-1">
                  <input type = "checkbox" id = "switch-1" 
                     class = "mdl-switch__input" checked>
               </label>
            </td>
            
            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2" 
                     class = "mdl-switch__input">           
               </label>
            </td>
            
            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2" 
                     class = "mdl-switch__input" disabled>
               </label>
            </td>
         </tr>
      </table>   
   </body>
</html>

Результат

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

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

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

mdl-data-table

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

2

mdl-js-data-table

Устанавливает базовое поведение MDL для таблицы и требуется для элемента таблицы.

3

mdl-data-table--selectable

Устанавливает все / индивидуальное выбираемое поведение (флажки) и является необязательным; переходит на элемент таблицы.

4

mdl-data-table__cell--non-numeric

Устанавливает форматирование текста для ячейки данных и является необязательным; распространяется как на заголовок таблицы, так и на ячейки данных таблицы.

5

(none)

По умолчанию устанавливает числовое форматирование для заголовка или ячейки данных.

пример

Следующий пример поможет вам понять использование mdl-data-table классы для отображения таблицы данных.

mdl_data_tables.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
         <thead>
            <tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
               <th>Class</th><th>Grade</th></tr>
         </thead>
         
         <tbody>
            <tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
               <td>VI</td><td>A</td></tr>
            <tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
               <td>VI</td><td>B</td></tr>
            <tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
               <td>VI</td><td>A</td></tr>
         </tbody>
      </table>
   
   </body>
</html>

Результат

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

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

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

mdl-textfield

Определяет контейнер как компонент MDL и является обязательным для «внешнего» элемента div.

2

mdl-js-textfield

Устанавливает базовое поведение MDL для ввода и требуется для «внешнего» элемента div.

3

mdl-textfield__input

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

4

mdl-textfield__label

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

5

mdl-textfield--floating-label

Применяет эффект плавающей метки и является необязательным; переходит к «внешнему» элементу div.

6

mdl-textfield__error

Определяет диапазон как сообщение об ошибке MDL и является необязательным; переходит к элементу span для элемента ввода MDL с шаблоном.

7

mdl-textfield--expandable

Идентифицирует div как контейнер расширяемого текстового поля MDL; используется для расширяемых полей ввода и требуется для "внешнего" элемента div.

8

mdl-button

Обозначает метку как кнопку со значком MDL; используется для расширяемых полей ввода и является обязательным для элемента метки «внешнего» div.

9

mdl-js-button

Задает базовое поведение контейнера значков; используется для расширяемых полей ввода и является обязательным для элемента метки «внешнего» div.

10

mdl-button--icon

Определяет метку как контейнер значка MDL; используется для расширяемых полей ввода и является обязательным для элемента метки «внешнего» div.

11

mdl-input__expandable-holder

Определяет контейнер как компонент MDL; используется для расширяемых полей ввода и требуется для «внутреннего» элемента div.

12

is-invalid

Идентифицирует текстовое поле как недопустимое при начальной загрузке и является необязательным для элемента mdl-textfield.

пример

Следующий пример поможет вам понять использование классов mdl-textfield для отображения различных типов текстовых полей.

mdl_textfields.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Simple Text Field</td><td>Numeric Text Field</td>
            <td>Disabled Text Field</td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" id = "text1">
                     <label class = "mdl-textfield__label" for = "text1">Text...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
                     <label class = "mdl-textfield__label" for = "text2">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        id = "text3" disabled>
                     <label class = "mdl-textfield__label" for = "text3">
                        Disabled...</label>
                  </div>
               </form>
            </td>
         </tr>
         
         <tr><td>Simple Text Field with Floating Label</td>
            <td>Numeric Text Field with Floating Label</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" id = "text4">
                     <label class = "mdl-textfield__label" for = "text4">Text...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
                     <label class = "mdl-textfield__label" for = "text5">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
         
         <tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <textarea class = "mdl-textfield__input" type = "text" rows =  "3" 
                        id = "text7" ></textarea>
                     <label class = "mdl-textfield__label" for = "text7">Lines...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                     <label class = "mdl-button mdl-js-button mdl-button--icon" 
                        for = "text8">
                        <i class = "material-icons">search</i>
                     </label>
                     <div class = "mdl-textfield__expandable-holder">
                        <input class = "mdl-textfield__input" type = "text" id = "text8">
                        <label class = "mdl-textfield__label" for = "sample-expandable">
                           Expandable Input</label>
                     </div>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
      </table>   
   </body>
</html>

Результат

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

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

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

mdl-tooltip

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

2

mdl-tooltip--large

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

пример

Следующий пример поможет вам понять использование mdl-tooltip классы, чтобы показать различные типы всплывающих подсказок.

mdl_tooltips.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Simple Tooltip</td><td>Large Tooltip</td></tr>
         <tr>
            <td>
               <div id = "tooltip1" class = "icon material-icons">add</div>
               <div class = "mdl-tooltip" for = "tooltip1">Follow</div>
            </td>
            
            <td>
               <div id = "tooltip2" class = "icon material-icons">print</div>
               <div class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</div>
            </td>
         </tr>
         
         <tr>
            <td>Rich Tooltip</td><td>Multiline Tooltip</td></tr>
         <tr>
            <td>
               <div id = "tooltip3" class = "icon material-icons">cloud_upload </div>
               <div class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></div>
            </td>
            
            <td>
               <div id = "tooltip4" class = "icon material-icons">share</div>
               <div class = "mdl-tooltip" for = "tooltip4">
                  Share your content<br>using social media</div>
            </td>
         </tr>   	  
      </table>   
   </body>
</html>

Результат

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