The translation was generated automatically and may contain mistakes
Module: 4. Development
Lesson 7. Cover under vk.com and m.vk.com
The main thing in the lesson
- •
Virtually all components of the VKUI library adapt to the size of the screen. In our example application, for example, the screen with the information about the dish is displayed in desktop browsers and on mobile devices in different ways.
- •
In order for the adaptability parameter information to be passed to the application components, the top-level element of the application must be wrapped in
AdaptivityProviderwhich, in turn, should beConfigProvider.TypeScript<ConfigProvider> // Надо добавить этот компонент <AdaptivityProvider {...adaptivity}> // Надо добавить этот компонент <DataContextProvider> <AppRoot> <RouterProvider router={router}> <App /> // Приложение </RouterProvider> </AppRoot> </DataContextProvider> </AdaptivityProvider> </ConfigProvider> - •
To get information about screen sizes and other parameters important for the adaptability of the application, use the function
useAdaptivityConditionalRender(). - •
To receive notifications about changes in the color scheme and screen sizes, subscribe to the event in the application code
VKWebAppUpdateConfig. - •
To change the size of the element
<iframe>, which displays a mini-app in the desktop version of the VKontakte site, use the eventVKWebAppResizeWindow.
Useful links
- •Client part (source code) ,
Look at the code fragments by #M4L7> - •
- •
- •
- •
- •
- •
:::
