Question

我是Material-ui的新手，我正在使用ReactJS。我有这个jsfiddle，但使用Bootstrap。我想知道如何使用React Material-UI对带有标题的2列面板进行编码。

这是bootstrap片段：

<div class="row">
  <div class="col-xs-12">Header</div>
</div>
<div class="row">
    <div class="col-xs-12">
        <div class="row">
            <!-- Left side -->
            <div class="col-xs-3">
                <div class="row">
                    <!-- 1st column -->
                    <div class="col-xs-12">Menu 1</div>
                    <div class="col-xs-12">Menu 2</div>
                    <div class="col-xs-12">Menu 3</div>
                    <div class="col-xs-12">Menu 4</div>
                    <div class="col-xs-12">Menu 5</div>
                    <div class="col-xs-12">Menu 6</div>
                </div>
            </div>

            <!-- Right side -->
            <div class="col-xs-9">
                <div class="row">
                    <!-- 3rd column -->
                    <div class="col-xs-12">Dashboard</div>
                    <!-- 4th column -->
                    <div class="col-xs-12">Device Statistics</div>
                    <!-- colspan 2 -->
                    <div class="col-xs-12">Device Health</div>
                </div>
            </div>
        </div>
    </div>
</div>

https://jsfiddle.net/wLob4p03/1/

Answer 1

GridList中的

material-ui与网格布局无关。看看material design guidelines：

网格列表是标准列表视图的替代方法。

您需要自己实现网格布局或使用一些现成的库。其中有很多，通常基于Bootstrap网格，或者非常相似：

bootstrap-grid-react
ReactGrid
react-virtualized（针对更高级的需求）

您可能找到的远不止这些，只需找到最适合您需求的那个。就个人而言，我创建自己的Grid组件以完全控制它。

Answer 2

我认为应该更新答案，因为Material UI已经实现了自己的Flexbox布局，就像Bootstrap（https://material-ui-1dab0.firebaseapp.com/layout/responsive-ui）一样。

注意：虽然这不是Material-UI Grid列表。

看起来他们最初想把自己保持为纯粹的“组件”。图书馆。但其中一位核心开发人员认为，不拥有自己的东西太重要了。它现已合并到核心代码中，并且有望在v1.0.0中发布。

目前（2017年4月），它还在下一个/ alpha分支上。您可以通过以下方式安装它：

npm install material-ui@next

对以下答案的评价：icc97 - Material UI and Grid system

使用Material-UI Grid列表模拟引导网格

2 个答案: