web-dev-qa-db-fra.com

Comment changer la couleur du texte de la barre supérieure en blanc dans mon Ionic App?

J'ai changé l'en-tête en une couleur plus foncée en utilisant ceci:

<ion-nav-bar class="bar-royal">

Lorsque je l'exécute sur iOS, le texte de la barre d'état (heure, support, batterie, etc.) en haut est noir et difficile à voir sur le fond sombre. Comment rendre ce texte blanc?

Black text on dark header color

ionic-frameworkionic
15
Ira Herman

Avec le plugin statusbar et ngCordova c'est assez simple:

var app = angular.module('ionicApp', ['ionic', 'ngCordova']);

app.run(function($cordovaStatusbar) {
  $cordovaStatusbar.overlaysWebView(true);

  $cordovaStatusBar.style(1); //Light
  $cordovaStatusBar.style(2); //Black, transulcent
  $cordovaStatusBar.style(3); //Black, opaque
});

Jetez un œil à l'article complet ici: http://learn.ionicframework.com/formulas/customizing-the-status-bar/

MISE À JOUR - Sans ngCordova:

Par défaut Ionic est livré avec le plugin de la barre d'état installé. Si vous avez cette instruction à l'intérieur, vous exécutez probablement votre projet:

if(window.StatusBar) {
  StatusBar.styleDefault();
}

Alors le code devient:

var app = angular.module('ionicApp', ['ionic']);

app.run(function() {
    if(window.StatusBar) {
      StatusBar.overlaysWebView(true);
      StatusBar.style(1); //Light
      StatusBar.style(2); //Black, transulcent
      StatusBar.style(3); //Black, opaque
    }
});

MISE À JOUR II

Avec une nouvelle version 2.x de cordova-plugin-statusbar, La méthode StatusBar.style() a été remplacée par ces nouvelles méthodes:

StatusBar.styleLightContent();
StatusBar.styleBlackTranslucent();
StatusBar.styleBlackOpaque();

Consultez la documentation du plugin

33
manzapanza

Dans ionic 4 avec angular app, nous pouvons changer la couleur de la barre d'état ainsi que la couleur de son texte en suivant le code comment changer le texte de la barre d'état) couleur

this.platform.ready().then(() => {
  this.splashScreen.hide();
  this.statusBar.overlaysWebView(true);
  this.statusBar.styleDefault();
});
0
Shashank Singh