
Содержание статьи
Что такое материальный дизайн?
Material Design – это язык дизайна, созданный Google. Согласно material.io, Material Design преследует цель:
… классические принципы хорошего дизайна с инновациями и возможностями технологии и науки. Он направлен на разработку единой базовой системы, обеспечивающей унифицированный опыт для разных платформ и размеров устройств. Мобильные правила являются фундаментальными, но прикосновение, голос, мышь и клавиатура – все это первоклассные методы ввода.
Зачем использовать Material Design?
Материальный дизайн обеспечивает безупречное взаимодействие с пользователем на всех устройствах. Чуткие переходы и анимация, а также эффекты отступления и глубины, такие как тени и молнии, делают его элегантным и удобным. Google использует Material Design почти во всех своих приложениях (например, Keep и Calendar).
Как вы можете использовать Material Design в своих веб-приложениях?
Materialize – это адаптивная библиотека внешних компонентов, подобная Bootstrap. Он предлагает все, что может предложить Bootstrap, но разница в том, что Materialize придерживается принципов материального дизайна. Вот пример шаблона.

Вот список функций, которые предлагает Materialize:
- Сеть
- Таблицы
- Значки, кнопки, сухари
- Карты, фишки, коллекции
- Колонтитул, формы
- Навигационная панель
- И многое другое!
Как начать
В отличие от Bootstrap, Materialize не нуждается в popper.js. Для этого требуется только jQuery. Это все, что вам нужно для начала. Добавьте это в свой HTML, и все будет хорошо!
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="
<!--Compiled and minifed jQuery -->
<script type="text/javascript" src="
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
Цвета
Используя Materialize, вы можете изменить цвет любого элемента HTML, просто предоставив ему название класса нужного цвета. Например, если вы хотите придать абзацу красный цвет, выполните следующие действия.
<p class=”red”>Lorem Ipsum</p>
Кроме того, вы также можете осветить или затемнить цвет, дав ему другое название класса. lighten-1
или darken-1
. Например, <h1 class=”blue lighten-1”>Sample Tex
t
. 1 можно заменить цифрами до 5 для освещения и до 4 для затемнения. Более высокие числа касаются более светлых или более темных оттенков цвета.
кнопки
Чтобы материализовать кнопку, просто дайте ей название класса btn
. Вы также можете добавить к нему классную анимацию, предоставив ему другой класс waves-effect
. Если вам нужна большая кнопка, btn-large
можно использовать класс. Например:
<button class=”btn”>
Click
</button> <!-- Materialized button without click animation -->
<button class="btn waves-effect">
Click
</button> <!-- Materialized button with click animation -->
<button class="btn-large">
Click
</button> <!-- Large Button -->
Тень
В материальном дизайне все должно иметь определенную глубину z, определяющую, насколько приподнят или близко к странице находится элемент.
Чтобы применить эффект тени к элементу, z-depth-2
можно использовать класс (2 можно заменить цифрами 1–5). Например:
<div class="z-depth-2"><!-- Really cool stuff --></div>
Вывод
Я только поцарапал поверхность здесь. В Materialize доступно многое другое (например, переходы, карточки, карусель и моды). Вы можете узнать, как использовать все компоненты из документов. Названия классов очень просты, а сетка действительно помогает быстро создавать адаптивные столбцы. Я желаю вам успеха!