재료 UI 및 그리드 시스템

재료 UI 및 그리드 시스템

저는 Material-UI를 가지고 놀고 있습니다.그리드 레이아웃을 작성하기 위한 옵션이 있습니까(부트스트랩 등).

그렇지 않은 경우 이 기능을 추가하는 방법은 무엇입니까?

Grid List 컴포넌트가 있는데 다른 용도가 있는 것 같습니다.

재료 UI는 그리드 구성요소를 통해 자체 Flexbox 레이아웃을 구현했습니다.

처음에 그들은 스스로를 순전히 '구성 요소' 도서관으로 유지하기를 원했던 것으로 보인다.하지만 핵심 개발자들 중 한 명은 자신의 것을 가지지 않는 것이 너무 중요하다고 결정했다.현재는 코어 코드에 Marge 되어 v1.0.0과 함께 릴리스되었습니다.

다음의 방법으로 인스톨 할 수 있습니다.

npm install @material-ui/core

현재 코드 예시와 함께 공식 문서에 있습니다.

재료 설계 사양 설명에서:

그리드 목록은 표준 목록 보기 대신 사용할 수 있습니다.그리드 리스트는 레이아웃 및 기타 시각적 프레젠테이션에 사용되는 그리드와는 다릅니다.

매우 가벼운 그리드 구성 요소 라이브러리를 찾는 경우 React-Flexbox-Grid를 사용하여flexboxgrid.css반응합니다.

또한 React-Flexbox-Grid는 material-ui와 react-toolbox(대체 재료 설계 구현) 모두에서 우수한 성능을 발휘했습니다.

이에 대한 답을 찾기 위해 주위를 둘러보니 가장 좋은 방법은 플렉스와 인라인 스타일링을 다른 컴포넌트에 사용하는 것이었습니다.

예를 들어, 2개의 용지 컴포넌트가 전체 화면을 2개의 세로 컴포넌트(1:4 비율)로 분할하려면 , 다음의 코드가 올바르게 동작합니다.

const styles = {
  div:{
    display: 'flex',
    flexDirection: 'row wrap',
    padding: 20,
    width: '100%'
  },
  paperLeft:{
    flex: 1,
    height: '100%',
    margin: 10,
    textAlign: 'center',
    padding: 10
  },
  paperRight:{
    height: 600,
    flex: 4,
    margin: 10,
    textAlign: 'center',
  }
};

class ExampleComponent extends React.Component {
  render() {
    return (
      <div>
        <div style={styles.div}>
          <Paper zDepth={3} style={styles.paperLeft}>
            <h4>First Vertical component</h4>
          </Paper>
          <Paper zDepth={3} style={styles.paperRight}>
              <h4>Second Vertical component</h4>
          </Paper>
        </div>
      </div>
    )
  }
}

이제 몇 가지 계산을 더 하면 구성 요소를 한 페이지에서 쉽게 분할할 수 있습니다.

Flex에 대한 자세한 내용

답장하기에 너무 늦지 않았기를 바랍니다.

또한 프로젝트에서 사용할 리액트 그리드 시스템과 같이 단순하고 견고하며 유연하며 커스터마이즈성이 뛰어난 부트스트랩을 찾고 있었습니다.

내가 아는 한react-pure-grid https://www.npmjs.com/package/react-pure-grid

react-pure-grid그리드 시스템의 모든 측면을 커스터마이즈할 수 있는 동시에 모든 프로젝트에 적합한 디폴트 설정으로 되어 있습니다.

사용.

npm install react-pure-grid --save

-

import {Container, Row, Col} from 'react-pure-grid';

const App = () => (
      <Container>
        <Row>
          <Col xs={6} md={4} lg={3}>Hello, world!</Col>
        </Row>
        <Row>
            <Col xsOffset={5} xs={7}>Welcome!</Col>
        </Row>
      </Container>
);

http://getbootstrap.com/customize/에 접속하여 "grid system"만 체크하고 다운로드 합니다.있다bootstrap-theme.css그리고.bootstrap.css다운로드한 파일에 저장해두면 됩니다.

이렇게 하면 Material UI에서 Bootstrap의 그리드 시스템을 사용할 수 있습니다.

아래는 순수하게 MUI 그리드 시스템으로 작성된 것입니다.

아래 코드와 함께

// MuiGrid.js

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,
    backgroundColor: "#b5b5b5",
    margin: "10px"
  }
}));

export default function FullWidthGrid() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={0}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

↓ CodeSandbox ↓

다음으로 부트스트랩과 유사한 material-ui를 사용하는 그리드시스템의 예를 나타냅니다.

<Grid container>
    <Grid item xs={12} sm={4} md={4} lg={4}>
    </Grid>
    <Grid item xs={12} sm={4} md={4} lg={4}>
    </Grid>
 </Grid>

언급URL : https://stackoverflow.com/questions/33671469/material-ui-and-grid-system