Question

我正在尝试在Material UI中创建网格形式的菜单/下拉菜单。我在文档中看到的下拉列表是单列或单行。我使用包含GridList的菜单组件对此进行了调试，这几乎对我有用，但是网格太宽，列之间的空间太大。我尝试使用GridListItem和Grid容器以及GridItem，但最终遇到了同样的问题。

   <Menu
        anchorEl={anchorEl}
        keepMounted
        open={open}
        onClose={handleClose}
        elevation={0}
        getContentAnchorEl={null}
        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
        transformOrigin={{ vertical: "top", horizontal: "left" }}
        TransitionComponent={Fade}
      >
        <GridList cellHeight={48} cols={2}>
          <Button onClick={(e) => handleClose(LayoutIcons.L_1x1)}>
            {GetGroupIcon(LayoutIcons.L_1x1)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_2x2)}>
            {GetGroupIcon(LayoutIcons.L_2x2)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
            {GetGroupIcon(LayoutIcons.L_5x5)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
            {GetGroupIcon(LayoutIcons.L_5x5)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
            {GetGroupIcon(LayoutIcons.L_5x5)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
            {GetGroupIcon(LayoutIcons.L_5x5)}
          </Button>
        </GridList>
      </Menu>

CodeSandbox for sample grid drop down

在深入研究之后，我发现网格的宽度是所有元素宽度的总和，因为它使用的是flex作为显示（在我的示例代码中为6，但是我的解决方案需要一个包含任意数量元素的通用网格和列）。然后，网格根据列数设置每个元素的宽度。我有2列，所以每个元素的宽度都设置为50％。这样每行提供2个元素，但使每个元素非常宽。

我正在寻找Material UI解决方案以缩小元素宽度，以使每一项与我在示例代码中将列数设置为6时都相距甚远。我可以使用GridList或Grid进行调整，也可以使用完全不同的方法，只要它使用Material UI组件即可。

Answer 1

使用诸如div之类的块元素。关闭另一个块元素中的每一行。如果需要更多间距，请添加边距

<div>
  <div>
    <Button onClick={(e) => handleClose(LayoutIcons.L_1x1)}>
      {GetGroupIcon(LayoutIcons.L_1x1)}
    </Button>
    <Button onClick={(e) => handleClose(LayoutIcons.L_2x2)}>
      {GetGroupIcon(LayoutIcons.L_2x2)}
    </Button>
  </div>
  <div>
    <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
      {GetGroupIcon(LayoutIcons.L_5x5)}
    </Button>
    <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
      {GetGroupIcon(LayoutIcons.L_5x5)}
    </Button>
  </div>
  <div>
    <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
      {GetGroupIcon(LayoutIcons.L_5x5)}
    </Button>
    <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
      {GetGroupIcon(LayoutIcons.L_5x5)}
    </Button>
  </div>
</div>

材质UI GridList下拉列表太宽

1 个答案: