QTabWidget添加自定义样式

简介: QTabWidget添加自定义样式

一、参考文章:http://bbs.csdn.net/topics/390632657?page=1


image.png




setStyleSheet("QTabWidget::pane{border-width:1px;border-color:rgb(48, 104, 151);\

                                   border-style: outset;background-color: rgb(132, 171, 208);\

                                   background: transparent;} \

QTabWidget::tab-bar{border-width:0px;}\

QTabBar::tab{border-bottom-color: #C2C7CB;\

            border-top-left-radius: 0px;\

            border-top-right-radius: 0px;\

            max-width: 75px; min-width:75px; min-height:25px;\

            font:14px Times New Roman;\

                padding: 0px;\

                }\

QTabBar::scroller {\

                  width:25;\

                      border:0;\

                          padding: 0px;\

                          }\

QTabBar QToolButton::right-arrow {\

                                 background-color:rgb(132, 171, 208);\

                                 border-width: 0;\

                                 background-image: url(:/images/tab/rightbtn.png);\

                             }\

QTabBar QToolButton::right-arrow:hover {\

                                       background-color:rgb(132, 171, 208);\

                                       border-width: 0;\

                                       background-image: url(:/images/tab/hoverrightbtn.png);\

                                   }\

QTabBar QToolButton::right-arrow:disabled {\

                                       background-color:rgb(132, 171, 208);\

                                       border-width: 0;\

                                       background-image: url(:/images/tab/grayrightbtn.png);\

                                   }\

QTabBar QToolButton::left-arrow {\

                                background-color:rgb(132, 171, 208);\

                                border-width: 0;\

                                background-image: url(:/images/tab/leftbtn.png);\

                            }\

QTabBar QToolButton::left-arrow:hover {\

                                      background-color:rgb(132, 171, 208);\

                                      border-width: 0;\

                                      background-image: url(:/images/tab/hoverleftbtn.png);\

                                  }\

QTabBar QToolButton::left-arrow:disabled {\

                                      background-color:rgb(132, 171, 208);\

                                      border-width: 0;\

                                      background-image: url(:/images/tab/grayleftbtn.png);\

                                  }\

QTabBar::tab:first:selected {\

                            margin-left: 30; margin-right: 0;\

                            color: white;\

                                border-image: url(:/images/tab/sel3.png);\

                            }\

QTabBar::tab:first:!selected {\

                             color: black;\

                                 margin-left: 30; margin-right: 0;\

                                 border-image: url(:/images/tab/normal3.png);\

                             }\

QTabBar::tab:first:hover:!selected {\

                                   color: black;\

                                       margin-left: 30; margin-right: 0;\

                                       border-image: url(:/images/tab/hover3.png);\

                                   }\

QTabBar::tab:middle:selected {\

                             margin-top: 0; margin-left: -15; margin-right: 8;\

                             color: white;\

                                 border-image: url(:/images/tab/sel3.png);\

                             }\

QTabBar::tab:middle:!selected {\

                              color: black;\

                                  margin-top: 0; margin-left: -15; margin-right: 8;\

                                  border-image: url(:/images/tab/normal3.png);\

                              }\

QTabBar::tab:middle:hover:!selected {\

                                    color: black;\

                                        margin-top: 0; margin-left: -15; margin-right: 8;\

                                        border-image: url(:/images/tab/hover3.png);\

                                    }\

QTabBar::tab:last:selected {\

                           margin-top: 0px; margin-left: 0; margin-right: 0;\

                           color: white;\

                               border-image: url();\

                           }\

QTabBar::tab:last:!selected {\

                            color: black;\

                                margin-top: 0; margin-left: 0; margin-right: 0;\

                                border-image: url();\

                            }\

QTabBar::tab:last:hover:!selected {\

                                  color: black;\

                                      margin-top: 0; margin-left: 0; margin-right: 0;\

                                      border-image: url();\

                                  }\

QTabBar::tab:only-one {\

                      margin: 0;\

                      }");

tab标签的长度,也需要重载QTabBar来动态计算。


二、设置QTabwidget的TabBar的样式1


QString tabBarStyle = "QTabBar::tab {min-width:100px;color: white;background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop: 0 #eeeeee, stop: 1 gray);border: 2px solid;border-top-left-radius: 10px;border-top-right-radius: 10px;padding:5px;}\

QTabBar::tab:!selected {margin-top: 5px;} \

QTabBar::tab:selected {color: blue;}";

m_TabWidget->setStyleSheet(tabBarStyle);


三、设置QTabwidget的TabBar的样式2


QTabWidget::pane{

border:none;

}

QTabWidget::tab-bar{

       alignment:left;

}

QTabBar::tab{

background:transparent;

color:white;

min-width:30ex;

min-height:10ex;

}

QTabBar::tab:hover{

background:rgb(255, 255, 255, 100);

}

QTabBar::tab:selected{

border-color: white;

background:white;

color:green;

}

 image.png


相关文章
|
1月前
|
缓存 前端开发
样式
样式
21 3
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【003】
「HTML+CSS」--自定义按钮样式【003】
95 0
「HTML+CSS」--自定义按钮样式【003】
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【002】
「HTML+CSS」--自定义按钮样式【002】
84 0
「HTML+CSS」--自定义按钮样式【002】
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【004】
「HTML+CSS」--自定义按钮样式【004】
471 0
「HTML+CSS」--自定义按钮样式【004】
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【001】
「HTML+CSS」--自定义按钮样式【001】
280 0
「HTML+CSS」--自定义按钮样式【001】
实现简易手风琴样式
蓝桥最新一期的楼赛是实现手风琴样式,这个我们可以考虑到几个解决方案,我们先来看题
69 1
实现简易手风琴样式
|
前端开发 开发者
导航条-样式自定义 |学习笔记
快速学习 导航条-样式自定义
69 0
|
前端开发
常用样式
常用样式
101 0