How to set the icon size for a specific QTabBar button?
-
I'm trying to create an effect similar to this gif:
While you are hovering over the tab button it shows a text and also resizes the icon.
I was reading the docs about the property
icon-size
it says it supportsQTabBar
, but adding the property into the tab stylesheet, has no effect when the button is being hovered.I'm doing something wrong or it's a 'bug'?
QTabBar::tab:hover { font-size: 12pt; icon-size: 64px 64px; color: rgb(255, 255, 255); background: transparent; }
As I couldn't get it working with a stylesheet, I tried using an event filter:
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow) { ui->setupUi(this); ui->tabWidget->tabBar()->installEventFilter(this); } bool MainWindow::eventFilter(QObject *obj, QEvent *event) { if (event->type() == QEvent::HoverEnter) { QTabBar *tabbar = static_cast<QTabBar*>(obj); tabbar->setIconSize(QSize(40, 40)); } else if (event->type() == QEvent::HoverLeave) { QTabBar *tabbar = static_cast<QTabBar*>(obj); tabbar->setIconSize(QSize(32,32)); } // pass the event on to the parent class return QMainWindow::eventFilter(obj, event); }
Result:
Whenever any tab button has hovered, it resizes all icons.
How I could resize just the tab button under the mouse instead of the entire "QTabBar"?
Tab stylesheet options from the gif above:
QTabWidget::pane { background: transparent; } QTabBar::tab { font-size: 12pt; color: rgba(255, 255, 255, 0); background: transparent; } QTabBar::tab:hover { font-size: 12pt; color: rgb(255, 255, 255); background: transparent; } QTabBar::tab:selected { background: transparent; }
I don't understand what's going on with the text, the tab text is "Tab" but it's cropping the "T".
Why the tab pane background is not getting transparent?