ui elements

how to use basic ui elements to create a panel where you will have your toggles, buttons sliders, dropdowns etc.

Creating a Panel

local panel = ascendify.panel({
	name = "Test Addon", -- Name of the panel.
	size = UDim2.new(0, 300, 0, 200),
	position = UDim2.new(0, 360, 0, 300),
	no_dock = true, -- Would always keep true so you won't see it glitched out on the top.
})
--[[
name            String   Name of the panel
size            UDim2    Size of the panel
position        UDim2    Position of the panel on screen
anchor_point    Vector2 Anchor point of the panel
image           String   Image asset used for the panel header
no_dock         Boolean  Prevents the panel from docking to the top bar
]]

Creating a column & section

local column = ascendify.column(panel.items) -- Must connect the column to the panel you created
local section = ascendify.section(column, { name = "Test" }) -- This shows the section where you will make buttons, toggles, sliders etc.

local first_section, second_section = ascendify.multi_section(column, { -- This make a MultiS section where you can add stuff to both sections
	names = { "Test1", "Test2" }
})

Creating a Button

section:button_holder({}) 
ascendify.button(section, { 
	name = "test1 (print)", 
	callback = function()
		print("test addon button clicked") 
	end
})
--[[
name        String    The name displayed for the button
]]

Creating a Slider

ascendify.slider(section, {
	name = "Walk Speed",
	flag = "walk_speed",
	min = 0,
	max = 100,
	interval = 1,
	default = 16,
	suffix = " studs",
	callback = function(value)
		print(value)
	end
})
--[[
name        String    The name displayed for the slider
flag        String    The flag used to store the slider value
min         Number    Minimum slider value
max         Number    Maximum slider value
interval    Number    Step size between values
default     Number    Default slider value
suffix      String    Text shown after the value
callback    Function  Called when the value changes
visible     Boolean   Whether the slider is visible
input       Boolean   Disables manual value input when true
custom      Color3    Custom color for the slider
]]

Creating a Dropdown

ascendify.dropdown(section, {
	name = "Test1",
	flag = "test_1_dropdown",
	items = { "test1", "test2", "test3" },
	default = "test1",
	multi = false,
	callback = function(value)
		print(value)
	end
})

--[[
name        String    Name displayed on the dropdown
flag        String    Flag used to store the selected value
items       Table     List of selectable values
default     Any       Default selected value
multi       Boolean   Allows multiple selections when true
callback    Function  Called when the value changes
visible     Boolean   Whether the dropdown is visible
]]

Creating an Input

ascendify.input(section, {
	name = "test1",
	flag = "test1",
	placeholder = "Enter whatever",
	finished = false,
	callback = function(text)
		print(text)
	end
})
--[[
name        String    Name displayed above the input
flag        String    Flag used to store the input value
placeholder String    Placeholder text shown when empty
callback    Function  Called when the text changes
visible     Boolean   Whether the input is visible
finished    Boolean   Wait for the user to finish typing or not
]]

Creating a Key Picker, Toggle & Color Picker

local enabled =
	ascendify.toggle(section, {
		name = "Enabled",
		flag = "example_enabled",
		default = false,
		callback = function(v)
			print(v)
		end
	})

ascendify.key_picker(enabled, {
	name = "Activation Key",
	flag = "example_key",
	mode = "toggle",
	callback = function(v, k)
		print(v, k)
	end
})

ascendify.color_picker(enabled, {
	name = "Example Color",
	flag = "example_color",
	callback = function(c, a)
		print(c, a)
	end
})

--[[
Toggle
name        String    Name displayed for the toggle
flag        String    Flag used to store the toggle state
default     Boolean   Default toggle state
callback    Function  Called when the toggle changes
color       Boolean   Enables color picker when true
visible     Boolean   Whether the toggle is visible
tooltip     String    Tooltip text shown on hover
]]
--[[
Key Picker
name        String    Name displayed for the key picker
flag        String    Flag used to store the keybind state
mode        String    "toggle" or "hold"
default     Boolean   Initial active state
key         KeyCode   Default bound key
ignore      Boolean   Ignores the key when typing if true
callback    Function  Called with (state, key)
]]
--[[
Color Picker
name        String    Name displayed for the color picker
flag        String    Flag used to store the color value
color       Color3    Default color
alpha       Number    Default transparency value
callback    Function  Called with (color, alpha)
]]