Skip to content
Depso edited this page Jul 29, 2024 · 4 revisions

Welcome to the wiki! ๐Ÿ‘‹

Getting started ๐Ÿ”ง

Creating a window

Size and Position are both properties of the GUI object. Title is not and therefore any addional properities to the class will
be applied to the properities. For example declaring BackgroundTransparency
in the config of the Window or any element will be passed to the properities.

local ImGui = require(game.ReplicatedStorage.ImGui)

local Window = ImGui:CreateWindow({
	Title = "Window",
	Size = UDim2.fromOffset(350, 300), --// Roblox property 
	Position = UDim2.new(0.5, 0, 0, 70), --// Roblox property 
})

image

Adding tabs

Visible is a default Roblox property and therefore declares if the tab is shown. Addionally, you can show a tab by using Window:ShowTab(ExampleTab)

local ExampleTab = Window:CreateTab({
	Name = "Example",
	Visible = true 
})
ExampleTab:Label({
	Text = "Hello world!"
})

local ExampleTab2 = Window:CreateTab({
	Name = "Example 2"
})
ExampleTab2:Label({
	Text = "Hello world!"
})

image

Changing the colors ๐ŸŽจ (Gray theme)

You can discover the layout of the elements from the prefabs

local Window = ImGui:CreateWindow({
	Title = "Window",
	Size = UDim2.fromOffset(350, 300),
	Position = UDim2.new(0.5, 0, 0, 70),
	
	--// Styles
	NoGradientAll = true,
	Colors = {
		Window = {
			BackgroundColor3 = Color3.fromRGB(40, 40, 40),
			BackgroundTransparency = 0.1,
			ResizeGrip = {
				TextColor3 = Color3.fromRGB(80, 80, 80)
			},
			
			TitleBar = {
				BackgroundColor3 = Color3.fromRGB(25, 25, 25),
				[{
					Recursive = true,
					Name = "ToggleButton"
				}] = {
					BackgroundColor3 = Color3.fromRGB(80, 80, 80)
				}
			},
			ToolBar = {
				TabButton = {
					BackgroundColor3 = Color3.fromRGB(80, 80, 80)
				}
			},
		},
		CheckBox = {
			Tickbox = {
				BackgroundColor3 = Color3.fromRGB(20, 20, 20),
				Tick = {
					ImageColor3 = Color3.fromRGB(255, 255, 255)
				}
			}
		},
		Slider = {
			Grab = {
				BackgroundColor3 = Color3.fromRGB(60, 60, 60)
			},
			BackgroundColor3 = Color3.fromRGB(20, 20, 20)
		},
		CollapsingHeader = {
			TitleBar = {
				BackgroundColor3 = Color3.fromRGB(20, 20, 20)
			}
		}
	}
})


local ExampleTab = Window:CreateTab({
	Name = "Example",
	Visible = true
})
ExampleTab:Label({
	Text = "Hello world!"
})

local ExampleTab2 = Window:CreateTab({
	Name = "Example 2"
})
ExampleTab2:Label({
	Text = "Hello world!"
})

image

Usage documentation ๐Ÿ“œ

You can see examples and documentation of elements here

Clone this wiki locally