//用 win.ui.tabs 创建垂直"高级选项卡"
import win.ui;
/*DSG{{*/
var winform = win.form(text="高级选项卡演示";right=939;bottom=772;bgcolor=16777215)
winform.add(
static={cls="static";left=139;top=7;right=140;bottom=757;bgcolor=16752414;clip=1;db=1;dl=1;dt=1;z=3};
tabButton1={cls="plus";text="测试文本";left=31;top=34;right=139;bottom=63;bgcolor=16752414;clip=1;dl=1;dt=1;z=1};
tabButton2={cls="plus";text="测试文本";left=31;top=63;right=139;bottom=92;bgcolor=16752414;clip=1;dl=1;dt=1;z=2};
tabPanel={cls="custom";left=148;top=11;right=921;bottom=751;bgcolor=0xFFFFFF;db=1;dl=1;dr=1;dt=1;z=4}
)
/*}}*/

//创建"高级选项卡"
import win.ui.tabs;

/*
相关文档: doc://library-guide/std/win/ui/tabs/_.md

创建"高级选项卡"步骤：

- 在窗体上添加两个 plus 控件 mainForm.tabButton1, mainForm.tabButton2 
  作为选项卡按钮用于确定选项卡的外观样式与排列方向。
	
- 在窗体上添加一个 custom 控件 mainForm.tabPanel 作为页面容器，
  用于加载并显示不同的子窗口内容。

然后调用下面的代码创建 win.ui.tabs 控件。
*/
var tabs = win.ui.tabs(winform.tabButton1,winform.tabButton2);



//动态添加更多选项卡。
var tabIndex1 = tabs.add({
    text="标题文本";
})

//动态添加更多选项按钮
var tabIndex2 = tabs.add({
    text="标题文本";
})

//动态添加更多选项卡按钮
var tabIndex3 = tabs.add({
    text="打开网站";  
    hasCloseButton = true;//允许显示关闭按钮
})

//创建标签页，返回 win.form 窗体对象。
var frmWeb = tabs.loadForm(-1); // -1 表示添加到最后一个标签页（对应最后一个选项卡按钮）。

import web.form; //如果要使用更新更快的浏览器控件 WebView2 请改用 web.view。
var wb = web.form( frmWeb )
wb.noScriptErr = true;
wb.go("http://www.aardio.com");

//指定选项卡的外观样式
tabs.skin(
    background = {  
        default = 0xFFFFFFFF;
    }
    color = {
        //default = 0xFF000000;
        hover = 0xF00000FF;
    }
    border = {
        default = { bottom = 1;color= 0xFF1E9FFF;  }
        hover = { bottom = 1;right = 4;color= 0xFF1E9FFF; }
    }
    checked = {
        background = {
            hover = 0xFF99CCFF;
            focus = 0xFF1E9FFF;
            active = 0xFF333366;
            default = 0xFF1E9FFF;
        }
        color = {
            hover = 0xFF000000;
            default = 0xFFFFFFFF;
        }
        border = {
            hover = { right = 2;color=0xFF1E9FFF}
            default = { right = 2;color=0xFF1E9FFF}
        }
    }
)

//也可以用下面的代码自定义关闭按钮的外观样式
tabs.closeButton.skin(
    background = {
        hover = 0xFFe35c51;
        active = 0xFF8f241b;
        default = 0x99FFCC66;
    }
    color = {
        hover = 0xFFFFFFFF;
        active = 0xFFEEEEEE;
        default = 0xCCFFFFFF;
    }
)

//可以自定义关闭按钮在选项卡上的显示位
tabs.beforeShowCloseButton = function(tab,rcTab,rcCloseButton){
    return rcTab.right - rcCloseButton.width() - 5, rcTab.top + ( rcTab.height() - rcCloseButton.height() )/2;
}

winform.show();
win.loopMessage();