I want to style my tabs in my Qt app as follows:
I used following style sheet:
QTabBar{background-color: #fff; border-top: 0px;}
QTabBar::tab {
border-image: url(:/New_UI/tab_inactive.png) 7 17 7 2;
margin-left: 2px;
border-right: 17px;
border-top: 5px;
border-bottom: 5px;
font: 400 9.2pt "Segoe UI";
color: #ccc;
padding: 0px 13px 0px 5px;
max-height: 26px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
border-image: url(:/New_UI/tab_active.png) 6 17 6 2;
}
QTabBar::close-button {
image: url(:/New_UI/tab_close.png);
subcontrol-origin: padding;
subcontrol-position: right;
width: 13px;
height: 13px;
}
The result is as follows (close button position is not as I wanted):
What am I doing wrong & how could I get my desired result ?
EDIT : I know this post is old, but I hope it could help someone else.
After a couple of tests, I think there is one way to do this, but it does not use Qt style sheets
:
QTabWidget
to have complete access to the protected featuresQWidget
or QPushButton
as your close buttonmargin-right
for example)tabBar()->setTabButton(index, QTabBar::RightSide, closeButton);
The code I used for the test :
MyTab::MyTab(QWidget *parent) : QTabWidget(parent)
{
/// Create your button
QPushButton *close = new QPushButton(this);
// Add a tab
addTab(new QWidget(), QIcon(), "Tab 1");
setStyleSheet("QTabBar::tab { width : 150px;}");
// Size and move your button
close->setStyleSheet("max-height: 14px; max-width: 15px; margin-right: 50px;");
// Add your button to the tab
tabBar()->setTabButton(0, QTabBar::RightSide, close);
}
Finally, in the MainWindow, I added my own TabWidget to a layout :
ui->layout->addWidget(new MyTab(this));
The result :
But now you will have to handle the close action manually by connecting the button and get the index for a removeTab(index)
call.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With