Tabs are the main way to sepearate each section for your UI. Each tab can have a name, icon and a description. The order is determined by the order of when Window:AddTab() is called.

Obsidian

Quick Start

We recommend storing your tabs in a table to make it easier to manage.

local Tabs = {
    Main = Window:AddTab("Main", "user"),
    ["UI Settings"] = Window:AddTab("UI Settings", "settings"),
}

Once you have created your tabs, you can add UI elements to them via groupboxes and/or tabboxes.

Usage

You can create a Tab by calling the AddTab method on a Window.

Arguments

local Tab = Window:AddTab("Main", "user")

Arg Idx	Argument Description	Type	Default
1	Name of the tab	string	nil
2	Custom Icon or Icon name from lucide.dev	string	nil
3	Tab description	string	nil

Configuration Table

local Tab = Window:AddTab({
    Name = "Main",
    Description = "Main features",
    Icon = "home"
})

Prop

Type

Methods

You can use the following methods to interact with the tab:

UpdateWarningBox

Updates the warning box in a tab. This can be used to display warnings/errors, or any useful information.

warningbox

Tab:UpdateWarningBox({
    Title = "Warning",
    Text = "Example",
    IsNormal = false, -- Error Box = true, Normal Box = false
    Visible = true,
    LockSize = true,
})

Prop

Type

SetVisible

Shows or hides the tab.

Tab:SetVisible(boolean)

Arg Idx	Argument Description	Type	Default
1	Whether to show the tab	boolean	nil

SetOrder

Changes the order of the tab.

Tab:SetOrder(number)

Arg Idx	Argument Description	Type	Default
1	New order of the tab	number	nil

SetName

Updates the name of the tab.

Tab:SetName(name)

Arg Idx	Argument Description	Type	Default
1	New name of the tab	string	nil

SetDescription

Updates the description of the tab.

Tab:SetDescription(description)

Arg Idx	Argument Description	Type	Default
1	New description of the tab	string	nil

SetIcon

Updates the icon of the tab.

Tab:SetIcon(icon)

Arg Idx	Argument Description	Type	Default
1	New icon of the tab	string	nil

Example

local Tabs = {
    Main = Window:AddTab("Main", "user"),
    ["UI Settings"] = Window:AddTab("UI Settings", "settings"),
}

Key Tabs

Key tabs are used to display items at the center and it's intended use as a menu to display a key system page.

Example Key Tab

Usage

You can create a Key Tab by calling the AddKeyTab method on a Window.

Arguments

local KeyTab = Window:AddKeyTab("Key System", "key")

Key Tabs take the same arguments as regular tabs

Methods

Key tabs inherit all methods from the groupboxes and tabboxes which means you can add any UI element to it as well.

AddKeyBox

Adds a key box to the key tab.

KeyTab:AddKeyBox(function(ReceivedKey)
    -- KeyBox only takes the callback for the button, you need to implement your own key check inside the callback
	local Success = ReceivedKey == "Banana"
 
	print("Expected Key: Banana | Success:", Success)
	Library:Notify("Success: " .. tostring(Success), 4)
end)

Example

local KeyTab = Window:AddKeyTab("Key System", "key")
 
KeyTab:AddLabel({
	Text = "mspaint key system",
	DoesWrap = true,
	Size = 20,
})
 
KeyTab:AddLabel({
	Text = "Your support helps us continue developing mspaint, thank you!",
	DoesWrap = true,
	Size = 16,
})
 
KeyTab:AddKeyBox(function(ReceivedKey)
	local Success = true -- your key check here
 
	print("Success:", Success)
	Library:Notify("Success: " .. tostring(Success), 4)
end)

Tabs

On this page