メインコンテンツへスキップ
バージョン: v8

@capacitor/status-bar

StatusBar API は、ステータスバーのスタイルを設定したり、表示/非表示を切り替えたりするためのメソッドを提供します。

インストール​

npm install @capacitor/status-bar
npx cap sync

iOS の注意点​

このプラグインは、`Info.plist` で「View controller-based status bar appearance」（`UIViewControllerBasedStatusBarAppearance`）が `YES` に設定されている必要があります。詳細については、iOS の構成を参照してください。

ステータスバーの表示はデフォルトで表示され、スタイルはデフォルトで `Style.Default` に設定されています。これらのデフォルトを変更するには、`Info.plist` に `UIStatusBarHidden` または `UIStatusBarStyle` を追加します。

`setBackgroundColor` および `setOverlaysWebView` は現在 iOS デバイスではサポートされていません。

例​

import { StatusBar, Style } from '@capacitor/status-bar';

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

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

const setStatusBarStyleDark = async () => {
  await StatusBar.setStyle({ style: Style.Dark });
};

const setStatusBarStyleLight = async () => {
  await StatusBar.setStyle({ style: Style.Light });
};

const hideStatusBar = async () => {
  await StatusBar.hide();
};

const showStatusBar = async () => {
  await StatusBar.show();
};

API​

setStyle(...)​

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

ステータスバーの現在のスタイルを設定します。

パラメーター型
optionsStyleOptions

導入 1.0.0

setBackgroundColor(...)​

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

ステータスバーの背景色を設定します。

このメソッドは Android でのみサポートされています。

パラメーター型
optionsBackgroundColorOptions

導入 1.0.0

show(...)​

show(options?: AnimationOptions | undefined) => Promise<void>

ステータスバーを表示します。iOS では、ステータスバーが最初に非表示で、初期スタイルが `UIStatusBarStyleLightContent` に設定されている場合、最初の show 呼び出しで、テキストが最初は暗く表示され、その後明るく遷移するアニメーションの不具合が発生する可能性があります。最初の呼び出しでは、アニメーションとして `Animation.None` を使用することをお勧めします。

パラメーター型
optionsAnimationOptions

導入 1.0.0

hide(...)​

hide(options?: AnimationOptions | undefined) => Promise<void>

ステータスバーを非表示にします。

パラメーター型
optionsAnimationOptions

導入 1.0.0

getInfo()​

getInfo() => Promise<StatusBarInfo>

ステータスバーの現在の状態に関する情報を取得します。

戻り値: `Promise<StatusBarInfo>`

導入 1.0.0

setOverlaysWebView(...)​

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

ステータスバーが WebView にオーバーレイして、その下のスペースを使用できるようにするかどうかを設定します。

このメソッドは Android でのみサポートされています。

パラメーター型
optionsSetOverlaysWebViewOptions

導入 1.0.0

インターフェース​

StyleOptions​

プロパティ型説明導入
styleStyleステータスバーのテキストのスタイル。1.0.0

BackgroundColorOptions​

プロパティ型説明導入
colorstringステータスバーの色が設定される 16 進数カラー。このオプションは Android でのみサポートされています。1.0.0

AnimationOptions​

プロパティ型説明デフォルト導入
animationAnimation表示/非表示時に使用されるステータスバーのアニメーションタイプ。このオプションは iOS でのみサポートされています。Animation.Fade1.0.0

StatusBarInfo​

プロパティ型説明導入
visiblebooleanステータスバーが表示されているかどうか。1.0.0
styleStyleステータスバーの現在のスタイル。1.0.0
colorstringステータスバーの現在の色。このオプションは Android でのみサポートされています。1.0.0
overlaysbooleanステータスバーがオーバーレイされているかどうか。このオプションは Android でのみサポートされています。1.0.0

SetOverlaysWebViewOptions​

プロパティ型説明導入
overlaybooleanステータスバーをオーバーレイするかどうか。1.0.0

列挙型​

Style​

メンバー値説明導入
Dark'DARK'暗い背景用の明るいテキスト。1.0.0
Light'LIGHT'明るい背景用の暗いテキスト。1.0.0
デフォルト'DEFAULT'スタイルはデバイスの外観に基づいています。デバイスがダークモードを使用している場合、ステータスバーのテキストは明るくなります。デバイスがライトモードを使用している場合、ステータスバーのテキストは暗くなります。Android では、デフォルトはアプリが起動されたときの状態になります。1.0.0

Animation​

メンバー値説明導入
None'NONE'表示/非表示中のアニメーションなし。1.0.0
Slide'SLIDE'表示/非表示中のスライドアニメーション。iOS 15 以降では動作しません。1.0.0
Fade'FADE'表示/非表示中のフェードアニメーション。1.0.0

コンテンツ

このページを編集