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

[_Michel]

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

[Julien B]

Hello @_Michel,

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

[_Michel]

...
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
                }
            }