Что такое материальный пользовательский интерфейс?
Material UI — это библиотека компонентов React, которая реализует материальный дизайн Google. Material Design — это система дизайна с открытым исходным кодом, разработанная Google в 2014 году, чтобы помочь командам разработчиков создавать высококачественные цифровые приложения для Android, iOS, Flutter и Интернета.
Создание сетки
Мы собираемся воссоздать следующую сетку карточек, используя Material UI. Я создал это в чистом приложении для реагирования, используя create-react-app. Если вы не знакомы с create-react-app, вы можете прочитать об этом здесь.
Первое, что вам нужно сделать, это установить Material UI. Если вы используете npm
, введите следующее в каталог вашего проекта реакции:
npm install @mui/material @emotion/react @emotion/styled
Если вы используете yarn
, введите следующее в каталог вашего проекта реакции:
yarn add @mui/material @emotion/react @emotion/styled
Подготовка вашего проекта к MUI
Хорошей практикой перед тем, как вы начнете разрабатывать свой интерфейс, является очистка настроек css по умолчанию в вашем проекте реагирования. Сначала очистите файл index.css и добавьте следующее:
# index.css file * { margin: 0; padding: 0; }
Это обнулит ваши поля и отступы, чтобы вы могли контролировать все с помощью Material UI.
Затем я хотел бы удалить весь ненужный код из вашего файла App.js в каталоге ваших проектов src. В частности, удаление файла App.css и ссылок на него в файле App.js. Это должно выглядеть примерно так:
// App.js file import React from "react"; function App() { return ( <> <h1> Sample Text </h1> </> ); } export default App;
Создайте новый файл и назовите его CardSample.js. Мне нравится помещать все мои компоненты в новый каталог внутри каталога src моих проектов и называть его «components».
В CardSample.js введите базовую структуру компонента React. Ваш файл должен выглядеть примерно так, как показано ниже.
// CardSample.js file function CardSample() { return ( <> <h1>Sample text</h1> </> ) } export default CardSample;
Создать макет
Теперь давайте добавим базовую структуру в наш интерфейс в App.js. Ваш файл должен выглядеть следующим образом:
// App.js file import React from "react"; import CssBaseline from '@mui/material/CssBaseline'; import Container from '@mui/material/Container'; import Box from '@mui/material/Box'; import CardSample from "./components/CardSample"; function App() { return ( <> <CssBaseline /> <Container> <Box sx={{ m: 2 }}> <CardSample /> </Box> </Container> </> ); } export default App;
Компонент CssBaseline используется для создания простого и последовательного базового плана для создания вашего приложения.
Компонент Контейнер центрирует весь ваш контент по горизонтали.
Компонент Box действует как компонент-оболочка. Он создает новый элемент DOM, похожий на <div>
. Как и большинство компонентов MUI, вы можете настроить его через свойства системы, используя sx prop. В этом примере я задаю этому блоку поле, равное 2.
Наконец, мы добавляем компонент CardSample, который мы создали ранее.
Создайте сетку
Как и при создании макета ранее, я покажу вам законченный код для компонента CardSample, а затем объясню каждый раздел. Ваш файл должен выглядеть следующим образом:
// CardSample.js file import React from "react"; import { styled } from '@mui/material/styles'; import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; function CardSample() { const Item = styled(Paper)(() => ({ backgroundColor: '#98d6a9', padding: 8, textAlign: 'center', color: 'black', })); return ( <> <Grid container spacing={4}> <Grid item xs={6}> <Item elevation={3}>One</Item> </Grid> <Grid item xs={6}> <Item elevation={3}>Two</Item> </Grid> <Grid item xs={6}> <Item elevation={3}>Three</Item> </Grid> <Grid item xs={6}> <Item elevation={3}>Four</Item> </Grid> <Grid item xs={6}> <Item elevation={3}>Five</Item> </Grid> <Grid item xs={6}> <Item elevation={3}>Six</Item> </Grid> </Grid> </> ) } export default CardSample;
Компонент Styled, импортированный вверху файла, предназначен для настройки стиля компонентов. Здесь мы видим функцию с именем Item
, которая использует компонент Styled для настройки некоторых параметров компонента Paper. Таким образом, вместо того, чтобы обертывать каждый элемент сетки компонентом Paper и настраивать каждый отдельный элемент, мы можем использовать функцию Item
в качестве оболочки для достижения того же эффекта, делая ваш код более СУХИМ.
Здесь я хотел бы упомянуть, что в MUI есть специальный компонент Card. Я предпочитаю использовать компонент Paper, потому что он выглядит лучше.
Компонент Сетка позволяет вашему макету адаптироваться к размеру и ориентации экрана, чтобы он был одинаковым во всем вашем макете.
Принцип работы Grid заключается в том, что сначала ваши <Grid item>
объединяются с <Grid container>.
. Для каждого <Grid item>
вы можете указать, сколько столбцов он будет использовать на вашей странице. Сетки состоят из 12 столбцов, поэтому, если вы укажете xs={12}
, этот элемент займет всю страницу. Если вы укажете xs={6}
, он займет половину страницы, что позволит разместить 2 элемента в одной строке. Попробуйте изменить значения sx и посмотрите, как они представлены на странице. Вы также можете изменить или добавить свойства компонента Paper, отредактировав значения в функции Item
.
Наконец, реквизит высоты на теге <Item>
позволяет вам настроить тень под бумажными предметами.