[Solved] How to add a Close Button in TabView Tabs



  • It seems that the TabBar delegate (a MouseArea) hides any mouse area defined in the tabitem.
    Has anyone successfully added a close button to tab defined in a derived TabViewStyle?



  • It is possible to do this with a custom style. The drawback is that you will have to provide custom styling for the button itself:

    @ TabView {
    id: tabView
    anchors.fill: parent
    anchors.margins: 10
    Tab { title: "first" }
    Tab { title: "second" }
    Tab { title: "third" }
    style: TabViewStyle {
    property color frameColor: "#999"
    property color fillColor: "#eee"
    frameOverlap: 1
    frame: Rectangle {
    color: "#eee"
    border.color: frameColor
    }
    tab: Rectangle {
    color: styleData.selected ? fillColor : frameColor
    implicitWidth: Math.max(text.width + 24, 80)
    implicitHeight: 20
    Rectangle { height: 1 ; width: parent.width ; color: frameColor}
    Rectangle { height: parent.height ; width: 1; color: frameColor}
    Rectangle { x: parent.width -1; height: parent.height ; width: 1; color: frameColor}
    Text {
    id: text
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    anchors.leftMargin: 6
    text: styleData.title
    color: styleData.selected ? "black" : "white"
    }
    Button {
    anchors.right: parent.right
    anchors.verticalCenter: parent.verticalCenter
    anchors.rightMargin: 4
    height: 16
    style: ButtonStyle {
    background: Rectangle {
    implicitWidth: 16
    implicitHeight: 16
    radius: width/2
    color: control.hovered ? "#eee": "#ccc"
    border.color: "gray"
    Text {text: "X" ; anchors.centerIn: parent ; color: "gray"}
    }}
    onClicked: tabView.removeTab(styleData.index)
    }
    }
    }
    }@



  • Thanks Jens,
    I actually was doing something similar using an Image and MouseArea instead of a Button. Switching to the Button works fine. I guess I still don't quite get the Controls code yet.



  • There is nothing really special about the button so I am curious what the problem was. This is how the code might look with a regular mouse area:
    @
    import QtQuick 2.0
    import QtQuick.Controls 1.1
    import QtQuick.Controls.Styles 1.1

    Item {
    width: 400
    height: 300
    TabView {
    id: tabView
    anchors.fill: parent
    anchors.margins: 10
    Tab { title: "first" }
    Tab { title: "second" }
    Tab { title: "third" }
    style: TabViewStyle {
    property color frameColor: "#999"
    property color fillColor: "#eee"
    frameOverlap: 1
    frame: Rectangle {
    color: "#eee"
    border.color: frameColor
    }
    tab: Rectangle {
    color: styleData.selected ? fillColor : frameColor
    implicitWidth: Math.max(text.width + 24, 80)
    implicitHeight: 20
    Rectangle { height: 1 ; width: parent.width ; color: frameColor}
    Rectangle { height: parent.height ; width: 1; color: frameColor}
    Rectangle { x: parent.width -1; height: parent.height ; width: 1; color: frameColor}
    Text {
    id: text
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    anchors.leftMargin: 6
    text: styleData.title
    color: styleData.selected ? "black" : "white"
    }
    Rectangle {
    anchors.right: parent.right
    anchors.verticalCenter: parent.verticalCenter
    anchors.rightMargin: 4
    implicitWidth: 16
    implicitHeight: 16
    radius: width/2
    color: control.hovered ? "#eee": "#ccc"
    border.color: "gray"
    Text {text: "X" ; anchors.centerIn: parent ; color: "gray"}
    MouseArea {
    anchors.fill: parent
    onClicked: tabView.removeTab(styleData.index)
    }
    }
    }
    }
    }
    }
    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.