Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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)

    0_1546429165333_sample_01.png

    but when I apply my style on "TabButton" it doesn't work:

    0_1546429668805_sample_02.png

    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.



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


Log in to reply