Диалоговая служба KendoUI меняет цвет заголовка

Можно ли как-то изменить цвет диалогового окна при использовании диалогового сервиса кендо?

В настоящее время по умолчанию он красный, но мне нужно настроить окно, чтобы отображать другой цвет в зависимости от того, что передается.

Я попытался использовать кендо-диалог в качестве своего шаблона, но он не показывает кнопки действий.

<kendo-dialog title="{{title}}" (close)="Cancel()" [ngClass]="yellow">
</kendo-dialog>

kendo-ui kendo-ui-angular2
person CodeMan03    schedule 02.10.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Некоторое время назад я задал себе тот же вопрос и нашел решение, найденное в этом сообщении: Kendo UI angular DialogService — изменение цвета фона строки заголовка

Я скопирую свой ответ здесь: я работал над решением для этого. Это работает, но это не элегантно.

Вот ссылка на плункер, которая демонстрирует код: 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;
    }
  }
}
person Jahrenski    schedule 10.11.2017