Render Proxy Element
Render Proxy Elements let you change the render order of elements by “proxying” the rendering of one or more other elements at the position of the Render Proxy Element. By effectively reparenting or redistributing draw order, you can control layering and rendering order without restructuring your hierarchy.
Render Proxy Element Properties
Property | Type | Details |
---|---|---|
Name | text | Name of the element. Make sure the name of the element is unique if the element needs to be accessible from code (Enterprise Plan only). |
Element | text | The element to be rendered in place of this proxy element. |
Example Use: Dynamically Resize the Background of a Text Element
- Create a Render Proxy Element, and name it
render-proxy
. - Create a Text Element as a child of the Render Proxy Element created in Step 1, and name it
text
. - Add a Linear Gradient Element as a child of the Text Element created in Step 2, and name it
linear-gradient
. - In the Linear Gradient Element's Properties, set the Parent Size values to
x: 1, y: 1
, and the Size values tox: 0, y: 0
. This will make the Linear Gradient match the size of its parent element (the Text Element created in Step 2). - Now, set the Element value of the Render Proxy Element to
linear-gradient
(the name of the Linear Gradient Element). This will change the rendering order of the elements, so the Linear Gradient appears behind the text.
Now you can use the Render Proxy Element to create dynamically sized backgrounds for your UI!