README.md 8.0 KB

cordova-plugin-statusbar

Build Status

StatusBar

StatusBarオブジェクトは、iOS と Android ステータス バーをカスタマイズするいくつかの機能を提供します。

インストール

cordova plugin add cordova-plugin-statusbar

基本設定

config.xml

  • StatusBarOverlaysWebView(ブール値、デフォルトは true)。IOS 7、起動時にステータスバー オーバーレイまたはないオーバーレイ、WebView を作る。

    <preference name="StatusBarOverlaysWebView" value="true" />
    
  • StatusBarBackgroundColor(カラー 16 進文字列、既定値は #000000)。IOS 7 とアンドロイド 5、16 進文字列 (#RRGGBB) 起動時にステータスバーの背景色を設定します。

    <preference name="StatusBarBackgroundColor" value="#000000" />
    
  • StatusBarStyle(ステータス バーのスタイル、既定値は lightcontent)。Ios 7、ステータス バーのスタイルを設定します。使用可能なオプションのデフォルト、lightcontent、blacktranslucent、blackopaque。

    <preference name="StatusBarStyle" value="lightcontent" />
    

Android の癖

Android のガイドライン 5 + 指定メイン アプリよりもステータスバーの異なる色を使用してStatusBar.backgroundColorByHexStringまたはStatusBar.backgroundColorByName経由で代わりに実行時にステータス バーの色を設定する場合がありますので (とは違って制服ステータスバー色多くの iOS 7 + アプリの) 色します。 それを行う方法の 1 つになります。

if (cordova.platformId == 'android') {
    StatusBar.backgroundColorByHexString("#333");
}

起動時に非表示

実行時に下に、StatusBar.hide 関数を使用できますが、StatusBar アプリ起動時に非表示にする場合は、アプリの Info.plist ファイルを変更する必要があります。

これら 2 つの属性の追加/編集存在しない場合。 「ステータス バーが非表示最初」 "YES"を設定し、 「ビュー コント ローラー ベースのステータス バーの外観」 "NO"にします。 Xcode せず手動で編集する、キーと値は。

<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

メソッド

このプラグインでは、グローバル StatusBar オブジェクトを定義します。

グローバル スコープではあるがそれがないまで deviceready イベントの後です。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(StatusBar);
}
  • StatusBar.overlaysWebView
  • StatusBar.styleDefault
  • StatusBar.styleLightContent
  • StatusBar.styleBlackTranslucent
  • StatusBar.styleBlackOpaque
  • StatusBar.backgroundColorByName
  • StatusBar.backgroundColorByHexString
  • StatusBar.hide
  • StatusBar.show

プロパティ

  • StatusBar.isVisible

アクセス許可

config.xml

        <feature name="StatusBar">
            <param name="ios-package" value="CDVStatusBar" onload="true" />
        </feature>

StatusBar.overlaysWebView

IOS 7、statusbar オーバーレイまたはない WebView をオーバーレイします。

StatusBar.overlaysWebView(true);

解説

IOS 7、iOS の 6 のように表示されるステータスバーを false に設定します。他の関数の使用に合わせてスタイルや背景色を設定します。

サポートされているプラットフォーム

  • iOS

簡単な例

StatusBar.overlaysWebView(true);
StatusBar.overlaysWebView(false);

StatusBar.styleDefault

既定ステータス バー (暗いテキスト、淡色の背景) を使用します。

StatusBar.styleDefault();

サポートされているプラットフォーム

  • iOS
  • Windows Phone 7
  • Windows Phone 8
  • Windows Phone 8.1

StatusBar.styleLightContent

LightContent ステータスバー (暗い背景の明るいテキスト) を使用します。

StatusBar.styleLightContent();

サポートされているプラットフォーム

  • iOS
  • Windows Phone 7
  • Windows Phone 8
  • Windows Phone 8.1

StatusBar.styleBlackTranslucent

BlackTranslucent ステータスバー (暗い背景の明るいテキスト) を使用します。

StatusBar.styleBlackTranslucent();

サポートされているプラットフォーム

  • iOS
  • Windows Phone 7
  • Windows Phone 8
  • Windows Phone 8.1

StatusBar.styleBlackOpaque

BlackOpaque ステータスバー (暗い背景の明るいテキスト) を使用します。

StatusBar.styleBlackOpaque();

サポートされているプラットフォーム

  • iOS
  • Windows Phone 7
  • Windows Phone 8
  • Windows Phone 8.1

StatusBar.backgroundColorByName

Ios 7、StatusBar.statusBarOverlaysWebView を false に設定する場合はステータスバーの背景色の色の名前によって設定できます。

StatusBar.backgroundColorByName("red");

サポートされている色の名前は次のとおりです。

black, darkGray, lightGray, white, gray, red, green, blue, cyan, yellow, magenta, orange, purple, brown

サポートされているプラットフォーム

  • iOS
  • Android 5+
  • Windows Phone 7
  • Windows Phone 8
  • Windows Phone 8.1

StatusBar.backgroundColorByHexString

16 進文字列をステータス バーの背景色を設定します。

StatusBar.backgroundColorByHexString("#C0C0C0");

速記の CSS プロパティもサポートされています。

StatusBar.backgroundColorByHexString("#333"); // => #333333
StatusBar.backgroundColorByHexString("#FAB"); // => #FFAABB

Ios 7、StatusBar.statusBarOverlaysWebView を false に設定する場合はステータスバーの背景色を 16 進文字列 (#RRGGBB) で設定できます。

WP7 と WP8 も指定できます値 #AARRGGBB, AA は、アルファ値として

サポートされているプラットフォーム

  • iOS
  • Android 5+
  • Windows Phone 7
  • Windows Phone 8
  • Windows Phone 8.1

StatusBar.hide

ステータスバーを隠します。

StatusBar.hide();

サポートされているプラットフォーム

  • iOS
  • アンドロイド
  • Windows Phone 7
  • Windows Phone 8
  • Windows Phone 8.1

StatusBar.show

ステータス バーが表示されます。

StatusBar.show();

サポートされているプラットフォーム

  • iOS
  • アンドロイド
  • Windows Phone 7
  • Windows Phone 8
  • Windows Phone 8.1

StatusBar.isVisible

このプロパティ、ステータスバーが表示されるかどうかをお読みください。

if (StatusBar.isVisible) {
    // do something
}

サポートされているプラットフォーム

  • iOS
  • アンドロイド
  • Windows Phone 7
  • Windows Phone 8
  • Windows Phone 8.1