Material-ui: [选择]更改弹出位置

创建于 2018-07-20  ·  11评论  ·  资料来源: mui-org/material-ui

  • [x]这是v1.x问题。
  • [x]我搜索了此存储库的问题,并认为这不是重复的。

预期行为


我想禁用select显示弹出框的方式,使所选项目位于select上,popover移动很奇怪,只想禁用它,然后将菜单永久置于select下。
我已经浏览过Select的文件,找不到它。 如果您可以指导我完成,我会自己做,并进行公关。

当前行为

弹出框根据所选项目移动,并且没有禁用选项/重新定位选项。

例子


我希望菜单位于选择之下。
image

语境

Select question

最有用的评论

哦,这是与Select一起使用的,让我们更进一步:

  • 选择使用菜单:
    capture d ecran 2018-07-21 a 22 04 42
  • ♻️
      <Select
        MenuProps={{
          anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
          },
          transformOrigin: {
            vertical: "top",
            horizontal: "left"
          },
          getContentAnchorEl: null
        }}
      >

https://codesandbox.io/s/18l2042y97

所有11条评论

@ w3nda以下文档:

  • Menu组件建立在Popover的顶部:
    capture d ecran 2018-07-21 a 22 00 18
  • 可以根据您的期望放置Popover:
    capture d ecran 2018-07-21 a 22 01 16
  • 结合这两个信息并修复警告,我们可以得出:
        <Menu
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left"
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "left"
          }}
          getContentAnchorEl={null}

https://codesandbox.io/s/9l17k3qnk4

希望对您有所帮助。

哦,这是与Select一起使用的,让我们更进一步:

  • 选择使用菜单:
    capture d ecran 2018-07-21 a 22 04 42
  • ♻️
      <Select
        MenuProps={{
          anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
          },
          transformOrigin: {
            vertical: "top",
            horizontal: "left"
          },
          getContentAnchorEl: null
        }}
      >

https://codesandbox.io/s/18l2042y97

王!
我发现如果菜单下面有足够的空间,它将可以完美呈现,但是如果他在屏幕上没有足够的空间,菜单将被上推。 真正? 或破坏行为?

我发现如果菜单下面有足够的空间,它将可以完美呈现,但是如果他在屏幕上没有足够的空间,菜单将被上推。

@wenduzer这听起来像预期的行为。

哦,这是与Select一起使用的,让我们更进一步:

@oliviertassinari谢谢,这正是我过去2个小时一直在搜索的内容。

@ Shrikant9我们如何提高答案的可发现性?

我们如何提高答案的可发现性?

@oliviertassinari在我看来,在<Select />组件的演示页面上具有更多不同版本的演示。 坦白地说,我最近开始使用material-ui,因此仍然需要习惯文档。

@ Shrikant9我们很乐意接受拉取请求👍。

@oliviertassinari谢谢你我的朋友,你对我非常非常的帮助。 我非常了解用户界面,但是我无法做出这个决定

我们可能会使用#18493更改默认位置。

设为默认会很好

此页面是否有帮助?
0 / 5 - 0 等级