Drawer

Drawer — это боковая панель с наложением, которая позволяет отображать информацию или выполнять операции, не прерывая рабочий процесс в главном окне.

В следующем примере корзина покупок создается с помощью drawer.

Расположение

При вставке с помощью операции перетаскивания Drawer перемещается с правой стороны главного окна (по умолчанию). Затем вы можете добавить компоненты на Drawer в соответствии с вашими потребностями. В режиме редактирования Drawer другие компоненты на холсте недоступны для редактирования.

Когда drawer закрыт, вы можете снова открыть его, щелкнув по соответствующей метке на вкладке Модели в левой панели.

Позиция

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

Изменить размер

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

События

Вы можете указать ссылку на drawer в JS-коде в любом месте вашего приложения или вызвать его с помощью действия "компонент управления" в разделе Свойства > Взаимодействие > Обработчики событий.

В следующих разделах вы узнаете, как открывать и закрывать Drawer, нажимая кнопку в приложении для онлайн-покупок.

Триггер открытия Drawer

Обычно в приложении вы запускаете открытие Drawer с помощью такого события, как нажатие кнопки. Например, открытие Drawer для отображения корзины покупок выполняется следующими шагами.

1. Добавьте кнопку и переименуйте ее в gotoCart.

2. Установите обработчик события для кнопки. Выберите "Компонент управления" в качестве действия и выберите компонент "корзина" и метод "openDrawer". Все эти настройки автоматически сохраняются.

3. Нажмите на кнопку gotoCart и "тележка" с Drawer открыта.

Триггер закрытия Drawer

Запуск "закрыть drawer" аналогичен запуску "открыть drawer". При настройке обработчика событий выберите метод "закрыть drawer". Например, закрытие drawer, в котором отображается корзина покупок, выполняется следующими шагами.

1. Добавьте кнопку и переименуйте ее в gobackShopping.

2. Установите обработчик события для кнопки. Выберите "Компонент управления" в качестве действия и выберите компонент "корзина" и метод "closeDrawer". Все эти настройки автоматически сохраняются.

3. Нажмите кнопку "Продолжить покупки", и привязанный drawer "корзина" закроется.