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

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

Пример
Исходный код
На весь экран

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

Размер окна

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

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

Через 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>
// JavaScript
define('Examples/Popup/Opener/MyStack',
   [
      'UI/Base',
      'wml!Examples/Popup/Opener/MyStack'
   ],
   function(Base, template) {
      'use strict';
       
      var PopupPage = Base.Control.extend({
         _template: template,
          
         // Открываем с помощью Controls/popup:Stack.
         openStack: function() {
            this._children.stack.open();
         },
      });
      return PopupPage;
   });

Стандартный шаблон для стековых окон

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>

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

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

Например, стековое окно должно открываться под шапкой. Или необходимо, чтобы окно примыкало правым краем к границе контента.

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

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

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

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

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

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

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

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

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

this._stack = new StackOpener();

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

_beforeUnmount() {
    this._stack.close();
}

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

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

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

Для настройки многострочной шапки используют опцию headerBorderVisible.

Пример
Исходный код
На весь экран