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

[forestdweller]

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?

[Jens]

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)
}
}
}
}@

[forestdweller]

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.

[Jens]

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)
}
}
}
}
}
}
@