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")

Arg Idx	Argument Description	Type	Default
1	Title of the key tab	string	nil
2	Custom Icon or Icon name from lucide.dev	string	nil

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.

-- Dynamic Check
KeyTab:AddKeyBox(function(Success, ReceivedKey)
	print("Expected Key: None | Success:", Success) -- true
	Library:Notify("Success: " .. tostring(Success), 4)
end)
 
-- Static Check
KeyTab:AddKeyBox("Banana", function(Success, ReceivedKey)
	print("Expected Key: Banana | Success:", Success) -- true
	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(Success, ReceivedKey)
	print("Expected Key: None | Success:", Success)
	Library:Notify("Success: " .. tostring(Success), 4)
end)

Tabs

On this page