QTabWidget customization

**Lykurg** · 16th July 2013, 09:36

Go ahead blaming me because of a typo. You also seem to not have understand the relation between tags like "Guru" and time of posting. Beside, I didn't gave me the title "Guru". It is just related on how many post you do here. Even if they are crap. So please do not blame me for things I am not responsible for. But anyway go on, dish the dirt, I do not care.

Or you can start spending the time solving your problem. As I am not very willing to help you after such comment (problem is the language not necessarily the content), but for the sake of peace I give a starting point. You just have to change it for your needs:

Qt Code:

Switch view

class CustomTabStyle : public QProxyStyle
{
public:
    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
                           const QSize &size, const QWidget *widget) const
    {
        QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (type == QStyle::CT_TabBarTab)
            s.transpose();
        return s;
    }
 
    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
    {
        if (element == CE_TabBarTabLabel)
        {
            if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option))
            {
                QStyleOptionTab opt(*tab);
                opt.shape = QTabBar::RoundedWest;
                QProxyStyle::drawControl(element, &opt, painter, widget);
                return;
            }
        }
        QProxyStyle::drawControl(element, option, painter, widget);
    }
};
 
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
 
    QTabBar tb;
    tb.setStyle(new CustomTabStyle);
    tb.addTab("Tab 1");
    tb.addTab("Tab 2");
    tb.show();
 
    return a.exec();
}

class CustomTabStyle : public QProxyStyle
{
public:
    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
                           const QSize &size, const QWidget *widget) const
    {
        QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (type == QStyle::CT_TabBarTab)
            s.transpose();
        return s;
    }

    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
    {
        if (element == CE_TabBarTabLabel)
        {
            if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option))
            {
                QStyleOptionTab opt(*tab);
                opt.shape = QTabBar::RoundedWest;
                QProxyStyle::drawControl(element, &opt, painter, widget);
                return;
            }
        }
        QProxyStyle::drawControl(element, option, painter, widget);
    }
};

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QTabBar tb;
    tb.setStyle(new CustomTabStyle);
    tb.addTab("Tab 1");
    tb.addTab("Tab 2");
    tb.show();
    
    return a.exec();
}

To copy to clipboard, switch view to plain text mode

To protect me against an other shit storm about how a Guru can write such a code: It is not the most elegant solution - I know -, but it is easy, quick and working.

EDIT: For a good starting point of reading: http://qt-project.org/doc/qt-4.8/style-reference.html (section Tabs)

**ataraxic** · 16th July 2013, 21:38

Originally Posted by Lykurg

Go ahead blaming me because of a typo.

Exellent...
That's what I was speaking about. Nice, neat, right to the point, no bullshit.
Thanks for help!

Sorry for the flames before. They were just because there are alot of >/dev/null posts around
that are really annoying.

**ataraxic** · 21st July 2013, 10:55

There is another useful thread related to this question (west qtabwidget with horizontal text):

http://www.qtforum.org/article/28672...b-positon.html

Originally Posted by Lykurg

Go ahead blaming me because of a typo

Hello Lykurg,
After trying your solution as is, I've got the following:

west-tab.png

Can you explain pls howto make horizontal text tabs and keep west qtab?

Thank you!

**Lykurg** · 22nd July 2013, 07:08

You only have to change a row and add one:

Qt Code:

Switch view

#include <QtGui>
 
class CustomTabStyle : public QProxyStyle
{
public:
    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
                           const QSize &size, const QWidget *widget) const
    {
        QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (type == QStyle::CT_TabBarTab)
            s.transpose();
        return s;
    }
 
    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
    {
        if (element == CE_TabBarTabLabel)
        {
            if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option))
            {
                QStyleOptionTab opt(*tab);
                opt.shape = QTabBar::RoundedNorth;
                QProxyStyle::drawControl(element, &opt, painter, widget);
                return;
            }
        }
        QProxyStyle::drawControl(element, option, painter, widget);
    }
};
 
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
 
    QTabBar tb;
    tb.setStyle(new CustomTabStyle);
    tb.setShape(QTabBar::RoundedWest);
    tb.addTab("Tab 1");
    tb.addTab("Tab 2");
    tb.show();
 
    return a.exec();
}

#include <QtGui>

class CustomTabStyle : public QProxyStyle
{
public:
    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
                           const QSize &size, const QWidget *widget) const
    {
        QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (type == QStyle::CT_TabBarTab)
            s.transpose();
        return s;
    }

    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
    {
        if (element == CE_TabBarTabLabel)
        {
            if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option))
            {
                QStyleOptionTab opt(*tab);
                opt.shape = QTabBar::RoundedNorth;
                QProxyStyle::drawControl(element, &opt, painter, widget);
                return;
            }
        }
        QProxyStyle::drawControl(element, option, painter, widget);
    }
};

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QTabBar tb;
    tb.setStyle(new CustomTabStyle);
    tb.setShape(QTabBar::RoundedWest);
    tb.addTab("Tab 1");
    tb.addTab("Tab 2");
    tb.show();
    
    return a.exec();
}

To copy to clipboard, switch view to plain text mode

**gurunbr** · 26th September 2013, 08:30

Hi Lykurg,

Is this possible I use your solution to rotate tab bar text from vertical to horizontal. if possible means how?. I attached my output as image. see this,Screenshot from 2013-09-26 12:51:53.jpg

**ataraxic** · 6th October 2013, 20:27

Here is a working example of the QTabWidget based on Lykurg CustomTabStyle class.
Works like charm with QT5.0 && QT5.1

tabdialog.pro:

Qt Code:

Switch view

QT += widgets
 
SOURCES       = main.cpp

QT += widgets

SOURCES       = main.cpp

To copy to clipboard, switch view to plain text mode

main.cpp:

Qt Code:

Switch view

#include <QtGui>
#include <QWidget>
#include <QDialog>
#include <QApplication>
#include <QtWidgets>
 
class CustomTabStyle : public QProxyStyle
{
public:
    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
                           const QSize &size, const QWidget *widget) const
    {
        QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (type == QStyle::CT_TabBarTab)
            s.transpose();
        return s;
    }
 
    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
    {
        if (element == CE_TabBarTabLabel)
        {
            if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option))
            {
                QStyleOptionTab opt(*tab);
                opt.shape = QTabBar::RoundedNorth;
                QProxyStyle::drawControl(element, &opt, painter, widget);
                return;
            }
        }
        QProxyStyle::drawControl(element, option, painter, widget);
    }
};
 
int main(int argc, char *argv[], char *envp[])
{
	QApplication app(argc, argv);
 
	QTabWidget *tabWidget = new QTabWidget;
 
	tabWidget->setTabPosition(QTabWidget::West);
	tabWidget->tabBar()->setStyle(new CustomTabStyle);
 
	tabWidget->addTab(new QWidget, "General");
	tabWidget->addTab(new QWidget, "Permissions");
	tabWidget->addTab(new QWidget, "Applications");
 
	QVBoxLayout *mainLayout = new QVBoxLayout;
	mainLayout->addWidget(tabWidget);
 
	tabWidget->show();
 
	return app.exec();
}

#include <QtGui>
#include <QWidget>
#include <QDialog>
#include <QApplication>
#include <QtWidgets>

class CustomTabStyle : public QProxyStyle
{
public:
    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
                           const QSize &size, const QWidget *widget) const
    {
        QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (type == QStyle::CT_TabBarTab)
            s.transpose();
        return s;
    }

    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
    {
        if (element == CE_TabBarTabLabel)
        {
            if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option))
            {
                QStyleOptionTab opt(*tab);
                opt.shape = QTabBar::RoundedNorth;
                QProxyStyle::drawControl(element, &opt, painter, widget);
                return;
            }
        }
        QProxyStyle::drawControl(element, option, painter, widget);
    }
};

int main(int argc, char *argv[], char *envp[])
{
	QApplication app(argc, argv);

	QTabWidget *tabWidget = new QTabWidget;

	tabWidget->setTabPosition(QTabWidget::West);
	tabWidget->tabBar()->setStyle(new CustomTabStyle);

	tabWidget->addTab(new QWidget, "General");
	tabWidget->addTab(new QWidget, "Permissions");
	tabWidget->addTab(new QWidget, "Applications");

	QVBoxLayout *mainLayout = new QVBoxLayout;
	mainLayout->addWidget(tabWidget);

	tabWidget->show();

	return app.exec();
}

To copy to clipboard, switch view to plain text mode

to compile (! M$):

Qt Code:

Switch view

qmake -o Makefile tabdialog.pro
make

qmake -o Makefile tabdialog.pro
make

To copy to clipboard, switch view to plain text mode

output:
horiz-tab-dialog.png

**rawfool** · 26th February 2014, 11:45

Thanks for this. But I'm having some problems related to size of icon; resizing of tab width, height; setting the color of tab
In tried like this, but I think that's not the proper way to change the size

Qt Code:

Switch view

QSize sizeFromContents(ContentsType type, const QStyleOption *option,
                           const QSize &size, const QWidget *widget) const
{
    QSize s = QProxyStyle::sizeFromContents(type, option, QSize(40, 120), widget);  // instead of size, I'm hardcoding the value with QSize(40, 120)
    if (type == QStyle::CT_TabBarTab)
        s.transpose();
    return s;
}

QSize sizeFromContents(ContentsType type, const QStyleOption *option,
                           const QSize &size, const QWidget *widget) const
{
    QSize s = QProxyStyle::sizeFromContents(type, option, QSize(40, 120), widget);  // instead of size, I'm hardcoding the value with QSize(40, 120)
    if (type == QStyle::CT_TabBarTab)
        s.transpose();
    return s;
}

To copy to clipboard, switch view to plain text mode

1. I'm setting 64x64 pix icon, but still it's being displayed as a small icon. How do I set it to show original size of icon ?
2. How to give custom width & height to the tab ?
3. How to set the color of tab

Kindly help. Thank you.

**ckvsoft** · 26th November 2017, 11:01

Hallo

I know, this is an old Thread but i found it now ;-)

On MAC (Sierra QT5.6) i can't see the Text.
Any ideas?
thx Chris

Thread: QTabWidget customization

Thread Tools

Search Thread

Display

Hybrid View

Re: QTabWidget customization

The following user says thank you to Lykurg for this useful post:

Re: QTabWidget customization

Re: QTabWidget customization

Re: QTabWidget customization

The following 2 users say thank you to Lykurg for this useful post:

Re: QTabWidget customization

Re: QTabWidget customization

The following 4 users say thank you to ataraxic for this useful post:

Re: QTabWidget customization

Re: QTabWidget customization

Similar Threads

QTabWidget remove a page at the page's request

add a label in a QTabWidget

Adding QGroupBox to QTabWidget

QTabWidget Placement and Display

Corner widget in QTabWidget doesn't show up

Bookmarks

Bookmarks

Posting Permissions