reactjs - マテリアル UI とグリッド システム

Question

Material-UIで少し遊んでいます。グリッド レイアウトを作成するためのオプションはありますか ( Bootstrapなど)?

そうでない場合、この機能を追加する方法は何ですか?

GridList コンポーネントがありますが、それには別の目的があると思います。

Answer 1

Material UI は、 Grid コンポーネントを介して独自の Flexbox レイアウトを実装しています。

彼らは当初、自分たちを純粋な「コンポーネント」ライブラリとして維持したかったようです。しかし、コア開発者の 1 人は、独自の. 現在、コア コードにマージされ、 v1.0.0でリリースされています。

次の方法でインストールできます。

npm install @material-ui/core

これは現在、コード例を含む公式ドキュメントにあります。

Answer 2

材料設計仕様の説明から：

グリッド リストは、標準のリスト ビューに代わるものです。グリッド リストは、レイアウトやその他の視覚的表現に使用されるグリッドとは異なります。

非常に軽量な Grid コンポーネント ライブラリを探している場合は、Reactでの実装であるReact-Flexbox-Gridflexboxgrid.cssを使用しています。

その上、React-Flexbox-Gridは、 material-uiとreact-toolbox (代替のマテリアル デザインの実装) の両方でうまく機能しました。

Answer 3

これに対する答えを探してみたところ、さまざまなコンポーネントで Flex とインライン スタイルを使用することが最善の方法でした。

たとえば、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 に関する参考資料

Answer 4

返事をするのに遅すぎないことを願っています。

私はまた、自分のプロジェクトで使用する反応グリッド システムのような、シンプルで、堅牢で、柔軟で、高度にカスタマイズ可能なブートストラップを探していました。

私が知っている最高のものは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>
);