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

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>
  3. Используйте созданный шаблон для окна уведомления - передайте его в опцию template открывающего контрола Controls/popup:Notification.
    <!-- WML -->
    <Controls.popup:Notification
        name="notification"
        template="MyControl/MyNotifTemplate"/>
    <Controls.buttons:Button
        on:click="openNotification()"/>
    // JavaScript
    define('MyControl', ['UI/Base', 'Controls/popup'], function(Base, popup) {
       var ModuleClass = Base.Control.extend({
          style: 'myValue',
          openNotification: function () {
             this._children.notification.open();
          }
       });
       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>

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

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