Answers:
材质UI已通过Grid组件实现了自己的Flexbox布局。
看来他们最初想将自己保留为纯粹的“组件”库。但是一位核心开发者认为不要拥有自己太重要了。现在,它已合并到核心代码中,并随v1.0.0一起发布。
您可以通过以下方式安装它:
npm install @material-ui/core
现在在官方文档中带有代码示例。
Select Field
。我被困在如何使用这些领域。你能帮我这个忙吗?
Select
缺少了,我现在只是用单选按钮替换了它,但是我敢肯定很快就可以将选择从主干移植。
根据材料设计规格的描述:
网格列表是标准列表视图的替代方法。网格列表不同于用于布局和其他视觉表示的网格。
如果您正在寻找轻量级的Grid组件库,那么我正在使用React-Flexbox-Grid,这是flexboxgrid.css
React中的实现。
最重要的是,React-Flexbox-Grid在material-ui和react-toolbox(替代材料设计实现)中都表现出色。
我到处寻找答案,发现的最佳方法是在不同的组件上使用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>
)
}
}
现在,通过更多的计算,您可以轻松地在页面上划分组件。
我希望现在还为时不晚。
我也在寻找一个简单,健壮,灵活和高度可定制的引导程序,例如在我的项目中使用的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>
);
我的方法是转到http://getbootstrap.com/customize/,然后仅选中“网格系统”进行下载。下载文件中有bootstrap-theme.css
和bootstrap.css
,我只需要后者。
这样,我可以将Bootstrap的网格系统与Material UI的其他所有功能一起使用。
我只对所有组件使用https://react-bootstrap.github.io/进行响应式布局和Material-ui
我很难找到一个可以实现Material Design响应行为标准的UI框架,因此我创建了两个用于实现Material Design网格系统的软件包:
这些软件包遵循Google概述的响应式UI标准。支持标准中指定的所有视口大小,并考虑适当的装订线,建议的列数,甚至超过1600 dp的布局行为。它的行为应符合“ 设备指标”指南中对每个设备的建议。
下面是纯MUI Grid系统制作的,
使用下面的代码,
// 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↓
这是一个古老的问题,但是谷歌把我带到这里。稍作搜索后,我发现了一个很好的软件包:https : //www.npmjs.com/package/react-grid-system
我认为这是最好的,易于使用且轻巧的产品。