Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How do I add Imaged on the Tab ?



  • This is what i have now
    alt text

    This is what i want it to be
    alt text

    Instead of those Text i want to add those Images on the Tab

    Please ignore the Borders since i want a cleaner look .



  • @Smaranil

    Did you see already this version of addTab?



  • i am unable to understand that if there is any video explaining this it would be helpful. since i am not a Coder i only do Designing and a little bit of Copy paste work



  • @Smaranil

    How and with what did you create the tabs shown above?

    Probably best is to post a code section.



  • @Smaranil
    if you are designer You do not need to know this.
    And if you want to know how to do this, then you should learn how to do it.



  • @koahnig I used QTabWidegt and used Stylesheet to make it look that way . Still since u asked for the whole code i will give it

    Header Files

    mainwindow.h

    #ifndef MAINWINDOW_H
    #define MAINWINDOW_H
    
    #include <QMainWindow>
    #include <QMouseEvent>
    
    
    namespace Ui {
    class MainWindow;
    }
    
    class MainWindow : public QMainWindow
    {
        Q_OBJECT
    
    public:
        explicit MainWindow(QWidget *parent = 0);
        ~MainWindow();
    
    
    private:
        Ui::MainWindow *ui;
        void mousePressEvent(QMouseEvent *event);
        void mouseMoveEvent(QMouseEvent *event);
        int m_nMouseClick_X_Coordinate;
        int m_nMouseClick_Y_Coordinate;
    
    
    };
    
    #endif // MAINWINDOW_H
    
    

    main.cpp

    #include "mainwindow.h"
    #include <QApplication>
    
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
        MainWindow w;
    
    
        w.show();
    
    
    
        return a.exec();
    }
    

    mainwindow.cpp

    #include "mainwindow.h"
    #include "ui_mainwindow.h"
    
    MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent,Qt::FramelessWindowHint),
        ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
    }
    
    MainWindow::~MainWindow()
    {
        delete ui;
    }
    
    void MainWindow::mousePressEvent(QMouseEvent *event) {
        m_nMouseClick_X_Coordinate = event->x();
        m_nMouseClick_Y_Coordinate = event->y();
    }
    
    void MainWindow::mouseMoveEvent(QMouseEvent *event) {
        move(event->globalX()-m_nMouseClick_X_Coordinate,event->globalY()-m_nMouseClick_Y_Coordinate);
    }
    

    stylesheet of Qtabwidget

    QTabBar::tab:selected { 
    color: rgb(0, 0, 0);
    background-color:rgb(255, 255, 255);
    }
    
    QTabBar::tab:!selected {
    color:rgb(0, 0, 0);
    background-color:rgb(223, 223, 223);
    border-bottom-color: #4FA600;
    }
    
    QTabWidget:pane { /*replace icon text as pane ok....*/
    margin: 1px,1px,1px,1px;
    background-color: rgb(255,255,255);
    }
    
    QTabBar::tab { 
    
    height: 130px;
    width: 130px;
    background-color: rgb(255,255,255);
    } 
    
    QTabWidget{
    background-color: rgb(255,255,255);
    font: 75 14pt "Arial Rounded MT Bold";
    }
    
    QTabWidget::tab-bar { 
    left: 5px; /* move to the right by 5px */
    bottom: -1px;
    background-color: rgb(255,255,255); } 
    
    QTabWidget::pane { border: 0; }
    
    

    [edit:koahnig revised the code tagged sections for easier reading]



  • @Smaranil

    if you got to this page, there are apparently examples of including icons.

    However, I would not know how you can select and modify a specific tab there using the style-sheet.

    However, you can also source code to set an icon

    you would need something like

    QIcon myIcon ("c:/icons/myIconFile");
    ui->%here is the name of the tab widget%->setTabIcon ( 0, myIcon );
    

    QIcon contructor tells you about the read options.


  • Lifetime Qt Champion

    Hi
    You can assign icons directly in Designer
    alt text

    Note, that if the app should be anything more that a demo, you should use
    a QResource file to hold the images and not be tempted to use "Choose file" and point to image
    on random paths.


Log in to reply