TabView

A tabview is a collection of tabs. Each tab has 2 properties: .title and .content. The title is the tab header label and the content is an array of GUIElements/components which are the content that will be shown for each tab.

Properties and functions

.Size - VectorScreen
.onTabClicked(tab) - function //tab changed event
.tabs - table array //contains each tab
.addTab(tab) - function
.removeTab(tabIndex) - function
.changeTab(tabIndex) - function
.indexOfTab(tab) - function // returns index (integer) of a tab

Styling

You can style the TabView by creating a style table and passing it to the .style property during creation:

local tv = UI.TabView({
	id="tabview",
	style =  {
		titleColor = Colour(51,150,255),
		titleSize =  17,
		tabColor = Colour(51,57,61,200),
		onHoverTabColor = Colour(70,70,70),
		activeTabColor = Colour(70,70,70),
		background = Colour(0,0,0,150),
		borderColor = Colour(255,255,255),
		borderSize =  2,
		headerBorderColor = Colour(255,255,255),
		headerBorderSize =  2
	}
	align =  "center",
	Size = VectorScreen(400,300),
	onTabClicked =  function(t){
		Console.Print(t +" tab clicked");
	},
	tabs = [
		{
			title =  "tab1",
			content = [
				UI.Button({
					id="btrn",
					align =  "center",
					Size = VectorScreen(60, 20),
					onClick=  function(){
						local tv =UI.TabView("tabview");
						tv.addTab({ title =  "tab"+(tv.tabs.len()+1) });
					},
					Text =  "Add tab"
				})
				UI.Button({
					id="btnrm",
					Size = VectorScreen(60, 20),
					onClick=  function(){
						local tv = UI.TabView("tabview");
						tv.removeTab(tv.tabs.len()-1);
					},
					Text =  "Delete tab",
					move = {down =  20, right =  20}
				})
			]
		},
		{ title =  "tab2" }
	]
});