css - 如何在 Angular 中使用顶部三角形的每个垫表行上的垫子对话框上创建动态自定义样式 - 材料
问题描述
这是我的示例代码。 请在此处找到我的工作示例代码
我需要在垫子对话框的右上角设置三角形 - Angular。
我在最后一行使用静态 css 获得右上角三角形对话框。但是这里无法在更改请求按钮单击时访问每一行。
下面的代码是对话框组件
openDialog(Id, Currency, Amount, Reason, StatusDescription, payment, event) {
let targetAttr = event.target.getBoundingClientRect();
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.data = {
Id: Id,
Reason: Reason,
StatusDescription: StatusDescription
};
dialogConfig.position = {
top: targetAttr.y + targetAttr.height + 10 + "px",
left: targetAttr.x - targetAttr.width - 20 + "px"
};
dialogConfig.panelClass = ['my-panel','arrow-top'];
const dialogRef = this.dialog.open(EditingDialogComponent, dialogConfig);
dialogRef.afterClosed().subscribe(
data => {
console.log("Dialog output:", data)
}
);
}
下面的代码来自 style.scss
/* Add application styles & imports to this file! */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
.my-panel {
overflow: hidden !important;
border-radius: 5px !important;
padding: 0px !important;
color: #fff;
}
.my-panel.arrow-top {
margin-top: 40px;
}
.my-panel.arrow-top:after {
content: " ";
position: absolute;
right: 100px;
top: 365px;
border-top: none;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid gray;
}
解决方案
推荐阅读
- python - 在 Python 中更改函数名称
- ios - 如何覆盖目标的字符串本地化文件中的字符串
- scala - WebSocket 缺少用于自定义数据类型的隐式消息流转换器 2.6
- php - Symfony 4 - 分页过滤器搜索问题
- python - 导入tensorflow.contrib.slim时如何解决UnicodeDecodeError
- android - 在一个地方更改 ID 会更改 Android XML 文件中其他地方的 ID
- c++ - 以下程序的意外输出
- react-native - 执行“react-native link realm”时出错
- c++ - 如何在 C++ 中将一个类的实例完全重新分配给同一类的另一个实例(然后删除原始对象)?
- python - 用于检查文件夹中的更改并复制到另一个文件夹中的 Bash 文件