example.lua

local UI = {}

UI.space = SUI.T({ text = " " })
UI.clear_ROOT = SUI.ROOT({ colour = G.C.CLEAR })
UI.centered_C = SUI.C({ align = "cm" })
UI.centered_R = SUI.R({ align = "cm" })

-- CHILDREN_KEY_PROVIDER - context which provides elements which passed via config by using CHILDREN_KEY_MARKER
UI.blue_brackets = SUI.CHILDREN_KEY_PROVIDER({
	SUI.T_STYLE({ scale = 0.5 }, {
		-- CHILDREN_KEY_MARKER - marker which CHILDREN_KEY_PROVIDER uses to insert elements
		SUI.CHILDREN_KEY_MARKER("prefix"),
		SUI.T({ text = ": " }),
		SUI.T({ text = "[", colour = G.C.CHIPS }),
		-- T_STYLE - context which applies config for ALL text elements inside of it and it's children. Useful to apply default colour, scale, or shared ref_table
		SUI.T_STYLE({ colour = G.C.EDITION }, {
			SUI.CHILDREN_KEY_MARKER("content"),
		}),
		SUI.T({ text = "]", colour = G.C.CHIPS }),
		SUI.T_STYLE({ colour = G.C.UI.TEXT_INACTIVE, scale = 0.35 }, {
			SUI.T({ text = " + " }),
			SUI.CHILDREN_KEY_MARKER("suffix"),
		}),
	}),
})

local example_config_definition = SUI.ROOT({ colour = G.C.CLEAR, align = "cm" }, {
	SUI.C({ align = "cm" }, {
		UI.centered_R({
			UI.blue_brackets({
				prefix = {
					SUI.T({ text = "Now selected" }),
				},
				content = {
					SUI.T({ ref_table = { cards_count = 5 }, ref_value = "cards_count" }),
				},
				suffix = {
					SUI.T({ text = "some more text on end" }),
				},
			}),
		}),
		UI.centered_R({
			UI.blue_brackets({
				prefix = {
					SUI.T({ text = "Next will be selected" }),
				},
				content = {
					SUI.T({ ref_table = { cards_count = 6 }, ref_value = "cards_count" }),
				},
				suffix = {
					SUI.T({ text = "bit less text" }),
				},
			}),
		}),
	}),
})

SMODS.current_mod.config_tab = example_config_definition.render_func()