Окно-шторка
Контрол Controls/popup:SlidingPanelOpener позволяет открывать окно в виде шторки. Рекомендуется использовать, когда необходим адаптив страницы для мобильных устройств.
По умолчанию на мобильном устройстве открывается шторка, на остальных открывается stack/dialog/sticky в зависимости от desktopMode.
<Controls.popupSliding:Template
slidingPanelOptions="{{ _options.slidingPanelOptions }}"
controlButtonVisibility="{{ _controlButtonVisibility }}">
<ws:bodyContentTemplate>
<Controls.scroll:Container
attr:style="height: 100%;"
name="scrollContainer"
topShadowVisibility="hidden"
bottomShadowVisibility="hidden"
scrollbarVisible="{{ false }}">
<div class="ControlDemo__SlidingPanel-popupTemplate-content">
<div class="ControlDemo__SlidingPanel-popupTemplate-setting">
<Controls.input:Label caption="controlButtonVisibility"/>
<Controls.toggle:Switch bind:value="_controlButtonVisibility"/>
</div>
<Controls.Container.Async templateName="{{_options.popupTemplate}}"/>
</div>
</Controls.scroll:Container>
</ws:bodyContentTemplate>
</Controls.popupSliding:Template>
В опции slidingPanelOptions задается конфигурация окна на мобильном устройстве.
const config = {
template: 'Controls-demo/Popup/SlidingPanel/PopupTemplate',
desktopMode: 'stack',
slidingPanelOptions: {
position: 'bottom',
heightList: [300, 400, 500]
},
dialogOptions: {
width: 600
},
templateOptions: {
popupTemplate: 'Controls-demo/Popup/SlidingPanel/PopupTemplate/Content/LargeContent'
}
};
При растягивании шторка может принимать высоту из списка высот-якорей, заданных в поле heightList
. Список остальных опций для настройки отображения шторки здесь.
Отображение шторки на всех устройствах
Чтобы шторка отображалась на всех устройствах, передайте в опцию isAdaptive значение false.
import {SlidingPanelOpener} from 'Controls/popup';
this._slidingPanel = new SlidingPanelOpener({
isAdaptive: false
});
_openSlidingPanel() {
this._slidingPanel.open(config);
}
Блокировка родительского приложения
Чтобы блокировать работу родительского приложения, когда открыта шторка, передайте в опцию modal значение true.
const config = {
template: 'Controls-demo/Popup/SlidingPanel/PopupTemplate',
desktopMode: 'stack',
modal: 'true',
slidingPanelOptions: {
position: 'bottom',
heightList: [300, 400, 500]
},
dialogOptions: {
width: 600
},
templateOptions: {
popupTemplate: 'Controls-demo/Popup/SlidingPanel/PopupTemplate/Content/LargeContent'
}
};