Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Show Web Content in Your App

Use a Web View to Show Web Content

You can show web content using a WebView.

 import Felgo
 import QtQuick
 import QtWebView

 App {

   NavigationStack {

     AppPage {
       title: "Web View"

       WebView {
         anchors.fill: parent
         url: "https://www.google.com"
       }
     }
   }
 }

Use a WebView Together with NavigationDrawer

At the moment the content of the WebView is drawn on top of the QML scene graph. To use a WebView together with a NavigationDrawer, you could use the following workaround:

 import Felgo
 import QtWebView

 App {
   id: app

   Navigation {
     id: navigation
     navigationMode: navigationModeDrawer

     NavigationItem {
       title: "Web View"
       iconType: IconType.globe

       NavigationStack {

         AppPage {
           id: page
           title: "Web View"

           WebView {
             anchors.fill: parent
             url: "https://www.google.com"
             // visible is only true if the drawer is NOT open
             visible: !navigation.drawer.isOpen
           }
         }
       }
     }
   }
 }

You can additionally show a placeholder instead of the WebView while the drawer is open.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded