How to - Customization of TabButton - Qt 5.7 - Qt Quick Controls 2 - Material -



  • Hi,

    I'm playing with the new Qt 5.7 Qt Quick Controls 2 with Material style.

    I have a TabBar as the header of my ApplicationWindow.
    I'm trying to customize the TabButtons. The documentation says : TabButton can be customized in the same manner as Button.
    So, I look at Customizing Button and apply the same to my TabButton :

                TabButton {
                    width: 100
                    text: "Entry"
                    contentItem: Text {
                              text: control.text
                              font: control.font
                              opacity: enabled ? 1.0 : 0.3
                              color: control.down ? "#17a81a" : "#21be2b"
                              horizontalAlignment: Text.AlignHCenter
                              verticalAlignment: Text.AlignVCenter
                              elide: Text.ElideRight
                          }
                }
    

    It doesn't work, QML Material widgets seem to be different, control is not defined.

    qrc:/main.qml:66: ReferenceError: control is not defined
    


  • Hello @_Michel,

    control is an id try adding id: control on your TabButton.



  • ...
    OK, this works. I thought that control was a reserved keyword.

    <u>For readers :</u>
    Since I have many TabButton, I don't use id: control as suggested but parent.

                TabButton {
                    id: tabButtonMenu
                    width: 100
                    height: parent.height
                    text: "Menu"
                    contentItem: Text {
                        text: parent.text
                        font: parent.font
                        opacity: enabled ? 1.0 : 0.3
                        color: parent.down ? "yellow" : "white"
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        elide: Text.ElideRight
                    }
                }