Окно диалога подтверждения

Контрол, открывающий окно диалога подтверждения.

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

Размер окна

По умолчанию открывается модальное окно с кнопками подтверждения и отказа. Размер окна диалога подтверждения регламентируется стандартом и определяется опцией size.

Цвет маркера

Цвет маркера окна подтверждения настраивается в опции 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('Пользователь выбрал "Отмена"');
      }
    });
}

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

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