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

Forums

OverviewFelgo 2 Support (Qt 5) › Customize navigation items in a drawer

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #22416

    Tim

    Is there a way to customize the look of the navigation items in a drawer?  I’d like to have one of the items bold and have a section header that is not a navigation item.  For example:

    Food
    Gifts
    Rentals
    Shows
    Visitor Info (Section Header that is centered in the drawer and not left justified like the others)
    Admissions
    Hours
    Buy Tickets

    #22432

    Alex
    Felgo Team

    Hi,

    you’ll have to create an own item based on the AppDrawer fur such a level of customization. You can then set it as drawer of your navigation.

    Cheers,
    Alex

    #22495

    Tim

    Hi Alex,

    Sorry, I’m not following you.  Is there an example out there on this? Anything other than a NavigationItem throws an error.

    Thanks,

    Tim

    #22528

    Alex
    Felgo Team

    Hi Tim,

    sorry that was actual party wrong advice. The “drawer” property of the Navigation is actually only an alias to the internal drawer and cannot simply be replaced.

    The first part still applies though. You’ll have to create a custom AppDrawer component with your desired buttons and sections. To hide the default drawer, you can set the navigationMode of the Nagivation to: navigationModeNone

    You can get or set the current active item in the Navigation with this property: https://felgo.com/doc/felgo-navigation/#currentIndex-prop

    We’ll have a look if we can simplify this with our next update.

    Cheers,
    Alex

    #22706

    Tim

    I can’t get this to work properly.  I created a custom AppDrawer and added a Navigation component inside the AppDrawer component but it adds the Page from the NavigationStack to the drawer and not to the main page.  Is there a quick sample code that uses the AppDrawer and Navigation?

    Thanks,

    Tim

    #24566

    Silvio

    Hi guys,

    Alex said “We’ll have a look if we can simplify this with our next update.”. Has it been done?

    I actually need to create a badge notification status on menu items. On Android it works fine, but in iOS menu they are just not shown. How can I fix that?

    #24567

    Alex
    Felgo Team

    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

Viewing 7 posts - 1 through 7 (of 7 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded