customizing QTabWidget

[mecctor]

when the tab was selected,how can I want to get rid of this bottom line?

[AxelVienna]

That depends on your stylesheet, which you typically load from a file and set it in main.cpp:

    // Read style sheet
    QFile file(":/yourStyleSheet.qss");
    file.open(QFile::ReadOnly | QFile::Text);
    QTextStream stream(&file);
    a.setStyleSheet(stream.readAll());

As an example, a stylesheet without bottom lines on selected tabs is available here.

[mecctor]

@AxelVienna thank u very much.
here is my QSS

QTabWidget::pane { /* The tab widget frame */
    border-top: 1px solid #C2C7CB;  /* here is the line*/
 padding:20px;
}

QTabWidget::tab-bar {
    left: 2px; /* move to the right by 5px */
	
}
QTabWidget{
	background-color:#ffffff;
}
/* Style the tab using the tab sub-control. Note that
    it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
	/*margin:0px;/*0 这里可以让tab 跟 TabWidget连成一片*/
    margin-left:4px;
	padding:4px;
	border-top-left-radius: 6px;
    border-top-right-radius: 6px;
	background:#ffffff;
	border:1px solid #d9d9d9;
	border-bottom:0px none;
	min-height:20px;
}

QTabBar::tab:selected {
    border-color: #9B9B9B;
    border-bottom-color: #00ffff; /* same as pane color */
    margin-bottom:-1px;    /*here when selected,I want tab to lower a px. so to covery the line.
                                               but the line is in front of tab*/
                                         
}

[AxelVienna]

You should disable the bottom like that:

QTabBar::tab:bottom:selected:disabled, QDockWidget QTabBar::tab:bottom:selected:disabled {
  border-top: 3px solid #26486B;
  color: #9DA9B5;
  background-color: #455364;
}

[mecctor]

@AxelVienna It do't work!

actualy above is i want to do.

[AxelVienna]

So what is your new code?

[mecctor]

This post is deleted!

[jsulm]

@mecctor said in customizing QTabWidget:

the below is my QT QSS

The question was: how does your current code/style-sheet looks like? What you want to achieve is clear...

[mecctor]

auto cutDir = QCoreApplication::applicationDirPath();
auto resFile = cutDir + "/TabWidget.css";
QFile cssFile(resFile);
if( cssFile.open(QFile::ReadOnly))
{
    QString styleSheet = QLatin1String(cssFile.readAll());

    ui->tabWidget->setStyleSheet(styleSheet);
    cssFile.close();

}

auto tab1 = new QTabBar;
auto tab2 = new QTabBar;
auto tab3= new QTabBar;

/*tabLayout->addWidget(btn);
ui->tabWidget->setLayout(tabLayout);*/

// tab1->setObjectName(QStringLiteral("TabName"));

ui->tabWidget->setTabsClosable(true);

ui->tabWidget->addTab(tab1,QStringLiteral("网易中国"));
ui->tabWidget->addTab(tab2,QStringLiteral("百度"));
ui->tabWidget->addTab(tab3,QStringLiteral("爱奇艺"));

and the file TabWidget.css is below:

QTabWidget::pane { /* The tab widget frame */
border-top: 1px solid #C2C7CB;
padding:20px;
}

QTabWidget::tab-bar {
left: 2px; /* move to the right by 5px */

}
QTabWidget{
background-color:#ffffff;
}
/* Style the tab using the tab sub-control. Note that
it reads QTabBar not QTabWidget */
QTabBar::tab {
/*margin:0px;/0 这里可以让tab 跟 TabWidget连成一片/
margin-left:4px;
padding:4px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background:#ffffff;
border:1px solid #d9d9d9;
border-bottom:0px none;
min-height:20px;
}

QTabBar::tab:selected {
border-color: #9B9B9B;
border-bottom-color: #00ffff; /* same as pane color */
margin-bottom:-1px;
}