Skip to content

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

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

    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
                position: 1.0;
                color: control.enabled ? control.pressed ? "#3C3C3C" : control.activeFocus ? "#3C3C3C" : control.hovered ? "#323232" : "#303030" : "#303030"
                position: 0.0;
                color: control.enabled ? control.pressed ? "#555555" : control.activeFocus ? "#222222" : control.hovered ? "#565656" : "#545454" : "#545454"
        opacity: 1 
            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.



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

User contributions licensed under: CC BY-SA
3 People found this is helpful