Материализовать - Краткое руководство
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>Результат
Проверьте результат.