Module: 4. Development

Lesson 4. Modal windows

The main thing in the lesson

• •

  Modal windows block access to other application screens as long as they are open. Pop-up windows are similar to modal windows, but are used to display information of a different nature.

• •

  To create a modal window:

  • •

    Use the component ModalRoot Library VKUI. Identify one or more components ModalPage each of which corresponds to one modal window.

    TypeScript

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

    Instead of ModalPage can be used ModalCard .

  • •

    Pass the created component to SplitLayout :

    TypeScript

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

  A route can be defined for the modal window. In this case, it will be shown when crossing this route. The modal window can be shown without defining the route. Use this method RouteNavigator.showModal(...) . To hide the modal window, call RouteNavigator.hideModal() .

• •

  Use Components to Create Pop-Up Windows Alert , ActionSheet , ScreenSpinner or PopoutWrapper Library VKUI.

  TypeScript

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

  Use a hook usePopout() to get the installed popout, and pass it to SplitLayout :

  TypeScript

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

  To show the pop-up window, call RouteNavigator.showPopout(...) . To hide the modal window, call RouteNavigator.hidePopout() . The pop-up window is also hidden when you press the Back button in the browser or on a mobile device.

Useful links

• •
  Client part (source code) ,
  Look at the code fragments by #M4L4>
• •
• •
  Server part (source code)
• •
  Mini-app "Dish of the Day"
• •
  Modal and pop-up support
• •
  Library documentation vk-mini-apps-router

:::