繁体   English   中英

Kendo UI angular DialogService-更改标题栏背景颜色

[英]Kendo UI angular DialogService - Change the title bar background color

我希望能够更改使用kendo UI angular的DialogService创建的结果对话框的背景颜色。

调整对话框的内容甚至通过scss覆盖背景颜色很容易,但是仅适用于一种固定颜色,而我需要从几种固定颜色中进行选择。

所以我在考虑在运行时设置颜色,或者至少在包装器上设置一个类,以便可以通过scss设置样式。

任何想法?

我为此解决了一个问题。 它可以工作,但是一点也不优雅。

这是演示代码的插件链接: 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;
    }
  }
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM