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

How to change the TabBar / TabButton "accent" location [Material]



  • Hi,

    Some advice please. I want to change the location of the highlight accent on the TabBar-TabButton when using Material design.
    If possible, can the "accent" highlight to be placed underneath the control text?, especially when the control is incorporated into an application's footer.

    I did discover the following links, but am unsure if this is TabBar or TabButton change? Or if what I want to do can be done per the information provided?:
    https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-tabbutton
    https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-tabbar

    This is what I am looking for (on the right-hand side, the default is on the left),
    I find the placement of the accent below the text to be visually more appealing when used on an applications' footer:
    0_1558464823236_8ec1d8c4-1b54-4d91-9886-7fd47afe6d16-image.png

    Thank you,
    Jake



    1. If the tab bar is assigned as a footer of ApplicationWindow or Page
    // CustomTabBar.qml
    
    import QtQuick 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Templates 2.12 as T
    import QtQuick.Controls.Material 2.12
    
    T.TabBar {
        id: control
    
        implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                                contentWidth + leftPadding + rightPadding)
        implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                                 contentHeight + topPadding + bottomPadding)
    
        spacing: 1
    
        contentItem: ListView {
            model: control.contentModel
            currentIndex: control.currentIndex
    
            spacing: control.spacing
            orientation: ListView.Horizontal
            boundsBehavior: Flickable.StopAtBounds
            flickableDirection: Flickable.AutoFlickIfNeeded
            snapMode: ListView.SnapToItem
    
            highlightMoveDuration: 250
            highlightResizeDuration: 0
            highlightFollowsCurrentItem: true
            highlightRangeMode: ListView.ApplyRange
            preferredHighlightBegin: 48
            preferredHighlightEnd: width - 48
    
            highlight: Item {
                z: 2
                Rectangle {
                    height: 2
                    width: parent.width
                    y: parent.height - height                      // <============
                    color: control.Material.accentColor
                }
            }
        }
    }
    
    // Test.qml
    Page {
        footer: CustomTabBar {
            ...
        }
    }
    
    1. !1
    Page {
        TabBar {
            anchors.bottom: parent.bottom
            width: parent.width
            position: TabBar.Header                   // <===============
            
            TabButton {
                text: "Foo"
            }
        }
    }


  • Hi @Jake-0 , you can make use of the position property.Instead of assigning the TabBar as header or footer of a ApplicationWindow, you can assign it a width,height and anchors,because if you assign it as a header or a footer you cant make use of the position property.

    Here is the sample code:-

    ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Tabs")
    
    TabBar {
        id: tabBar
        width: parent.width
        height: 50
        //####You can use anchors to position it anywhere
        anchors.centerIn: parent
        //####TabBar.Header:- Bottom Highlight
        //####TabBar.Footer:- Top Highlight
        position: TabBar.Header
    
        TabButton {
            text: qsTr("Page 1")
        }
    
        TabButton {
            text: qsTr("Page 2")
        }
    }
    

    }



  • @SHRINIDHI-UPADHYAYA and @Nifiro thank you both!
    (this forum and you guys are awesome!!)

    So there are two ways to circumvent the default logic applied to footers when using a QML Toolbar with material design. One either doesn't use the TabBar attached to the "footer:" (uses anchors instead) or one creates a new version (style) of T.TabBar and changes the logic around footer: position detection and the default highlight placement.

    So in both examples, one avoids using the default logic for highlighting the accent indicator's "y:" property, which occurs in the material design version of TabBar.qml. As by default, the following occurs (which may not be what you desire):

        // .../qml/QtQuick\Controls.2\Material\TabBar.qml , sets the y: location of the highlight
        y: control.position === T.TabBar.Footer ? 0 : parent.height - height  
    

    Your suggested changes do exactly what I want. Place the indicator under the control text

    Best,
    Jake


Log in to reply