Окно уведомления
Контрол, открывающий окно, которое позиционируется в правом нижнем углу окна браузера. Одновременно может быть открыто несколько окон уведомлений. В этом случае они выстраиваются в стек по вертикали. Если не задан размер окна, он определяется автоматически, по размеру контента.
Базовый шаблон
Для построения окна уведомлений в качестве базового шаблона используется 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>
Пользовательский шаблон
Пользовательский шаблон окна уведомления создаётся на основе базового шаблона.
- Создайте новый WML-шаблон.
- Поместите в него директиву ws:partial, в которую передайте базовый шаблон
Controls/popupTemplate:Notification
. Шаблон можно конфигурировать, передавая параметры.
<!-- MyNotifTemplate.wml -->
<ws:partial template="Controls/popupTemplate:Notification" backgroundStyle="{{_options.backgroundStyle}}">
<ws:bodyContentTemplate>
<!-- Пользовательский контент окна уведомления-->
</ws:bodyContentTemplate>
</ws:partial>
- Используйте созданный шаблон для окна уведомления - передайте его в опцию 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();
}
Как передать данные из всплывающего окна в родительский контрол
Читать подробнее.