cordova-plugin-statusbar

StatusBar

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

:warning: Сообщите о проблемах на форуме отслеживания проблем Apache Cordova

Установка

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

cordova plugin add cordova-plugin-statusbar

Более старые версии cordova по-прежнему могут устанавливаться с помощью устаревшего id

cordova plugin add org.apache.cordova.statusbar

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

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

Настройки

config.xml

• StatusBarOverlaysWebView (boolean, по умолчанию 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" />
  

• StatusBarDefaultScrollToTop (boolean, по умолчанию false). В iOS 7 разрешает Cordova WebView использовать стандартное поведение прокрутки к верху. По умолчанию false, чтобы вы могли прослушивать событие "statusTap" (описанное ниже) и настраивать поведение самостоятельно.

  <preference name="StatusBarDefaultScrollToTop" value="false" />
  

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

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

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

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

Во время выполнения вы можете использовать функцию StatusBar.hide ниже, но если вы хотите скрыть StatusBar при запуске приложения, вам необходимо изменить файл 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

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
• Android 6+
• Windows Phone 7
• Windows Phone 8
• Windows Phone 8.1

StatusBar.styleLightContent

Используйте статусную строку lightContent (светлый текст на тёмном фоне).

StatusBar.styleLightContent();

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

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

StatusBar.styleBlackTranslucent

Используйте статусную строку blackTranslucent (светлый текст на тёмном фоне).

StatusBar.styleBlackTranslucent();

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

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

StatusBar.styleBlackOpaque

Используйте статусную строку blackOpaque (светлый текст на тёмном фоне).

StatusBar.styleBlackOpaque();

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

• iOS
• Android 6+
• 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