How to implement vertical tabs in QT?

Question

I am trying to implement vertical tabs with horizontal text with QT but I cannot find any similar option in QTabWidget.

Somebody in SO asked for something similar here, however, the answers contain broken links and I doubt that they present a real solution.

Anybody has been able to do that?

Harding

Answer 1

You have to implement a custom QTabBar overwriting the tabSizeHint() and paintEvent() methods as shown below:

#include <QApplication>
#include <QStyleOptionTab>
#include <QStylePainter>
#include <QTabBar>
#include <QTabWidget>

class TabBar: public QTabBar{
public:
    QSize tabSizeHint(int index) const{
        QSize s = QTabBar::tabSizeHint(index);
        s.transpose();
        return s;
    }
protected:
    void paintEvent(QPaintEvent * /*event*/){
        QStylePainter painter(this);
        QStyleOptionTab opt;

        for(int i = 0;i < count();i++)
        {
            initStyleOption(&opt,i);
            painter.drawControl(QStyle::CE_TabBarTabShape, opt);
            painter.save();

            QSize s = opt.rect.size();
            s.transpose();
            QRect r(QPoint(), s);
            r.moveCenter(opt.rect.center());
            opt.rect = r;

            QPoint c = tabRect(i).center();
            painter.translate(c);
            painter.rotate(90);
            painter.translate(-c);
            painter.drawControl(QStyle::CE_TabBarTabLabel,opt);
            painter.restore();
        }
    }
};

class TabWidget : public QTabWidget
{
public:
    TabWidget(QWidget *parent=0):QTabWidget(parent){
        setTabBar(new TabBar);
        setTabPosition(QTabWidget::West);
    }
};

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    TabWidget w;
    w.addTab(new QWidget, "tab1");
    w.addTab(new QWidget, "tab2");
    w.addTab(new QWidget, "tab3");
    w.show();

    return a.exec();
}

Canonize

Hi! I have tried your code and get: ibb.co/dVuuYd Then I have added this->setStyleSheet("QTabBar::tab {width: 115px; height: 30px; color: #000000; font-weight: bold; font-size: 10px;"); to make it bigger. I get the text vertical: ibb.co/gJqMeJ How do you set the size of the tab, so the text is horizontal? Thanks. – Wyler

@Wyler use "QTabBar::tab {height: 115px; width: 30px; color: #000000; font-weight: bold; font-size: 10px;}" – Canonize

Yes, I understood. I have changed the code this->setStyleSheet("QTabBar::tab {height: 115px; width: 30px; color: #000000; font-weight: bold; font-size: 10px;}"); but now I get: ibb.co/nGZWwy – Wyler

I have fixed it by changing: QTabBar::paintEvent(event); to QWidget::paintEvent(event); after the paintEvent method code. Now it works: ibb.co/j8rN3d Thank you. – Wyler

It was my code mixed with yours. Now the problem solved. Thank you. – Wyler

I'm curious about the translate/rotate/translate sequence during paintEvent. I get the rotation, but why move and move back? – Keefe

@JonHarper when you rotate what you do with respect to an origin, for that reason I move to the center of the rectangle, the broken thing, but then I have to paint it from the initial origin since that expects the drawControl function, I recommend that you experiment eliminating that line. – Canonize

Ohhhh. My Cartesian math needed refreshing. Thank you. – Keefe

@JonHarper LOL, it's a bit of dull and boring math :) – Canonize

Hi! It works well but when I applied this stylesheet: "QTabBar::tab:selected {background-color: #FA9944; color: #000000; border-top: 1px solid #FA9944;} QTabBar::tab:hover {color: #000000; border-top: 1px solid #FA9944; background-color: #FFFFFF;}" Images: ibb.co/ezSb6K ibb.co/jstutz It styles tabs the wrong way. Should I reimplement press event and hover event? Any suggestions? Thanks. – Wyler

@Wyler you could place a better quality image to understand you – Canonize

@Wyler Could you tell me what the inconvenience is, with the images alone I could not understand it. – Canonize

The problem is that it paints only some part of the tab, not entire tab, when tab is selected or hovered. – Wyler

I have created the gif image of the issue: ddgobkiprc33d.cloudfront.net/… Any ideas how to fix it? Thanks. – Wyler

I have fixed the issue. I will post it in the answer. – Wyler

@Wyler The only difference I see is: QWidget::paintEvent(event);, On the other hand, my original code does not cause problems for me, what style are you using? – Canonize

@Canonize Actually the difference is in the tabSizeHint method which sets the size of the tabs. Your code works only for default size. – Wyler

@Wyler mmm, I expected a cleaner solution, implement it from C ++ makes less flexible to qss. – Canonize

@Canonize By the way, your solution is only works for QTabWidget::West tab position. If you want QTabWidget::East tab position you should change painter.rotate(270); otherwise the text will be upside down. In my project I saved the position and add additional check to the paintEvent method. – Wyler

@Cobra91151, Yes, because what the OP required of me was that, and how you see changing it is simple. :) – Canonize

Answer 2

So my solution to fix this styling issue is:

Code:

apptabbar.h

#ifndef APPTABBAR_H
#define APPTABBAR_H

#include <QTabBar>
#include <QStylePainter>
#include <QStyleOptionTab>

class AppTabBar : public QTabBar
{
public:
    AppTabBar();
    AppTabBar(int tabWidth, int tabHeight);
    AppTabBar(QSize tabSize);
    AppTabBar(QWidget *parent);
    AppTabBar(QWidget *parent, int tabWidth, int tabHeight);
    AppTabBar(QWidget *parent, QSize tabSize);
    QSize tabSizeHint(int index) const override;
    ~AppTabBar();

protected:
    void paintEvent(QPaintEvent *event) override;

private:
    int width, height;
};

#endif // APPTABBAR_H

apptabbar.cpp

#include "apptabbar.h"

AppTabBar::AppTabBar() : QTabBar(),
width(30),
height(115)
{

}

AppTabBar::AppTabBar(int tabWidth, int tabHeight) : QTabBar(),
width(tabWidth),
height(tabHeight)
{

}

AppTabBar::AppTabBar(QSize tabSize) : QTabBar(),
width(tabSize.width()),
height(tabSize.height())
{

}

AppTabBar::AppTabBar(QWidget *parent) : QTabBar(parent),
width(30),
height(115)
{

}

AppTabBar::AppTabBar(QWidget *parent, int tabWidth, int tabHeight) : QTabBar(parent),
width(tabWidth),
height(tabHeight)
{

}

AppTabBar::AppTabBar(QWidget *parent, QSize tabSize) : QTabBar(parent),
width(tabSize.width()),
height(tabSize.height())
{

}

AppTabBar::~AppTabBar()
{

}

QSize AppTabBar::tabSizeHint(int index) const
{
    QSize s = QTabBar::tabSizeHint(index);
    s.setWidth(width);
    s.setHeight(height);
    s.transpose();
    return s;
}

void AppTabBar::paintEvent(QPaintEvent *event)
{
    QStylePainter painter(this);
    QStyleOptionTab opt;

    for (int i = 0; i < this->count(); i++) {
        initStyleOption(&opt, i);
        painter.drawControl(QStyle::CE_TabBarTabShape, opt);
        painter.save();

        QSize s = opt.rect.size();
        s.transpose();
        QRect r(QPoint(), s);
        r.moveCenter(opt.rect.center());
        opt.rect = r;

        QPoint c = tabRect(i).center();
        painter.translate(c);
        painter.rotate(90);
        painter.translate(-c);
        painter.drawControl(QStyle::CE_TabBarTabLabel, opt);
        painter.restore();
    }

    QWidget::paintEvent(event);
}

apptabcontrol.h

#ifndef APPTABCONTROL_H
#define APPTABCONTROL_H

#include <QTabWidget>
#include <QTabBar>
#include <QPalette>
#include <QPainter>
#include <QDebug>
#include "apptabbar.h"

class AppTabControl : public QTabWidget
{
public:
    AppTabControl();
    AppTabControl(QWidget *parent);
    AppTabControl(QWidget *parent, int width, int height);
    AppTabControl(QWidget *parent, QSize size);
    void setTabControlSize(int width, int height);
    void setTabControlSize(QSize tabSize);
    ~AppTabControl();

private:
    int tabWidth, tabHeight;
    QSize tabSize;
};

#endif // APPTABCONTROL_H

apptabcontrol.cpp

#include "apptabcontrol.h"

AppTabControl::AppTabControl()
{

}

AppTabControl::AppTabControl(QWidget *parent) : QTabWidget(parent)
{
    this->setTabBar(new AppTabBar(parent, tabWidth, tabHeight));
    this->setTabPosition(QTabWidget::West);
}

AppTabControl::AppTabControl(QWidget *parent, int width, int height) : QTabWidget(parent),
tabWidth(width),
tabHeight(height)
{
    this->setTabBar(new AppTabBar(parent, tabWidth, tabHeight));
    this->setTabPosition(QTabWidget::West);
}

AppTabControl::AppTabControl(QWidget *parent, QSize size) : QTabWidget(parent),
tabSize(size)
{
    this->setTabBar(new AppTabBar(parent, tabSize));
    this->setTabPosition(QTabWidget::West);
}

void AppTabControl::setTabControlSize(int width, int height)
{
    tabWidth = width;
    tabHeight = height;
}

void AppTabControl::setTabControlSize(QSize size)
{
    tabSize = size;
}

AppTabControl::~AppTabControl()
{

}

And now the final part:

Test::Test(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Test)
{
    AppTabControl *tabControl = new AppTabControl(this, 30, 115);
    this->setStyleSheet("QTabBar::tab {color: #000000; font-weight: bold; font-size: 10px; font-family: Gotham, Helvetica Neue, Helvetica, Arial, sans-serif;} "
   "QTabBar::tab:selected {background-color: #FA9944; color: #000000; border-top: 1px solid #FA9944;} "
   "QTabBar::tab:hover {color: #000000; border-top: 1px solid #FA9944; background-color: #FFFFFF;}");
    AppTabBar *tabBar1 = new AppTabBar(tabControl);
    AppTabBar *tabBar2 = new AppTabBar(tabControl);
    AppTabBar *tabBar3 = new AppTabBar(tabControl);
    tabControl->addTab(tabBar1, "Tab1");
    tabControl->addTab(tabBar2, "Tab2");
    tabControl->addTab(tabBar3, "Tab3")
}

The result:

Everything works well now.

Wyler

Answer 3

Solution for PyQt5

For PyQt5, the solution is like this (translated reply from @ellyanesc from C++ to Python):

from __future__ import annotations
from typing import *
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *

class VTabBar(QTabBar):
    def __init__(self, *args, **kwargs) -> None:
        super().__init__(*args, **kwargs)
        return

    def tabSizeHint(self, index:int) -> QSize:
        s = super().tabSizeHint(index)
        s.transpose()
        return s

    def paintEvent(self, event:QPaintEvent) -> None:
        painter:QStylePainter = QStylePainter(self)
        opt:QStyleOptionTab = QStyleOptionTab()
        for i in range(self.count()):
            self.initStyleOption(opt, i)
            painter.drawControl(QStyle.CE_TabBarTabShape, opt)
            painter.save()

            s:QSize = opt.rect.size()
            s.transpose()
            r:QRect = QRect(QPoint(), s)
            r.moveCenter(opt.rect.center())
            opt.rect = r

            c:QPoint = self.tabRect(i).center()
            painter.translate(c)
            painter.rotate(90)
            painter.translate(-c)
            painter.drawControl(QStyle.CE_TabBarTabLabel, opt)
            painter.restore()
        return

class VTabWidget(QTabWidget):
    def __init__(self, parent:QWidget=None) -> None:
        super().__init__(parent)
        self.setTabBar(VTabBar())
        self.setTabPosition(QTabWidget.West)
        return

if __name__ == '__main__':
    app = QApplication(sys.argv)
    QApplication.setStyle(QStyleFactory.create('Plastique'))
    w = VTabWidget()
    w.addTab(QWidget(), 'tab1')
    w.addTab(QWidget(), 'tab2')
    w.addTab(QWidget(), 'tab3')
    w.show()
    sys.exit(app.exec_())

Heartstrings