Angular material。移动设备屏幕外的对话操作

Question

我对移动设备上的 mat-dilog 有疑问。在横屏模式的手机上，mat-dialog-actions 按钮在屏幕之外，因此无法关闭对话框。

我考虑过使用特殊 css class 在对话框顶部复制操作按钮，但它需要手动将其添加到每个对话框。

// Dialog close button for mobile devices    
.dialog-close-btn {
  visibility: hidden;
}

@media screen and (max-width: 799px) and (orientation: landscape) {
  .dialog-close-btn {
    visibility: visible;
  }
}

它有效，但就像我说的那样，它有很多重复的代码和不必要的工作。也许有人遇到过这个问题并且有更简单的解决方案。顺便说一句，我也注意到在 chrome 全屏模式下没有这个问题，也许可以在全屏模式下在移动设备上打开对话框？如有任何建议，我们将不胜感激。

Answer 1

我做了一些搜索，看起来让对话框全屏可能是一个很好的解决方案 (http://answersicouldntfindanywhereelse.blogspot.com/2018/05/angular-material-full-size-dialog-on.html). I know this takes away from the effect of having a dialog, but I have noticed they can be tricky on mobile if you can't make the content smaller. You might also want to checkout https://github.com/angular/material2/issues/10094

Answer 2

我也遇到了同样的问题。
这是一个有点晚的答案，但我发布这个答案是为了对可能需要这个的人有所帮助。

根据@Derek Schmid 的回答，

  let dialogConfig = new MatDialogConfig();

  dialogConfig = {
    width: '80vw',
    maxHeight: '100vh',
  };

现在我正在使用这个配置集。
width, minWidht, maxWidht 是你的选择。

重点是设置'maxHeight'为'100vh'，不要设置'height' 属性的值。

这在两点上对我有用。

1) 不是全屏，所以我仍然可以使用对话框视图的值（在大多数情况下）。
2）在小屏幕尺寸（高度，像手机），整个mat-dialog和mat-dialog-content部分都可以滚动（不仅仅是mat-dialog-content部分）。

试试这个:)

Answer 3

Mat dialog 要求标题和操作在一行中。如果在您的用例中标题 and/or 操作跨越更多行，您可能希望将它们全部放在内容中并避免完全使用 mat-dialog-title 部分。

<div mat-dialog-content class="details">
    <h1 *class="title">{{data.title}}</h1>
    <div> Your content here</div>
</div>
<div mat-dialog-actions>
</div>

Answer 4

对话框内容的 max-height 样式默认为 65vh (*)，如果标题或操作 div 高于 1 行（如@now 所述）。

这可以通过将自定义样式应用于组件样式文件中的 .mat-dialog-content CSS class 来减少分配给内容的最大高度量来缓解：

// In dialog-component.css

.mat-dialog-content {
  max-height: 50vh;
}

要在全局样式文件中应用它，请使用 !important 强制覆盖默认样式：

// In global styles.css

.mat-dialog-content {
  max-height: 50vh !important;
}

(*) 这是基于 Angular Material 12.2.6.

Angular material。移动设备屏幕外的对话操作

Angular material. Dialog actions out of screen on mobile devices

sass

angular-material2

angular