Что такое материальный пользовательский интерфейс?

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> позволяет вам настроить тень под бумажными предметами.