• QT QSS教程-QTabWidget


    1、普通模式,如图

     1 /* 向在移动 */
     2 QTabWidget::tab-bar {
     3     left:20px;
     4 }
     5 
     6 QTabBar::tab {
     7     background:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
     8                     stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
     9                                    stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
    10     border:2px solid #C4C4C3;
    11     border-bottom-color:red;
    12     border-top-left-radius:4px;
    13     border-top-right-radius:4px;
    14     min-8px;
    15     padding:2px;
    16 }
    17 
    18 /* 标签被选中时或鼠标悬浮时 */
    19 QTabBar::tab:selected,QTabBar::tab:hover {
    20     background:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
    21                                 stop: 0 #fafafa, stop: 0.4 #f4f4f4,
    22                                 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
    23 }
    24 
    25 /* 标签被选中时 */
    26 QTabBar::tab:selected {
    27     border-color:#9B9B9B;
    28     border-bottom-color:#C2C7CB;
    29 }
    30 
    31 /* 标签未被选中时 */
    32 QTabBar::tab:!selected {
    33     margin-top:2px;
    34 }

    2、被选中的标签,外框扩大,如图

     1 QTabWidget::pane {
     2     border:4px solid #C3C7CB;
     3 }
     4 
     5 QTabWidget::tab-bar {
     6     left:20px;
     7 }
     8 
     9 /* 标签外形设置 */
    10 QTabBar::tab {
    11     background:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
    12                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
    13                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
    14     border:2px solid #C4C4C3;
    15     border-bottom-color:#C2C7CB;
    16     border-top-left-radius:4px;
    17     border-top-right-radius:4px;
    18     min-50px;
    19     padding:2px;
    20 }
    21 
    22 /* 标签被选中时或鼠标悬浮时 */
    23 QTabBar::tab:selected,QTabBar::tab:hover {
    24     background:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
    25                                 stop: 0 #fafafa, stop: 0.4 #f4f4f4,
    26                                 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
    27 }
    28 
    29 /* 标签被选中时 */
    30 QTabBar::tab:selected {
    31     border-color:#9B9B9B;
    32     border-bottom-color:#C2C7CB;
    33 }
    34 
    35 /* 标签未被选中时 */
    36 QTabBar::tab:!selected {
    37     margin-top:2px;
    38 }
    39 
    40 /* 标签被选中时,外框向外扩大 */
    41 QTabBar::tab:selected {
    42     margin-left:-4px;
    43     margin-right:-4px;
    44 }
    45 
    46 /* 最左边的标签被选中时,外框不变化 */
    47 QTabBar::tab:first:selected {
    48     margin-left:0px;
    49 }
    50 
    51 /* 最右边的标签被选中时,外框不变化 */
    52 QTabBar::tab:last:selected {
    53     margin-right:0;
    54 }

    3、标签居中,如图

     1 /* 把显示界面向上移动 */
     2 QTabWidget::pane {
     3     border-top:2px solid #C2C7CB;
     4     position:absolute;
     5     top:-10px;
     6 }
     7 
     8 /* 标签居中 */
     9 QTabWidget::tab-bar {
    10     alignment:center;
    11 }
    12 
    13 QTabBar::tab {
    14     background:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
    15                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
    16                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
    17     border:2px solid #C4C4C3;
    18     border-bottom-color:#C2C7CB;
    19     border-top-left-radius:4px;
    20     border-top-right-radius:4px;
    21     min-20px;
    22     padding:2px;
    23 }
    24 
    25 QTabBar::tab:selected,QTabBar::tab:hover {
    26     background:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
    27                                 stop: 0 #fafafa, stop: 0.4 #f4f4f4,
    28                                 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
    29 }
    30 
    31 QTabBar::tab:selected {
    32     border-color:#9B9B9B;
    33     border-bottom-color:#C2C7CB;
    34 }

  • 相关阅读:
    【个人博客设计】
    复杂多边形光栅化算法
    xmake 描述语法和作用域详解
    协程分析之context上下文切换
    tbox协程使用之切换与等待
    记boost协程切换bug发现和分析
    跨平台自动构建工具v1.0.2 发布
    xmake从入门到精通9:交叉编译详解
    xmake从入门到精通9:交叉编译详解
    跨平台c开发库tbox:内存库使用详解
  • 原文地址:https://www.cnblogs.com/ybqjymy/p/13571497.html
Copyright © 2020-2023  润新知