Диалоговое окно

Контрол, открывающий диалог, который позиционируется по центру окна браузера.

Размер окна

Если размер окна не задан, он определяется автоматически по размеру контента.

Стандартный шаблон

В качестве базового шаблона используется Controls/popupTemplate:Dialog.

Схема раскладки шаблона:

Пример конфигурации

// TypeScript
// Открываем с помощью Controls/popup:Dialog.
protected openDialog(): void {
   this._children.dialog.open();
},

Через template передаем шаблон всплывающего окна.

<Controls.popup:Dialog
    name="dialog"
    template="Examples/Popup/templates/dialog" />
 
<Controls.buttons:Button
    name="dialogButton"
    caption="Диалог"
    on:click="openDialog()"/>

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

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

this._dialog = new DialogOpener();

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

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

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

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

Настройка закругления границ диалогового окна

Закругление обводки контрола задается в опции borderRadius.

<Controls.popupTemplate:Dialog  attr:style="height: 100%" 
                                headingCaption="Задача в разработку" 
                                borderRadius="{{borderRadius}}">

Настройка цвета фона

Цвет фона диалогового окна задается с помощью опции backgroundStyle.

Цвет фона шапки диалогового окна задается с помощью опции headerBackgroundStyle.

<Controls.popupTemplate:Dialog  
    headingCaption="Задача в разработку" 
    backgroundStyle="default"
    headerBackgroundStyle="default" 
    attr:style="height: 100%">

Изменение размера диалогового окна

У диалогового окна есть возможность включить изменение размера за счет движения границ окна. Для этого в опцию resizable передайте значение true.

<Controls.input:Label caption="resizable = "/>
      <Controls.toggle:DoubleSwitch 
          bind:value="_resizable"
          onCaption="{{'true'}}" 
          offCaption="{{'false'}}"/>

Высота шапки диалогового окна

Если в контентной области шапки используются фото или другой контент большого размера, можно увеличить высоту шапки. для этого передайте в опцию headerSize значение l.

<Controls.popupTemplate:Dialog  
    headerSize="l" 
    headingCaption="Задача в разработку">

Настройка видимости границы подвала

Чтобы скрыть границу подвала диалогового окна, передайте в опцию footerBorderVisible значение false.

<Controls.popupTemplate:Dialog  
    footerBorderVisible="{{false}}" 
    headingCaption="Задача в разработку">