Окно диалога подтверждения
Контрол, открывающий окно диалога подтверждения.
Размер окна
Ширина диалога подтверждения определяется опцией width. Значение опции может быть указано как в пикселях, так и с помощью стандартной линейки размеров.
<Controls.popupTemplate:ConfirmationDialog
name="Confirm3"
message="Сохранить изменения?"
width = "m"
type="yesno" />
Цвет маркера
Цвет маркера окна подтверждения настраивается в опции markerStyle.
<Controls.popupTemplate:ConfirmationDialog
name="Confirm3"
message="Сохранить изменения?"
markerStyle = "success"
type="yesno" />
Кнопка закрытия окна
Чтобы включить отображение кнопки закрытия окна, передайте в опцию closeButtonVisible значение true.
<Controls.popupTemplate:ConfirmationDialog
name="Confirm3"
message="Сохранить изменения?"
markerStyle ="success"
type="yesno"
closeButtonVisible= "true"/>
Обработка выбора пользователя
Метод open() возвращает Promise, который завершается с результатом пользовательского выбора (клика по кнопке диалога):
true
— клик на кнопку "yes";false
— клик на кнопку "no";undefined
— клик на кнопку "cancel" или нажатие на клавишу Esc.
Окно подтверждения с пользовательским контентом
Может возникнуть потребность в особом окне подтверждения, с контентом, в котором лежат пользовательские контролы.
Для таких случаев предлагается использовать базовую раскладку диалога подтверждения Controls/popupConfirmation:Template с двумя контентными опциями bodyContentTemplate
и footerContentTemplate
.
Схема раскладки:
Ниже показан пример конфигурации пользовательского контента:
<!-- MyConfirmationTpl.wml -->
<Controls.popupConfirmation:Template style="success">
<ws:bodyContentTemplate>
<div style="text-align: center">
Hello, It is Confirmation Template
</div>
</ws:bodyContentTemplate>
<ws:footerContentTemplate>
<div style="text-align: center">
<Controls.buttons:Button caption="{{_options.value}}" on:click="_closeHandler()"/>
</div>
</ws:footerContentTemplate>
</Controls.popupConfirmation:Template>
Для конфигурации футера окна подтверждения можно использовать базовый шаблон Controls/popupConfirmation:Footer:
<!-- MyConfirmationTpl.wml -->
<Controls.popupConfirmation:Template style="success">
<ws:bodyContentTemplate>
<div style="text-align: center">
Hello, It is Confirmation Template
</div>
</ws:bodyContentTemplate>
<ws:footerContentTemplate>
<Controls.popupConfirmation:Footer type="ok" okCaption="ok"/>
</ws:footerContentTemplate>
</Controls.popupConfirmation:Template>
Для открытия окна подтверждения с кастомным контентом используют опенер Controls/popup:Dialog:
// TypeScript
protected openConfirmation(): void {
this._children.dialog.open()
}
<!-- WML -->
<Controls.popup:Dialog name="myDialog" template="wml!Examples/Popup/Opener/MyConfirmationTpl">
<ws:templateOptions style="danger" size="m" value="Close"/>
</Controls.popup:Dialog>
<Controls.buttons:Button
name="confirmationButton"
caption="Окно подтверждения"
on:click="openConfirmation()"/>
Открытие окна без добавления в шаблон открывающего контрола
Метод openPopup() позволяет открыть окно уведомлений без использования открывающего контрола. Метод возвращает Promise
, который в качестве результата отдаёт результат выбора в окне
.
// TypeScript
import {Confirmation} from 'Controls/popup';
...
openConfirmation() {
Confirmation.openPopup({message: 'Choose yes or no'}).then((result: boolean): void => {
if (result === true) {
console.log('Пользователь выбрал "Да"');
} else if (result === false) {
console.log('Пользователь выбрал "Нет"');
} else {
console.log('Пользователь выбрал "Отмена"');
}
});
}
Как передать данные из всплывающего окна в родительский контрол
Читать подробнее.