css - Angular 8 中的可拖动和可调整大小的垫对话框

标签 css angular angular-material angular-cdk

正在寻找一种能够使垫对话框既可拖动又可调整大小的方法。到目前为止,我已经使用 cdkDrag (DragDropModule) 完成了可拖动部分。我试过使用 resize: booth;在 css 中,但它似乎与可拖动功能结合使用效果不佳。 IE。如果我删除 cdk,可调整大小的作品,反之亦然。

请在此处查看代码:https://stackblitz.com/edit/angular-vp8xt7

最佳答案

在您的 StackBlitz 中,调整大小的 handle 出现在对话框的右下角,因此您就快完成了。问题是鼠标事件被拖动功能消耗,而不是移交给调整大小功能。

添加 cdkDragHandle h1 元素解决了您的问题。

<h1 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>

看看它是如何在你的 fork 上工作的 StackBlitz .

关于css - Angular 8 中的可拖动和可调整大小的垫对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58606128/

相关文章:

html - 事业部定位

css - 将工具提示添加到 Font Awesome 品牌图标

html - 如何在屏幕的左侧和右侧放置 Angular Material 单选按钮?

css - 检索元素样式表中的原色

angular - 如何操作不同 mat-card 元素的 mat-card-header-text 类?

javascript - 需要使用 HTML 和 CSS 的 flex 垂直线

html - 无法输入 &lt;input&gt; 标签

angular - 如何在将图像上传到服务器之前以 Angular 2 调整图像大小?

javascript - 使用 ngrx 或 ngxs 时,我们会自动获得对象不变性吗?

css - 如何用背景颜色显示 md-toast