QTabWidget 样式表必知必会

时间：2024-11-11 20:01:07

QTabWidget样式表必知必会

    • 1.设置QTabWidget 的Tab标签下面窗格的样式
    • 2.设置QTabWidget 的Tab标签所在那一行的样式下
    • 3.设置QTabWidget 的Tab标签的样式
    • 4.设置QTabWidget 的Tab标签在未选中下的鼠标悬停样式
    • 5.设置QTabWidget 的Tab标签选中下的样式
    • 6.设置QTabWidget 的Tab标签在未选中下的样式
    • 7.设置QTabWidget 的已经操作的未被选中下鼠标悬停Tab标签的下一个在未选中下鼠标悬停样式向右的偏移量（如果是right，就是向左的偏移量）
    • 8.设置QTabWidget 中有manyTab标签时，需要添加滚动按钮的样式
    • 9.设置QTabWidget 的Tab标签上关闭按钮的样式
    • 10.设置QTabWidget 的Tab标签上关闭按钮的鼠标悬停样式

1.设置QTabWidget 的Tab标签下面窗格的样式

QTabWidget#tabwidget_DevMang::pane {
border-top: 3px solid black;
border-left: 3px solid black;
background-color: green;
left:5px;
right:5px;
bottom:5px;
}

2.设置QTabWidget 的Tab标签所在那一行的样式下

QTabWidget#tabwidget_DevMang::tab-bar {
alignment:left;
top:3px;
left:5px;
right:5px;
}

3.设置QTabWidget 的Tab标签的样式

QTabWidget#tabwidget_DevMang QTabBar::tab {
border-color: black;
border-width: 3px;
border-bottom:none;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background:transparent;
color:black;
min-width:30ex;
min-height:10ex;
}

4.设置QTabWidget 的Tab标签在未选中下的鼠标悬停样式

QTabWidget#tabwidget_DevMang>QTabBar::tab:!selected:hover{
width:100px;
height:24px;
border:3px solid #C589C3;
background:rgb(255, 255, 255, 100);
border-color: black;
}

5.设置QTabWidget 的Tab标签选中下的样式

QTabWidget#tabwidget_DevMang>QTabBar::tab:selected{
background:green;
color:white;
}

6.设置QTabWidget 的Tab标签在未选中下的样式

QTabWidget#tabwidget_DevMang>QTabBar::tab:!selected{
background:none;
color:black;
border:none;
}

7.设置QTabWidget 的已经操作的未被选中下鼠标悬停Tab标签的下一个在未选中下鼠标悬停样式向右的偏移量（如果是right，就是向左的偏移量）

QTabWidget#tabwidget_DevMang>QTabBar::tab:last:!selected:hover {
margin-left: 5px; /* the last selected tab has nothing to overlap with on the right */
}

8.设置QTabWidget 中有manyTab标签时，需要添加滚动按钮的样式

QTabBar QToolButton { /* the scroll buttons are tool buttons */
border-image: url(:/image/tab_btn_noArrow.png) 1;
border-width: 1px;
}

9.设置QTabWidget 的Tab标签上关闭按钮的样式

QTabBar::close-button {
image: url(:/image/);
subcontrol-origin: padding;
subcontrol-position: bottom right;
}

10.设置QTabWidget 的Tab标签上关闭按钮的鼠标悬停样式

QTabBar::close-button:hover {
image: url(:/image/);
}

相关文章