README.md 6.66 KB
Newer Older
李晓兵's avatar
李晓兵 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276
<!---
# license: Licensed to the Apache Software Foundation (ASF) under one
#         or more contributor license agreements.  See the NOTICE file
#         distributed with this work for additional information
#         regarding copyright ownership.  The ASF licenses this file
#         to you under the Apache License, Version 2.0 (the
#         "License"); you may not use this file except in compliance
#         with the License.  You may obtain a copy of the License at
#
#           http://www.apache.org/licenses/LICENSE-2.0
#
#         Unless required by applicable law or agreed to in writing,
#         software distributed under the License is distributed on an
#         "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
#         KIND, either express or implied.  See the License for the
#         specific language governing permissions and limitations
#         under the License.
-->

# cordova-plugin-statusbar

[![Build Status](https://travis-ci.org/apache/cordova-plugin-statusbar.svg)](https://travis-ci.org/apache/cordova-plugin-statusbar)

# StatusBar

> `StatusBar`物件提供了一些功能,自訂的 iOS 和 Android 狀態列。

## 安裝

    cordova plugin add cordova-plugin-statusbar
    

## 首選項

#### config.xml

  * **StatusBarOverlaysWebView**(布林值,預設值為 true)。在 iOS 7,使狀態列覆蓋或不覆蓋 web 視圖在啟動時。
    
        <preference name="StatusBarOverlaysWebView" value="true" />
        

  * **StatusBarBackgroundColor**(顏色十六進位字串,預設值為 #000000)。IOS 7 和 Android 5,由十六進位字串 (#RRGGBB) 在啟動時設置狀態列的背景色。
    
        <preference name="StatusBarBackgroundColor" value="#000000" />
        

  * **狀態列**(狀態列樣式,預設值為 lightcontent)。在 iOS 7,設置的狀態橫條圖樣式。可用的選項預設,lightcontent,blacktranslucent,blackopaque。
    
        <preference name="StatusBarStyle" value="lightcontent" />
        

### Android 的怪癖

Android 的 5 + 準則指定使用不同的顏色比您主要的應用程式狀態欄顏色 (不像很多 iOS 7 + 應用程式的統一狀態列顏色),所以你可能想要設置在運行時顯示狀態列顏色而不是通過`StatusBar.backgroundColorByHexString``StatusBar.backgroundColorByName`。 一個的方式做到這一點將是:

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

## 在啟動時隱藏

在運行時期間,你可以使用 StatusBar.hide 函數下面,但如果你想要顯示狀態列隱藏在應用程式啟動時,你必須修改你的應用程式的 Info.plist 檔。

添加編輯這兩個屬性,如果不存在。 將**"狀態列最初隱藏"**設置為**"YES"****"視圖基於控制器的狀態列外觀"**設置為**"否"**。 如果您手動編輯它沒有 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,使狀態列覆蓋或不覆蓋 web 視圖。

    StatusBar.overlaysWebView(true);
    

## 說明

在 iOS 7,設置為 false,使狀態列出現像 iOS 6。設置樣式和背景顏色,適合使用其他函數。

## 支援的平臺

  * 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

由十六進位字串設置狀態列的背景色。

    StatusBar.backgroundColorByHexString("#C0C0C0");
    

此外支援 CSS 速記屬性。

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

在 iOS 7,當將 StatusBar.statusBarOverlaysWebView 設置為 false,您可以設置狀態列的背景色由十六進位字串 (#RRGGBB)。

WP7 和 WP8 您還可以指定值為 #AARRGGBB,其中 AA 是 Alpha 值

## 支援的平臺

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

# StatusBar.hide

隱藏狀態列。

    StatusBar.hide();
    

## 支援的平臺

  * iOS
  * Android 系統
  * Windows Phone 7
  * Windows Phone 8
  * Windows Phone 8.1

# StatusBar.show

顯示狀態列。

    StatusBar.show();
    

## 支援的平臺

  * iOS
  * Android 系統
  * Windows Phone 7
  * Windows Phone 8
  * Windows Phone 8.1

# StatusBar.isVisible

讀取此屬性,以查看狀態列是否可見。

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

## 支援的平臺

  * iOS
  * Android 系統
  * Windows Phone 7
  * Windows Phone 8
  * Windows Phone 8.1