cordova-plugin-statusbar

Панель состояния

Объект StatusBar предоставляет некоторые функции для настройки панели состояния iOS и Android.

:warning: Сообщите о проблемах на следящем за ошибками Apache Cordova

Установка

Этот метод установки требует cordova 5.0+

cordova plugin add cordova-plugin-statusbar

Старые версии cordova всё ещё могут быть установлены через устаревший идентификатор

cordova plugin add org.apache.cordova.statusbar

Также можно установить напрямую через URL репозитория (нестабильно)

cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

Настройки

config.xml

• StatusBarOverlaysWebView (булево, по умолчанию true). В iOS 7 перекрывает ли статус-бар WebView при запуске.

  <preference name="StatusBarOverlaysWebView" value="true" />
  

• StatusBarBackgroundColor (строка цвета в шестнадцатеричном формате, значение по умолчанию отсутствует). В iOS 7 устанавливает цвет фона панели состояния в шестнадцатеричном формате (#RRGGBB) при запуске. Если это значение не задано, цвет фона будет прозрачным.

  <preference name="StatusBarBackgroundColor" value="#000000" />
  

• StatusBarStyle (стиль панели состояния, по умолчанию lightcontent). В iOS 7 устанавливает стиль панели состояния. Доступные варианты: default, lightcontent, blacktranslucent, blackopaque.

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

Особенности Android

Руководство Android 5+ рекомендует использовать для панели состояния другой цвет, чем основной цвет вашего приложения (в отличие от однородного цвета панели состояния во многих приложениях iOS 7+), поэтому вы можете установить цвет панели состояния во время выполнения, используя StatusBar.backgroundColorByHexString или StatusBar.backgroundColorByName. Один из способов сделать это:

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

Скрытие при запуске

Во время выполнения вы можете использовать функцию StatusBar.hide, но если вы хотите скрыть панель состояния при запуске приложения, вам необходимо изменить файл Info.plist вашего приложения.

Добавьте/измените эти два атрибута, если они отсутствуют. Установите "Панель состояния по умолчанию скрыта" на "ДА" и установите "Внешний вид панели состояния, основанный на контроллере представления" на "НЕТ". Если вы редактируете его вручную без 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

События

• statusTap

Разрешения

config.xml

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

StatusBar.overlaysWebView

В iOS 7 перекрывает или не перекрывает статус-бар WebView.

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 — значение альфа-канала

Поддерживаемые платформы

• 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

statusTap

Отслеживайте это событие, чтобы узнать, была ли нажата панель состояния.

window.addEventListener('statusTap', function() {
    // scroll-up with document.body.scrollTop = 0; or do whatever you want
});

Поддерживаемые платформы

• iOS