UI (User Interface Elements)

Modified on Wed, 22 Jun 2022 at 10:21 AM

Unstyled user interface elements


Button


Custom PropertiesInput ActionsOutput Actions
Noneactivate
deactivate
destroy
triggerClick
onClick


The button element defaults to having a gray background and an onClick action active for us.


Important: Buttons do not stat with a label so you will probably want to drag an image or text into your button element (pictured above is a button with text element inside). 


Container



Custom PropertiesInput ActionsOutput Actions
hideOverviewactivate
deactivate
destroy
setHideOverflow
getHideOverflow


Containers are content areas that allow you to define different parts of the app's page. Analogous to a div.


Icon



Custom PropertiesInput ActionsOutput Actions
Size
Path
getPath
getSize
onClick
activate
deactivate
destroy
setPath
setSize


Graphics set by an SVG path


Image



Custom PropertiesInput ActionsOutput Actions
source
title
fit
activate
deactivate
setFit
setTitle
setSource
getFit
getSource
getTitle


You can upload PNG or JPEG files from your local computer or use a URL to set the source of an image.


Fit options are as follows: scale to fit, full size, stretch or scale to fill.


The "title" attribute changes the alt text.


Form



Custom PropertiesInput ActionsOutput Actions
Noneactivate
deactivate
destroy
triggerChange
triggerSubmit
getData
onChange
onSubmit

Like the button, this does not come with any styling and you must fill it with other components like text inputs and buttons to get the most out of it.


Link



Custom PropertiesInput ActionsOutput Actions
url
external
activate
deactivate
destroy
setExternal
setUrl
getUrl


Pointer to another page, site or item.


You can set the url to be external, which will open the link in a new window, or not, which will keep it in the same tab.


List


This is not yet implemented



Tab Panels


This is not yet implemented



Table Main, Row, and Cells



Custom PropertiesInput ActionsOutput Actions
Noneactivate
deactivate
destroy
onClick


Table cells may be added to rows, which may be added to main.


These elements organizes whatever components you would like to put in the table cell, but does not have any other custom styling or custom actions.



Text



Custom PropertiesInput ActionsOutput Actions
label
type
activate
deactivate
destroy
setLabel
setType
getLabel
getType
onClick


The label under Custom will determine what the text says. The types available for your text element are h1, h2 and body1.


As for every element, fonts may be customized in the bottom section of the properties mode of the inspector panel.



Text Input


This is an unstyled text input but it is not yet function. The Material UI Text Input is a good alternative for now.

 




Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article