Felgo Live Code Reloading: Web Editor

import QtQuick 2.5 import Felgo 3.0 App { Navigation { navigationMode: navigationModeDrawer NavigationItem { title: "Page" icon: IconType.square NavigationStack { Page { title: "Page" Rectangle { // Use safeArea item of Page for anchoring custom layouts anchors.fill: parent.safeArea color: "#f04e26" } AppButton { text: "Bottom Button" anchors.horizontalCenter: parent.horizontalCenter // Anchor an item to the bottom safe area anchors.bottom: parent.safeArea.bottom } } } } NavigationItem { title: "Custom Bottom Bar" icon: IconType.minus NavigationStack { Page { title: "Page" // This would be your custom bottom bar Rectangle { color: Theme.colors.tintColor width: parent.width // Use your content height and add the bottom safe area height: dp(50) + nativeUtils.safeAreaInsets.bottom // Anchor the whole bar to the very bottom anchors.bottom: parent.bottom } } } } NavigationItem { title: "List & Flickable" icon: IconType.list NavigationStack { Page { title: "List & Flickable" AppListView { width: parent.width // This is now applied by default already bottomMargin: nativeUtils.safeAreaInsets.bottom model: 30 delegate: AppListItem { text: "Item " + index } } } } } } }

Run