YStudio Y++

YSS · 选项卡(tabwidget)

Y++ / YStudio 开发文档 · 一点滴

选择器: 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 } 内容区背景

另支持通用:colorbackground-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.当前页改变 (整数 当前页, 文本 页标题) {
    输出 (当前页, 页标题)
}

常用属性:当前页页列表页可关闭标签位置标签栏高度内容区背景色