ステータスバー

Framework7 にはステータスバーコンポーネント (cordova-plugin-statusbarのラッパー) が付属しており、アプリのステータスバーとその動作をカスタマイズするのに役立ちます。

この機能は、cordova-plugin-statusbarがインストールされたcordova/phonegap環境下でアプリが動作している場合にのみ利用可能です。

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

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

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

ここでは、利用可能なパラメータの一覧を見てみましょう。

Parameter	Type	Default	Description
enabled	boolean	true	Framework7によるステータスバーの処理を有効にします。ステータスバーの動作をFramework7に任せたくない場合は、無効にしてください。
iosBackgroundColor	string		iOSデバイス上でアプリが動作しているときの背景色の16進文字列（`#RRGGBB`）。渡した場合は、CSSの値を上書きします。
androidBackgroundColor	string		Androidデバイス上で動作するアプリの場合、背景色付きの六角文字(`#RRGGBB`)。この値が渡されると、CSSの値が上書きされます。
scrollTopOnClick	boolean	true	有効にすると、ステータスバーのオーバーレイをクリックすると、トップページの内容が上にスクロールします。
iosOverlaysWebView	boolean	true	iOSデバイスで動作している場合、ステータスバーをWebViewにオーバーレイさせるかどうかを設定します。
androidOverlaysWebView	boolean	true	Android端末では、ステータスバーをWebViewにオーバーレイ表示するかしないかを設定します。
iosTextColor	string	black	iOS端末でアプリを起動しているときのステータスバーの文字色。白」または「黒」のいずれかです。
androidTextColor	string	black	Android端末でアプリを起動したときのステータスバーの文字色。白」または「黒」のいずれかになります。

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

app.statusbar.hide()	ステータスバーを隠す
app.statusbar.show()	ステータスバーの表示
app.statusbar.overlaysWebView(overlays)	ステータスバーをWebViewに重ねて表示したり、表示しなかったりします。 overlays - boolean - オーバーレイするかしないか。
app.statusbar.setTextColor(color)	ステータスバーのテキストカラーを設定/変更する color - string - テキストの色、`白`または`黒`にすることができます。
app.statusbar.setBackgroundColor(hex)	ステータスバーの背景色を設定・変更する hex - string - 背景色の16進文字列（`#RRGGBB`）。
app.statusbar.isVisible()	ステータスバーが表示されている場合はtrueを、表示されていない場合はfalseを返します。