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


相关文章
|
7月前
|
缓存 前端开发
样式
样式
66 3
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【001】
「HTML+CSS」--自定义按钮样式【001】
328 0
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【002】
「HTML+CSS」--自定义按钮样式【002】
120 0
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【004】
「HTML+CSS」--自定义按钮样式【004】
511 0
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【003】
「HTML+CSS」--自定义按钮样式【003】
125 0
|
前端开发
常用样式
常用样式
122 0
|
Web App开发 前端开发
如何自定义CSS滚动条的样式?
原文:如何自定义CSS滚动条的样式? 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的滚动条。
1245 0
|
前端开发
使用css修改checkbox选择框的样式
二. 修改思路: 给原本的checkbox框加上visibility: hidden;属性,使其隐藏同时又占据原本在页面上面的位置,说直白点就是,使checkbox看不见,但是仍然占有原来的位置。
1868 0
|
Android开发
第12章 样式(六)
设备样式 Xamarin.Forms包含六种内置动态样式。 这些被称为设备样式,它们是名为Styles的嵌套类的成员。 这个Styles类定义了12个静态和只读字段,有助于在代码中引用这六个样式: Style样式的BodyStyle。
1302 0