Прилипающий блок

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

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

Размер окна

Размер окна определяется автоматически и выбирается по размеру контента.

Также есть возможность настроить размер. Для настройки размеров окна доступны следующие опции:

• height - текущая высота прилипающего блока;
• width - текущая ширина прилипающего блока;
• maxHeight - максимальная высота прилипающего блока;
• maxWidth - максимальная ширина прилипающего блока;
• minHeight - минимальная высота прилипающего блока;
• minWidth - минимальная ширина прилипающего блока.

<Controls.popup:Sticky
    name="sticky"
    template="Examples/Popup/templates/sticky"
    height="50"
    width="50">
</Controls.popup:Sticky>

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

Controls/popupTemplate:Sticky

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

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

<!-- WML -->
<Controls.popupTemplate:Sticky headingCaption="Заголовок">
   <ws:bodyContentTemplate>
         <div class="controlsDemo-PopupTemplate__list-item"> Элемент меню 1 </div>
         <div class="controlsDemo-PopupTemplate__list-item"> Элемент меню 2 </div>
         <div class="controlsDemo-PopupTemplate__list-item"> Длинный элемент меню 3 </div>
         <div class="controlsDemo-PopupTemplate__list-item"> Элемент меню 4 </div>
   </ws:bodyContentTemplate>
   <ws:footerContentTemplate>
         <div class="controlsDemo_ColumnsView_itemTemplate-description controlsDemo-PopupTemplate__footer">
            <div class="controlsDemo-PopupTemplate__list-item"> Элемент меню 5 </div>
         </div>
   </ws:footerContentTemplate>
</Controls.popupTemplate:Sticky>

Открытие окна

Целевой элемент (это может быть DOM-элемент или контрол) передаем в метод open() с помощью свойства target:

// TypeScript
// Открываем с помощью Controls/popup:Sticky.
 
protected openSticky(): void {
   this._children.sticky.open({
       
      // Так в метод open() передаем элемент, относительно которого откроется окно.
      target: this._children.MyStickyTarget  
   });
},

Конфигурацию позиционирования окна относительно элемента можно передать в метод open() либо указать в верстке в конфигурации всплывающего окна. В опции template передаем шаблон всплывающего окна.

<!-- WML -->
<div name="MyStickyTarget"></div>
<Controls.buttons:Button
    name="dialogButton"
    caption="Открыть Sticky"
    on:click="openSticky()"/>
<Controls.popup:Sticky
    name="sticky"
    template="Examples/Popup/templates/sticky">
    <ws:templateOptions myText="Hello, Sticky!" />
    <ws:direction
        vertical="top"
        horizontal="left"/>
    <ws:targetPoint vertical="bottom" horizontal="left"/>
</Controls.popup:Sticky>

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

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

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

this._sticky = new StickyOpener();

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

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

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

Выравнивание прилипающего блока

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

Если контрол может быть удален из дерева, выравнивание блока меню настраивается относительно точки позиционирования targetPoint с помощью опции direction.

// TypeScript
import sourceLib from "Types/source"
 _beforeMount() {
    …
    this._menuPopupOptions = {
        direction: {
            horizontal: 'left',
            vertical: 'bottom'
        }
    }
}

Конфигурация отступов

Конфигурация отступов по вертикали и горизонтали от точки позиционирования до блока меню настраивается в опции offset.

<Controls.popup:Sticky
    name="sticky"
    template="Examples/Popup/templates/sticky">
    <ws:templateOptions myText="Hello, Sticky!" />
    <ws:offset
        vertical="5"
        horizontal="5"/>
</Controls.popup:Sticky>

Позиционирование окна внутри контейнера

Опция restrictiveContainer задает контейнер (через селектор), внутри которого будет позиционироваться окно. Окно не может спозиционироваться за пределами restrictiveContainer.

<Controls.buttons:Button 
    caption="open dialog" 
    on:click="_openDialog()"/>

// TypeScript
import {DialogOpener} from 'Controls/popup';
_beforeMount(): void{
   this._dialogOpener = new DialogOpener();
}
_openStack(): void {
    const config = {
         template: 'Controls-demo/Popup/TestDialog',
         closeOnOutsideClick: true,
         autofocus: true,
         opener: null,
         restrictiveContainer: '.myRestrictiveContainer'
    };
    this._dialogOpener.open(config);
}

Настройка адаптива

Поведение блока, в случае, если он не помещается на экране с заданным позиционированием настраивается в опции fittingMode. Способ позиционирования задает поведение координаты точки позиционирования targetPoint и выравнивания direction. Если блок не помещается на экран, выбирается тот способ позиционирования, при котором на экране помещается наибольшая часть контента.

<Controls.popup:Sticky
    name="sticky"
    template="Examples/Popup/templates/sticky">
    <ws:templateOptions myText="Hello, Sticky!" />
    <ws:fittingMode
        vertical="adaptive"
        horizontal="adaptive"/>
</Controls.popup:Sticky>

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

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