Материализация — Обзор
Materialize — это библиотека компонентов пользовательского интерфейса, созданная с использованием CSS, JavaScript и HTML. Материализация многократно используемых компонентов пользовательского интерфейса помогает создавать привлекательные, согласованные и функциональные веб-страницы и веб-приложения, придерживаясь современных принципов веб-дизайна, таких как переносимость браузера, независимость от устройства и постепенная деградация.
Некоторые из его характерных особенностей заключаются в следующем —
-
Встроенное адаптивное проектирование.
-
Стандартный CSS с минимальной площадью.
-
Новые версии общих элементов управления пользовательского интерфейса, таких как кнопки, флажки и текстовые поля, адаптированные в соответствии с концепциями Material Design.
-
Расширенные и специализированные функции, такие как карточки, вкладки, панели навигации, тосты и т. Д.
-
Бесплатно для использования и требует JQuery JavaScript библиотеки для правильной работы.
-
Кросс-браузер, и может быть использован для создания веб-компонентов многократного использования.
Встроенное адаптивное проектирование.
Стандартный CSS с минимальной площадью.
Новые версии общих элементов управления пользовательского интерфейса, таких как кнопки, флажки и текстовые поля, адаптированные в соответствии с концепциями Material Design.
Расширенные и специализированные функции, такие как карточки, вкладки, панели навигации, тосты и т. Д.
Бесплатно для использования и требует JQuery JavaScript библиотеки для правильной работы.
Кросс-браузер, и может быть использован для создания веб-компонентов многократного использования.
Адаптивный дизайн
Materialize имеет встроенное адаптивное проектирование, поэтому веб-сайт, созданный с использованием Materialize, будет перепроектирован в соответствии с размером устройства. Классы материализации создаются таким образом, что веб-сайт может соответствовать любому размеру экрана.
Веб-сайты, созданные с использованием Materialise, полностью совместимы с ПК, планшетами и мобильными устройствами.
растяжимый
Материализация по дизайну очень минимальная и плоская. Он разработан с учетом того факта, что гораздо проще добавлять новые правила CSS, чем перезаписывать существующие правила CSS. Поддерживает тени и жирные цвета. Цвета и оттенки остаются одинаковыми на разных платформах и устройствах.
И самое главное, это абсолютно бесплатно в использовании.
Материализация — настройка среды
В этой главе мы обсудим различные аспекты создания благоприятной среды для Материализации.
Попробуйте вариант онлайн
Мы настроили онлайн-среду Materialise Programming, чтобы вы могли скомпилировать и выполнить все доступные примеры в Интернете. Это дает вам уверенность в том, что вы читаете, и позволяет вам проверять программы с различными вариантами. Не стесняйтесь изменять любой пример и выполнять его онлайн.
Попробуйте следующий пример, используя наш онлайн-компилятор, доступный на 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>Для большинства примеров, приведенных в этом руководстве, вы найдете опцию Try it в разделах кода нашего сайта в верхнем правом углу, которые приведут вас к онлайн-компилятору. Так что просто используйте его и наслаждайтесь обучением.
Мы настроили онлайн-среду Materialise Programming, чтобы вы могли скомпилировать и выполнить все доступные примеры в Интернете. Это дает вам уверенность в том, что вы читаете, и позволяет вам проверять программы с различными вариантами. Не стесняйтесь изменять любой пример и выполнять его онлайн.
Попробуйте следующий пример, используя наш онлайн-компилятор, доступный на CodingGround.
Для большинства примеров, приведенных в этом руководстве, вы найдете опцию Try it в разделах кода нашего сайта в верхнем правом углу, которые приведут вас к онлайн-компилятору. Так что просто используйте его и наслаждайтесь обучением.
Как использовать материализоваться?
Есть два способа использования Materialise —
Локальная установка. Вы можете загрузить файлы materialize.min.css и materialize.min.js на свой локальный компьютер и включить их в свой HTML-код.
Версия на основе CDN. Вы можете включать файлы materialize.min.css и materialize.min.js в свой HTML-код непосредственно из сети доставки контента (CDN).
Локальная установка
-
Перейдите по адресу http://materializecss.com/getting-started.html, чтобы загрузить последнюю доступную версию.
-
Затем поместите загруженный файл materialize.min.js в каталог своего веб-сайта, например, / js и materialize.min.css в / css.
Перейдите по адресу 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 поддерживает богатый набор цветовых классов. Эти цветовые классы вдохновлены и разработаны с учетом цветов, используемых в маркетинге, дорожных знаков и заметок.
- красный
- розовый
- пурпурный
- темно-фиолетовый
- индиго
- синий
- светло-синий
- циан
- чирок
- зеленый
- светло-зеленый
- Лайм
- желтый
- янтарный
- оранжевый
- темно-оранжевый цвет
- коричневый
- серый
- серо-голубой
- черный
- белый
- прозрачный
использование
Ниже приведен список классов яркости / темноты, которые можно использовать для изменения применяемого цвета.
- осветлить-1
- осветлить-2
- осветлить-3
- осветлить-4
- осветлить-5
- темнеют-1
- темнеют-2
- темнеют-3
- темнеют-4
- Акцент-1
- Акцент-2
- Акцент-3
- Акцент-4
пример
В следующем примере показано, как использовать вышеуказанные классы для рендеринга фона или для изменения цвета текста. В случае фона добавьте классы как таковые, а в случае текста добавьте суффикс «-text» к классу цвета и префикс «text-» к классу молнии.
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>
Результат
Проверьте результат.
Материализация — Сетки
Materialise обеспечивает сетку с 12 колонками, чувствительными к жидкости.
Он использует классы стиля строк и столбцов для определения строк и столбцов соответственно.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
строка Определяет контейнер без отступов, который будет использоваться для отзывчивых столбцов. Этот класс обязателен, чтобы адаптивные классы были полностью адаптивными. |
| 2 |
седло Определяет столбец с подклассами. |
строка
Определяет контейнер без отступов, который будет использоваться для отзывчивых столбцов. Этот класс обязателен, чтобы адаптивные классы были полностью адаптивными.
седло
Определяет столбец с подклассами.
У 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%. Класс по умолчанию для телефонов с небольшим экраном. |
|
s1
Определяет 1 из 12 столбцов с шириной 08,33%.
s2
Определяет 2 из 12 столбцов с шириной 16,66%.
s3
Определяет 3 из 12 столбцов с шириной 25,00%.
s4
Определяет 4 из 12 столбцов с шириной 33,33%.
s12
Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для телефонов с небольшим экраном.
Колонки для средних экранов
Ниже приведен список стилей на уровне столбцов для устройств среднего экрана, обычно для планшетов.
| Sr.No. | Имя класса и описание | |
|---|---|---|
| 1 |
m1 Определяет 1 из 12 столбцов шириной 08,33% |
|
| 2 |
м2 Определяет 2 из 12 столбцов с шириной 16,66%. |
|
| 3 |
м3 Определяет 3 из 12 столбцов с шириной 25,00%. |
|
| 4 |
m4 Определяет 4 из 12 столбцов с шириной 33,33%. |
|
| м5 — м11 | ||
| 12 |
m12 Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для телефонов среднего размера. |
|
m1
Определяет 1 из 12 столбцов шириной 08,33%
м2
Определяет 2 из 12 столбцов с шириной 16,66%.
м3
Определяет 3 из 12 столбцов с шириной 25,00%.
m4
Определяет 4 из 12 столбцов с шириной 33,33%.
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%. |
|
| 15 — 11 | ||
| 12 |
l12 Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для устройств с большим экраном. |
|
l1
Определяет 1 из 12 столбцов с шириной 08,33%.
l2
Определяет 2 из 12 столбцов с шириной 16,66%.
l3
Определяет 3 из 12 столбцов с шириной 25,00%.
l4
Определяет 4 из 12 столбцов с шириной 33,33%.
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, если подкласс не указан в атрибуте класса 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>
Результат
Проверьте результат.
Материализация — Помощники
Materialise имеет несколько служебных классов, полезных для повседневных нужд проектирования.
-
Цветовые служебные классы — например, .red, .green, .grey и т. Д.
-
Вспомогательные классы выравнивания — например, .valign-wrapper, .left-align, .rightalign, .center-align, .left, .right
-
Утилиты скрытия содержимого по размеру устройства — например, .hide, .hideon-small-only, .hide-on-med-only, .hide-on-med-and-down, .hide-on-med-and и скрывать на большом
-
Утилиты форматирования — например, усеченные, hoverable
Цветовые служебные классы — например, .red, .green, .grey и т. Д.
Вспомогательные классы выравнивания — например, .valign-wrapper, .left-align, .rightalign, .center-align, .left, .right
Утилиты скрытия содержимого по размеру устройства — например, .hide, .hideon-small-only, .hide-on-med-only, .hide-on-med-and-down, .hide-on-med-and и скрывать на большом
Утилиты форматирования — например, усеченные, 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>
Результат
Проверьте результат.
Материализация — СМИ
У Materialise есть несколько классов, чтобы сделать изображения и видео реагирующими на разные размеры.
-
responseive-img — создает изображение для изменения размера в зависимости от размера экрана.
-
video-container — для адаптивного контейнера со встроенными видео.
-
отзывчивое видео — делает видео HTML5 отзывчивым.
responseive-img — создает изображение для изменения размера в зависимости от размера экрана.
video-container — для адаптивного контейнера со встроенными видео.
отзывчивое видео — делает видео 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>
Результат
Проверьте результат.
Материализация — Тени
У Materialize есть несколько специальных классов для отображения контейнеров в виде бумажных карточек с тенью.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
Z-глубина-0 Удаляет тень элементов, имеющих z-глубину по умолчанию. |
| 2 |
Z-глубина-1 Стилизует контейнер для любого содержимого HTML с тенью на 1 пиксель. Добавляет z-глубину 1. |
| 3 |
Z-глубина-2 Стилизует контейнер для любого содержимого HTML с тенью на 2 пикселя. Добавляет z-глубину 2. |
| 4 |
Z-глубина-3 Стилизует контейнер для любого HTML-контента с тенью на 3 пикселя. Добавляет z-глубину 3. |
| 5 |
Z-глубина-4 Стилизует контейнер для любого содержимого HTML с тенью на 4 пикселя. Добавляет z-глубину 4. |
| 6 |
Z-глубина-5 Стилизует контейнер для любого HTML-контента с тенью на 5 пикселей. Добавляет z-глубину 5. |
Z-глубина-0
Удаляет тень элементов, имеющих z-глубину по умолчанию.
Z-глубина-1
Стилизует контейнер для любого содержимого HTML с тенью на 1 пиксель. Добавляет z-глубину 1.
Z-глубина-2
Стилизует контейнер для любого содержимого HTML с тенью на 2 пикселя. Добавляет z-глубину 2.
Z-глубина-3
Стилизует контейнер для любого HTML-контента с тенью на 3 пикселя. Добавляет z-глубину 3.
Z-глубина-4
Стилизует контейнер для любого содержимого HTML с тенью на 4 пикселя. Добавляет z-глубину 4.
Z-глубина-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>
Результат
Проверьте результат.
Материализация — Столы
Materialize можно использовать для отображения разных типов таблиц, используя различные стили над таблицами.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
Никто Представляет базовую таблицу без каких-либо границ. |
| 2 |
раздетый Отображает раздетую таблицу. |
| 3 |
окаймленный Рисует таблицу с рамкой между рядами. |
| 4 |
основной момент Рисует подсвеченную таблицу. |
| 5 |
в центре Рисует таблицу со всем текстовым центром, выровненным по таблице. |
| 6 |
отзывчивый стол Рисует адаптивную таблицу, показывающую горизонтальную полосу прокрутки, если экран слишком мал для отображения содержимого. |
Никто
Представляет базовую таблицу без каких-либо границ.
раздетый
Отображает раздетую таблицу.
окаймленный
Рисует таблицу с рамкой между рядами.
основной момент
Рисует подсвеченную таблицу.
в центре
Рисует таблицу со всем текстовым центром, выровненным по таблице.
отзывчивый стол
Рисует адаптивную таблицу, показывающую горизонтальную полосу прокрутки, если экран слишком мал для отображения содержимого.
пример
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>
Результат
Проверьте результат.
Материализация — Типография
Materialise использует 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 |
значок Определяет элемент как компонент значка MDL. Требуется для элемента span. |
| 2 |
новый Добавляет «новый» класс к компоненту значка, дает ему фон. |
значок
Определяет элемент как компонент значка MDL. Требуется для элемента span.
новый
Добавляет «новый» класс к компоненту значка, дает ему фон.
Ниже приведены примеры использования значков по-разному.
пример
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 |
БТН Устанавливает кнопку или привязку в качестве кнопки материализации, обязательно. Устанавливает эффект повышенного отображения для кнопки. |
| 2 |
БТН-плавающая Создает круглую кнопку. |
| 3 |
БТН-плоский Устанавливает эффект плоского дисплея для кнопки, по умолчанию. |
| 4 |
БТН-большой Создает большие кнопки. |
| 5 |
отключен Создает отключенную кнопку. |
| 6 |
type = «submit» Представляет привязку или кнопку в качестве основной кнопки. |
| 7 |
волны эффект Устанавливает эффект щелчка пульсации, может использоваться в сочетании с любыми другими классами. |
БТН
Устанавливает кнопку или привязку в качестве кнопки материализации, обязательно. Устанавливает эффект повышенного отображения для кнопки.
БТН-плавающая
Создает круглую кнопку.
БТН-плоский
Устанавливает эффект плоского дисплея для кнопки, по умолчанию.
БТН-большой
Создает большие кнопки.
отключен
Создает отключенную кнопку.
type = «submit»
Представляет привязку или кнопку в качестве основной кнопки.
волны эффект
Устанавливает эффект щелчка пульсации, может использоваться в сочетании с любыми другими классами.
пример
В следующем примере демонстрируется использование классов кнопок mdl для отображения кнопок различных типов.
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>
Результат
Проверьте результат.
Материализоваться — BreadCrumb
Materialise предоставляет различные CSS-классы для простого создания приятного крошки. В следующей таблице указаны доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
нав-обертка Устанавливает компонент nav в качестве оболочки хлебных крошек / панелей навигации. |
| 2 |
хлебный мякиш Устанавливает элемент привязки как крошку. Последний элемент привязки активен, а остальные показаны серым цветом. |
нав-обертка
Устанавливает компонент nav в качестве оболочки хлебных крошек / панелей навигации.
хлебный мякиш
Устанавливает элемент привязки как крошку. Последний элемент привязки активен, а остальные показаны серым цветом.
пример
В следующем примере демонстрируется использование классов 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 |
карта Определяет элемент div как контейнер для карточек Materialise. Требуется на «внешнем» div. |
| 2 |
карта-контент Идентифицирует div как контейнер содержимого карты и требуется для «внутреннего» div. |
| 3 |
карты в заголовке Идентифицирует div как контейнер заголовка карты и требуется для «внутреннего» заголовка div. |
| 4 |
карта действия Определяет div как контейнер действий карты и присваивает соответствующие текстовые характеристики тексту действий. Требуется на «внутренние» действия div; контент идет прямо внутри div без промежуточных контейнеров. |
| 5 |
карта-изображение Идентифицирует div как контейнер изображения карты и требуется для «внутреннего» div. |
| 6 |
карты показывают Определяет div как раскрытый текстовый контейнер. |
| 7 |
активатор Определяет div как раскрытый текстовый контейнер и изображение, которое нужно открыть. Используется для отображения контекстной информации, связанной с изображением. |
| 8 |
карта-панель Определяет div как простую карту с тенями и отступами. |
| 9 |
карты небольшой Определяет div как маленькую карточку. Высота: 300 пикселей; |
| 10 |
карта среднего Определяет div как карту среднего размера. Высота: 400 пикселей; |
| 11 |
карты большой Определяет div как карту большого размера. Высота: 500 пикселей; |
карта
Определяет элемент div как контейнер для карточек Materialise. Требуется на «внешнем» div.
карта-контент
Идентифицирует div как контейнер содержимого карты и требуется для «внутреннего» div.
карты в заголовке
Идентифицирует div как контейнер заголовка карты и требуется для «внутреннего» заголовка div.
карта действия
Определяет div как контейнер действий карты и присваивает соответствующие текстовые характеристики тексту действий. Требуется на «внутренние» действия div; контент идет прямо внутри div без промежуточных контейнеров.
карта-изображение
Идентифицирует div как контейнер изображения карты и требуется для «внутреннего» div.
карты показывают
Определяет div как раскрытый текстовый контейнер.
активатор
Определяет div как раскрытый текстовый контейнер и изображение, которое нужно открыть. Используется для отображения контекстной информации, связанной с изображением.
карта-панель
Определяет div как простую карту с тенями и отступами.
карты небольшой
Определяет div как маленькую карточку. Высота: 300 пикселей;
карта среднего
Определяет div как карту среднего размера. Высота: 400 пикселей;
карты большой
Определяет 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>
Результат
Проверьте результат.
Материализация — чипсы
Materialise предоставляет специальный компонент, называемый Chip, который может использоваться для представления небольшого набора информации. Например, контакт, теги и т. Д.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
чип Установите контейнер div в качестве чипа. |
чип
Установите контейнер 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 |
коллекция Устанавливает контейнер div или ul как коллекцию. |
| 2 |
коллекторно-пункт Устанавливает элемент a или li как элемент коллекции. |
| 3 |
активный Показывает элемент a или li как активный элемент коллекции. |
| 4 |
с-заголовка Отмечает коллекцию, чтобы иметь заголовок. |
| 5 |
Сбор заголовка Устанавливает элемент a или li в качестве заголовка коллекции. |
| 6 |
аватар Устанавливает элемент a или li как элемент аватара. |
| 7 |
неотстранимый Позволяет убирать элементы коллекции. Работает только на устройствах с сенсорным экраном. |
коллекция
Устанавливает контейнер div или ul как коллекцию.
коллекторно-пункт
Устанавливает элемент a или li как элемент коллекции.
активный
Показывает элемент a или li как активный элемент коллекции.
с-заголовка
Отмечает коллекцию, чтобы иметь заголовок.
Сбор заголовка
Устанавливает элемент a или li в качестве заголовка коллекции.
аватар
Устанавливает элемент a или li как элемент аватара.
неотстранимый
Позволяет убирать элементы коллекции. Работает только на устройствах с сенсорным экраном.
пример
В следующем примере демонстрируется использование классов коллекций для демонстрации создания различных типов коллекций.
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 |
страницы сноска Устанавливает контейнер div в качестве нижнего колонтитула. |
| 2 |
сноска авторские_права_на_документацию Устанавливает контейнер div в качестве контейнера авторских прав нижнего колонтитула. |
страницы сноска
Устанавливает контейнер div в качестве нижнего колонтитула.
сноска авторские_права_на_документацию
Устанавливает контейнер 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>
Результат
Проверьте результат.
Материализация — Форма
Materialise имеет очень красивый и отзывчивый CSS для проектирования форм. Используются следующие CSS —
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
поле ввода Устанавливает контейнер div в качестве контейнера поля ввода. Необходимые. |
| 2 |
утверждать Добавляет стили проверки в поле ввода. |
| 3 |
активный Показывает ввод с активным стилем. |
| 4 |
материализовать-TextArea Используется для оформления текстовой области. Текстовые области будут автоматически изменять размер текста внутри. |
| 5 |
заполнен Показывает флажок с заполненным стилем. |
поле ввода
Устанавливает контейнер div в качестве контейнера поля ввода. Необходимые.
утверждать
Добавляет стили проверки в поле ввода.
активный
Показывает ввод с активным стилем.
материализовать-TextArea
Используется для оформления текстовой области. Текстовые области будут автоматически изменять размер текста внутри.
заполнен
Показывает флажок с заполненным стилем.
пример
Следующий пример демонстрирует использование классов ввода для демонстрации образца формы.
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 Icons
- Google Material Icons
- Bootstrap Иконки
использование
Чтобы использовать значок, поместите имя значка в класс HTML-элемента <i>. Чтобы контролировать размер иконки, вы можете использовать следующие классы —
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
крошечный Рисует иконку очень маленького размера. 1rem. |
| 2 |
маленький Рисует иконку небольшого размера. 2rem. |
| 3 |
Средняя Рисует иконку среднего размера. 4rem. |
| 4 |
большой Рисует иконку большого размера. 6rem. |
крошечный
Рисует иконку очень маленького размера. 1rem.
маленький
Рисует иконку небольшого размера. 2rem.
Средняя
Рисует иконку среднего размера. 4rem.
большой
Рисует иконку большого размера. 6rem.
пример
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 как оболочку nav bar / breadcrumb. |
| 2 |
бренд-логотип Устанавливает элемент привязки в качестве основного логотипа. |
| 3 |
нав-мобиль Устанавливает элемент ul в качестве панели навигации. |
нав-обертка
Устанавливает компонент nav как оболочку nav bar / breadcrumb.
бренд-логотип
Устанавливает элемент привязки в качестве основного логотипа.
нав-мобиль
Устанавливает элемент ul в качестве панели навигации.
пример
В следующем примере демонстрируется использование классов navbar для демонстрации различных панелей навигации.
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 |
пагинация Устанавливает элемент ul в качестве компонента нумерации страниц. |
пагинация
Устанавливает элемент ul в качестве компонента нумерации страниц.
пример
В следующем примере демонстрируется использование классов navbar для демонстрации панели разбивки на страницы.
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>
Результат
Проверьте результат.
Материализация — Preloader
Materialize предоставляет различные классы CSS для применения различных предопределенных визуальных и поведенческих улучшений для отображения различных типов предварительных загрузчиков или индикаторов выполнения. В следующей таблице указаны доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
прогресс Определяет элемент как компонент прогресса. Требуется для элемента div. |
| 2 |
детерминированный Устанавливает базовое поведение Materialize для индикатора прогресса. |
| 3 |
неопределенный Устанавливает анимацию на индикатор прогресса. |
прогресс
Определяет элемент как компонент прогресса. Требуется для элемента div.
детерминированный
Устанавливает базовое поведение Materialize для индикатора прогресса.
неопределенный
Устанавливает анимацию на индикатор прогресса.
пример
Ниже приведен пример использования предварительных загрузчиков различными способами.
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 |
разборный Определяет элемент как материализуемый складной компонент. Требуется для элемента ul. |
| 2 |
складная заголовка Устанавливает div в качестве заголовка раздела. |
| 3 |
складная тела Устанавливает div как контейнер содержимого раздела. |
| 4 |
выскочить Создает всплывающее окно. |
| 5 |
активный Открывает раздел. |
| 6 |
расширяемая Отмечает складной компонент как расширяемый. |
| 7 |
аккордеон Отмечает складной компонент как гармошку. |
разборный
Определяет элемент как материализуемый складной компонент. Требуется для элемента ul.
складная заголовка
Устанавливает div в качестве заголовка раздела.
складная тела
Устанавливает div как контейнер содержимого раздела.
выскочить
Создает всплывающее окно.
активный
Открывает раздел.
расширяемая
Отмечает складной компонент как расширяемый.
аккордеон
Отмечает складной компонент как гармошку.
Ниже приведен пример использования аккордеонов по-разному.
пример
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>
Результат
Проверьте результат.
Материализация — Диалоги
Materialise предоставляет различные специальные методы для показа ненавязчивых предупреждений пользователям. Материализация обеспечивает термин тост для них. Ниже приведен синтаксис для отображения диалога в виде тоста.
Materialize.toast(message, displayLength, className, completeCallback);
Куда,
-
сообщение — сообщение, которое будет отображаться пользователю.
-
displayLength — Продолжительность сообщения, после которого оно исчезнет.
-
className — Класс стиля, который будет применен к тосту . Например, «округлено».
-
completeCallback — Метод обратного вызова, который вызывается после отклонения тоста.
сообщение — сообщение, которое будет отображаться пользователю.
displayLength — Продолжительность сообщения, после которого оно исчезнет.
className — Класс стиля, который будет применен к тосту . Например, «округлено».
completeCallback — Метод обратного вызова, который вызывается после отклонения тоста.
Для всплывающей подсказки Materialize предоставляет следующие классы CSS.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
tooltipped Определяет компонент для всплывающей подсказки. |
| 2 |
Данные положение Положение всплывающей подсказки; нижний, верхний, левый или правый. |
| 3 |
Данные задержки Устанавливает продолжительность всплывающей подсказки, после которой она исчезнет. |
| 4 |
данная подсказка Устанавливает содержание всплывающей подсказки. |
tooltipped
Определяет компонент для всплывающей подсказки.
Данные положение
Положение всплывающей подсказки; нижний, верхний, левый или правый.
Данные задержки
Устанавливает продолжительность всплывающей подсказки, после которой она исчезнет.
данная подсказка
Устанавливает содержание всплывающей подсказки.
пример
Следующий пример демонстрирует использование тостов и всплывающих подсказок.
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 |
Выпадающий-контент Идентифицирует ul как материализованный выпадающий компонент. Требуется для элемента ul. |
| 2 |
Данные неактивным идентификатор выпадающего элемента ul. |
Выпадающий-контент
Идентифицирует ul как материализованный выпадающий компонент. Требуется для элемента ul.
Данные неактивным
идентификатор выпадающего элемента 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-класс tabs, чтобы сделать элемент ul вкладкой. В следующей таблице указаны доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
вкладки Идентифицирует ul как материализованный компонент вкладки. Требуется для элемента ul. |
| 2 |
активный Делает вкладку активной. |
вкладки
Идентифицирует ul как материализованный компонент вкладки. Требуется для элемента ul.
активный
Делает вкладку активной.
пример
Ниже приведен пример использования вкладки.
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>
Результат
Проверьте результат.
Материализация — Волны
Materialise использует внешнюю библиотеку Waves для создания эффекта чернил, описанного в Material Design. В следующей таблице указаны доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
волны эффект Применяет волновой эффект к элементу управления. |
| 2 |
волны света Применяет волновой эффект белого цвета. |
| 3 |
волны-красный Применяет эффект волны красного цвета. |
| 4 |
волны-зеленый Применяет эффект волны зеленого цвета. |
| 5 |
Волны-желтые Применяет эффект волны желтого цвета. |
| 6 |
волны-оранжевый Применяет эффект волны оранжевого цвета. |
| 7 |
волны-фиолетовые Применяет эффект волны фиолетового цвета. |
| 8 |
волны-бирюзовые Применяет эффект волны цвета чирка. |
волны эффект
Применяет волновой эффект к элементу управления.
волны света
Применяет волновой эффект белого цвета.
волны-красный
Применяет эффект волны красного цвета.
волны-зеленый
Применяет эффект волны зеленого цвета.
Волны-желтые
Применяет эффект волны желтого цвета.
волны-оранжевый
Применяет эффект волны оранжевого цвета.
волны-фиолетовые
Применяет эффект волны фиолетового цвета.
волны-бирюзовые
Применяет эффект волны цвета чирка.
пример
Ниже приведен пример использования волновых эффектов на кнопках.
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>
Результат
Проверьте результат.