Реагировать материал UI Grid - PullRequest
Новая
       11

Реагировать материал UI Grid

0 голосов
/ 04 июля 2019

Есть ли какой-нибудь правильный и простой способ создать таблицу с пользовательским интерфейсом материалов?direction = "column" или direction = "row" не работают, если я хочу иметь столбцы различной высоты.Какие-либо предложения?

enter image description here

1 Ответ

1 голос
/ 04 июля 2019

Если вы хотите использовать встроенную Grid-систему Material-ui, вы можете сделать это, используя 2 контейнера сетки, один с direction="row" (по умолчанию) и второй (дочерний) с direction="column".Это требует немного индивидуального стиля, может выглядеть «хакерским», но я не знаю другого пути: 

import React from "react";
import ReactDOM from "react-dom";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  box: {
    height: "100%",
    width: "100%"
  },
  container: {
    height: "400px"
  },
  innerContainer: {
    height: "100%"
  },
  item: {
    flex: 1
  }
});

function App() {
  const classes = useStyles();
  return (
    <Grid spacing={4} className={classes.container} container>
      <Grid xs={4} item>
        <Grid
          spacing={4}
          direction="column"
          className={classes.container}
          container
        >
          <Grid className={classes.item} item>
            <Box className={classes.box} bgcolor="blue" />
          </Grid>
          <Grid className={classes.item} item>
            <Box className={classes.box} bgcolor="red" />
          </Grid>
        </Grid>
      </Grid>
      <Grid xs={8} item>
        <Box className={classes.box} bgcolor="green" />
      </Grid>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

ПРИМЕР ЖИВОГО

Другой вариант -использовать CSS Grid.Это требует гораздо меньше элементов, и (по крайней мере, для меня) проще.Тем не менее, это не работает в Internet Explorer, если вы заботитесь о такой вещи. 

import React from "react";
import ReactDOM from "react-dom";
import Box from "@material-ui/core/Box";
import { makeStyles } from "@material-ui/styles";


const useStyles = makeStyles({
  container: {
    height: '400px',
    width: "100%",
    display: 'grid',
    gridTemplateColumns: '1fr 2fr',
    gridTemplateRows: '1fr 1fr',
    gridGap: "20px",

  },
  firstChild: {
    gridRow: '1 / 2',
    gridColumn: '1 / 2',
  },
  secondChild: {
    gridRow: '1 / 3',
    gridColumn: '2 / 3',
  },
  thirdChild: {
    gridRow: '2 / 3',
    gridColumn: '1 / 2',
  },
});

function App() {
  const classes = useStyles();
  return (
    <Box className={classes.container}>
      <Box className={classes.firstChild} bgcolor="blue" />
      <Box className={classes.secondChild} bgcolor="red" />
      <Box className={classes.secondThird} bgcolor="green" />
    </Box>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

ПРИМЕР ЖИВОГО

...