选择器:
tabwidget· 设计器组件: 选项卡 · 按名称:tabwidget#名称或#名称
子控件: tabwidget:tab · tabwidget:tab:selected · tabwidget:tab:hover · tabwidget:pane
标签栏
| 属性 | 说明 |
|---|---|
tab-bar-position |
标签位置:top(0) / bottom(1) / left(2) / right(3),亦可用中文「上/下/左/右」 |
tab-bar-height |
标签栏厚度(像素,默认 28) |
page-icon-size |
页图标大小 |
icon-text-spacing |
图标与文字间距 |
closable-tabs / page-closable |
页可关闭(全局默认) |
pane-background-color |
内容区背景色(亦可用 tabwidget:pane { background-color }) |
标签颜色(皮肤)
| 属性 / 选择器 | 映射 |
|---|---|
item-selected-background |
当前页标签背景 |
item-hover-background |
悬停标签背景 |
item-selected-color |
当前页标签文字色 |
item-hover-color |
悬停标签文字色 |
tabwidget:tab:selected { background-color; color } |
同上(选中) |
tabwidget:tab:hover { background-color; color } |
同上(悬停) |
tabwidget:pane { background-color } |
内容区背景 |
另支持通用:color、background-color(标签栏区)、border-*、font-*、corner-radius。
示例
tabwidget#选项卡1 {
tab-bar-position: top;
tab-bar-height: 32;
page-icon-size: 18;
icon-text-spacing: 6;
closable-tabs: true;
pane-background-color: #1E1E1E;
background-color: #2D2D30;
item-selected-background: #3E3E42;
item-hover-background: #454545;
item-selected-color: #FFFFFF;
}
tabwidget:tab:selected {
background-color: #0E639C;
color: #FFFFFF;
}
tabwidget:tab:hover {
background-color: #3E3E42;
}
tabwidget:pane {
background-color: #252526;
}
代码侧常用 API / 事件
函数 选项卡1.当前页改变 (整数 当前页, 文本 页标题) {
输出 (当前页, 页标题)
}
常用属性:当前页、页列表、页可关闭、标签位置、标签栏高度、内容区背景色。