Диалоговое окно
Контрол, открывающий диалог, который позиционируется по центру окна браузера.
Размер окна
Если размер окна не задан, он определяется автоматически по размеру контента.
Стандартный шаблон
В качестве базового шаблона используется 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="Задача в разработку">