Status Bar
The StatusBar API Provides methods for configuring the style of the Status Bar, along with showing or hiding it.
Usage
// Geting Status Bar current configurations
StatusBar.getInfo()
.then((result)=>{
console.log(result.visible);
console.log(result.style);
console.log(result.overlays);
console.log(result.color);
}).catch((err)=>{
console.log(err);
});
...
// Changing Status Bar background color
StatusBar.setBackgroundColor("red")
.then((result)=>{
console.log("Color changed");
}).catch((err)=>{
console.log(err);
});
...
// Changing Status Bar style
StatusBar.setStyle( StatusBar.StatusBarStyle.Light)
.then((result)=>{
console.log(result);
}).catch((err)=>{
console.log(err);
});
...
// Hide Status Bar
StatusBar.hide();
...
// Show Status Bar
StatusBar.show();// Geting Status Bar current configurations
window.StatusBar.getInfo()
.then((result) => {
console.log(result.visible);
console.log(result.style);
console.log(result.overlays);
console.log(result.color);
})
.catch((err) => {
console.log(err);
});
...
// Changing Status Bar background color
window.StatusBar.setBackgroundColor("red")
.then((result) => {
console.log("Color changed");
})
.catch((err) => {
console.log(err);
});
...
// Changing Status Bar style
window.StatusBar.setStyle(window.StatusBar.StatusBarStyle.Light)
.then((result) => {
console.log(result);
})
.catch((err) => {
console.log(err);
});
...
// Hide Status Bar
window.StatusBar.hide();
...
// Show Status Bar
window.StatusBar.show();// Geting Status Bar current configurations
window.StatusBar.getInfo()
.then((result) => {
console.log(result.visible);
console.log(result.style);
console.log(result.overlays);
console.log(result.color);
})
.catch((err) => {
console.log(err);
});
...
// Changing Status Bar background color
window.StatusBar.setBackgroundColor("red")
.then((result) => {
console.log("Color changed");
})
.catch((err) => {
console.log(err);
});
...
// Changing Status Bar style
window.StatusBar.setStyle(window.StatusBar.StatusBarStyle.Light)
.then((result) => {
console.log(result);
})
.catch((err) => {
console.log(err);
});
...
// Hide Status Bar
window.StatusBar.hide();
...
// Show Status Bar
window.StatusBar.show();// Geting Status Bar current configurations
(<any>window).StatusBar.getInfo()
.then((result) => {
console.log(result.visible);
console.log(result.style);
console.log(result.overlays);
console.log(result.color);
})
.catch((err) => {
console.log(err);
});
...
// Changing Status Bar background color
(<any>window).StatusBar.setBackgroundColor("red")
.then((result) => {
console.log("Color changed");
})
.catch((err) => {
console.log(err);
});
...
// Changing Status Bar style
(<any>window).StatusBar.setStyle((window).StatusBar.StatusBarStyle.Light)
.then((result) => {
console.log(result);
})
.catch((err) => {
console.log(err);
});
...
// Hide Status Bar
(<any>window).StatusBar.hide();
...
// Show Status Bar
(<any>window).StatusBar.show(); // Geting Status Bar current configurations
window.StatusBar.getInfo()
.then((result) => {
console.log(result.visible);
console.log(result.style);
console.log(result.overlays);
console.log(result.color);
})
.catch((err) => {
console.log(err);
});
...
// Changing Status Bar background color
window.StatusBar.setBackgroundColor("red")
.then((result) => {
console.log("Color changed");
})
.catch((err) => {
console.log(err);
});
...
// Changing Status Bar style
window.StatusBar.setStyle(window.StatusBar.StatusBarStyle.Light)
.then((result) => {
console.log(result);
})
.catch((err) => {
console.log(err);
});
...
// Hide Status Bar
window.StatusBar.hide();
...
// Show Status Bar
window.StatusBar.show();Table of Contents
Classes
StatusBar
setBackgroundColor
setBackgroundColor(options: StatusBarBackgroundColorOptions|string): Promise<void>
Set the background color of the status bar. Color can be hex color or one of named color: black, darkGray, lightGray, white, gray, red, green, blue, cyan, yellow, magenta, orange, purple, brown.
setOverlaysWebView
setOverlaysWebView(options: StatusBarOverlaysWebviewOptions|boolean): Promise<void>
Set whether or not the status bar should overlay the webview to allow usage of the space around a device "notch".
setStyle
setStyle(options: statusBarStyleOptions|string): Promise<void>
Set the current style of the status bar.
Interfaces
StatusBarInfoResult
interface StatusBarInfoResult {
color ?: string;
overlays ?: boolean;
style : StatusBarStyle;
visible : boolean;
}
StatusBarBackgroundColorOptions
interface StatusBarBackgroundColorOptions {
color : string;
}
StatusBarOverlaysWebviewOptions
interface StatusBarOverlaysWebviewOptions {
overlay : boolean;
}
StatusBarStyleOptions
interface StatusBarStyleOptions {
style : StatusBarStyle;
}
Enumeration
StatusBarStyle
StatusBarStyle {
// Light text for dark backgrounds.
Dark: "DARK"
// Dark text for light backgrounds.
Light: "LIGHT"
}