От автора: в React JS material-ui — это часть Material Design. Material Design — это язык дизайна, впервые представленный Google в 2014 году. Это визуальный язык, который использует макеты на основе сетки, гибкую анимацию и переходы, дополнения и эффекты глубины, такие как освещение и тени. Цель Material Design сводится к трем вещам: Создание, Унификация и Настройка.
Создание — Material Design направлен на предоставление визуального языка, который синтезирует классические принципы дизайна. Унификация — он нацелен на разработку единой базовой системы, которая объединяет пользовательский интерфейс на разных платформах, устройствах и методах ввода. И Настройка обеспечивает визуальный язык и гибкую основу для инноваций и брендинга.
В этой статье мы рассмотрим, как создавать приложения React в стиле Material Design. Существуют различные библиотеки, которые помогают в этом, но для этой статьи мы будем использовать библиотеку material-ui.
Приступаем к работе
material-ui — это набор компонентов React, который реализует Google Material Design (material-ui недавно выпустили v1 библиотеки). Эти компоненты работают изолированно, это означает, что они являются само-поддерживающими и вводят только те стили, которые они должны отображать.
Чтобы начать работу с материалом-ui, все, что вам нужно, это запустить команду терминала, приведенную ниже.
npm install @material-ui/core
Далее, давайте рассмотрим некоторые из основ material-ui, относящихся к Material Design, и посмотрим, как она настраивается.
Типографика
Когда речь заходит о Material Design, шрифтом по умолчанию является Roboto. Однако material-ui не поставляется с Roboto по умолчанию. Шрифт можно импортировать в проект React с использованием одного из двух методов. Из CDN:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
Установить с помощью NPM
Вы можете установить его в качестве пакета npm, введя в терминале команду:
npm install typeface-roboto --save
Затем вы можете импортировать его в свой проект следующим образом:
import 'typeface-roboto'
material-ui также предоставляет компонент под названием Typography. Компонент Typography в основном позволяет отображать текст в приложении.
<Typography variant="title" color="inherit">Some text in here</Typography>
Свойство variant помогает применять стили оформления темы, а color — это цвет компонента. Он поддерживает цвета тем, которые подходят для компонента.
CSS Baseline
Если вы писали код front-end, вы уже должны знать о normalize.css. Если нет, это набор для нормализации элементов HTML и атрибутов стилей. material-ui предоставляет собственную версию normalize.css — CssBaseline, компонент, который обеспечивает изящный, последовательный и простой набор базовых стилей. CSSBaseline делает следующее:
Закрепляет отступы во всех браузерах
Применяет цвет фона Material Design по умолчанию.
Включает сглаживание шрифтов для лучшего отображения шрифта Roboto
Базовый размер шрифта не указывается в html, но предполагается, что это 16px (размер браузера по умолчанию)
Сетка
Адаптивный пользовательский интерфейс Material Design основан на макете с 12 столбцами. Эта сетка создает визуальную согласованность между макетами.
Система сетки material-ui характеризуется следующим:
Использует Flexbox
Содержит два типа макетов: контейнеры и элементы
Ширина элементов задается в процентах, поэтому они всегда являются гибкими и их размер указан относительно их родительского элемента
Элементы имеют отступы для создания интервала между отдельными элементами.
Существует пять контрольных точек сетки: xs, sm, md, lg и xl
Иконки
Иконки — важная часть Material Design, они используются в кнопках для обозначения действия, для передачи информации и т.д. Они используются для обозначения команды, файла, устройства или каталога.
Иконки также используются для представления таких действий, как «В корзину», «Печать» и «Сохранить», которые обычно встречаются в панелях приложений, панелях инструментов, кнопках и списках.
Иконки в material-ui могут отображаться с использованием двух методов: Icon для отображения шрифтов иконок и SvgIcon для визуализации SVG контуров.
Компонент SvgIcon принимает элемент SVG-контура в качестве своего дочернего элемента и преобразует его в компонент React, который отображает контур, и делает возможным определение стилей иконки и реакцию на события мыши. Это можно увидеть в следующем примере:
Material- ui также содержит пакет, который поставляется с предустановленными иконками, которые будут использоваться в приложении React. Это совсем другой пакет, и он включает официальные иконки Material, преобразованные в компоненты SvgIcon. Вы можете установить его с помощью следующей команды:
npm install @material-ui/icons
Кнопки
Кнопки позволяют пользователям выполнять действия и делать выбор одним нажатием. Они помогают сообщать о действии, которое может предпринять пользователь. Поскольку компоненты material-ui изолированы, вам нужно импортировать компонент Button.
import Button from '@material-ui/core/Button'; <Button color="primary">Hello World</Button>
Компонент Button может принимать множество реквизитов, таких как цвет, вариант, размер и т.д. Полный список вы можете посмотреть здесь.
Кнопки в Material-ui и Material Design в целом могут принимать любую из следующих форм:
Плоские кнопки
Плоские кнопки — это кнопки только с текстом. Они не имеют цвета фона и не имеют границы. Они могут использоваться в диалогах, панелях инструментов или встраиваться в элементы. Они не имеют заливки, но при печати заполняются цветом.
<Button color="primary">Primary</Button>
Контурные кнопки
Контурные кнопки — это текстовые кнопки средней выразительности. Они ведут себя как плоские кнопки, но имеют контур и обычно используются для важных действий, но не являются основными кнопками действия в приложении. Их внешний вид обычно характеризуется границей и обозначением цвета фона при наведении.
<Button variant="outlined">Default</Button>
Поднятые кнопки
Поднятые кнопки представляют собой прямоугольные кнопки. Они изменяют цвет фона и смещаются при наведении.
<Button variant="raised" color="secondary">Secondary</Button>
Гибкие кнопки действия
Гибкие кнопки действия (FAB) представляют основные действия, такие как составление нового электронного письма, добавление нового контакта или удаление изображения.
Они имеют форму круга и отличаются от всех других видов кнопок. При выделении фокусом применяется отличный цвет фона, при нажатии или клике они смещаются. Они могут также использоваться, чтобы показать другие действия или контент при нажатии.
<Button variant="fab" color="primary" aria-label="add"><AddIcon /</Button>
Компоненты material-ui
material-ui содержит много компонентов пользовательского интерфейса, которые помогают создавать приложение React в теме Material Design. Давайте рассмотрим некоторые компоненты material-ui. Для каждого из компонентов приведен пример, и вы можете просмотреть код на CodeSandbox, перейдя по соответствующим ссылкам.
Панель приложения
Панель приложения, ранее известная как панель действий в Android, выполняет роль меню навигации. Это панель инструментов, используемая для брендинга, навигации, поиска и действий. Чтобы использовать панель приложения, необходимы эти два компонента из material-ui:
import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar';
Навигация
Нижние навигационные меню располагаются внизу, они позволяют легко переключаться между представлениями верхнего уровня одним нажатием.
Меню навигации обычно содержит от трех до пяти действий, каждое из которых содержит иконку и метку. Важно отметить, что навигационные панели только с тремя действиями должны содержать как иконку, так и метку.
Вкладки
Вкладки позволяют легко просматривать и переключаться между различными представлениями. Компонент вкладок может быть простой вкладкой без добавлений, как показано в первом примере ниже, или прокручиваемой вкладкой с несколькими внутренними вкладками. Вкладка также может состоять из иконок в качестве заголовков / ярлыков.
Списки
Списки представляют несколько пунктов, расположенных вертикально, которые составляют единый элемент. Списки состоят из непрерывного столбца строк. Каждая строка содержит плитку. Первичные действия представлены плитками, а дополнительные — иконками и текстом.
Карточки
Карточка представляет собой лист материала, который служит точкой входа в блок с более подробной информацией. Карточки — удобное средство отображения контента, состоящего из разных элементов. Карточки используются для отображения информации, которую можно легко просмотреть, и, как правило, содержат призыв к действию.
Модальные компоненты
Модальный компонент обеспечивает основу для создания диалогов, всплывающих окон, лайтбоксов и т.д. Всякий раз, когда нажимается модальная кнопка, она выполняет следующие действия:
Управляет стеком диалога
Создает фон, для отключения взаимодействия ниже модального компоненты
Корректно управляет фокусом, переходя к модальному контенту и сохраняя его, пока модальный компоненты не будет закрыт
Отключает прокрутку содержимого страницы при открытии
Автоматически добавляет соответствующие роли ARIA
Список сетки
Списки сетки являются альтернативой стандартным представлениям списков, рассмотренным выше. Список сетки состоит из повторяющегося шаблона ячеек, размещенных вертикально и горизонтально, и в них обычно выводятся изображения.
Дополнительный пример списка Grid можно увидеть ниже, он использует GridListTileBar для добавления наложения в каждый GridListTile. Наложение может содержать заголовки, подзаголовки и вторичное действие — в этом примере IconButton — которые могут использоваться для передачи дополнительной информации.
Таблицы
В таблицах данных отображаются наборы необработанных данных. Они обычно используются в стационарных корпоративных продуктах.
Таблица данных содержит строку заголовка вверху, в которой перечислены названия столбцов, а затем строки данных. Для доступности первый столбец установлен в качестве элемента th со scope — «row». Это позволяет экранным дикторам идентифицировать значение ячейки по имени строки и столбца.
Расширенное использование таблиц можно увидеть в приведенном ниже примере. Здесь применяются чек-боксы, которые размещаются в каждой строке, если пользователю нужно выбирать или манипулировать данными. Здесь также используются клибальные строки с возможностью их выбора.
Заключение
Вопрос в том, должны ли вы использовать Material Design в своем проекте React? Ответ на этот вопрос зависит от использования вашего проекта и того, чего вы пытаетесь достичь. Material Design может дать рекомендации по улучшению пользовательских интерфейсов для приложений. Это может вдохновить ваших дизайнеров задуматься о иерархии информации, основываясь на руководящих принципах.
В то же время, если вы пытаетесь провести ребрендинг, Material Design может и не быть тем, что вы ищете. Вы хотите, чтобы ваш бренд выглядел как сотни других веб-сайтов в Интернете? Вы также можете изучить другие библиотеки Material Design, такие как response-md, materialize (CSS framework).
Автор: Yomi
Источник: https://blog.logrocket.com/
Редакция: Команда webformyself.