时间戳

首页 > 解决方案 > 反应 UI 元素放置？

javascript - 反应 UI 元素放置？

问题描述

我是 React 的新手，所以如何放置 UI 元素让我有点不知所措。

我想要以下布局： 在此处输入图像描述

但我无法完全弄清楚。在黑盒子里应该有一组复选框（我已经制作的一个组件）垂直堆叠，在蓝色盒子里同样的一组复选框，但水平放置。在红色框中，一个谷歌散点图（我也设置好了）。

使用反应列我认为我可以设置它，使用两个列。但后来我意识到我必须以某种方式为复选框设置父级，所以这不是解决方案。

然后我想“为什么不使用网格？” 所以我发现 Google 在他们的 Material 包中有网格（这很好，因为我以任何方式使用它）所以我导入了它，但我仍然不能完全正确：

在此处输入图像描述

我将如何解决这个问题？

我的代码如下：

return(
    <div>
        <Grid container spacing={0}>
            <Grid item xs={3}>
                <CheckboxContainer checkboxes={checkboxes}/>
            </Grid>
            <Grid item xs={9}>
                <Chart
                    height="400px"
                    chartType="ScatterChart"
                    loader={<div>Loading Chart</div>}
                    data={[
                        ['Level','Y'],
                        [-4,-1],
                        [-3,3],
                        [-2,-2],
                        [-1,1],
                        [0,5],
                        [1,14],
                        [2,5],
                        [3,3.5],
                        [4,7],
                    ]}
                    options={{
                        title: 'Transparency',
                        hAxis: { title: 'Level', minValue: -9, maxValue: 9 },
                        vAxis: { title: 'Y', minValue: -9, maxValue: 9 },
                        legend: 'none',
                    }}
                    rootProps={{ 'data-testid': '1'}}
                />
            </Grid>
            <Grid item xs={12}>
                <CheckboxContainer checkboxes={checkboxes} />
            </Grid>
        </Grid>
    </div>
)

标签： javascriptreactjsreact-grid-layout

解决方案

您可以使用纯 CSS 轻松创建此布局，将 flexbox 用于水平和垂直复选框，并使用浮动用于散点图。

  render() {
    return (
    <div className="page">      
      <div className="main">
        <div className="sidebar">
          <div>
            Check this 
            <input type="checkbox"/>
          </div>
           <div>
            Check this 
            <input type="checkbox"/>
          </div>        
        </div>
        <div className="main">
          <div>
            Check this 
            <input type="checkbox"/>
          </div>
           <div>
            Check this 
            <input type="checkbox"/>
          </div>
        </div>
      </div>
      <div className="footer">
        Scatter plot here
      </div>
    </div>
    );
.page {
  width: 100vw;
}

.main {
  display: flex;
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: 20%;
}

.footer {
  float: right;
  width: 80%;
}

在JSFiddle中查看此代码。

推荐阅读