Стековое окно

Контрол, открывающий стековое окно справа контентной области на всю высоту экрана. Окна называют стековыми из-за особенности их открытия/закрытия: каждое следующее окно будет открываться поверх предыдущего.

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

Настройка контентных областей

Размер окна

Если ширина окна не задана через template, она определяется автоматически по размеру контента. Подробнее Controls/popup:IStackOpener.

Содержимое окна

Через template передаем шаблон, который отрисует содержимое стекового окна. Значения опций в шаблон передаются Через templateOptions.

<!-- Examples/Popup/Opener/MyStack.wml -->
<div class="popup-page">
    <Controls.popup:Stack
        name="stack"
        template="Examples/Popup/Opener/templates/StackTemplate">
        <ws:templateOptions myText="Hello, Stack!" />
    </Controls.popup:Stack>
     
    <Controls.buttons:Button
        name="stackButton"
        caption="Open Stack"
        on:click="openStack()"/>
</div>
// TypeScript
// Открываем с помощью Controls/popup:Stack.
protected openStack(): void {
   this._children.stack.open();
}

Шаблон контента слева от границы стекового окна

Шаблон контента слева от границы стекового окна задается с помощью опции leftContentTemplate.

<Controls.popupTemplate:Stack headingCaption="PopupManager" scope="{{ _options }}" backgroundStyle="unaccented">
   <ws:leftContentTemplate>
      <TabsLayout.floatingTabs:Buttons items="{{_items}}" />
   </ws:leftContentTemplate>
</Controls.popupTemplate:Stack>

Правая панель стекового окна

Содержимое правой панели задается с помощью опции rightPanelOptions, отображение кнопки изменения размера настраивается в опции maximizeButtonVisibility.

Пример:

<!-- WML -->
<Controls.popupTemplate:Stack rightPanelOptions="{{ _rightPanelOptions }}">
    <ws:bodyContentTemplate>
        ...
    </ws:bodyContentTemplate>
</Controls.popupTemplate:Stack>
// TypeScript
...
this._rightPanelOptions = {
    entityId: 'contractor-card',
    title: 'Карточка контрагента'
};

Шаблон контента под крестиком закрытия

Шаблон контента под крестиком закрытия задается с помощью опции toolbarContentTemplate.

Пример:

<ws:toolbarContentTemplate>
      <Controls.toolbars:View
              source="{{_buttonsSource}}"
              keyProperty="id"
              direction="vertical"
              on:itemClick="_itemClick()" />
   </ws:toolbarContentTemplate>

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

Controls/popupTemplate:Stack

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

Пример шаблона

<!-- Examples/Popup/Opener/templates/StackTemplate -->
<Controls.popupTemplate:Stack headingCaption="Стековое окно">
   <ws:headerContentTemplate>
      <div class="stack-top">
         <Controls.buttons:Button caption="Закрыть" on:click="_close()"/>
      </div>
   </ws:headerContentTemplate>
   <ws:bodyContentTemplate>
      <div class="stack-content">
         {{_options.myText}}
      </div>
   </ws:bodyContentTemplate>
</Controls.popupTemplate:Stack>

Открытие стекового окна в два этапа

Для ускорения открытия стекового окна необходимо, чтобы загрузка выполнялась в два этапа - построение пустого окна и наполнение его контентом. В таком случае запрос за данными выполнится в самом начале построения, и в прикладные контролы будут переданы уже загруженные данные.

Для реализации открытия окна в два этапа используйте опцию dataLoaders, которая задает массив предзагрузчиков данных. Полученные данные будут переданы в опцию prefetchData.

Если ваша страница описана через pagex, то для открытия окна передайте опцию pageId в контрол-опенер. Подробнее читайте в статье.

Позиционирование стекового окна относительно контейнера

По умолчанию стековое окно позиционируется относительно окна браузера, но может возникнуть необходимость позиционирования окна относительно некоторого контейнера. Например, стековое окно должно открываться под шапкой или необходимо, чтобы окно примыкало правым краем к границе контента. Для таких задач нужно использовать класс controls-Popup__stack-target-container, который применяется к контейнеру,
относительно которого стековое окно будет позиционироваться.

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

Контрол предоставляет возможность динамического изменения размеров окна. Параметр, выставленный пользователем, запоминается в истории. При повторном открытии окна используется сохраненное значение.

Чтобы включить функционал движения границ, необходимо задать опции:

  • propStorageId — уникальный идентификатор контрола, по которому будет сохраняться конфигурация в хранилище данных.
  • width — текущая ширина стековой панели, которая будет применена при построении контрола.
  • minWidth — минимально допустимая ширина стековой панели.
  • maxWidth — максимально допустимая ширина стековой панели.

Чтобы верстка шаблона была построена корректно относительно установленной ширины стекового окна, в контрол передается опция workspaceWidth, которая принимает значения текущей ширины окна.

Открытие окна без добавления в шаблон открывающего контрола

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

Пример:

// TypeScript
import {StackOpener} from 'Controls/popup';
import {Control, IControlOptions, TemplateFunction} from 'UI/Base';

export default class StackDemo extends Control<IControlOptions> {
   protected _template: TemplateFunction = MyTemplate;
   private _stack: StackOpener = new StackOpener();
   openStack() {
      this._stack.open({
         template: 'myTemplate',
         opener: this
      });
   }
   _beforeUnmount() {
      this._stack.destroy();
   }
};

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

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

Многострочная шапка

Чтобы расположить контент между заголовком окна и крестиком закрытия, используйте опцию headerContentTemplate.

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

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

Чтобы задать скругление стекового окна, передайте свой шаблон в bodyContentTemplate. Внутри шаблона на нужных компонентах укажите скругления с помощью использования класса tr на элементе controls__block-wrapper.

<Controls.popupTemplate:Stack>
        <ws:bodyContentTemplate>
                <div class="controls__block-wrapper tr ControlsDemo__popupStack-body-leftSide">
                    <div class="controls__block">
                            <div>Контент</div>
                    </div>
                </div>
        </ws:bodyContentTemplate>
</Controls.popupTemplate:Stack>

Настройка цветов элементов окна

Предоставляется возможность настроить цвет для шапки, футера и содержимого стекового окна.

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

<Controls.popupTemplate:Stack headingCaption="backgroundStyle=success"
                              backgroundStyle="success">

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

<Controls.popupTemplate:Stack headingCaption="headerBackgroundStyle=success"
                              headerBackgroundStyle="success">

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

<Controls.popupTemplate:Stack headingCaption="footerBackgroundStyle=success"
                              footerBackgroundStyle="success">

Положение стекового окна

Для настройки положения стекового окна (прижато к правому или левому краю) используйте опцию stackPosition.