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

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

---

Material-UI 로 조금 연주하고 있습니다. (에서와 같은 그리드 레이아웃 만들기위한 모든 옵션이 있습니다 부트 스트랩은 )?

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

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

---

머티리얼 UI는 자체 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>
);

---

The way I do is go to http://getbootstrap.com/customize/ and only check "grid system" to download. There are bootstrap-theme.css and bootstrap.css in downloaded files, and I only need the latter.

In this way, I can use the grid system of Bootstrap, with everything else from Material UI.

---

I just use https://react-bootstrap.github.io/ for Responsive Layout and Material-ui for all the component

---

I had difficulty finding a UI framework that would implement Material Design's standards for responsive behavior, so I've created two packages that implement a grid system for Material Design:

1. A CSS framework: material-responsive-grid
2. A set of React components that implement that framework: react-material-responsive-grid.

These packages follow the standards for responsive UI outlined by Google. All viewport sizes specified in their standards are supported with consideration for the proper gutters, recommended number of columns, and even the behavior of a layout that exceeds 1600 dp. It should behave as recommended for every device in the Device Metrics guide.

---

This is old question but google bring me to here. After a little search I found a good package: https://www.npmjs.com/package/react-grid-system

I think this is the best, easy to use and lightweight.

참고URL : https://stackoverflow.com/questions/33671469/material-ui-and-grid-system