Kendo UI angular DialogService-更改标题栏背景颜色 [英] Kendo UI angular DialogService - Change the title bar background color
问题描述
我希望能够更改使用kendo UI angular的DialogService创建的结果对话框的背景颜色.
I would like to be able to change the background-color of the resulting dialog created with the kendo UI angular's DialogService.
很容易调整对话框的内容,甚至可以通过scss覆盖背景色,但仅适用于一种固定颜色,而我需要从几种固定颜色中进行选择.
It's easy to adapt the content of the dialog or even override the background-color via scss but only for one fixed color while I need to chose from a few.
所以我在考虑在运行时设置颜色,或者至少在包装器上设置一个类,以便可以通过scss设置样式.
So I'm thinking either set the color at runtime or at least set a class on the wrapper so I can style them via scss.
有什么主意吗?
推荐答案
我为此做了一个解决方案.它可以工作,但是一点也不优雅.
I worked a solution for this. It works but it is not elegant one bit.
这是演示代码的插件链接: http://plnkr.co/edit/MGw4Wt95v9XHp9YAdoMt?p=preview
Here's the plunker link that demonstrates the code : http://plnkr.co/edit/MGw4Wt95v9XHp9YAdoMt?p=preview
以下是服务中的相关代码:
const dialog: DialogRef = this.dialogService.open({
actions: message.actions,
content: MessageComponent,
title: message.title
});
const messageComponent = dialog.content.instance;
messageComponent.message = message;
//I get the dialog element and use jQuery to add classes to override styles.
//Let's say I had the error class as well.
const element = dialog.dialog.location.nativeElement;
$( element ).addClass( 'kendo-override ' + message.classes );
return dialog.result;
和scss:
$error: #c13;
$success: #0c5;
.kendo-override {
&.error {
kendo-dialog-titlebar {
background-color: $error;
}
}
&.success {
kendo-dialog-titlebar {
background-color: $success;
}
}
}
这篇关于Kendo UI angular DialogService-更改标题栏背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!