0

我有一个 MUI 对话框，由于它是由用户过滤的列表，因此它的高度会有所不同。它最终很烦人，因为对话框在屏幕“跳跃”时试图保持它的中心位置，因为它的增长和缩小。这是它的样子：

在此处输入图像描述

对于这个特定问题，一个简单的解决方案是简单地alignItems从dialogPaperclasses 属性中取消设置。像这样的东西：

const useStyles = makeStyles((theme) => ({
  pivottedDialog: {
    alignItems: 'unset',
    ...
  },
}));

const MyDialog = () => (
  <Dialog
    {...otherProps}
    classes={{
      scrollPaper: classes.pivottedDialog
    }}
  >
    ...
  </Dialog>
)

但是，这会导致它在屏幕上失去其居中位置，而我仍然需要它居中（参考带有完整列表的对话框，没有任何内容被过滤）。我希望它的起点与未更改的对话框相同，适用于所有适用的屏幕尺寸（宽度超过 600 像素）

在此处输入图像描述

我怎么能做到这一点？

我尝试过使用类的定位和top属性pivottedDialog，但它会根据屏幕大小而变化。这需要响应并集中在宽度超过 600 像素的所有屏幕尺寸上。

我用两个对话框制作了一个示例应用程序，可以在这里玩：https ://codesandbox.io/s/crazy-tesla-emc8m?file=/src/App.js

4

1 回答 1

1

在这种情况下。由于DialogContent高度会根据过滤器而变化，因此我建议为 设置高度和宽度，Dialog为DialogContent.

工作演示：

编辑动态可过滤材质模态

为什么内容会发生变化？问题来自这样一个事实，即 Dialog 使用 flex-blox ( display: flex) 将内容对齐到中心 ( justify-content: center) 垂直（主轴）并将项目与中心 ( align-items: center) 水平对齐（横轴）相对于视图港口。这使得屏幕中心和对话框中心成为如何对齐内容的参考点。

有什么变通办法吗？是的，但它们需要自定义布局/自定​​义模式。使用 flexbox，您需要类似下面的演示来实现居中模式：

编辑动态可过滤材质模态（无指定高度）

这个示例演示所做的是创建一个包含三行的列并将模态锚定到第二行的顶部：

 ___________________________
|                           |
|         Empty Row         |
|      · 25% of view        |
|___________________________|
|   |------ Modal ------|   |
|   |  · Top anchored   |   |
|   |  · Expandable †   |   |
|   |  · 50% of view    |   |
|   |___________________|   |
|                           |
|                           |
|                           |
|___________________________|
|                           |
|         Empty Row         |
|      · 25% of view        |
|___________________________|

† Modal 只能扩展到它所在行的最大高度

这允许模态在保持垂直和水平中心的同时收缩和增长。中心不会是行的中心，因为这需要模态垂直移动以补偿高度变化（这让您回到之前的内容移动问题）。

这种方法的缺点是：

  • 需要自定义组件。
  • 小视图端口会对模态内容产生不利影响，您可以在其中获得压缩结果： 在此处输入图像描述

这种方法的优点是：

  • 您可以更好地控制如何划分视口（25%/50%/25% 或 33.33%/33.33%/33.33% 或 20%/60%/20% 等）

  • 模态随着视口和过滤项目的数量而缩小和增长： 在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

哪个是最好的方法？最简单和推荐的解决方案是在模态框上设置一个高度/宽度。另一种解决方案是使用不会影响模态高度的可过滤下拉选择列表。

于 2021-11-27T22:11:09.323 回答