Customizing QTabWidget and QTabBar

cpp 复制代码
 QTabWidget::pane { /* The tab widget frame */
     border-top: 2px solid #C2C7CB;
 }

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

 QTabBar::tab {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
     border: 2px solid #C4C4C3;
     border-bottom-color: #C2C7CB; /* same as the pane color */
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     min-width: 8ex;
     padding: 2px;
 }

1、QTabWidget::pane 是按钮与主窗体之间的线条

QTabWidget::pane { border-top: 8px solid red;} 的效果:

2、QTabWidget::tab-bar 按钮

QTabWidget::tab-bar {left: 300px;}

QTabWidget::tab-bar {alignment: center; }

3、烤串效果

cpp 复制代码
QTabWidget::pane {

border-top: 2px solid #C2C7CB;

position: absolute;

top: -0.5em;

}



QTabWidget::tab-bar {

alignment: center;

}

4、tab 按钮

QTabBar::tab {background: red;}

5、tab 按钮突出效果

cpp 复制代码
 QTabBar::tab {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #D0D1FD,  stop: 1.0 #FFFFFF);
   
     border: 2px solid red;
     border-bottom-color: #C2C7CB; /* same as the pane color */
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     min-width: 100%;
     max-width: 150%;
     padding: 2px;
 }
 QTabBar::tab:!selected {
     margin-top: 20px; /* make non-selected tabs look smaller */
 }

6、tab 按钮点击、悬停、选中效果

cpp 复制代码
 QTabWidget::pane { /* The tab widget frame */
     border-top: 2px solid #C2C7CB;
 }

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

 /* Style the tab using the tab sub-control. Note that
     it reads QTabBar _not_ QTabWidget */
 QTabBar::tab {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
     border: 2px solid #C4C4C3;
     border-bottom-color: #C2C7CB; /* same as the pane color */
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     min-width: 8ex;
     padding: 2px;
 }

 QTabBar::tab:selected, QTabBar::tab:hover {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #fafafa, stop: 0.4 #f4f4f4,
                                 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
 }

 QTabBar::tab:selected {
     border-color: #9B9B9B;
     border-bottom-color: #C2C7CB; /* same as pane color */
 }

 QTabBar::tab:!selected {
     margin-top: 2px; /* make non-selected tabs look smaller */
 }

 /* make use of negative margins for overlapping tabs */
 QTabBar::tab:selected {
     /* expand/overlap to the left and right by 4px */
     margin-left: -4px;
     margin-right: -4px;
 }

 QTabBar::tab:first:selected {
     margin-left: 0; /* the first selected tab has nothing to overlap with on the left */
 }

 QTabBar::tab:last:selected {
     margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
 }

 QTabBar::tab:only-one {
     margin: 0; /* if there is only one tab, we don't want overlapping margins */
 }
相关推荐
轩情吖2 天前
Qt常用控件之QWidget(一)
c++·qt·geometry·qwidget·qpushbutton·客户端开发·enabled
Wyn_24 天前
【QT】自定义QWidget设置圆角+边框(重绘paintEvent)
qt·qwidget
chao_7891 个月前
标注工具核心代码解析——class AnnotationVie【canvas.py]
开发语言·python·qt5
foundbug9991 个月前
基于qt5和stk10开发的互联调试
qt5
奇树谦2 个月前
VTK|显示三维图像的二维切片
c++·vtk·qt5·三维显示
钟剑锋-JeffChong2 个月前
一文详解 Linux下的开源打印系统CUPS(Common UNIX Printing System)
linux·嵌入式·qt5·打印机·cups
Zfox_2 个月前
【Qt】网络
开发语言·网络·c++·qt·qt5·客户端开发
钟剑锋-JeffChong2 个月前
Qt快速上手:QSettings高效配置读写实战指南
跨平台·qt5·配置管理·qsettings
Zfox_3 个月前
【Qt】文件
c++·qt·qt5·客户端开发
Zfox_3 个月前
【Qt】QDialog类
c++·qt·qt5·客户端开发