如何在Material的Popover组件中制作子菜单

时间:2019-05-11 14:14:50

标签: css reactjs css-position material-ui popover

我想创建带有项目的子菜单(利用Popover和MenuItem组件)。无法弄清楚如何放置子菜单,以便将其放置在其父项的左侧。

我尝试将父级设置为position: relative,但是包装器阻止了子菜单在Popover流之外显示。

<Popover
  id="simple-popper"
  open={open}
  anchorEl={anchorEl}
  onClose={this.handleClose}
  anchorOrigin={{
    vertical: "bottom",
    horizontal: "center"
  }}
  transformOrigin={{
    vertical: "top",
    horizontal: "center"
  }}
>
  <MenuItem>
    Link 1
    <Paper
      style={{
        position: "absolute"
      }}
    >
      <MenuItem>SubLink 1</MenuItem>
      <MenuItem>SubLink 2</MenuItem>
      <MenuItem>SubLink 3</MenuItem>
    </Paper>
  </MenuItem>
  <MenuItem>Link 2</MenuItem>
  <MenuItem>Link 3</MenuItem>
  <MenuItem>Link 4</MenuItem>
</Popover>;

我想实现经典的二级材料设计菜单

0 个答案:

没有答案