英文:
Converting Angular Material Dialog component to Bottom-sheet in mobile screen using css
问题
我正在尝试将 mat-dialog 的位置从 center（桌面）转换为 bottom in full width（移动设备）。
因此，它在大屏幕上应该看起来像一个对话框，而在较小的设备上应该看起来像底部抽屉。我能够使用 breakpointObserver 来实现这一目标（我将监听断点的变化并更新配置属性）。
但如果有人可以帮助我使用 CSS 媒体查询来实现相同的效果，我将非常高兴。
您能提供的任何帮助将不胜感激。
英文:
I am trying to convert a mat-dialog position from center(desktop) to bottom in full width(mobile).
So it should look likes a dialog in large screens and bottom-sheet in smaller devices. I am able to achieve this using breakpointObserver(I will be listening the breakpoint change and update the config properties).
But I would be really happy if someone can help me to achieve the same using css media queries.
Any assistance you can provide would be greatly appreciated.
答案1
得分: 0
为了寻找类似情况的解决方案：
将一个自定义类添加到对话框中：
this.dialog.open(MyDialogComponent, { panelClass: 'my-custom-dialog' });
将以下样式添加到全局CSS中：
@media (max-width:641px) {
.my-custom-dialog {
width: 100% !important;
align-self: flex-end !important;
}
}
英文:
For anyone who is searching solution for similar situation.
Add a custom class to the dialog;
this.dialog.open(MyDialogComponent, { panelClass: 'my-custom-dialog' });
Add the following style to the global css:
@media (max-width:641px) {
.my-custom-dialog {
width: 100% !important;
align-self: flex-end !important;
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论