ステータスバー

Framework7には、アプリのステータスバーとその動作をカスタマイズするのに役立つステータスバーコンポーネント（cordova-plugin-statusbarラッパー）が含まれています。

この機能は、cordova-plugin-statusbarがインストールされているcordova/capacitor環境でアプリが実行されている場合のみ使用できます。

ステータスバーアプリパラメータ

statusbarプロパティでアプリの初期化時にステータスバー関連のパラメータを渡すことで、デフォルトのステータスバーの動作を制御できます。

var app = new Framework7({
  statusbar: {
    iosOverlaysWebView: true,
  },
});

利用可能なすべてのパラメータのリストを見てみましょう。

パラメータ	型	デフォルト	説明
enabled	boolean	true	Framework7によるステータスバーの処理を有効にします。Framework7でステータスバーの動作を処理したくない場合は、無効にします。
iosBackgroundColor	string		アプリがiOSデバイスで実行されている場合の背景色を表す16進数文字列（`#RRGGBB`）。指定された場合は、CSSの値を上書きします。
androidBackgroundColor	string		アプリがAndroidデバイスで実行されている場合の背景色を表す16進数文字列（`#RRGGBB`）。指定された場合は、CSSの値を上書きします。
scrollTopOnClick	boolean	true	有効な場合、ステータスバーオーバーレイをクリックすると、ページコンテンツの上部がスクロールされます。
iosOverlaysWebView	boolean	true	アプリがiOSデバイスで実行されている場合、ステータスバーがWebViewをオーバーレイするか、オーバーレイしないようにします。
androidOverlaysWebView	boolean	true	アプリがAndroidデバイスで実行されている場合、ステータスバーがWebViewをオーバーレイするか、オーバーレイしないようにします。
iosTextColor	string	black	アプリがiOSデバイスで実行されている場合のステータスバーのテキストカラー。`white`または`black`を指定できます。
androidTextColor	string	black	アプリがAndroidデバイスで実行されている場合のステータスバーのテキストカラー。`white`または`black`を指定できます。

ステータスバーアプリメソッド

アプリの初期化後、ステータスバー関連のアプリメソッドを使用してステータスバーを制御できます。

app.statusbar.hide()	ステータスバーを非表示にします。
app.statusbar.show()	ステータスバーを表示します。
app.statusbar.overlaysWebView(overlays)	ステータスバーがWebViewをオーバーレイするか、オーバーレイしないようにします。 overlays - boolean - オーバーレイするかどうか
app.statusbar.setTextColor(color)	ステータスバーのテキストカラーを設定/変更します。 color - string - テキストカラー。`white`または`black`を指定できます。
app.statusbar.setBackgroundColor(hex)	ステータスバーの背景色を設定/変更します。 hex - string - 背景色を表す16進数文字列（`#RRGGBB`）
app.statusbar.isVisible()	システムステータスバーが表示されている場合は`true`を、表示されていない場合は`false`を返します。

このドキュメントを改善する

このページについて

ステータスバーアプリパラメータ
ステータスバーアプリメソッド