QML ToolBar with Overflow menu ...

? Offline

Hello everyone,

For a little prototype I'm doing I need a toolbar with the possibility to show an overflow menu that contains all the tools within the toolbar that are outside the visible area.

So my question is : How do you tell to the QML toolbar to show an overflow menu that contains all the tools that can't be show due to the lack of space ?

This is the code I'm using (I'm using Qt 5.4):

@
//main.qml
import QtQuick 2.4
import QtQuick.Window 2.2

Window {
visible: true
MainForm {

    CustomHeader {
        id: customHeader
    }

    mouseArea.onClicked: {
        Qt.quit();
    }

    Text {
        anchors.centerIn: parent
        text: "Hello World"
    }

}

}

//MainForm.qml
import QtQuick 2.4

Rectangle {
property alias mouseArea: mouseArea

width: 360
height: 360

MouseArea {
    id: mouseArea
    anchors.fill: parent
}

Text {
    anchors.centerIn: parent
    text: "Hello World"
}

}

//CustomHeader.qml
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1

ToolBar {
RowLayout {
anchors.fill: parent
spacing: 6
ToolButton {
text: "Button 1"
}
ToolButton {
text: "Button 2"
}
ToolButton {
text: "Button 3"
}
ToolButton {
text: "Button 1"
}
ToolButton {
text: "Button 2"
}
ToolButton {
text: "Button 3"
}
Item { Layout.fillWidth: true }
CheckBox {
text: "Enabled"
checked: true
Layout.alignment: Qt.AlignRight
}
}
}

@

Thanks in advance for the help in something I though was as simple as setting up a flag to true.

Kind regards,

Ben