2016-11-01 3 views
1

私のアプリでは多くのページでLoadingControllerを使用しています。私はデザインとブランドで動作するようにカスタマイズしたいと思っています。私は変更したい:ionic2 - 画面読み込みの色を変更する

  1. 背景色。
  2. テキストを含む白いボックスを削除します。
  3. 私のスピナーを使用してください。

私は背景がion-backdropにあり、(それがiOSのであれば)、ホワイトボックスコンテナはloading-wrapperloading-iosである見つけます。 だから私はapp.scssのコードを追加:

.ion-backdrop{ 
    background: rgba(0,20,0,.5); 
} 
.loading-ios, .loading-wrapper{ 
    background: rgba(0,0,0,0); 
} 

を何も起こりません。どうやってやるの?

私たち自身のグラフィックでスピナーを変更する方法は?

アップデート01:

presentLoadingCustom() { 
    let loading = this.loadingCtrl.create({ 
    spinner: 'hide', 
    // showBackdrop: false, 
    cssClass:` 
    .custom-spinner-container{ 
     background:#445566; 
    } 
    `, 
    content: ` 
     <div class="custom-spinner-container"> 
     <div class="custom-spinner-box">loading somethung</div> 
     </div> 
     `, 
    duration: 20000 
    }); 

    loading.onDidDismiss(() => { 
    console.log('Dismissed loading'); 
    }); 

    loading.present(); 
} 

をしかし、私はエラーを得た:

この中でcssを行うにはどのように

Error in ./LoadingCmp class LoadingCmp_Host - inline template:0:0 caused by: The string contains invalid characters.

私はので、私が試したcreate()ためcssClassの選択肢があるがわかりました場合?

答えて

2

私はそれを把握する:

あなたはtheme/variables.scssionic変数を上書きすることができます。 In theme/variables.scss

$backdrop-color:#002559;//<-- I add in this. 

これは機能します。 this linkに移動して、変更するすべての変数をチェックアウトします。

関連する問題