web-dev-qa-db-ja.com

材料UIとグリッドシステム

Material-UI で少し遊んでいます。グリッドレイアウトを作成するためのオプションはありますか（ Bootstrap のように）？

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

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

reactjsmaterial-designmaterial-uigrid-system
109
kharandziuk

マテリアルUIは独自のFlexboxレイアウトを実装しました。

それは、彼ら自身を純粋に「コンポーネント」ライブラリとして保つために、彼らは 最初に欲しかった と思われます。しかし、コア開発者の一人は 自分のものを持っていないことが重要すぎると判断しました 。これは コアコードに統合 そして v1.0.0でリリース されています。

以下からインストールできます。

npm install @material-ui/core

これは公式になりました コード例を含むドキュメント 。

119
icc97

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

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

もっと軽量のGridコンポーネントライブラリを探しているのなら、私は React-Flexbox-Grid 、Reactのflexboxgrid.cssの実装を使っています。

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

34
Roy Lee

私はこれに対する答えを探しました。そして私が見つけた最良の方法は異なるコンポーネントに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>
    )
  }
}

これで、いくつかの計算を追加して、ページ上のコンポーネントを簡単に分割できます。

フレックスについてのさらなる読み方

19
shobhit1

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

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

私が知っている最高のものはreact-pure-gridhttps://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>
);
10
Musyoka Morris

私がする方法は http://getbootstrap.com/customize/ に行き、ダウンロードするには "grid system"だけをチェックすることです。ダウンロードしたファイルにはbootstrap-theme.cssとbootstrap.cssがありますが、私は後者が必要なだけです。

このようにして、私はBootstrapのグリッドシステムを、Material UIの他のすべてのものと共に使用することができます。

8
6324

レスポンシブレイアウトには https://react-bootstrap.github.io/ 、すべてのコンポーネントにはMaterial-uiを使用します。

5
yuchien

レスポンシブビヘイビアーに関するMaterial Designの標準を実装するUIフレームワークを見つけるのが困難だったので、Material Designのグリッドシステムを実装する2つのパッケージを作成しました。

  1. CSSフレームワーク： material-respond-grid
  2. そのフレームワークを実装する一連のReactコンポーネント： react-material-respond-grid 。

これらのパッケージは、Googleが概説した レスポンシブUI の標準に準拠しています。規格で指定されているすべてのビューポートサイズは、適切な溝、推奨される列数、さらには1600 dpを超えるレイアウトの動作を考慮してサポートされています。 Device Metrics ガイドにあるすべてのデバイスに推奨されるように動作します。

5
Ken Gregory

これは昔の質問ですが、グーグルがここに持ってきてくれます。ちょっとした検索の後、私は良いパッケージを見つけました。 https://www.npmjs.com/package/react-grid-system

私はこれが最高で使いやすく軽量であると思います。

0
kodmanyagha