Материальный интерфейс - сетки

Material UI - это библиотека материального дизайна, созданная для React. Это набор компонентов React со стилями материального дизайна. В этой статье мы рассмотрим, как создавать макеты Material Design.

Авто-макет

Мы можем создавать автоматические макеты, если не укажем ширину столбца для наших точек останова.

Например, мы можем написать:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary
  }
}));
export default function App() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs>
          <Paper className={classes.paper}>foo</Paper>
        </Grid>
        <Grid item xs>
          <Paper className={classes.paper}>bar</Paper>
        </Grid>
        <Grid item xs>
          <Paper className={classes.paper}>baz</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

для создания нашего макета.

У нас xs без точек останова, поэтому мы позволим Material UI определять размер столбцов.

Вложенная сетка

Мы можем создать вложенную сетку с помощью компонента Grid.

Например, мы можем написать:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(1),
    textAlign: "center",
    color: theme.palette.text.secondary
  }
}));
export default function App() {
  const classes = useStyles();
return (
    <div className={classes.root}>
      <Grid container spacing={1}>
        <Grid container item xs={3} spacing={1}>
          <Paper className={classes.paper}>foo</Paper>
        </Grid>
        <Grid container item xs={3} spacing={1}>
          <Paper className={classes.paper}>bar</Paper>
        </Grid>
        <Grid container item xs={3} spacing={1}>
          <Paper className={classes.paper}>baz</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

для создания сетки внутри сетки.

Во вложенном элементе сетки мы помещаем Paper в качестве содержимого.

xs позволяет нам установить ширину столбца.

spacing позволяет нам установить интервал между столбцами.

Сетка Список

Списки сетки позволяют отображать коллекцию изображений в организованной сетке.

Например, мы можем написать:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import GridList from "@material-ui/core/GridList";
import GridListTile from "@material-ui/core/GridListTile";
const tileData = [
  { img: "http://placekitten.com/200/200", title: "cat" },
  { img: "http://placekitten.com/200/200", title: "cat" }
];
const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "space-around",
    overflow: "hidden",
    backgroundColor: theme.palette.background.paper
  },
  gridList: {
    width: 500,
    height: 450
  }
}));
export default function App() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <GridList cellHeight={160} className={classes.gridList} cols={3}>
        {tileData.map(tile => (
          <GridListTile key={tile.img} cols={tile.cols || 1}>
            <img src={tile.img} alt={tile.title} />
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}

У нас есть компонент GridList с некоторыми данными внутри.

У нас есть GridListTile, чтобы показать наш товар.

В нем есть элемент img, который отображает изображения.

cols имеет ширину столбца.

alt имеет альтернативный текст.

Список сетки с полосами заголовков

Мы можем добавить компонент GridListTitleBar, чтобы добавить строку заголовка к плитке изображения.

Например, мы можем написать:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import GridList from "@material-ui/core/GridList";
import GridListTile from "@material-ui/core/GridListTile";
import GridListTileBar from "@material-ui/core/GridListTileBar";
import IconButton from "@material-ui/core/IconButton";
import InfoIcon from "@material-ui/icons/Info";
const tileData = [
  { img: "http://placekitten.com/200/200", title: "cat", author: "john smith" },
  { img: "http://placekitten.com/200/200", title: "cat", author: "mary smith" }
];
const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "space-around",
    overflow: "hidden",
    backgroundColor: theme.palette.background.paper
  },
  gridList: {
    width: 500,
    height: 450
  }
}));
export default function App() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <GridList cellHeight={160} className={classes.gridList} cols={3}>
        {tileData.map(tile => (
          <GridListTile key={tile.img} cols={tile.cols || 1}>
            <img src={tile.img} alt={tile.title} />
            <GridListTileBar
              title={tile.title}
              subtitle={<span>by: {tile.author}</span>}
              actionIcon={
                <IconButton
                  aria-label={`info about ${tile.title}`}
                  className={classes.icon}
                >
                  <InfoIcon />
                </IconButton>
              }
            />
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}

У нас есть GridListTileBar компонент, который принимает title опору для заголовка.

subtitle имеет подзаголовок для плитки.

Чтобы добавить значки, мы установили пакет @material-ui/icons для добавления значков.

Заключение

Мы можем создать сетку с плитками для отображения текста и изображений. Изображение может сопровождаться заголовком и подзаголовком. Макет может быть установлен автоматически. Спасибо, что прочитали мою статью, надеюсь, вы нашли ее полезной!