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/close.png);
subcontrol-origin: padding;
subcontrol-position: bottom right;
}
10.设置QTabWidget 的Tab标签上关闭按钮的鼠标悬停样式
QTabBar::close-button:hover {
image: url(:/image/close-hover.png);
}