Модуль: 4. Разработка

Урок 4. Модальные окна

Главное в уроке

  • •

    Модальные окна блокируют доступ к другим экранам приложения до тех пор, пока они открыты. Всплывающие окна похожи на модальные, но используются для отображения информации другого характера.

  • •

    Для создания модального окна:

    • •

      Используйте компонент ModalRoot библиотеки VKUI. В нём определите один или несколько компонентов ModalPage, каждый из которых соответствует одному модальному окну.

      TypeScript
      export const AppModalRoot = () => { ... return ( <ModalRoot activeModal={activeModal} onClose={onClose}> <ModalPage id={EModal.DISH} onClose={onClose}> <DishModal onClose={onClose} /> </ModalPage> </ModalRoot> ); };

      Вместо ModalPage можно использовать ModalCard.

    • •

      Передайте созданный компонент в SplitLayout:

      TypeScript
      export const App = () => { <SplitLayout modal={<AppModalRoot />}> // ... </SplitLayout> }
  • •

    Для модального окна можно определить маршрут. В этом случае оно будет показываться при переходе по этому маршруту. Модальное окно можно показать и без определения маршрута. Используйте для этого метод RouteNavigator.showModal(...). Чтобы скрыть модальное окно, вызовите RouteNavigator.hideModal().

  • •

    Для создания всплывающих окон используйте компоненты Alert, ActionSheet, ScreenSpinner или PopoutWrapper библиотеки VKUI.

    TypeScript
    const OrderCancelPopout = ({ handleBackButton }: Props) => { ... return ( <Alert header="Прервать оформление заказа?" text="Данные будут утеряны" /> ); };

    Используйте хук usePopout(), чтобы получить установленный popout, и передайте его в SplitLayout:

    TypeScript
    function App() { const routerPopout = usePopout(); ... return ( <SplitLayout popout={routerPopout} ...>...</SplitLayout> ); };
  • •

    Чтобы показать всплывающее окно, вызовите RouteNavigator.showPopout(...). Чтобы скрыть модальное окно, вызовите RouteNavigator.hidePopout(). Всплывающее окно также скрывается при нажатии кнопки «Назад» в браузере или на мобильном устройстве.

Полезные ссылки

← Предыдущий урок

Следующий урок →