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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// TypeScript
protected _beforeMount(): void {
   this._notification = new popup.NotificationOpener();
},
openNotification: function () {
   this._notification.open({
      template: 'MyControl/MyNotifTemplate'
   });
}

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

// Открываем с помощью Controls/popup:Notification.
protected openNotification(): void {
   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>

Открытие окна без добавления в шаблон открывающего контрола

Класс Controls/popup:NotificationOpener предоставляет методы open() и close(), с помощью которых можно открыть окно без использования открывающего контрола.

// TypeScript
import {NotificationOpener} from 'Controls/popup';

this._notification = new NotificationOpener();

openDialog() {
    this._notification.open({
        template: 'myTemplate',
        opener: this
    });
}

_beforeUnmount() {
    this._dialog.destroy();
}

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

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