メインコンテンツまでスキップ
バージョン: v2

Status Bar

The StatusBar API Provides methods for configuring the style of the Status Bar, along with showing or hiding it.

iOS Note

This plugin requires "View controller-based status bar appearance" (UIViewControllerBasedStatusBarAppearance) set to YES in Info.plist. Read about Configuring iOS for help.

The status bar visibility defaults to visible and the style defaults to StatusBarStyle.Light. You can change these defaults by adding UIStatusBarHidden and or UIStatusBarStyle in the Info.plist.

setBackgroundColor and setOverlaysWebView are currently not supported on iOS devices.

Events

  • statusTap

Example

// Events (iOS only)
window.addEventListener('statusTap', function () {
console.log('statusbar tapped');
});

//API
import { Plugins, StatusBarStyle } from '@capacitor/core';

const { StatusBar } = Plugins;

export class StatusBarExample {
isStatusBarLight = true;

changeStatusBar() {
StatusBar.setStyle({
style: this.isStatusBarLight ? StatusBarStyle.Dark : StatusBarStyle.Light,
});
this.isStatusBarLight = !this.isStatusBarLight;

// Display content under transparent status bar (Android only)
StatusBar.setOverlaysWebView({
overlay: true,
});
}

hideStatusBar() {
StatusBar.hide();
}

showStatusBar() {
StatusBar.show();
}
}

API

setStyle(...)

setStyle(options: StatusBarStyleOptions) => Promise<void>

Set the current style of the status bar

ParamType
options
StatusBarStyleOptions

setBackgroundColor(...)

setBackgroundColor(options: StatusBarBackgroundColorOptions) => Promise<void>

Set the background color of the status bar

ParamType
options
StatusBarBackgroundColorOptions

show(...)

show(options?: StatusBarAnimationOptions) => Promise<void>

Show the status bar

ParamType
options
StatusBarAnimationOptions

hide(...)

hide(options?: StatusBarAnimationOptions) => Promise<void>

Hide the status bar

ParamType
options
StatusBarAnimationOptions

getInfo()

getInfo() => Promise<StatusBarInfoResult>

Get info about the current state of the status bar

Returns:

Promise<StatusBarInfoResult>


setOverlaysWebView(...)

setOverlaysWebView(options: StatusBarOverlaysWebviewOptions) => Promise<void>

Set whether or not the status bar should overlay the webview to allow usage of the space around a device "notch"

ParamType
options
StatusBarOverlaysWebviewOptions

Interfaces

StatusBarStyleOptions

PropType
style
StatusBarStyle

StatusBarBackgroundColorOptions

PropType
colorstring

StatusBarAnimationOptions

PropTypeDescription
animation
StatusBarAnimation
iOS only. The type of status bar animation used when showing or hiding.

StatusBarInfoResult

PropType
visibleboolean
style
StatusBarStyle
colorstring
overlaysboolean

StatusBarOverlaysWebviewOptions

PropType
overlayboolean

Enums

StatusBarStyle

MembersValueDescription
Dark"DARK"Light text for dark backgrounds.
Light"LIGHT"Dark text for light backgrounds.

StatusBarAnimation

MembersValueDescription
None"NONE"No animation during show/hide.
Slide"SLIDE"Slide animation during show/hide.
Fade"FADE"Fade animation during show/hide.