JavaScript

I want to keep the TabButton stay highlighted after clicked on it, so I know which tab I currently active.

Like original TabButton when I click on Surface tab it will stay highlighted even though I click on it’s child tabs. (see image below, these tabs are active Surface > Reflect > Base > Reflect Lights)

but when I apply my style on “TabButton” it doesn’t work:

As you can see these tabs (Surface > Reflect > Base) are not highlighted, but only Reflect Lights, even though if I click on anything else it will lose its highlight.

Here is my “TabButtom” code:

import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

TabButton{
    id: control

    contentItem: Text {
        text: control.text
        font: control.font
        opacity: 1.0
        color: "#C4C4C4"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        Layout.fillHeight: true
        gradient: Gradient{
            id: gradientId
            GradientStop{
                position: 1.0;
                color: control.enabled ? control.pressed ? "#3C3C3C" : control.activeFocus ? "#3C3C3C" : control.hovered ? "#323232" : "#303030" : "#303030"
            }
            GradientStop{
                position: 0.0;
                color: control.enabled ? control.pressed ? "#555555" : control.activeFocus ? "#222222" : control.hovered ? "#565656" : "#545454" : "#545454"
            } 
        }
        opacity: 1 
        border{
            color: "#000000"
            width: 1
        }
    }
}

That much I know that I’m missing something in style, cause without my custom style it will work, and I couldn’t find anything regarding that in Customizing Qt Quick Controls 2 documentation.

any idea?

Thanks in advance.

Answer

I found it after looking at customizing-toolbutton documentation. well basically need to use control.checked instead of control.activeFocus.

Keep the “TabButton” highlighted all the time – (custom style)

Advertisement

Answer