reactjs - 如何使用 MaterialUI 构建此布局?反应
问题描述
我正在使用 MaterialUI 通过 React 构建我的 UI。我想建立这样的布局:
我正在处理 Grid 的组件并玩弄,但需要帮助来放置该列:c 有什么想法吗?谢谢。
其他详细信息:* 如果您知道一种使其可移动的方法,我不认为在响应式中会有所帮助
谢谢!
解决方案
我承认这不是最性感的解决方案,但我相信最简单的方法是使用 Material-UI 的各种表格组件来创建两列,然后将网格或表格嵌套在第一列中。如果有人有更好的选择,请发表评论,这样我也可以学习!
在我的示例代码段中,我重用了 Table 组件来嵌套表格。我没有让样式与您的精确匹配,但足够接近一个可行的起点。
const { Table, TableBody, TableRow, TableCell } = window["material-ui"];
const NestedTableExample = () => {
const sharedColumnProps = { border: "none" };
const sharedDivProps = {
border: "solid 3px #000",
height: "100%",
padding: "10px",
width: "100%"
};
const styles = {
column1: { width: "150px", ...sharedColumnProps },
column1Div: { background: "lightblue", ...sharedDivProps },
column2: {
width: "50px",
...sharedColumnProps
},
column2Div: {
background: "orange",
...sharedDivProps
}
};
return (
<Table style={{ height: "100%" }}>
<TableBody>
<TableRow>
<TableCell style={{ border: "none" }}>
<Table>
<TableBody>
<TableRow>
<TableCell style={styles.column1}>
<div style={styles.column1Div}>Cell1</div>
</TableCell>
</TableRow>
<TableRow>
<TableCell style={styles.column1}>
<div style={styles.column1Div}>Cell2</div>
</TableCell>
</TableRow>
<TableRow>
<TableCell style={styles.column1}>
<div style={styles.column1Div}>Cell3</div>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableCell>
<TableCell style={styles.column2}>
<div style={styles.column2Div}>Cell4</div>
</TableCell>
</TableRow>
</TableBody>
</Table>
);
};
ReactDOM.render(<NestedTableExample />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@3.6.2/umd/material-ui.production.min.js"></script>
<div id="app"></div>
推荐阅读
- c - 如何使用 C 中的错误处理代码访问并行结构值
- angular - formsarray 中的 formarray.controls 在角度 5 中是什么意思?
- matlab - 模糊 c 均值聚类
- regex - 使用正则表达式确保某些内容包含单独的数字
- java - 使用 Jackson JsonParser 跳过字节
- python - 在 Python 中使用多个条目格式化 Dictionary 的正确方法
- python - 是否可以使用 PyPDF2 将多边形注释写入 pdf?
- github - .md 中的 Github Jekyll Liquid 对象访问问题
- ios - 标签的持续时间
- installation - InstallScript GetLine() 无法读取包含命令提示符结果的文本文件