Прилипающий блок
Контрол, открывающий окно, которое позиционируется относительно целевого элемента.
Размер окна
Размер окна определяется автоматически и выбирается по размеру контента.
Также есть возможность настроить размер. Для настройки размеров окна доступны следующие опции:
- height - текущая высота прилипающего блока;
- width - текущая ширина прилипающего блока;
- maxHeight - максимальная высота прилипающего блока;
- maxWidth - максимальная ширина прилипающего блока;
- minHeight - минимальная высота прилипающего блока;
- minWidth - минимальная ширина прилипающего блока.
<Controls.popup:Sticky
name="sticky"
template="Examples/Popup/templates/sticky"
height="50"
width="50">
</Controls.popup: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>
Передача данных из всплывающего окна в родительский контрол
Читать подробнее.