Материализовать - Краткое руководство

Materialize - это библиотека компонентов пользовательского интерфейса, созданная с помощью CSS, JavaScript и HTML. Материализация повторно используемых компонентов пользовательского интерфейса помогает создавать привлекательные, согласованные и функциональные веб-страницы и веб-приложения с соблюдением современных принципов веб-дизайна, таких как переносимость браузера, независимость от устройств и постепенная деградация.

Вот некоторые из его характерных особенностей:

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

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

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

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

  • Бесплатен в использовании, и для правильной работы требуется библиотека jQuery JavaScript.

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

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

В Materialise есть встроенный адаптивный дизайн, поэтому веб-сайт, созданный с помощью Materialize, будет изменять свой дизайн в соответствии с размером устройства. Классы материализации созданы таким образом, что веб-сайт может соответствовать любому размеру экрана.

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

Расширяемый

Materialize по дизайну очень минималистичен и плоский. Он разработан с учетом того факта, что намного проще добавить новые правила CSS, чем перезаписать существующие правила CSS. Он поддерживает тени и жирные цвета. Цвета и оттенки остаются одинаковыми для разных платформ и устройств.

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

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

Попробуйте вариант онлайн

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

Попробуйте следующий пример, используя наш онлайн-компилятор, доступный на CodingGround

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

Для большинства примеров, приведенных в этом руководстве, в разделах кода нашего веб-сайта в правом верхнем углу вы найдете параметр «Попробовать», который приведет вас к онлайн-компилятору. Так что просто используйте это и получайте удовольствие от обучения.

Как использовать материализацию?

Есть два способа использовать материализацию:

Local Installation - Вы можете скачать materialize.min.css и materialize.min.js файлы на вашем локальном компьютере и включите его в свой HTML-код.

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

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

  • Идти к http://materializecss.com/getting-started.html чтобы загрузить последнюю доступную версию.

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

пример

Включите css и js в свой HTML-файл следующим образом.

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" href = "/materialize/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "/materialize/materialize.min.js"></script>             
   </head>
  
   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

Это даст следующий результат.

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

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

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

пример

Перепишите приведенный выше пример, используя materialize.min.css и materialize.min.js с CDN cdnjs.cloudflare.com.

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js">
      </script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

Это даст следующий результат -

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

  • red
  • pink
  • purple
  • deep-purple
  • indigo
  • blue
  • light-blue
  • cyan
  • teal
  • green
  • light-green
  • lime
  • yellow
  • amber
  • orange
  • deep-orange
  • brown
  • grey
  • blue-grey
  • black
  • white
  • transparent

Применение

Ниже приведен список классов яркости / темноты, которые можно использовать для изменения применяемого цвета.

  • lighten-1
  • lighten-2
  • lighten-3
  • lighten-4
  • lighten-5
  • darken-1
  • darken-2
  • darken-3
  • darken-4
  • accent-1
  • accent-2
  • accent-3
  • accent-4

пример

В следующем примере показано, как использовать указанные выше классы для визуализации фона или для изменения цвета текста. В случае фона добавьте классы как таковые, а в случае текста суффикс «-текст» к классу цвета и префикс «текст-» к классу молнии.

materialize_colors.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Colors Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <h2>Color Theme Demo</h2>
      <hr/>
      <div class = "card-panel">	        
         <div class = "card-panel red lighten-2">		 
            <h1>Red Colored Theme</h1>
         </div>
         
         <span class = "red-text text-darken-2">
            <h2>Red Colored Text</h2>
         </span>
         
         <ul>          
            <li class = "red lighten-5"><p>Using red lighten-5</p></li>
            <li class = "red lighten-4"><p>Using red lighten-4</p></li>
            <li class = "red lighten-3"><p>Using red lighten-3</p></li>
            <li class = "red lighten-2"><p>Using red lighten-2</p></li>
            <li class = "red lighten-1"><p>Using red lighten-1</p></li>
            <li class = "red"><p>Using red</p></li>
            <li class = "red darken-1"><p>Using red darken-1</p></li>
            <li class = "red darken-2"><p>Using red darken-2</p></li>
            <li class = "red darken-3"><p>Using red darken-3</p></li>
            <li class = "red darken-4"><p>Using red darken-4</p></li>
            <li class = "red accent-1"><p>Using red accent-1</p></li>
            <li class = "red accent-2"><p>Using red accent-2</p></li>
            <li class = "red accent-3"><p>Using red accent-3</p></li>
            <li class = "red accent-4"><p>Using red accent-4</p></li>
         </ul>
      </div>
   </body>
</html>

Результат

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

Materialize предоставляет гибкую сетку из 12 столбцов.

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

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

row

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

2

col

Задает столбец с подклассами.

col имеет несколько подклассов, предназначенных для разных типов экранов.

Столбцы для устройств с маленьким экраном

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

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

s1

Определяет 1 из 12 столбцов шириной 08,33%.

2

s2

Определяет 2 из 12 столбцов шириной 16,66%.

3

s3

Определяет 3 из 12 столбцов шириной 25,00%.

4

s4

Определяет 4 из 12 столбцов шириной 33,33%.

s5 - s11
12

s12

Определяет 12 из 12 столбцов шириной 100%. Класс по умолчанию для телефонов с маленьким экраном.

Столбцы для устройств со средним экраном

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

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

m1

Определяет 1 из 12 столбцов шириной 08,33%

2

m2

Определяет 2 из 12 столбцов шириной 16,66%.

3

m3

Определяет 3 из 12 столбцов шириной 25,00%.

4

m4

Определяет 4 из 12 столбцов шириной 33,33%.

m5 - m11
12

m12

Определяет 12 из 12 столбцов шириной 100%. Класс по умолчанию для телефонов со средним экраном.

Колонки для устройств с большим экраном

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

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

l1

Определяет 1 из 12 столбцов шириной 08,33%.

2

l2

Определяет 2 из 12 столбцов шириной 16,66%.

3

l3

Определяет 3 из 12 столбцов шириной 25,00%.

4

l4

Определяет 4 из 12 столбцов шириной 33,33%.

l5 - l11
12

l12

Определяет 12 из 12 столбцов шириной 100%. Класс по умолчанию для устройств с большим экраном.

Применение

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

<div class = "row">
   <div class = "col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on
      a large screen.</p>
   </div>
</div>

Используемые столбцы по умолчанию - 12 на устройстве, если подкласс не упоминается в атрибуте class элемента HTML.

пример

materialize_grids.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Grids Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <div class = "teal">
         <h2>Mobile First Design Demo</h2>
         <p>Resize the window to see the effect!</p>
      </div>
      
      <hr/> 
      <div class = "row">
         <div class = "col m1 grey center">1</div>
         <div class = "col m1 center">2</div>
         <div class = "col m1 grey center">3</div>
         <div class = "col m1 center">4</div>
         <div class = "col m1 grey center">5</div>
         <div class = "col m1 center">6</div>
         <div class = "col m1 center grey">7</div>
         <div class = "col m1 center">8</div>
         <div class = "col m1 center grey">9</div>
         <div class = "col m1 center">10</div>
         <div class = "col m1 center grey">11</div>
         <div class = "col m1 center">12</div>
      </div>
      
      <div class = "row">
         <div class = "col m4 l3 yellow">
            <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4),
               and 3 on a large screen (l3).</p>
         </div>
         
         <div class = "col s4 m8 l9 grey">  
            <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen
               (m8), and 9 on a large screen (l9).</p>
         </div>
      </div>
   </body>
</html>

Результат

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

В Materialize есть несколько служебных классов, полезных для повседневного проектирования.

  • Color utility classes - Например, .red, .green, .grey и т. Д.

  • Alignment utility classes - Например, .valign-wrapper, .left-align, .rightalign, .center-align, .left, .right.

  • Hiding Content utility classes as per device size - Например, .hide, .hideon-small-only, .hide-on-med-only, .hide-on-med-and-down, .hide-on-med-and-up и .hide-on- только большой

  • Formatting utility classes - Например, truncate, hoverable

пример

materialize_utilities.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family = Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js">
      </script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body class = "container"> 
      <h2>Materialize Utilities</h2>
      
      <hr/>
      <h3>Color Utilities Demo</h3>
      <div class = "red">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera 
            all support many HTML5 features and Internet Explorer 9.0 will also have
            support for some HTML5 functionality.</p>
      </div>
         
      <div class = "green">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android
            phones all have excellent support for HTML5.</p>
      </div>
         
      <h3>Alignment Utilities Demo</h3>
      <div class = "card-panel valign-wrapper">
         <p class = "valign">Vertically Aligned Text</p>
      </div>
         
      <div class = "card-panel">
         <div><p class = "left-align">Left Aligned Text</p></div>
         <div><p class = "right-align">Right Aligned Text</p></div>
         <div><p class = "center-align">Center Aligned Text</p></div>
      </div>
         
      <h3>Hide Utilities Demo</h3>
      <div class = "hide">
         <p>Hidden on all devices</p>
      </div>
         
      <div class = "hide-on-small-only">
         <p>Hidden on mobile devices</p>
      </div>
         
      <h3>Formatting Utilities Demo</h3>
      <div class = "card-panel">
         <p class = "truncate">The latest versions of Apple Safari, Google Chrome,
            Mozilla Firefox, and Opera all support many HTML5 features and Internet
            Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
         
      <div class = "card-panel hoverable">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and
            Android phones all have excellent support for HTML5.</p>
      </div>
         
      <h3>Center Utility Demo</h3>
      <div class = "card-panel center">
         <img src = "/html5/images/html5-mini-logo.jpg" alt = "html5">           
      </div>
   </body>
</html>

Результат

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

В Materialize есть несколько классов, позволяющих адаптировать изображения и видео к разным размерам.

  • responsive-img - Он заставляет изображение изменять свой размер в зависимости от размера экрана.

  • video-container - Для адаптивного контейнера со встроенными видео.

  • responsive-video - Делает HTML5 видео адаптивными.

пример

materialize_media.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body class = "container"> 
      <h2>Materialize Media Examples</h2>
      
      <hr/>
      <h3>Images Demo</h3>
      <div class = "card-panel">
         <img src = "/html5/images/html5-mini-logo.jpg" alt = "" class = "responsive-img">		
      </div>
      
      <div class = "card-panel">
         <img src = "/html5/images/html5-mini-logo.jpg" alt = "" class = "circle responsive-img">		 
      </div>

      <h3>Responsive Embeded Video Demo</h3>
      <div class = "video-container">
         <iframe width = "540" height = "200"
            src = "https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0"
            frameborder = "0" allowfullscreen></iframe>
      </div>
      
      <div class = "video-container">
         <video  width = "300" height = "200" controls autoplay>
            <source src = "http://www.tutorialspoint.com/html5/foo.ogg" type = "video/ogg" />
            <source src = "http://www.tutorialspoint.com/html5/foo.mp4" type = "video/mp4" />
            Your browser does not support the video element.
         </video>
      </div>
   </body>
</html>

Результат

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

В Materialise есть несколько специальных классов для отображения контейнеров в виде карточек, похожих на бумагу, с тенью.

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

z-depth-0

Удаляет тень от элементов, имеющих по умолчанию z-глубину.

2

z-depth-1

Стилизует контейнер для любого содержимого HTML с тенью с рамкой в ​​1 пиксель. Добавляет z-глубину 1.

3

z-depth-2

Стилизует контейнер для любого содержимого HTML с тенью с рамкой 2 пикселя. Добавляет z-глубину 2.

4

z-depth-3

Стилизует контейнер для любого содержимого HTML с тенью с рамкой 3 пикселя. Добавляет z-глубину 3.

5

z-depth-4

Стилизует контейнер для любого содержимого HTML с тенью с рамкой 4 пикселя. Добавляет z-глубину 4.

6

z-depth-5

Стилизует контейнер для любого содержимого HTML с тенью с рамкой 5 пикселей. Добавляет z-глубину 5.

пример

materialize_shadows.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
      
      <style>
         div {
            width : 200px;	
            height : 200px;				
         } 
      </style>
   </head>
   
   <body class = "container"> 
      <h2>Materialize Shadow Examples</h2>
      
      <hr/>
      <div class = "card-panel">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      
      <div class = "z-depth-1">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      
      <div class = "z-depth-2">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      
      <div class = "z-depth-3">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      
      <div class = "z-depth-4">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      
      <div class = "z-depth-5">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>	  
   </body>
</html>

Результат

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

Материализацию можно использовать для отображения различных типов таблиц с использованием различных стилей поверх таблицы.

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

None

Представляет основную таблицу без рамки.

2

stripped

Отображает разделенную таблицу.

3

bordered

Рисует таблицу с границей между строками.

4

highlight

Рисует выделенную таблицу.

5

centered

Рисует таблицу со всем выравниванием центра текста в таблице.

6

responsive-table

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

пример

materialize_tables.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
      
      <style>
         div {
            width : 200px;	
            height : 200px;				
         } 
      </style>
   </head>
   
   <body class = "container"> 
      <h2>Tables Demo</h2>
      
      <hr/>
      <h3>Simple Table</h3>
      <table>
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
      
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>

            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
         
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <h3>Stripped Table with borders</h3>
      <table class = "striped bordered">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <hr/>
      <h3>Centered Table</h3>
      <table class = "centered">
         <thead>
            <tr><th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <h3>Responsive table</h3>
      <table class = "responsive-table">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Data #1</th>
               <th>Data #2</th>
               <th>Data #3</th>
               <th>Data #4</th>
               <th>Data #5</th>
               <th>Data #6</th>
               <th>Data #7</th>
               <th>Data #8</th>
               <th>Data #9</th>
               <th>Data #10</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>10</td>
               <td>11</td>
               <td>12</td>
               <td>13</td>
               <td>14</td>
               <td>15</td>
               <td>16</td>
               <td>17</td>
               <td>19</td>
               <td>20</td>
            </tr>
            
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>10</td>
               <td>11</td>
               <td>12</td>
               <td>13</td>
               <td>14</td>
               <td>15</td>
               <td>16</td>
               <td>17</td>
               <td>19</td>
               <td>20</td>
            </tr>
            
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>10</td>
               <td>11</td>
               <td>12</td>
               <td>13</td>
               <td>14</td>
               <td>15</td>
               <td>16</td>
               <td>17</td>
               <td>19</td>
               <td>20</td>
            </tr>
          </tbody>
       </table>
   </body>
</html>

Результат

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

Материализовать использует Roboto 2.0как стандартный шрифт. Его можно переопределить с помощью следующего стиля CSS.

html {
   font-family: GillSans, Calibri, Trebuchet, sans-serif;
}

Ниже приведены примеры заголовков, цитат и произвольного, но отзывчивого текста.

пример

materialize_typography.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Typography Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <h2>Typography Demo</h2>
      <hr/>
      
      <h3>Headings</h3>
      <div class = "card-panel">
         <h1>Heading 1</h1>
         <h2>Heading 2</h2>
         <h3>Heading 3</h3>
         <h4>Heading 4</h4>
         <h5>Heading 5</h5>
         <h6>Heading 6</h6>
      </div>
      
      <h3>Block Quotes</h3>
      <div class = "card-panel">
         <blockquote>
            The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
            all support many HTML5 features and Internet Explorer 9.0 will also have
            support for some HTML5 functionality.
         </blockquote>
      </div>
      
      <h3>Responsive free-flow text</h3>
      <div class = "card-panel">
         <p class = "flow-text">
            The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
            all support many HTML5 features and Internet Explorer 9.0 will also have
            support for some HTML5 functionality.
         </p>
      </div>		  
   </body>
</html>

Результат

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

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

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

badge

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

2

new

Добавляет «новый» класс к компоненту значка, дает ему фон.

Ниже приведены примеры использования значков по-разному.

пример

materialize_badges.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Badges Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <h2>Badges Demo</h2>
      <hr/>
      
      <h3>Badges in List</h3>
      <div class = "collection">
         <a href = "#" class = "collection-item">Inbox<span class = "badge">12</span></a>
         <a href = "#" class = "collection-item">Unread<span class = "new badge">4</span></a>
         <a href = "#" class = "collection-item">Sent</a>
         <a href = "#" class = "collection-item">Outbox<span class = "badge">14</span></a>
      </div>
      
      <h3>Badges in dropdowns</h3>
      <ul id = "dropdown" class = "dropdown-content">
         <li><a href = "#">Inbox<span class = "badge">12</span></a></li>
         <li><a href = "#!">Unread<span class = "new badge">4</span></a></li>
         <li><a href = "#">Sent</a></li>
         <li><a href = "#">Outbox<span class = "badge">14</span></a></li>
      </ul>
      
      <a class = "btn dropdown-button" href = "#" data-activates = "dropdown">
         Dropdown<i class = "mdi-navigation-arrow-drop-down right"></i></a>
      <h3>Badges in Navigation</h3>
      <nav>
         <div class = "nav-wrapper">
            <a href = "" class = "brand-logo">TutorialsPoint</a>
            <ul id = "nav-mobile" class = "right hide-on-med-and-down">
               <li><a href = "">Inbox</a></li>
               <li><a href = "">Unread<span class = "new badge">4</span></a></li>
               <li><a href = "#">Sent</a></li>
               <li><a href = "#">Outbox</a></li>
            </ul>
         </div>
      </nav>
   </body>
</html>

Результат

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

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

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

btn

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

2

btn-floating

Создает круглую кнопку.

3

btn-flat

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

4

btn-large

Создает большие кнопки.

5

disabled

Создает отключенную кнопку.

6

type = "submit"

Представляет привязку или кнопку в качестве основной кнопки.

7

waves-effect

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

пример

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

materialize_buttons.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Buttons Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <div class = "card-panel">
         <h5>Raised Buttons</h5>
         <button class = "btn waves-effect waves-teal">Add</button></td>
         <button class = "btn waves-effect waves-teal">
            <i class = "material-icons left">add</i>Add</button></td>
         <button class = "btn waves-effect waves-teal">
            <i class = "material-icons right">add</i>Add</button></td>
         <button class = "btn waves-effect waves-teal disabled">Add</button></td>
      </div>
      
      <div class = "card-panel">
         <h5>Flat Buttons</h5>
         <button class = "btn-flat waves-effect waves-teal">Add</button></td>
         <button class = "btn-flat waves-effect waves-teal disabled" >
            <i class = "material-icons left">add</i>Add</button></td>
      </div>
      
      <div class = "card-panel">
         <h5>Floating Buttons</h5>
         <a class = "btn-floating waves-effect waves-light red">
            <i class = "material-icons">add</i></a>
         <a class = "btn-floating waves-effect waves-light red disabled" >
            <i class = "material-icons">add</i></a>
      </div>
      
      <div class = "card-panel">
         <h5>Primary Buttons</h5>
         <button class = "btn waves-effect waves-light red" type = "submit">Send
            <i class = "material-icons right">send</i></button>
         <button class = "btn waves-effect waves-light red disabled" type = "submit" >Cancel
            <i class = "material-icons right">cancel</i></button>
      </div>
      
      <div class = "card-panel">
         <h5>Large Buttons</h5>
         <a class = "btn-floating btn-large waves-effect waves-light red">
            <i class = "material-icons">add</i></a>
         <a class = "btn-floating btn-large waves-effect waves-light red disabled">
            <i class = "material-icons">add</i></a>
      </div>
   </body>   
</html>

Результат

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

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

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

nav-wrapper

Устанавливает компонент навигации как обертку панели навигации / навигации.

2

breadcrumb

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

пример

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

materialize_breadcrumb.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize BreadCrumb Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <nav>
         <div class = "nav-wrapper">
            <div class = "col s12">
               <a href = "#" class = "breadcrumb">Home</a>
               <a href = "#" class = "breadcrumb">Technology</a>
               <a href = "#" class = "breadcrumb">HTML5</a>
            </div>
         </div>
      </nav>
   </body>   
</html>

Результат

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

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

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

card

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

2

card-content

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

3

card-title

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

4

card-action

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

5

card-image

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

6

card-reveal

Определяет div как раскрытый текстовый контейнер.

7

activator

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

8

card-panel

Определяет div как простую карточку с тенями и отступами.

9

card-small

Определяет div как карту небольшого размера. Высота: 300 пикселей;

10

card-medium

Определяет div как карту среднего размера. Высота: 400 пикселей;

11

card-large

Определяет div как карту большого размера. Высота: 500 пикселей;

пример

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

materialize_cards.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Cards Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <div class = "row">
         <div class = "col s12 m6">
            <div class = "card blue-grey lighten-4">
               <div class = "card-content">
                  <span class = "card-title"><h3>Learn HTML5</h3></span>
                  <p>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.</p>
               </div>
               
               <div class = "card-action">
                  <button class = "btn waves-effect waves-light blue-grey">
                     <i class = "material-icons">share</i></button>
                  <a class = "right blue-grey-text" href = "http://www.tutorialspoint.com">
                     www.tutorialspoint.com</a>
               </div>
            </div>
         </div>
         
         <div class = "col s12 m6">
            <div class = "card blue-grey lighten-4">
               <div class = "card-image">
                  <img src = "html5-mini-logo.jpg">                
               </div>
               
               <div class = "card-content">                  
                  <p>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.</p>
               </div>
               
               <div class = "card-action">
                  <button class = "btn waves-effect waves-light blue-grey">
                     <i class = "material-icons">share</i></button>
                  <a class = "right blue-grey-text" href = "http://www.tutorialspoint.com">
                     www.tutorialspoint.com</a>
               </div>
            </div>
         </div>
      </div>
      
      <div class = "row">
         <div class = "col s12 m6">
            <div class = "card blue-grey lighten-4">
               <div class = "card-image waves-effect waves-block waves-light">
                  <img class = "activator" src = "html5-mini-logo.jpg">                
               </div>
               
               <div class = "card-content activator">                  
                  <p>Click the image to reveal more information.</p>
               </div>
               
               <div class = "card-reveal">
                  <span class = "card-title grey-text text-darken-4">HTML5
                     <i class = "material-icons right">close</i></span>
                  <p>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.</p>
               </div>
               
               <div class = "card-action">
                  <button class = "btn waves-effect waves-light blue-grey">
                     <i class = "material-icons">share</i></button>
                  <a class = "right blue-grey-text" href = "http://www.tutorialspoint.com">
                     www.tutorialspoint.com</a>
               </div>
            </div>
         </div>
      </div>
      
      <div class = "row">
         <div class = "col s12 m3">
            <div class = "card-panel teal">
               <span class = "white-text">Simple Card</span>
            </div>
         </div>
         
         <div class = "col s12 m3">
            <div class = "card small teal">
               <span class = "white-text">Small Card</span>
            </div>
         </div>
         
         <div class = "col s12 m3">
            <div class = "card medium teal">
               <span class = "white-text">Medium Card</span>
            </div>
         </div>
         
         <div class = "col s12 m3">
            <div class = "card large teal">
               <span class = "white-text">Large Card</span>
            </div>
         </div>
      </div>     	  
   </body>   
</html>

Результат

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

Materialize предоставляет специальный компонент под названием Chip, который можно использовать для представления небольшого набора информации. Например, контакт, теги и т. Д.

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

chip

Установите контейнер div как чип.

пример

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

materialize_chips.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Chips Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container">       
      <div class = "chip">           
         <img alt = "HTML5" src = "/html5/images/html5-mini-logo.jpg">HTML 5            
      </div>
   
      <div class = "chip">           
         HTML 5<i class = "material-icons">close</i>
      </div>		 
   </body>   
</html>

Результат

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

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

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

collection

Устанавливает контейнер div или ul как коллекцию.

2

collection-item

Устанавливает элемент a или li в качестве элемента коллекции.

3

active

Показывает элемент a или li как активный элемент коллекции.

4

with-header

Отмечает коллекцию как имеющую заголовок.

5

collection-header

Устанавливает элемент a или li в качестве заголовка коллекции.

6

avatar

Устанавливает элемент a или li в качестве элемента аватара.

7

dismissible

Позволяет убирать элементы коллекции. Работает только на устройствах с сенсорным экраном.

пример

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

materialize_collections.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Collections Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container">       
      <h3>Simple Collection</h3><hr/>
      <ul class = "collection">
         <li class = "collection-item">HTML 5</li>
         <li class = "collection-item">JQuery</li>
         <li class = "collection-item">JavaScript</li>
         <li class = "collection-item">CSS</li>
      </ul>
      
      <h3>Collection of Links</h3><hr/>
      <div class = "collection">
         <a href = "#" class = "collection-item">HTML 5</a>
         <a href = "#!" class = "collection-item active">JQuery</a>
         <a href = "#!" class = "collection-item">JavaScript</a>
         <a href = "#!" class = "collection-item">CSS</a>
      </div>
      
      <h3>Collection with Header</h3><hr/>
      <ul class = "collection with-header">
         <li class = "collection-header"><h3>Front End Technologies</h3></li>
         <li class = "collection-item">HTML 5</li>
         <li class = "collection-item">JQuery</li>
         <li class = "collection-item">JavaScript</li>
         <li class = "collection-item">CSS</li>
      </ul>
      
      <h3>Collection with Secondary Content</h3><hr/>
      <ul class = "collection">         
         <li class = "collection-item">
            <div>HTML 5<a href = "#!" class = "secondary-content">
               <i class = "material-icons">cloud</i></a></div></li>
         <li class = "collection-item">
            <div>JQuery<a href = "#!" class = "secondary-content">
               <i class = "material-icons">cloud</i></a></div></li>
         <li class = "collection-item">
            <div>JavaScript<a href = "#!" class = "secondary-content">
               <i class = "material-icons">cloud</i></a></div></li>
         <li class = "collection-item">
            <div>CSS<a href = "#!" class = "secondary-content">
               <i class = "material-icons">cloud</i></a></div></li>
      </ul>
      
      <h3>Collection with Avatar</h3><hr/>
      <ul class = "collection">         
         <li class = "collection-item avatar">
            <img alt = "HTML5" src = "/html5/images/html5-mini-logo.jpg" class = "circle">
            <span class = "title">HTML5</span>
            <p>HTML5 is the next major revision of the HTML standard superseding
               HTML 4.01, XHTML 1.0, and XHTML 1.1.<br/> HTML5 is a standard for
               structuring and presenting content on the World Wide Web.</p>
            <a href = "#!" class = "secondary-content"><i class = "material-icons">
               grade</i></a>
         </li>
         
         <li class = "collection-item avatar">
            <i class = "material-icons circle green">insert_chart</i>
            <span class = "title">HighCharts</span>
            <p></p>
            <a href = "#!" class = "secondary-content"><i class = "material-icons">
               grade</i></a>
         </li>
      </ul>
      
      <h3>Collection with dismissible content</h3><hr/>
      <ul class = "collection">
         <li class = "collection-item dismissable">HTML 5</li>
         <li class = "collection-item dismissable">JQuery</li>
         <li class = "collection-item dismissable">JavaScript</li>
         <li class = "collection-item dismissable">CSS</li>
      </ul>
   </body>   
</html>

Результат

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

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

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

page-footer

Устанавливает контейнер div в качестве нижнего колонтитула.

2

footer-copyright

Устанавливает контейнер div как контейнер авторских прав нижнего колонтитула.

пример

В следующем примере демонстрируется использование классов нижнего колонтитула для демонстрации образца нижнего колонтитула.

materialize_footer.htm

<html>
   <head>
      <title>The Materialize Collections Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container">       
      <footer class = "page-footer">
         <div class = "row">
            <div class = "col s12 m6 l6">
               <h5 class = "white-text">Footer Content</h5>
            </div>
            
            <div class = "col">
               <ul>
                  <li><a href = "#" class = "grey-text text-lighten-4 right">
                     Help</a></li>
                  <li><a href = "#" class = "grey-text text-lighten-4 right">
                     Privacy and Terms</a></li>
                  <li><a href = "#" class = "grey-text text-lighten-4 right">
                     User Agreement</a></li>
               </ul>
            </div>
         </div>
         
         <div class = "footer-copyright">
            <div class = "container">
               © 2016 Copyright Information
               <a class = "grey-text text-lighten-4 right" href = "#!">Links</a>
            </div>
         </div>         
       </footer>
   </body>   
</html>

Результат

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

Materialize имеет очень красивый и отзывчивый CSS для проектирования форм. Используются следующие CSS -

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

input-field

Устанавливает контейнер div как контейнер поля ввода. Необходимые.

2

validate

Добавляет стили проверки в поле ввода.

3

active

Показывает ввод с активным стилем.

4

materialize-textarea

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

5

filled-in

Показывает флажок со стилем заполненного поля.

пример

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

materialize_forms.htm

<html>
   <head>
      <title>The Materialize Form Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container">   
      <div class = "row">
         <form class = "col s12">
            <div class = "row">
               <div class = "input-field col s6">
                  <i class = "material-icons prefix">account_circle</i>
                  <input placeholder = "Username" value = "Mahesh" id = "name"
                     type = "text" class = "active validate" required />
                  <label for = "name">Username</label>
               </div>
               
               <div class = "input-field col s6">      
                  <label for = "password">Password</label>
                  <input id = "password" type = "password" placeholder = "Password"
                     class = "validate" required />          
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                  <input placeholder = "Email" id = "email" type = "email"
                     class = "validate">
                  <label for = "email">Email</label>
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                  <i class = "material-icons prefix">mode_edit</i>
                  <textarea id = "address" class = "materialize-textarea"></textarea>
                  <label for = "address">Address</label>
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                  <input placeholder = "Comments (Disabled)" id = "comments"
                     type = "text" disabled />
                  <label for = "comments">Comments</label>
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                  <p>
                     <input id = "married" type = "checkbox" checked = "checked" />
                     <label for = "married">Married</label>
                  </p>
                  
                  <p>
                     <input id = "single" type = "checkbox" class = "filled-in" />
                     <label for = "single">Single</label>
                  </p>
                  
                  <p>
                     <input id = "dontknow" type = "checkbox" disabled = "disabled" />              
                     <label for = "dontknow">Don't know (Disabled)</label>
                  </p>
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                   <p>
                     <input id = "male" type = "radio" name = "gender"
                        value = "male" checked />
                     <label for = "male">Male</label>
                  </p>
                  
                  <p>
                     <input id = "female" type = "radio" name = "gender"
                        value = "female" checked />
                     <label for = "female">Female</label>
                  </p>
                  
                  <p>
                     <input id = "dontknow1" type = "radio" name = "gender"
                        value = "female" disabled />
                     <label for = "dontknow1">Don't know (Disabled)</label>
                  </p>
               </div>
            </div>           
         </form>       
      </div>
   </body>   
</html>

Результат

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

Важные элементы управления вводом

Materialize предоставляет CSS для множества типов элементов управления вводом. В следующей таблице показано то же самое.

Sr.No. Имя и описание типа ввода
1 Выбрать

Различные типы выборок входов

2 Переключатели

Различные типы переключателей

3 файл

Различные типы файловых входов

4 Спектр

Различные типы входов диапазона

5 Выбор даты

Выбор даты

6 Счетчик персонажей

Счетчик персонажей

Materialize поддерживает следующие популярные библиотеки значков -

  • Font Awesome Иконки
  • Значки материалов Google
  • Иконки Bootstrap

Применение

Чтобы использовать значок, поместите имя значка в класс элемента HTML <i>. Чтобы контролировать размер значка, вы можете использовать следующие классы:

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

tiny

Рисует иконку очень маленького размера. 1рем.

2

small

Рисует иконку небольшого размера. 2рем.

3

medium

Рисует иконку среднего размера. 4рем.

4

large

Рисует иконку большого размера. 6рем.

пример

materialize_icons.htm

<html>
   <head>
      <title>The Materialize Icons Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet"
         href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
   
   <body class = "container"> 
      <h2>Icons Demo</h2>
      <hr/>
      
      <h3>Font Awesome Icon Demo</h3>
      <i class = "fa fa-cloud tiny"></i>
      <i class = "fa fa-cloud"></i>	  
      <i class = "fa fa-cloud small"></i>
      <i class = "fa fa-cloud medium"></i>
      <i class = "fa fa-cloud large"></i>     
      
      <h3>Google Material Design Icon Demo</h3>	  
      <i class = "material-icons tiny">cloud</i>
      <i class = "material-icons small">cloud</i>
      <i class = "material-icons">cloud</i>
      <i class = "material-icons medium">cloud</i>
      <i class = "material-icons large">cloud</i>      
      
      <h3>Bootstrap Icon Demo</h3>
      <i class = "glyphicon glyphicon-cloud tiny"></i>
      <i class = "glyphicon glyphicon-cloud"></i>      
      <i class = "glyphicon glyphicon-cloud small"></i>
      <i class = "glyphicon glyphicon-cloud medium"></i>
      <i class = "glyphicon glyphicon-cloud large"></i>      
   </body>  
</html>

Результат

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

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

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

nav-wrapper

Устанавливает компонент навигации как панель навигации / оболочку навигационной цепочки.

2

brand-logo

Устанавливает элемент привязки в качестве основного логотипа.

3

nav-mobile

Устанавливает элемент ul как панель навигации.

пример

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

materialize_navbar.htm

<html>
   <head>
      <title>The Materialize NavBar Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>	 
      
      <script>
         $( document ).ready(function()) { $(".dropdown-button").dropdown();
         });
      </script>
   </head>
   
   <body class = "container"> 
      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12" >
            <h5>Right Aligned Nav Bar</h5>
            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo">TutorialsPoint</a>
                  <ul id = "nav-mobile" class = "right hide-on-med-and-down">
                     <li><a href = "#">HTML5</a></li>
                     <li><a href = "#">CSS</a></li>
                     <li><a href = "#">JavaScript</a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>
      
      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12">
            <h5>Left Aligned Nav Bar</h5>
            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo right">TutorialsPoint</a>
                  <ul id = "nav-mobile" class = "left hide-on-med-and-down">
                     <li><a href = "#">HTML5</a></li>
                     <li><a href = "#">CSS</a></li>
                     <li><a href = "#">JavaScript</a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>
      
      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12">
            <h5>Center Aligned Nav Bar</h5>
            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo center">TutorialsPoint</a>
                  <ul id = "nav-mobile" class = "right hide-on-med-and-down">                    
                     <li><a href = "#">Java</a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>
      
      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12">
            <h5>Nav Bar with Active link</h5>
            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo right">TutorialsPoint</a>
                  <ul id = "nav-mobile" class = "left hide-on-med-and-down">
                     <li><a href = "#">HTML5</a></li>
                     <li><a href = "#">CSS</a></li>
                     <li class = "active"><a href = "#">JavaScript</a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>
      
      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12">
            <h5>Nav Bar with dropdown menu</h5>
            <ul id = "javaDropDown" class = "dropdown-content">
               <li><a href = "#!">JSF</a></li>
               <li><a href = "#!">JSP</a></li>
               <li class = "divider"></li>
               <li><a href = "#!">Servlets</a></li>
            </ul>
            
            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo center">TutorialsPoint</a>
                  <ul id = "nav-mobile" class = "right hide-on-med-and-down">                    
                     <!-- Dropdown Trigger -->
                     <li><a class = "dropdown-button" href = "#!" 
                        data-activates = "javaDropDown">Java<i class = "material-icons
                        right">arrow_drop_down</i></a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>
      
      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12">
            <h5>Nav Bar with Links and Icons</h5>
            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo right">TutorialsPoint</a>
                  <ul id = "nav-mobile" class = "left hide-on-med-and-down">
                     <li><a href = "#"><i class = "material-icons left">search</i>
                        HTML5</a></li>
                     <li><a href = "#"><i class = "material-icons right">view_module</i>
                        CSS</a></li>
                     <li><a href = "#">JavaScript</a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>  	 	  
   </body>  
</html>

Результат

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

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

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

pagination

Устанавливает элемент ul как компонент нумерации страниц.

пример

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

materialize_pagination.htm

<html>
   <head>
      <title>The Materialize Pagination Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>
   
   <body class = "container"> 
      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12" >
            <h5>Materialize Pagination</h5>
            <ul class = "pagination">
               <li class = "disabled"><a href = "#!">
                  <i class = "material-icons">chevron_left</i></a></li>
               <li class = "active"><a href = "#!">1</a></li>
               <li class = "waves-effect"><a href = "#!">2</a></li>
               <li class = "waves-effect"><a href = "#!">3</a></li>
               <li class = "waves-effect"><a href = "#!">4</a></li>
               <li class = "waves-effect"><a href = "#!">5</a></li>
               <li class = "waves-effect"><a href = "#!">
                  <i class = "material-icons">chevron_right</i></a></li>
            </ul>
         </div>
      </div>      
   </body>  
</html>

Результат

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

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

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

progress

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

2

determinate

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

3

indeterminate

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

пример

Ниже приведен пример использования прелоадеров разными способами.

materialize_preloader.htm

<html>
   <head>
      <title>The Materialize Preloader Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>
   
   <body class = "container"> 
      <h4>Default Preloader</h4>
      <div class = "progress">
         <div class = "determinate" style = "width: 50%"></div>
      </div>
      
      <h4>Indeterminate Preloader</h4>
      <div class = "progress">
         <div class = "indeterminate"></div>
      </div>
      
      <h4>Circular Preloader</h4>
      <div class = "preloader-wrapper big active">
         <div class = "spinner-layer spinner-blue-only">
            <div class = "circle-clipper left">
               <div class = "circle"></div>
            </div>
            
            <div class = "gap-patch">
               <div class = "circle"></div>
            </div>
            
            <div class = "circle-clipper right">
               <div class = "circle"></div>
            </div>
         </div>
      </div>
   </body>  
</html>

Результат

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

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

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

collapsible

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

2

collapsible-header

Устанавливает div как заголовок раздела.

3

collapsible-body

Устанавливает div как контейнер содержимого раздела.

4

popout

Создает складное всплывающее окно.

5

active

Открывает раздел.

6

expandable

Помечает складной компонент как расширяемый.

7

accordion

Помечает складной компонент как гармошку.

Ниже приводится пример использования аккордеонов по-разному.

пример

materialize_collapsible.htm

<html>
   <head>
      <title>The Materialize Collapsible Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>
   
   <body class = "container"> 
      <h4>Simple Accordion</h4>
      <ul class = "collapsible" data-collapsible = "accordion">
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">filter_drama</i>First Section</div>
            <div class = "collapsible-body"><p>This is first section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">place</i>Second Section</div>
            <div class = "collapsible-body"><p>This is second section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">whatshot</i>Third Section</div>
            <div class = "collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>
      
      <h4>Popout Accordion</h4>
      <ul class = "collapsible popout" data-collapsible = "accordion">
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">filter_drama</i>First Section</div>
            <div class = "collapsible-body"><p>This is first section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">place</i>Second Section</div>
            <div class = "collapsible-body"><p>This is second section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">whatshot</i>Third Section</div>
            <div class = "collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>
      
      <h4>Accordion with Preselected Section</h4>
      <ul class = "collapsible" data-collapsible = "accordion">
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">filter_drama</i>First Section</div>
            <div class = "collapsible-body"><p>This is first section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header active">
               <i class = "material-icons">place</i>Second Section</div>
            <div class = "collapsible-body"><p>This is second section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">whatshot</i>Third Section</div>
            <div class = "collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>
      
      <h4>Expandables</h4>
      <ul class = "collapsible" data-collapsible = "expandable">
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">filter_drama</i>First Section</div>
            <div class = "collapsible-body"><p>This is first section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">place</i>Second Section</div>
            <div class = "collapsible-body"><p>This is second section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">whatshot</i>Third Section</div>
            <div class = "collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>	  		  
   </body>  
</html>

Результат

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

Materialize предоставляет различные специальные методы для отображения ненавязчивых предупреждений для пользователей. Материализовать для них есть тост. Ниже приводится синтаксис для отображения диалогового окна в виде тоста.

Materialize.toast(message, displayLength, className, completeCallback);

Где,

  • message - Сообщение, которое будет отображаться пользователю.

  • displayLength - Продолжительность сообщения, после которого оно исчезнет.

  • className- Класс стиля, применяемый к тосту. Например, «округлый».

  • completeCallback - Метод обратного вызова, который будет вызываться после отклонения тоста.

Для всплывающей подсказки Materialize предоставляет следующие классы CSS.

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

tooltipped

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

2

data-position

Положение всплывающей подсказки; снизу, сверху, слева или справа.

3

data-delay

Устанавливает продолжительность всплывающей подсказки, после которой она исчезнет.

4

data-tooltip

Устанавливает содержимое всплывающей подсказки.

пример

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

materialize_dialogs.htm

<html>
   <head>
      <title>The Materialize Dialogs Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
      
      <script>
         function showToast(message, duration) {
            Materialize.toast(message, duration);
         }
         
         function showToast1(message, duration) {
            Materialize.toast('<i>'+ message + '</i>', duration);
         }
         
         function showToast2(message, duration) {
            Materialize.toast(message, duration, 'rounded');
         }
         
         function showToast3(message, duration) {
            Materialize.toast('Hello World!', duration, '', function toastCompleted() {
               alert('Toast dismissed!');
            });
         }
      </script>
   </head>
   
   <body class = "container"> 
      <h4>Toasts</h4>
      <a class = "btn" onclick = "showToast('Hello World!', 3000)">Normal Alert!</a>
      <a class = "btn" onclick = "showToast1('Hello World!', 3000)">Italic Alert!</a>
      <a class = "btn" onclick = "showToast2('Hello World!', 3000)">Rounded Alert!</a>
      <br/><br/>
      <a class = "btn" onclick = "showToast3('Hello World!', 3000)">Callback Alert!</a>	  
      
      <h4>Tooltips</h4>
      <a class = "btn tooltipped" data-position = "bottom" data-delay = "50"
         data-tooltip = "I am in bottom!">Bottom</a>
      <a class = "btn tooltipped" data-position = "left" data-delay = "50"
         data-tooltip = "I am in left!">Left</a>
      <a class = "btn tooltipped" data-position = "right" data-delay = "50"
         data-tooltip = "I am in right!">Right</a>
      <a class = "btn tooltipped" data-position = "top" data-delay = "50"
         data-tooltip = "I am in top!">Top</a>
   </body>  
</html>

Результат

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

Materialize предоставляет раскрывающийся класс CSS, чтобы сделать элемент ul как раскрывающийся список и добавить идентификатор элемента ul к атрибуту data-activates кнопки или элемента привязки. В следующей таблице перечислены доступные классы и их эффекты.

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

dropdown-content

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

2

data-activates

id выпадающего элемента ul.

пример

Ниже приведен пример использования раскрывающегося списка.

materialize_dropdowns.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Dropdowns Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <h3>Drop Down Demo</h3>
      <ul id = "dropdown" class = "dropdown-content">
         <li><a href = "#">Inbox<span class = "badge">12</span></a></li>
         <li><a href = "#!">Unread<span class = "new badge">4</span></a></li>
         <li><a href = "#">Sent</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Outbox<span class = "badge">14</span></a></li>
      </ul>
      
      <a class = "btn dropdown-button" href = "#" data-activates = "dropdown">Mail Box
         <i class = "mdi-navigation-arrow-drop-down right"></i></a>	 
   </body>
</html>

Результат

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

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

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

tabs

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

2

active

Делает вкладку активной.

пример

Ниже приведен пример использования вкладки.

materialize_tabs.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Tabs Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <h3>Tabs Demo</h3>
      <div class = "row">
         <div class = "col s12">
            <ul class = "tabs">
               <li class = "tab col s3"><a href = "#inbox">Inbox</a></li>
               <li class = "tab col s3"><a class = "active" href = "#unread">
                  Unread</a></li>
               <li class = "tab col s3 disabled"><a href = "#outbox">
                  Outbox (Disabled)</a></li>
               <li class = "tab col s3"><a href = "#sent">Sent</a></li>
            </ul>
         </div>
         
         <div id = "inbox" class = "col s12">Inbox</div>
         <div id = "unread" class = "col s12">Unread</div>
         <div id = "outbox" class = "col s12">Outbox (Disabled)</div>
         <div id = "sent" class = "col s12">Sent</div>
      </div> 
   </body>
</html>

Результат

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

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

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

waves-effect

Применяет волновой эффект к элементу управления.

2

waves-light

Применяет эффект волны белого цвета.

3

waves-red

Применяет эффект волны красного цвета.

4

waves-green

Применяет эффект волны зеленого цвета.

5

waves-yellow

Применяет эффект волны желтого цвета.

6

waves-orange

Применяет волновой эффект оранжевого цвета.

7

waves-purple

Применяет волновой эффект фиолетового цвета.

8

waves-teal

Применяет эффект волны бирюзового цвета.

пример

Ниже приведен пример использования волновых эффектов на кнопках.

materialize_waves.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Waves Effects Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <h3>Waves Effects Demo</h3>
      <div class = "collection waves-color-demo">
         <div class = "collection-item">
            <code class = " language-markup">Default</code>
            <a href = "#!" class = "waves-effect btn secondary-content">
               Click Me!</a>
         </div>
         
         <div class = "collection-item">
            <code class = " language-markup">waves-light</code>
            <a href = "#!" class = "waves-effect waves-light btn secondary-content">
               Click Me!</a>
         </div>
         
         <div class = "collection-item">
            <code class = " language-markup">waves-red</code>
            <a href = "#!" class = "waves-effect waves-red btn secondary-content">
               Click Me!</a>
         </div>
         
         <div class = "collection-item">
            <code class = " language-markup">waves-yellow</code>
            <a href = "#!" class = "waves-effect waves-yellow btn secondary-content">
               Click Me!</a>
         </div>
         
         <div class = "collection-item">
            <code class = " language-markup">waves-orange</code>
            <a href = "#!" class = "waves-effect waves-orange btn secondary-content">
               Click Me!</a>
         </div>
         
         <div class = "collection-item">
            <code class = " language-markup">waves-purple</code>
            <a href = "#!" class = "waves-effect waves-purple btn secondary-content">
               Click Me!</a>
         </div>
         
         <div class = "collection-item">
            <code class = " language-markup">waves-green</code>
            <a href = "#!" class = "waves-effect waves-green btn secondary-content">
               Click Me!</a>
         </div>
         
         <div class = "collection-item">
            <code class = " language-markup">waves-teal</code>
            <a href = "#!" class = "waves-effect waves-teal btn secondary-content">
               Click Me!</a>
         </div>
      </div>
   </body>
</html>

Результат

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