Окно-шторка

Контрол Controls/popup:SlidingPanelOpener позволяет открывать окно в виде шторки. Рекомендуется использовать, когда необходим адаптив страницы для мобильных устройств.

Документация API

По умолчанию на мобильном устройстве открывается шторка, на остальных открывается 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'
    }
};