머티리얼 UI 및 그리드 시스템

Material-UI 로 약간 놀고 있습니다. 그리드 레이아웃을 만드는 옵션이 있습니까 (예 : Bootstrap )?

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

거기에있다 GridList 구성 요소는 하지만 난 그게 어떤 다른 목적을 가지고 같아요.

머티리얼 UI는 Grid 컴포넌트 를 통해 자체 Flexbox 레이아웃을 구현했습니다 .

처음에는 순전히 '구성 요소'라이브러리로 유지 하기 를 원했던 것 같습니다 . 그러나 핵심 개발자 중 한 명이 자신의 . 이제 핵심 코드 로 병합되었으며 v1.0.0 으로 출시되었습니다 .

다음을 통해 설치할 수 있습니다.

npm install @material-ui/core

이제 코드 예제와 함께 공식 문서에 있습니다 .

머티리얼 디자인 사양 설명에서 :

그리드 목록은 표준 목록보기의 대안입니다. 그리드 목록은 레이아웃 및 기타 시각적 표현에 사용되는 그리드와 다릅니다.

훨씬 가벼운 Grid 컴포넌트 라이브러리를 찾고 있다면 React 에서 구현 한 React-Flexbox-Grid 를 사용하고 flexboxgrid.css있습니다.

또한 React-Flexbox-Grid 는 material-ui 및 react-toolbox (대체 머티리얼 디자인 구현) 모두와 잘 어울 렸습니다 .

나는 이것에 대한 답을 찾아 보았고 내가 찾은 가장 좋은 방법은 다양한 구성 요소에서 Flex와 인라인 스타일을 사용하는 것이 었습니다.

예를 들어 두 개의 종이 구성 요소가 전체 화면을 두 개의 수직 구성 요소 (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>
    )
  }
}

이제 더 많은 계산을 통해 페이지에서 구성 요소를 쉽게 나눌 수 있습니다.

플렉스에 대한 추가 읽기

답변을 드리기에 너무 늦지 않았 으면합니다.

또한 프로젝트에서 사용할 리 액트 그리드 시스템과 같이 간단하고 강력하며 유연하며 고도로 사용자 정의 가능한 부트 스트랩을 찾고있었습니다.

내가 아는 가장 좋은 것은 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/ 로 이동하여 "그리드 시스템"만 확인하여 다운로드하는 것입니다. 있다 bootstrap-theme.css및 bootstrap.css다운로드 한 파일, 그리고 난 단지 후자가 필요합니다.

이런 식으로 Material UI의 다른 모든 것과 함께 Bootstrap의 그리드 시스템을 사용할 수 있습니다.

반응 형 레이아웃 에는 https://react-bootstrap.github.io/ 를 사용 하고 모든 구성 요소에는 Material-ui를 사용합니다.

반응 형 동작에 대한 Material Design의 표준을 구현하는 UI 프레임 워크를 찾기가 어려웠 기 때문에 Material Design을위한 그리드 시스템을 구현하는 두 개의 패키지를 만들었습니다.

1. CSS 프레임 워크 : 재료 반응 형 그리드
2. 프레임 워크를 구현하는 React 구성 요소 집합 : react-material-responsive-grid .

이러한 패키지 는 Google에서 설명하는 반응 형 UI 표준을 따릅니다 . 표준에 지정된 모든 뷰포트 크기는 적절한 거터, 권장되는 열 수 및 1600dp를 초과하는 레이아웃의 동작을 고려하여 지원됩니다. 장치 지표 가이드 의 모든 장치에 대해 권장되는대로 작동해야합니다 .

아래는 순전히 MUI Grid 시스템으로 만들어졌습니다 .

아래 코드를 사용하면

// 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>
  );
}

↓ 코드 샌드 박스 ↓

이것은 오래된 질문이지만 Google이 나를 여기로 데려옵니다. 약간의 검색 후 좋은 패키지를 찾았습니다. https://www.npmjs.com/package/react-grid-system

나는 이것이 가장 좋고 사용하기 쉽고 가볍다 고 생각합니다.

다음은 부트 스트랩과 유사한 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>