PyQt5 垂直 TabBar CSS 样式

Question

我有一个我设计的应用程序，我正在尝试使用 2 种不同的样式表设置 2 种不同类型的选项卡（水平和垂直）的样式。

问题是要设置 TabBar 的样式，您基本上必须这样做：

/******************** TAB BAR ***********************/
QTabBar::tab{color:white; background:#292929; border:1px solid white; border-bottom-color:#292929;     border-top-left-radius:4px; border-top-right-radius:4px; padding:2px; margin-bottom:-2px;}
QTabBar::tab:selected {font-weight:bold; border-color:white; border-bottom-color:#292929;} /* same as pane color */
QTabBar::tab:!selected{margin-top:3px;} /* make non-selected tabs look smaller */

这适用于所有 TabBar（垂直和水平）。

但我想要垂直/水平的不同样式。

我试过了：

创建一个新的占位符类 QVerticalTabWidget(QTabWidget) 和 QVerticalTabBar(QTabBar) 在 QtDesigner 中导入这两个，然后将上面的 CSS 更改为：

/******************** TAB BAR ***********************/
QVerticalTabBar::tab{color:white; background:#292929; border:1px solid white; border-bottom-color:#292929;     border-top-left-radius:4px; border-top-right-radius:4px; padding:2px; margin-bottom:-2px;}
QVerticalTabBar::tab:selected {font-weight:bold; border-color:white; border-bottom-color:#292929;} /* same as pane color */
QVerticalTabBar::tab:!selected{margin-top:3px;} /* make non-selected tabs look smaller */

无效。

我试过了：

/******************** TAB BAR ***********************/
QTabWidget#NAME QTabBar::tab{color:white; background:#292929; border:1px solid white; border-bottom-color:#292929;     border-top-left-radius:4px; border-top-right-radius:4px; padding:2px; margin-bottom:-2px;}
QTabWidget#NAME QTabBar::tab:selected {font-weight:bold; border-color:white; border-bottom-color:#292929;} /* same as pane color */
QTabWidget#NAME QTabBar::tab:!selected{margin-top:3px;} /* make non-selected tabs look smaller */

无效。

正如你在上图中看到的那样，水平标签看起来还可以，但垂直标签很糟糕。我该如何解决这个问题？

Answer 1

/******************** VERTICAL TAB WIDGETS / BARS ***********************/
QTabWidget#NAME::pane {background: #292929; border: 1px white;}
QTabWidget#NAME::tab-bar {background: #292929; min-height: 800px;}
QTabWidget#NAME > QTabBar::tab{color:white; background:#292929;}
QTabWidget#NAME > QTabBar::tab:selected{color: #6856B8; font-weight:bold;}
QTabWidget#NAME > QTabBar::tab:!selected{color: white;}

/******************** HORIZONTAL TAB WIDGETS / BARS ***********************/
QTabWidget::pane {background:  #292929; border: 1px solid white;}

QTabWidget#NAME2::tab-bar {min-width: 300px;}
QTabWidget#NAME3::tab-bar {min-width: 600px;}
QTabWidget#NAME4::tab-bar {min-width: 200px;}

QTabWidget#NAME2 > QTabBar::tab,
QTabWidget#NAME3 > QTabBar::tab,
QTabWidget#NAME4 > QTabBar::tab
{color:white; background:#292929; border:1px solid white; border-bottom-color:#292929; border-top-left-radius:4px; border-top-right-radius:4px; padding:2px; margin-bottom:-2px;}

/* same as pane color */
QTabWidget#NAME2 > QTabBar::tab:selected,
QTabWidget#NAME3 > QTabBar::tab:selected,
QTabWidget#NAME4 > QTabBar::tab:selected
{font-weight:bold; border-color:white; border-bottom-color:#292929;} 

/* make non-selected tabs look smaller */
QTabWidget#NAME2 > QTabBar::tab:!selected,
QTabWidget#NAME3 > QTabBar::tab:!selected,
QTabWidget#NAME4 > QTabBar::tab:!selected
{margin-top:3px;}

实现了我想要做的事情。

感谢@musicamante 的帮助。

PyQt5 垂直 TabBar CSS 样式

PyQt5 Vertical TabBar CSS Style

css

python

styles

pyqt5