Начало работы

Javascript-расширение ui.notification позволяет показывать нотификации на странице.

Подключение на PHP-странице

\Bitrix\Main\UI\Extension::load("ui.notification");

Использование в JavaScript

Показать нотификацию в позиции по умолчанию.

BX.UI.Notification.Center.notify({
	content: "Успешно удален файл отчет-за-февраль.docs"
});

Показать сообщение слева снизу на странице.

BX.UI.Notification.Center.notify({
	content: "Нотификация слева снизу",
	position: "bottom-left"
});

В качестве содержимого нотификации можно указать DOM-элемент.

BX.UI.Notification.Center.notify({
	content: BX.create("div", {
		style: {
			fontSize: "20px"
		},
		html: "Hello"
	})
});

Нотификация с действием "Отмены".

BX.UI.Notification.Center.notify({
	content: "Файл успешно удален",
	position: "top-right",
	autoHideDelay: 5000,
	closeButton: false,
	category: "disk-file-deleted",
	actions: [{
		title: "Отмена",
		events: {
			click: function(event, balloon, action) {
				balloon.close();
			} 
		} 
	}]
});

Нотификация с произвольной версткой.

class CircleBalloon extends BX.UI.Notification.Balloon
{
	render()
	{
		var content = this.getContent();
		return BX.create("div", {
			props: {
				className: "circle-balloon"
			},
			children: [
				BX.create("div", {
					props: {
						className: "circle-balloon-content"
					},
					html: BX.type.isDomNode(content) ? null : content,
					children: BX.type.isDomNode(content) ? [content] : []
				})
			]
		})
	}
}

BX.UI.Notification.Center.notify({
	content: "Hello",
	type: "CircleBalloon",
});

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

1 Андрей Чурсин 12.10.2023 14:41:37 Сообщение не промодерировано, возможны ошибки и неточности.
Очень не хватает просто параметра "class", например для создания цветового дифференцирования уведомлений (выделить ошибки красным фоном) Понимаю, можно всю верстку собрать - но это слишком много...

Юрий Гранд 07.04.2021 14:13:20

Цитата

class CircleBalloon extends BX.UI.Notification.Balloon
{
render()
{
var content = this.getContent();
return BX.create("div", {
props: {
className: "circle-balloon"
},
children: [
BX.create("div", {
props: {
className: "circle-balloon-content"
},
html: BX.type.isDomNode(content) ? null : content,
children: BX.type.isDomNode(content) ? [content] : []
})
]
})
}
}

BX.UI.Notification.Center.notify({
content: "Hello",
type: "CircleBalloon",
});

Вот рабочий пример кастомного балуна, на базе вашего модуля алертов:

Код

BX.UI.Notification.Center.notify({
            content: 'Внимание дока по нотификациям устарела!',
            data: {type:'danger', icon:'warning', size:'xs'},
            position: 'top-center',
            width:'100%',
            render: alertBalloonRenderer,
         });
function alertBalloonRenderer()
{
   //debugger;
   var content = this.getContent(),
      options = this.getData()||{},
      icon = options.icon || false,
      size = options.size || 'md',
      type = options.type || false,
      width = this.getWidth(),         
      cssClass = 'ui-alert';
   if(icon)
      cssClass += ' ui-alert-icon-'+icon;
   if(size)
      cssClass += ' ui-alert-'+size;
   if(type)
      cssClass += ' ui-alert-'+type;
   return BX.create("div", {
      props: {
         className: cssClass
      },
      style: {
         width: BX.type.isNumber(width) ? (width + "px") : width
      },
      children: [
         BX.create("span", {
            props: {
               className: "ui-alert-message"
            },
            html: BX.type.isDomNode(content) ? null : content,
            children: BX.type.isDomNode(content) ? [content] : []
         })
      ]
   })
}

Наверх