Как использовать компонент сетки в пользовательском интерфейсе материалов?
Адаптивная сетка макета Material Design адаптируется к размеру и ориентации экрана, обеспечивая согласованность макетов. Материал UI для React имеет этот компонент, доступный для нас, и его очень легко интегрировать. Мы можем использовать компонент Grid в ReactJS, используя следующий подход.
Создание приложения React и установка модуля:
Шаг 1: Создайте приложение React с помощью следующей команды:
npx create-react-app foldername
Шаг 2: После создания папки проекта, т. е. имя папки , перейдите к ней с помощью следующей команды:
cd foldername
Шаг 3: После создания приложения ReactJS установите модули material-ui с помощью следующей команды:
npm install @mui/material
Структура проекта: Это будет выглядеть следующим образом.
Пример 1. В этом примере мы создадим простое приложение, использующее компонент Grid для отображения компонентов Paper разных размеров. Обновите файл App.js, как показано ниже.
Имя файла: App.js
Javascript
import { createStyles, Grid, makeStyles, Paper } from "@mui/material";import React from "react"; const useStyles = makeStyles((theme) => createStyles({ paper: { padding: theme.spacing(2), textAlign: "center", color: theme.palette.text.secondary, }, root: { flexGrow: 1, }, }),); export default function FullWidthGrid() { const classes = useStyles(); return ( <div style={{ width: "90%", backgroundColor: "green", padding: "10px" }}> <Grid container spacing={3}> <Grid item xs={12}> <Paper className={classes.paper}> GEEKSFORGEEKS ---> GRID COMPONENT DEMO </Paper> </Grid> <Grid item xs={6} sm={3}> <Paper className={classes.paper}> 1/4 Size </Paper> </Grid> <Grid item xs={6} sm={3}> <Paper className={classes.paper}> 1/4 Size </Paper> </Grid> <Grid item xs={6} sm={3}> <Paper className={classes.paper}> 1/4 Size </Paper> </Grid> <Grid item xs={6} sm={3}> <Paper className={classes.paper}> 1/4 Size </Paper> </Grid> <Grid item xs={12} sm={6}> <Paper className={classes.paper}> 1/2 Size </Paper> </Grid> <Grid item xs={12} sm={6}> <Paper className={classes.paper}> 1/2 Size </Paper> </Grid> <Grid item xs={12}> <Paper className={classes.paper}> Full Size </Paper> </Grid> </Grid> </div> );} |
Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:
npm start
Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:
Пример 2. В этом примере мы создадим простое приложение с двумя элементами сетки, расстояние между которыми контролируется компонентом Switch. Обновите файл App.js, как показано ниже.
Имя файла: App.js
Javascript
import { Grid, Paper, Switch } from "@mui/material";import React, { useState } from "react"; export default function FullWidthGrid() { const [spacing, setSpacing] = useState(2) return ( <div> <Switch onChange= {() => setSpacing(spacing => spacing === 2 ? 4 : 2)} /> Spacing {spacing}px <div> <Grid container spacing={spacing}> <Grid item> <Paper sx={{ height: 140, width: 100, border: "2px solid black" }}></Paper> </Grid> <Grid item> <Paper sx={{ height: 140, width: 100, border: "2px solid black" }}></Paper> </Grid> </Grid> </div> </div> );} |
Шаги для запуска приложения:
npm start
Выход:
Ссылка : https://mui.com/material-ui/react-grid/#main-content