材质UI和网格系统

Question

我正在玩Material-UI.是否有任何创建网格布局的选项(如在Bootstrap中)？

如果没有,添加此功能的方法是什么？

有一个GridList组件,但我想它有一些不同的目的.

Answer 1

Material UI已实现了自己的Flexbox布局.

看来他们最初想把自己当作纯粹的"组件"库.但其中一位核心开发人员认为,不拥有自己的东西太重要了.它现已合并到核心代码中,并随v1.0.0发布.

您可以通过以下方式安装:

npm install @material-ui/core

它现在在官方文档中,带有代码示例.

Answer 2

从材料设计规格的描述:

网格列表是标准列表视图的替代方法.网格列表与用于布局和其他可视化演示的网格不同.

如果您正在寻找一个非常轻量级的Grid组件库,我正在使用React-Flexbox-Grid,即flexboxgrid.cssReact中的实现.

最重要的是,React-Flexbox-Grid与材料-ui和react-toolbox(替代材料设计实现)相得益彰.

Answer 3

我四处寻找答案,我发现最好的方法是在不同的组件上使用Flex和内联样式.

例如,要使两个纸张组件在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>
    )
  }
}

现在,通过一些更多的计算,您可以轻松地在页面上划分组件.

进一步阅读flex

Answer 4

我希望现在发表回应还为时不晚.

我还在寻找一个简单,强大,灵活且高度可定制的引导程序,如反应网格系统,以便在我的项目中使用.

我所知道的最好的是react-pure-grid https://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>
);

Answer 5

我的方法是访问http://getbootstrap.com/customize/,只检查"网格系统"下载.有bootstrap-theme.css和bootstrap.css下载的文件,我只需要后者.

通过这种方式,我可以使用Bootstrap的网格系统,以及Material UI中的所有其他内容.

Answer 6

我只需使用https://react-bootstrap.github.io/进行响应式布局,使用Material-ui进行所有组件

Answer 7

我很难找到一个能够实现Material Design的响应行为标准的UI框架,因此我创建了两个实现Material Design网格系统的软件包:

1. CSS框架:材料响应网格
2. 一组实现该框架的React组件:react-material-responsive-grid.

这些软件包遵循Google概述的响应式用户界面标准.考虑到正确的装订线,建议的列数,甚至超过1600 dp的布局行为,都支持其标准中指定的所有视口大小.它应该与" 设备指标"指南中的每个设备一样.