[Edward]

Hello!

I’m working on an application which uses the tab mode navigation on all platforms, as there could be several navigation items and I do not wish to add too many options, i’m looking at adding the Ellipsis at the end – which when clicked instead of pushing a new page, instead just adjusts the visibility of a column of FloatingActionButtons.

 

E.g:

    Navigation {
        id: navigationRoot
        navigationMode: navigationModeTabs

        NavigationItem {
            icon: IconType.group

            NavigationStack {
                Collaborate {
                }
            }
        }
        NavigationItem {
            icon: IconType.paintbrush

            NavigationStack {
                Create {
                }
            }
        }

        NavigationItem {
            icon: IconType.ellipsisv
            onSelected: floatingColumn.visible === true ? visible = false : visible = true
        }
    }



        Column {
            id: floatingColumn
            z: 5
            width: settingsButton.width
            height: settingsButton.height * 3
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            visible: false
            FloatingActionButton {
                id: settingsButton
                icon: IconType.cog
                visible: true
                anchors.right: undefined
                anchors.bottom: undefined
            }
            FloatingActionButton {
                icon: IconType.user
                visible: true
                anchors.right: undefined
                anchors.bottom: undefined
            }
            FloatingActionButton {
                icon: IconType.envelope
                visible: true
                anchors.right: undefined
                anchors.bottom: undefined
            }
        }

 

However when clicking the NavigationItem it instead tried to push a non-existent page, even though there is none defined and all I call for is the selected handler to adjust the visibility?

 

I have tried disabling the button and placing an iconButton in it’s place however this causes chaos with the anchoring and does not work as intended regardless!

 

Any suggestions on this? Thanks.

[AlexFelgo Team]

Hi Edward,

an actual NavigationItem will indeed always try to push its child, and if there is none, an empty item will be pushed as you described. The easist way would be to, as you also mentioned, just overlay the empty NavigationItem (you still want to add the empty one to have a placeholder that takes care of the navigation layout) with a custom control.

Minimal example:

import QtQuick 2.5
import Felgo 3.0

App {
  Navigation {
    id: navigation
    navigationMode: navigationModeTabs

    NavigationItem {
      icon: IconType.heart

      NavigationStack {
        Page {
          title: "Page1"
        }
      }
    }
    NavigationItem {
      icon: IconType.heart

      NavigationStack {
        Page {
          title: "Page2"
        }
      }
    }
    NavigationItem {
      icon: IconType.ellipsisv

      // empty one
    }
  }

  MouseArea {
    width: navigation.width/3 // since there are 3 nav items
    height: dp(Theme.navigationTabBar.height)
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    anchors.bottomMargin: nativeUtils.safeAreaInsets.bottom // take care of potential safearea (e.g. iPhone 10 and up)
    onClicked: {
      console.debug("Clicked, open/close the floating action buttons here")
    }

    // You could also add a fully custom UI here
    Rectangle {
      anchors.fill: parent
      color: "#20ff0000"
    }
  }
}

Best,
Alex