React Material-UI Grid System

Question

私は反応型グリッドシステムを実装して、reactとmaterial-uiを使ってマテリアルデザインアプリを開発する方法を探しています。
React-Bootstrapはthisですが、Material-UIと似たものは見つかりませんでした。 GridListはいいですが、全く同じではありません。そのための解決策はありますか？

Answer 1

マテリアルUIではなくインラインスタイリングを使用していますが、マテリアルUIでブートストラップを使用しています。それは良いと簡単に動作します。 例を示します。

<div className="Container"> 
<button className="btn btn-primary"> Action</button> 
<div className="row"> 

    <div className="col-sm-4"> 
      <ReactAutoForm collection={DoctorCategories} type="insert" debug={true} /> 
     </div> 

     <div className="col-sm-8"> 
      <table><TableHeader><TableRow> 
             <TableHeaderColumn>Name</TableHeaderColumn> 
             <TableHeaderColumn>Description</TableHeaderColumn> 
             <TableHeaderColumn>Edit</TableHeaderColumn> 
            </TableRow> 
     </TableHeader> 
     <TableBody> 
</TableBody> 
</TableBody> 
          </table> 
          </div> 

</div> 
</div> 

Answer 2

その反応-インライングリッド（http://broucz.github.io/react-inline-grid/）は、この問題のために良い解決策になる可能性がありそうです。

このライブラリの背後にある概念は、ブートストラップグリッドシステムの背後にあるものに本当に近く、インラインスタイルを使用しています。

Answer 3

マテリアルデザインのグリッドシステムを実装する2つのパッケージを作成しました。最初のmaterial-responsive-gridはCSSフレームワークであり、2番目のreact-material-responsive-gridは、このフレームワークを実装する一連のReactコンポーネントです。

これらのパッケージは、Googleが概説したresponsive UIの標準に準拠しているため、他のすべてのUIフレームワークで実装されているブレークポイントを変更する必要はありません。標準で指定されているすべてのビューポートサイズは、適切な溝、推奨される列数、および1600 dpを超えるレイアウトの動作さえも考慮してサポートされています。 Device Metricsガイドのすべてのデバイスで推奨されているように動作するはずです。

各パッケージはgithubで利用でき、Reactアプリのサンプルが含まれています。

は、ご質問があれば私に教えてください。

Answer 4

今、Material-UIには独自のFlexboxレイアウトがあります。 // githubの：それはあなたがこのリンクを訪問することができ、より詳細なドキュメントと例については、最新の素材-UIビルド

npm install material-ui@next 

でそれを使用することができ、アルファブランチ にhttps://material-ui-1dab0.firebaseapp.com/layout/responsive-uie-ui