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

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",
});

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

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

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

Юрий Гранд 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] : []
         })
      ]
   })
}

Наверх