Окно уведомления

Controls/popup:Notification — контрол, открывающий окно, которое позиционируется в правом нижнем углу окна браузера. Одновременно может быть открыто несколько окон уведомлений. В этом случае они выстраиваются в стек по вертикали. Если не задан размер окна, он определяется автоматически, по размеру контента.

Документация API Спецификация Axure

Базовый шаблон

Для построения окна уведомлений в качестве базового шаблона используется Controls/popupTemplate:Notification. На его основе можно создать пользовательский шаблон, меняя конфигурацию опций.

Ниже показана схема раскладки шаблона:

Упрощенный шаблон

Для самого простого окна уведомления, содержащего только иконку и текст уведомления, можно использовать готовый платформенный шаблон Controls/popupTemplate:NotificationSimple.

<!-- WML -->
<Controls.popup:Notification 
    name="myOpener"
    template="Controls/popupTemplate:NotificationSimple">
    <ws:templateOptions style="success" text="HelloWorld!" icon="Admin" />
</Controls.popup:Notification>

Так будет выглядеть окно уведомления к этому примеру:

Пользовательский шаблон

Пользовательский шаблон окна уведомления создаётся на основе базового шаблона.

1. Создайте новый WML-шаблон.
2. Поместите в него директиву ws:partial, в которую передайте базовый шаблон Controls/popupTemplate:Notification. Шаблон можно конфигурировать, передавая параметры.

<!-- MyNotifTemplate.wml -->
<ws:partial template="Controls/popupTemplate:Notification" style="{{_options.style}}">
    <ws:bodyContentTemplate>
        <!-- Пользовательский контент окна уведомления-->
    </ws:bodyContentTemplate>
</ws:partial>

1. Используйте созданный шаблон для окна уведомления - передайте его в опцию template открывающего контрола Controls/popup:Notification.

<!-- WML -->
<Controls.buttons:Button on:click="openNotification()"/>

// JavaScript
define('MyControl', ['UI/Base', 'Controls/popup'], function(Base, popup) {
   var ModuleClass = Base.Control.extend({
      style: 'myValue',
      _beforeMount: function() {
         this._notification = new popup.NotificationOpener();
      },
      openNotification: function () {
         this._notification.open({
            template: 'MyControl/MyNotifTemplate'
         });
      }
   });
   return ModuleClass;
});

Пример конфигурации и открытия окна уведомления

// Открываем с помощью Controls/popup:Notification.
openNotification: function () {
   this._children.notification.open();
}

<!-- WML -->
<div>
    <Controls.popup:Notification
        name="notification"
        template="Examples/Popup/templates/notification"/>
     
    <Controls.buttons:Button
        name="notificationButton"
        caption="Окно уведомления"
        on:click="openNotification()"/>
</div>

Как передать данные из всплывающего окна в родительский контрол

Читать подробнее.