Custom elements

DefineElement

-- This will be defined in the Elements class accessible by a Canvas
-- Or by ReGui.Elements:ElementName() but this method will not have theming
ReGui:DefineElement("ElementName", {
	-- These are the base values for the Config
	Base = {
		RichText = true,
		TextWrapped = true
	},
	--(OPTIONAL) This is the coloring infomation the theme system will use
	ColorData = {
		["ColorStyle Name"] = {
			TextColor3 = "ErrorText",
			FontFace = "TextFont",
		},
	},
	--(OPTIONAL) These values will be set in the base theme
	ThemeTags = {
		["ThemeTag"] = Color3.fromRGB(255, 69, 69),
		["CoolFont"] = Font.fromName("Ubuntu"),
	},
	--[[ This is the generation function for the element
	 self is the canvas class
	 Config is the configuration with overwrites to the Base config
	]]--
	Create = function(self, Config: Label)
		-- This MUST either return:
		  -- GuiObject
		  -- Class, GuiObject
	end,
})

Basic TextLabel example:

ReGui:DefineElement("PurpleText", { --// Method name
	Base = { --// Configuration base
		IsBigText = true
	},
	Create = function(self, Config)
		local IsBigText = Config.Config -- true
		
		local Label = Instance.new("TextLabel")
		Label.TextSize = IsBigText and 30 or 14

		--// Must return: Instance or Table, Instance
		return Label
	end,
})

Using other elements as a base:

This is the code used for generating the ProgressBar element using the Slider element as a base

ReGui:DefineElement("ProgressBar", {
	Base = {
		Progress = true,
		ReadOnly = true,
		MinValue = 0,
		MaxValue = 100,
		Format = "% i%%"
	},
	Create = function(self, Config)
		function Config:SetPercentage(Value: number)
			Config:SetValue(Value)
		end

		return self:Slider(Config)
	end,
})