Controlling UI elements with scripts

Preparation

In UI Editor, create a Lua script to control UI elements by choosing + New client script.

Fill in a name for the script and you can write codes in your specified editor, such as Visual Studio Code.

Loading UI elements

Load UI elements that you've created in UI Editor using the name of the UI project and the canvas.

--Get the resource path of the UI component.
local uiPath = script:GetResourceUri("ygc://") 
-- Load UI elements using the project name and the canvas name.
local mainPanel = YaUIManager:CreateUIPanel(uiPath, "ProjectName", "MainCanvas") 
-- Set the UI elements to full-screen mode.
mainPanel:SetSize(YaUIManager.ScreenSize) 

Getting UI elements on the canvas

Get the UI elements using their name in the UI project. Make sure the name in the code is identical to that in your UI project.

-- Get the UI element using its name in the UI project.
local button = mainPanel:GetButton("Button") 
local graph = mainPanel:GetGraph("Graphg")
local image = mainPanel:GetImage("Image")
local list = mainPanel:GetList("List")
local loader = mainPanel:GetLoader("Loader")
local slider = mainPanel:GetSlider("Slider")
local progressBar = mainPalen:GetProgressBar("Progress")
local textField = mainPanel:GetTextField("Text")
local textInput = mainPanel:GetTextInput("Text")

Binding a click event to a button

local function ButtonOnClickEvent()
    -- Write your code here.
    print("The button is clicked on.")
end

button.OnClick:AddListener0(ButtonOnClickEvent)

Drawing and refreshing a list

local list = mainPanel:GetList("List")
list.ItemRenderer = OnRenderList
-- Provide the number of list items.
list.NumItems = 10 

-- Render the list using the index of the list and the canvas.
local function OnRenderList(index, canvas)

end

-- Refresh the list.
list.ItemRenderer = OnRenderList
list.NumItems = 10

Drawing and refreshing a virtual list

local list = mainPanel:GetList("List")
list.DefaultItem = "ui://PackageName/CanvasName"
list:SetVirtual()
list.ItemRenderer = OnRenderList
-- Provide the number of list items.
list.NumItems = 10 

-- Render the list using the index of the list and the canvas.
local function OnRenderList(index, component)

end

-- Refresh the virtual list.
list:RefreshVirtualList(10)

Using Loader

local loader = mainPanel:GetLoader("Loader")
loader.Url = "ui://PackageName/CanvasName"
-- Get the canvas that you configured in the loader.
local canvas = loader:GetLoaderComponent() 

Using Text

local textField = mainPanel:GetTextField("Text")
-- Set the font size of the text to 64.
textField.FontSize = 64    
-- Make the text bold.
textField.Bold = true       
-- Make the text italic.
textField.Italic = true   
-- Apply the above settings.
textField:ApplyFormat() 

-- The text inside the text box displays the typewriter effect at a speed of 1 character per second.
textField:ShowTypeWritterText("This is a test for the Text UI element.", 1) 

Using TextInput

local textInput = mainPanel:GetTextInput("Text")
textInput.SingleLine = true

local function SubmitEvent()
    -- Write your code here.
end

-- The OnSubmit works when the player presses the enter button. The SingleLine property must be set to true.
textInput.OnSubmit:AddListener0(SubmitEvent)