102  /  105

BXMobileApp.UI.NotificationBar - локальные уведомления

Просмотров: 10140
Дата последнего изменения: 24.07.2020

  Описание

Локальные уведомления используются для оповещения пользователя о каких-либо событиях, о протекании каких-либо процессов. Например, в интернет-магазине можно сообщать пользователю о смене статуса заказа, в чате можно показать новое сообщение от пользователя или оповестить о проблемах соединения с сервером.

  Синтаксис

BXMobileApp.UI.NotificationBar(params);
АргументыОписание

params

Параметры уведомления:

  • message - текст сообщения;
  • contentType - тип текста сообщения:
    • html - переданный текст будет интерпретироваться как html (в режиме html распознаются только самые простейшие теги);
    • text - переданный текст будет интерпретироваться как text.
  • groupId - идентификатор группы;
  • color - цвет фона в формате hex (поддерживается альфа-канал);
  • textColor - цвет текста в формате hex (поддерживается альфа-канал);
  • loaderColor - цвет загрузчика в формат hex (поддерживается альфа-канал);
  • bottomBorderColor - цвет нижней границы панели уведомления формат hex (поддерживается альфа-канал);
  • indicatorHeight - высота иконки уведомления;
  • maxLines - максимальное число строк уведомления;
  • useLoader - флаг отображения загрузчика:
    • true - загрузчик отображается;
    • false - загрузчик не отображается.
  • imageURL - ссылка на изображение, которое будет использовано в качестве иконки;
  • iconName - название изображения в ресурсах приложения, которое будет использоваться в качестве иконки;
  • imageBorderRadius - радиус скругления изображения индикатора в процентах;
  • align - горизонтальное выравнивание контента уведомления:
    • left - по левому краю;
    • center - по центру.
  • autoHideTimeout - тайм-аут автоматического закрытия уведомления в миллисекундах;
  • hideOnTap - флаг закрытия панели по тапу (прикосновению). Если true, то при прикосновении к уведомлению оно скроется;
  • onHideAfter - обработчик, который будет вызван после закрытия уведомления:
    { 
    "id" : "<идентификатор уведомления>", 
    "groupId" : "<группа>", 
    "isAutoHide" : "<флаг скрытия по таймауту>", 
    "extra" : <данный ключ extra>
    }
    
  • onTap - обработчик, который будет вызван, если пользователь нажмет на уведомление. Первым параметром в обработчик передается объект следующего формата:
    { 
    "id" : "<идентификатор уведомления>", 
    "groupId" : "<группа>", 
    "extra" : <данный ключ extra>
    }
    
  • extra - дополнительные данные, которые будут переданы в обработчики на onTap и onHideAfter. Произвольный js-объект.
  • isGlobal - флаг глобального уведомления. Глобальные уведомление всегда отображаются на видимом пользователем экране. Локальные уведомления отображаются только на странице, которая инициировала показ.
  • id - идентификатор уведомления.

Важно! Параметр groupId служит для объединения уведомлений в одну группу. Уведомления, принадлежащие одной группе, не могут одновременно отображаться на экране. Соответственно, если было создано уведомление А и Б с одинаковым groupId, то при показе уведомления А будет автоматически скрыто уведомление Б, если оно отображается в данный момент.

  Пример. Уведомление с лоудером

// Уведомление с лоудером

var notifyBar = new BXMobileApp.UI.NotificationBar(
{
	message: ‘Уведомление с лоудером’,
	useLoader: true,
	align:"center",
color: "#76088c",
	autoHideTimeout:2000,
	hideOnTap:true,
});
notifyBar.show(); //show - функция отображения панели уведомления.
notifyBar.hide(); //hide - функция скрытия панели уведомления.

  Видео

iOS

  Пример. Многострочное уведомление с картинкой

// Многострочное уведомление с картинкой

new BXMobileApp.UI.NotificationBar(
{
	message:  ‘Демо нотификационной панели. Панель можно увеличить, уменьшить, добавить иконку, картинку, загрузчик, поменять цвет фона и текста. Также можно изменить прозрачность от 0 до 100%’,
	maxLines: 10,
	contentType: 'html',
	indicatorHeight:60,
	autoHideTimeout:10000,
	hideOnTap:true,
	textColor:"#ffffff",
	color:"#cc000000",
	imageURL: dataPath+"/img/addition-icon.png"

}).show();

  Видео

iOS


0
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии