Since this question was also asked via email, I am posting this also here for reference. This example adds a custom item above the tab navigation, to display notification badges along with the navigation items in the bottom tab navigation:
import QtQuick 2.0
import Felgo 3.0
App {
id: app
Navigation {
id: navigation
// Use tabs on all platforms
navigationMode: navigationModeTabs
// Tabs can be accessed and further modified like this
tabs.showOnlySelectedLabel: false
NavigationItem {
title: "Tab 1"
icon: IconType.heart
badgeValue: "2"
NavigationStack {
Page {
title: "Tab 1"
}
}
}
NavigationItem {
title: "Tab 2"
icon: IconType.car
NavigationStack {
Page {
title: "Tab 2"
}
}
}
}
// Custom overlay with badges
Item {
id: badgeOverlay
width: parent.width
height: dp(Theme.navigationTabBar.height) + nativeUtils.safeAreaInsets.bottom
anchors.bottom: parent.bottom
Row {
// We can access the NavigationItems using the navItems property
Repeater {
model: navigation.navItems
delegate: Item {
width: badgeOverlay.width / navigation.navItems.length
height: dp(Theme.navigationTabBar.height)
Rectangle {
// Only show if badeValue exists
visible: modelData.badgeValue ? true : false
width: dp(16)
height: dp(16)
color: "red"
radius: width/2
anchors.centerIn: parent
anchors.verticalCenterOffset: -dp(12)
anchors.horizontalCenterOffset: dp(15)
AppText {
text: modelData.badgeValue
color: "white"
font.pixelSize: sp(12)
anchors.centerIn: parent
}
}
}
}
}
}
}
Cheers,
Alex