Elements
Interface
All properties and methods that are available for elements are described in detail in the API reference. The element-specific interface is similar to the C++ interface, refer there for the full documentation.
The Lua interface for RmlUi elements closely resembles the DOM element interface of the web, similarly to the C++ element interface.
Proxy Properties
Under the hood, some properties return proxies which can typically be used like arrays or maps (Lua tables). In particular the properties described in the following.
child_nodes
returns an array-like proxy for the children elements. The array only includes visible elements, the Lua plugin has no way of querying hidden elements. The following example iterates over all of an element’s children, printing their tag names, ids and classes. The example requires the Lua string
standard library.
for i,child in ipairs(element.child_nodes) do
address = child.tag_name
if child.id ~= '' then
address = address .. '#' .. child.id
end
for token in string.gmatch(child.class_name, '[%w]+') do
address = address .. '.' .. token
end
print(address)
end
The proxy object can be accessed using indices. Note that the indices are one-based in Lua, as opposed to zero-based in the C++ API.
element.child_nodes[2].inner_rml = 'Hello world!'
attributes
is accessed like a map with name and value pairs. The following example prints the element’s value
attribute.
print(element.attributes.value)
style
is a property which operates identically to its counterpart in Javascript. Properties are accessed as members of the style property by name and can be read or written to. The value of a property is always an unparsed string in this context; ie, 200px
, center
, rgb(255,0,0)
, etc.
The following example demonstrates uses of the style property:
element.style.width = '150px'
if element.style.float ~= 'none' then
element.style.clear = 'left'
end
Dispatching events
Events can be generated on an element from within Lua with the DispatchEvent()
function. When calling this function, the parameters are given as a Lua table of name-value pairs.
element:DispatchEvent('open', {object = 'trapdoor', priority = 11})
Parameter keys must be strings, and values must be strings, booleans, or numbers.
Creating elements
Elements can be created dynamically in Lua using the document’s CreateElement()
or CreateTextNode()
method. The following code sample uses CreateElement()
to dynamically create a form control.
input_element = document:CreateElement('input')
input_element = document:AppendChild(input_element)
input_element:SetAttribute('type', 'radio')
input_element:SetAttribute('name', 'graphics')
input_element:SetAttribute('value', 'ok')
Note: The newly created element cannot be modified right away because CreateElement
returns ElementPtr
and that cannot use SetAttribute
. We can work around this by using the return value of AppendChild
. See this issue for more information.