Здравствуйте, около недели назад я начал изучать интерфейс материалов. Я обнаружил, что это делает создание и проектирование реагирующих приложений простым и очень эффективным. Я надеюсь, что это окажется полезной библиотекой пользовательского интерфейса React и для вас.
Что такое материальный пользовательский интерфейс?
Material-UI, запущенный в 2014 году, представляет собой библиотеку React Ui с открытым исходным кодом. Это позволяет повторно использовать компоненты реакции, разработанные с использованием Google Material Design (кодовое название Quantum Paper).
Материальный дизайн — это язык дизайна, разработанный Google в 2014 году. Он обеспечивает комплексный подход к визуальному, динамическому и интерактивному дизайну на разных платформах и устройствах.
Сегодня Material-UI превратилась в одну из самых популярных в мире библиотек пользовательского интерфейса React, поддерживаемую активным сообществом из более чем 1 миллиона разработчиков в более чем 180 странах.
Все о библиотеке Material-UI можно найти на их официальном сайте:
Некоторые преимущества использования Material-UI
Это очень хорошо задокументировано
Официальная документация для Material-UI очень организована. Навигация по компонентам и получение примеров кода очень просты. Если документация не делает этого за вас, есть много доступных примеров и руководств, которые могут помочь. Есть ресурсы, если вы предпочитаете более практический подход, чем теоретический.
Компоненты работают изолированно
Компоненты Material-UI работают изолированно. Они самоокупаемые и будут внедрять только те стили, которые им нужны для отображения. Библиотека не использует глобальную таблицу стилей по сравнению с другими библиотеками пользовательского интерфейса. Применение стиля к вашему компоненту реакции не влияет на другие компоненты в проекте.
Свобода творчества
Компоненты из Material-UI работают из коробки с согласованными предустановленными стилями. Все предустановленные стили соответствуют дизайну Material Design, но при желании стили можно изменить. Существует множество настроек, которые можно выполнить для компонентов, чтобы они выглядели так, как может захотеть разработчик. Существует компонент ThemeProvider, который позволяет размещать пользовательские темы в корневом каталоге вашего приложения. Цвета, типографика и многие подкомпоненты можно изменить с помощью поставщика темы.
Начало работы на некоторых примерах
Теперь давайте попробуем некоторые компоненты из Material UI. Во-первых, нам нужно начать новый проект React. Вам понадобится Node ›= 8.10 и npm ›= 5.6 на вашем компьютере. Это можно сделать, запустив
npx create-react-app material-examples; cd material-examples;
После выполнения этих двух команд должен быть доступен новый каталог проекта React material-examples, а текущим каталогом должен быть каталог проекта.
Теперь нам нужно установить библиотеку Material-UI и некоторые зависимости, которые мы собираемся использовать позже. Следующая команда установит Material_UI.
// with npm npm install @material-ui/core npm install @material-ui/icons// with yarn yarn add @material-ui/core yarn add @material-ui/icons
После установки всех зависимостей мы можем попробовать его, запустив
npm start
Браузер загружается, отображается начальная страница по умолчанию для приложения реакции. Это должно выглядеть так.
Теперь мы готовы реализовать простой шаблон страницы входа из Material-UI. Прежде чем мы начнем, нам нужно будет удалить часть шаблона реакции по умолчанию. Перейдите к src/App.js в основном каталоге проекта.
- Удалите оператор импорта для логотипа. Также можно удалить файл logo.svg из каталога src/.
- Кроме того, удалите div в операторе возврата приложения.
Теперь, когда App.js очищен, мы можем реализовать наш код.
Реализация простой страницы входа
Работа над любым проектом React потребует импорта необходимого компонента из Material-UI. Мы будем импортировать наши компоненты Material-UI, а также импортировать нужные нам значки из значков Materials-UI. С помощью makeStyles из material-ui/styles к компонентам страницы будет применен пользовательский CSS.
import React from 'react';
import './App.css';
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: "flex",
flexDirection: "column",
alignItems: "center",
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: "100%",
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
function App() {
const classes = useStyles();
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form} noValidate>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"autoComplete="email"
autoFocus
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
</form>
</div>
</Container>
);
}
export default App;
После использования приведенного выше кода браузер загрузит простую страницу входа, созданную Material-UI. Вы можете поэкспериментировать с кодом и изменить некоторые реквизиты, чтобы увидеть разницу в выводе.
Вывод
Использование библиотеки компонентов Material-UI упрощает разработку различных компонентов ваших приложений React. Библиотека работает «из коробки», если вы не хотите настраивать используемые вами компоненты. В этом пошаговом руководстве мы только что реализовали единую страницу входа в наше приложение React. Есть много других компонентов, доступных для любого результата проектирования, который вы хотите.
