材质UI和网格系统


118

我正在与Material-UI一起玩。是否有创建网格布局的任何选项(例如在Bootstrap中)?

如果不是,添加此功能的方式是什么?

有一个GridList组件,但我想它有一些不同的用途。


不要以为它具有创建响应式网格的任何组件。
Lucky Chingi 2015年

Answers:


126

材质UI已通过Grid组件实现了自己的Flexbox布局。

看来他们最初想将自己保留为纯粹的“组件”库。但是一位核心开发者认为不要拥有自己太重要了。现在,它已合并到核心代码中,并随v1.0.0一起发布

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

npm install @material-ui/core

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


我看到您发布了我要添加的答案!大声笑。刚刚回复了您对当前主要答案的评论。
Cleanshooter

刚刚安装,现在使用Material UI的alpha分支。可以确认Layout系统运行良好。
user2875289

3
网格系统运行良好,但是有些组件尚未实现,例如Select Field。我被困在如何使用这些领域。你能帮我这个忙吗?
Suresh Mainali'5

1
我也同意@SureshMainali,因为我也面临着同样的问题。大多数组件缺少道具,甚至缺少自定义主题的实现
Sai Ram,

@SaiRam我不会说最多,但是确实Select缺少了,我现在只是用单选按钮替换了它,但是我敢肯定很快就可以将选择从主干移植。
icc97

35

根据材料设计规格的描述:

网格列表是标准列表视图的替代方法。网格列表不同于用于布局和其他视觉表示的网格。

如果您正在寻找轻量级的Grid组件库,那么我正在使用React-Flexbox-Grid,这是flexboxgrid.cssReact中的实现。

最重要的是,React-Flexbox-Gridmaterial-uireact-toolbox(替代材料设计实现)中都表现出色。


32
在撰写本文时,React-Flexbox-Grid的实现不佳,并且需要很多外部依赖才能正常运行。另外,@ Roylee是它的开发人员...因此,无论如何他的观点还是有偏差的;)...
Cleanshooter

1
同样,react-flexbox-grid依赖于flexboxgrid,它不使用Material Design中推荐的相同响应式断点。请参阅:material.io/guidelines/layout/...
肯·格雷戈里

@Cleanshooter这将是您的竞争版本吗?也许您也有一点偏见:)
icc97 '17

@ icc97是和否。并不是真的想“竞争”它,对于我正在构建的应用程序而言,这更像是一个制止点。我对这两者都感到失望之后就说了这一点……尽管这真的不再重要了,因为CallEmAll的家伙在Material-UI的最新版本中包括了网格系统。我还没有亲自尝试过。github.com/callemall/material-ui/pull/5808
Cleanshooter '17

1
@Cleanshooter你的看起来不错。我一直在测试新的Material-UI网格,到目前为止效果很好。
icc97

20

我到处寻找答案,发现的最佳方法是在不同的组件上使用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的进一步阅读


2
我同意,使用flex css属性可以提供所需的简单格式。
James Gentes

11

我希望现在还为时不晚。

我也在寻找一个简单,健壮,灵活和高度可定制的引导程序,例如在我的项目中使用的React网格系统。

我所知道的最好的是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>
);

8

我的方法是转到http://getbootstrap.com/customize/,然后仅选中“网格系统”进行下载。下载文件中有bootstrap-theme.cssbootstrap.css,我只需要后者。

这样,我可以将Bootstrap的网格系统与Material UI的其他所有功能一起使用。



5

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

  1. 一个CSS框架:material-sensitive-grid
  2. 一组实现该框架的React组件:react-material-response-grid

这些软件包遵循Google概述的响应式UI标准。支持标准中指定的所有视口大小,并考虑适当的装订线,建议的列数,甚至超过1600 dp的布局行为。它的行为应符合“ 设备指标”指南中对每个设备的建议。


1

下面是纯MUI Grid系统制作的

MUI-网格布局

使用下面的代码,

// MuiGrid.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary,
    backgroundColor: "#b5b5b5",
    margin: "10px"
  }
}));

export default function FullWidthGrid() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={0}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

↓CodeSandbox↓

编辑MUI-Grid系统



0

这是带有material-ui的网格系统的示例,类似于bootstrap:

<Grid container>
    <Grid item xs={12} sm={4} md={4} lg={4}>
    </Grid>
    <Grid item xs={12} sm={4} md={4} lg={4}>
    </Grid>
 </Grid>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.