スポンサー
Support Framework7

ステータスバー

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

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

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

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

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

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

    ParameterTypeDefaultDescription
    enabledbooleantrueFramework7によるステータスバーの処理を有効にします。ステータスバーの動作をFramework7に任せたくない場合は、無効にしてください。
    iosBackgroundColorstringiOSデバイス上でアプリが動作しているときの背景色の16進文字列(#RRGGBB)。渡した場合は、CSSの値を上書きします。
    androidBackgroundColorstringAndroidデバイス上で動作するアプリの場合、背景色付きの六角文字(#RRGGBB)。この値が渡されると、CSSの値が上書きされます。
    scrollTopOnClickbooleantrue有効にすると、ステータスバーのオーバーレイをクリックすると、トップページの内容が上にスクロールします。
    iosOverlaysWebViewbooleantrue

    iOSデバイスで動作している場合、ステータスバーをWebViewにオーバーレイさせるかどうかを設定します。

    androidOverlaysWebViewbooleantrue

    Android端末では、ステータスバーをWebViewにオーバーレイ表示するかしないかを設定します。

    iosTextColorstringblack

    iOS端末でアプリを起動しているときのステータスバーの文字色。白」または「黒」のいずれかです。

    androidTextColorstringblack

    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を返します。