Документация для разработчиков
Темная тема

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

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



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

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

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

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

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
0
Юрий Гранд
Цитата
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] : []
         })
      ]
   })
}
© «Битрикс», 2001-2021, «1С-Битрикс», 2021
Наверх