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

Posted 2023-02-22

【中文标题】使用 Material-UI 网格列表模拟引导网格

【英文标题】：Mimic bootstrap grid using Material-UI Grid list

【发布时间】：2017-07-09 01:15:27

【问题描述】：

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

我想实现这个布局-http://imgur.com/a/bzkOd

这里是 bootstrap sn-p:

<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/

【参考方案1】：

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

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

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

bootstrap-grid-react ReactGrid react-virtualized（满足一些更高级的需求）

您可能会找到更多，只需找到最适合您需求的那个。就个人而言，我创建了自己的 Grid 组件来完全控制它。

【讨论】：

哦，好的。非常感谢您的解释。这很有帮助！当我之前阅读文档时，我想，它在哪里，呵呵。再次感谢。

【参考方案2】：

我认为应该更新答案，因为 Material UI 已经实现了自己的 Flexbox 布局，非常类似于 Bootstrap (https://material-ui-1dab0.firebaseapp.com/layout/responsive-ui)。

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

看起来他们最初希望将自己保持为纯粹的“组件”库。但是其中一位核心开发人员认为不拥有自己的开发人员太重要了。它现已被合并到核心代码中，并有望与 v1.0.0 一起发布。

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

npm install material-ui@next

将此答案归功于：icc97 - Material UI and Grid system