3

我正在寻找一种方法来实现响应式网格系统，以使用 react 和 material-ui 开发材料设计应用程序。
虽然React-Bootstrap有这个，但我没有找到与 Material-UI 类似的东西。GridList很好，但不完全相同。有什么解决办法吗？

4

4 回答 4

2

我正在使用带有 Material-UI 的引导程序，而不是对 material-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>
于 2016-05-19T18:05:30.763 回答
2

看来 react-inline-grid ( http://broucz.github.io/react-inline-grid/ ) 可能是解决这个问题的好方法。

这个库背后的概念与 Bootstrap 网格系统背后的概念非常接近，并且它使用内联样式。

于 2016-05-26T07:48:58.813 回答
2

我创建了两个包来实现 Material Design 的网格系统。第一个，material-responsive-grid是一个 CSS 框架，第二个，react-material-responsive-grid，是一组实现这个框架的 React 组件。

这些包遵循Google 概述的响应式 UI标准，因此您不必决定每个其他 UI 框架已实现的不同断点。支持在其标准中指定的所有视口大小，并考虑适当的装订线、推荐的列数，甚至超过 1600 dp 的布局行为。它应该按照设备指标指南中对每个设备的建议运行。

每个包都在 github 上可用，并包含一个示例 React 应用程序。

如果您有任何问题，请告诉我。

于 2017-03-20T22:20:50.593 回答
0

现在 Material-UI 有自己的 Flexbox 布局。它在 alpha 分支中您可以通过 Material-UI 最新版本使用它

npm install material-ui@next

有关更详细的文档和示例，您可以访问此链接https://material-ui-1dab0.firebaseapp.com/layout/responsive-uie-ui

于 2017-05-05T05:06:21.197 回答