2017-07-12 40 views
0

剣道UIの角度DialogServiceで作成されたダイアログの背景色を変更したいと考えています。剣道UIのDialogService - タイトルバーの背景色を変更する

ダイアログの内容を変更したり、背景色をscssでオーバーライドするのは簡単ですが、1つの固定カラーのみを選択する必要があります。

私は実行時に色を設定するか、少なくともscss経由でスタイルを設定できるようにラッパーにクラスを設定することを考えています。

答えて

2

私はこれを解決するために作業しました。それは動作しますが、それはエレガントではない1ビットです。

ここでのコードを示していplunkerリンクです: 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; 
    } 
    } 
} 
は、
関連する問題