当前位置:   article > 正文

QTabWidget和QTabBar控件样式设置(qss)_qt qtabwidget样式

qt qtabwidget样式

1、QTabWidget样式可自定义的有哪些

	QTabWidget::pane{} 定义tabWidgetFrame
	QTabWidget::tab-bar{} 定义TabBar的位置
	QTabWidget::tab{}定义Tab的样式
	QTabWidget::tab:selected{}定义Tab被选中时的样式
	QTabWidget::tab:hover{}定义Tab鼠标悬停时的样式
	QTabWidget::tab:!selected{}定义Tab在非选中时的样式
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

示例:

QTabWidget::pane {
        border: 1px solid blue;
        border-radius:5px;

}

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

QTabBar::tab {
        background: #00aaff;
        border: none;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        min-width: 80px;
        padding: 8px;
        color:#000000;
}

QTabBar::tab:selected, QTabBar::tab:hover {
        background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #ffffff, stop: 1.0 #00aaff);

}

QTabBar::tab:selected {
        border: 1px solid #00aaff;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

效果图

在这里插入图片描述

2、QTabBar样式可自定义的有哪些

    QTabBar::tear{}

    QTabBar::scroller{}

    QTabBar QToolButton{} 定义QTabBar下的QToolButton的样式

    QTabBar QToolButton::right-arrow{} /* the arrow mark in the tool buttons */

    QTabBar QToolButton::left-arrow{}

    QTabBar::close-button{}

    QTabBar::close-button:hover{}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

示例

QTabWidget::pane {
        background:white;
        border:none;

}

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

QTabBar::tab {
        background: rgb(246, 246, 246);
        border: none;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        min-width: 80px;
        padding: 8px;
        color:#000000;
}

QTabBar::tab:selected {
        border-bottom: 2px solid #0055ff;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

效果图

在这里插入图片描述
包括QTabWidget标签页的位置:左中右,是否下沉都可以通过样式表设置,标签页的间距、样式、等等都可以,大家赶快自己试一试。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/384975
推荐阅读
  

闽ICP备14008679号