Le
StatusBarobjet fournit quelques fonctions pour personnaliser les iOS et Android StatusBar.
cordova plugin add cordova-plugin-statusbar
StatusBarOverlaysWebView (boolean, la valeur par défaut true). Sur iOS 7, faire la superposition de statusbar ou pas superposition le WebView au démarrage.
<preference name="StatusBarOverlaysWebView" value="true" />
StatusBarBackgroundColor (chaîne hexadécimale de couleur, par défaut, #000000). Sur iOS 7 et 5 Android, définir la couleur d‘arrière-plan de la barre d’État par une chaîne hexadécimale (#RRGGBB) au démarrage.
<preference name="StatusBarBackgroundColor" value="#000000" />
StatusBarStyle (style de barre de statut, par défaut, lightcontent). Sur iOS 7, définir le style de barre de statut. Par défaut les options disponibles, lightcontent, blacktranslucent, blackopaque.
<preference name="StatusBarStyle" value="lightcontent" />
Les lignes directrices 5 + Android spécifient à l‘aide d’une couleur différente pour la barre d‘État à votre application principale couleur (contrairement à la couleur uniforme statusbar de nombreuses applications iOS 7 +), donc vous pouvez définir la couleur de la barre d’état lors de l'exécution au lieu de cela via StatusBar.backgroundColorByHexString ou StatusBar.backgroundColorByName. Une façon de le faire serait :
if (cordova.platformId == 'android') { StatusBar.backgroundColorByHexString("#333"); }
Pendant l‘exécution, vous pouvez utiliser la fonction StatusBar.hide en bas, mais si vous souhaitez que la barre d’État pour être caché au démarrage de l'application, vous devez modifier le fichier Info.plist de votre application.
Ajouter/modifier ces deux attributs si n‘est pas présent. **"Barre d’État est initialement masqué"** la valeur " Yes" et “À l'apparence vue sur contrôleur statut bar” la valeur “Non”. Si vous modifiez manuellement sans Xcode, les clés et les valeurs sont :
<key>UIStatusBarHidden</key> <true/> <key>UIViewControllerBasedStatusBarAppearance</key> <false/>
Ce plugin définit objet StatusBar global.
Bien que dans la portée globale, il n‘est pas disponible jusqu’après la deviceready événement.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(StatusBar);
}
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>
Sur iOS 7, faire la statusbar superposition ou pas superposer le WebView.
StatusBar.overlaysWebView(true);
Sur iOS 7, la valeur false pour afficher la barre d‘État comme iOS 6. Définissez la couleur de style et d’arrière-plan en fonction de l'utilisation des autres fonctions.
StatusBar.overlaysWebView(true); StatusBar.overlaysWebView(false);
Utilisez la barre de statut par défaut (texte sombre, pour les arrière-plans lumineux).
StatusBar.styleDefault();
Utilisez la barre d'État lightContent (texte clair, des arrière-plans sombres).
StatusBar.styleLightContent();
Utilisez la barre d'État blackTranslucent (texte clair, des arrière-plans sombres).
StatusBar.styleBlackTranslucent();
Utilisez la barre d'État blackOpaque (texte clair, des arrière-plans sombres).
StatusBar.styleBlackOpaque();
Sur iOS 7, lorsque vous définissez StatusBar.statusBarOverlaysWebView sur false, vous pouvez définir la couleur d‘arrière-plan de la barre d’État par nom de couleur.
StatusBar.backgroundColorByName("red");
Les noms de couleurs prises en charge sont :
black, darkGray, lightGray, white, gray, red, green, blue, cyan, yellow, magenta, orange, purple, brown
Définit la couleur d‘arrière-plan de la barre d’État par une chaîne hexadécimale.
StatusBar.backgroundColorByHexString("#C0C0C0");
Propriétés de raccourci CSS sont également pris en charge.
StatusBar.backgroundColorByHexString("#333"); // => #333333
StatusBar.backgroundColorByHexString("#FAB"); // => #FFAABB
Sur iOS 7, lorsque vous définissez StatusBar.statusBarOverlaysWebView sur false, vous pouvez définir la couleur d‘arrière-plan de la barre d’État par une chaîne hexadécimale (#RRGGBB).
Sur WP7 et WP8, vous pouvez également spécifier des valeurs comme #AARRGGBB, où AA représente une valeur alpha
Masquer la barre d'État.
StatusBar.hide();
Affiche la barre d'État.
StatusBar.show();
Lire cette propriété afin de voir si la barre d'État est visible ou non.
if (StatusBar.isVisible) {
// do something
}