wuyi 36dc8d1c35 feat | 5 years ago | |
---|---|---|
.. | ||
doc | 5 years ago | |
src | 5 years ago | |
tests | 5 years ago | |
types | 5 years ago | |
www | 5 years ago | |
CONTRIBUTING.md | 5 years ago | |
LICENSE | 5 years ago | |
NOTICE | 5 years ago | |
README.md | 5 years ago | |
RELEASENOTES.md | 5 years ago | |
package.json | 5 years ago | |
plugin.xml | 5 years ago |
title: Statusbar
AppVeyor | Travis CI |
---|---|
The
StatusBar
object provides some functions to customize the iOS and Android StatusBar.
:warning: Report issues on the Apache Cordova issue tracker
This installation method requires cordova 5.0+
cordova plugin add cordova-plugin-statusbar
Older versions of cordova can still install via the deprecated id
cordova plugin add org.apache.cordova.statusbar
It is also possible to install via repo url directly ( unstable )
cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
StatusBarOverlaysWebView (boolean, defaults to true). On iOS 7, make the statusbar overlay or not overlay the WebView at startup.
<preference name="StatusBarOverlaysWebView" value="true" />
StatusBarBackgroundColor (color hex string, no default value). On iOS 7, set the background color of the statusbar by a hex string (#RRGGBB) at startup. If this value is not set, the background color will be transparent.
<preference name="StatusBarBackgroundColor" value="#000000" />
StatusBarStyle (status bar style, defaults to lightcontent). On iOS 7, set the status bar style. Available options default, lightcontent, blacktranslucent, blackopaque.
<preference name="StatusBarStyle" value="lightcontent" />
StatusBarDefaultScrollToTop (boolean, defaults to false). On iOS 7, allows the Cordova WebView to use default scroll-to-top behavior. Defaults to false so you can listen to the "statusTap" event (described below) and customize the behavior instead.
<preference name="StatusBarDefaultScrollToTop" value="false" />
The Android 5+ guidelines specify using a different color for the statusbar than your main app color (unlike the uniform statusbar color of many iOS 7+ apps), so you may want to set the statusbar color at runtime instead via StatusBar.backgroundColorByHexString
or StatusBar.backgroundColorByName
. One way to do that would be:
if (cordova.platformId == 'android') {
StatusBar.backgroundColorByHexString("#333");
}
During runtime you can use the StatusBar.hide function below, but if you want the StatusBar to be hidden at app startup, you must modify your app's Info.plist file.
Add/edit these two attributes if not present. Set "Status bar is initially hidden" to "YES" and set "View controller-based status bar appearance" to "NO". If you edit it manually without Xcode, the keys and values are:
<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
This plugin defines global StatusBar
object.
Although in the global scope, it is not available until after the deviceready
event.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(StatusBar);
}
On iOS 7, make the statusbar overlay or not overlay the WebView.
StatusBar.overlaysWebView(true);
On iOS 7, set to false to make the statusbar appear like iOS 6. Set the style and background color to suit using the other functions.
StatusBar.overlaysWebView(true);
StatusBar.overlaysWebView(false);
Use the default statusbar (dark text, for light backgrounds).
StatusBar.styleDefault();
Use the lightContent statusbar (light text, for dark backgrounds).
StatusBar.styleLightContent();
Use the blackTranslucent statusbar (light text, for dark backgrounds).
StatusBar.styleBlackTranslucent();
Use the blackOpaque statusbar (light text, for dark backgrounds).
StatusBar.styleBlackOpaque();
On iOS 7, when you set StatusBar.statusBarOverlaysWebView to false, you can set the background color of the statusbar by color name.
StatusBar.backgroundColorByName("red");
Supported color names are:
black, darkGray, lightGray, white, gray, red, green, blue, cyan, yellow, magenta, orange, purple, brown
Sets the background color of the statusbar by a hex string.
StatusBar.backgroundColorByHexString("#C0C0C0");
CSS shorthand properties are also supported.
StatusBar.backgroundColorByHexString("#333"); // => #333333
StatusBar.backgroundColorByHexString("#FAB"); // => #FFAABB
On iOS 7, when you set StatusBar.statusBarOverlaysWebView to false, you can set the background color of the statusbar by a hex string (#RRGGBB).
On WP7 and WP8 you can also specify values as #AARRGGBB, where AA is an alpha value
Hide the statusbar.
StatusBar.hide();
Shows the statusbar.
StatusBar.show();
Read this property to see if the statusbar is visible or not.
if (StatusBar.isVisible) {
// do something
}
Listen for this event to know if the statusbar was tapped.
window.addEventListener('statusTap', function() {
// scroll-up with document.body.scrollTop = 0; or do whatever you want
});