CVU: UI elements
In CVU, UI elements are built by defining a nested collections of elements. Here follows the complete list of all UI elements definitions and their description.
Element Name | Description |
---|---|
VStack | Element that stacks its children vertically |
HStack | Element that stacks its children horizontally |
ZStack | Element that stacks its children on top of each other |
EditorSection | Element that renders as a section in the general editor |
EditorRow | Element that renders as a row in a section in the general editor |
EditorLabel | Element that renders a label in a row in the general editor |
Button | Element that renders a button in the user interface. |
FlowStack | Element that horizontally stacks its children and wraps to the next line at the end of the container. |
Text | Element that renders text on the screen |
Textfield | Element allows a user to change text |
SubView | Element that renders a view inside another view |
Map | Element that displays content on a map |
Picker | Element that allows a user to choose from a list of options |
ActionButton | Element that renders button connected to some predefined action |
MemriButton | Element that displays a canonical representation of a data item |
Image | Element that displays an image |
Circle | Element that renders a circle |
Rectangle | Element that renders a rectangle |
RoundedRectangle | Element that renders a rounded rectangle |
Spacer | Element that maximizes the space between elements in a stack |
Divider | Element that renders a divider line |
Empty | Element that does not render anything |
CVUDropZone | Element that renders drop zone component for web version |
Observer | Element that renders component listening for some property (in case we need continuously updated UI, if property changed) |
Toggle | Element that displays toggle element |
HTMLView | Element that displays WebView for mobile platform and iframe for web |
Grid | Element that displays table with elements |
The following element properties are supported in CVU.
Property | Possible values | Description | CVU Elements |
---|---|---|---|
show | Boolean | whether to show the element or not. Use an expression to toggle visibility (e.g. {{labels.count}}). | All |
alignment | String | set to “center”, “top”, “left”, “bottom”, “right” to set the alignment of children of the stack element. | VStack, HStack, ZStack, EditorRow |
textalign | String | set to “left”, “center”, “right” to determine how text is aligned. | Text, SmartText |
spacing | Number | sets the space between elements in a stack. | VStack, HStack, ZStack, SubView, Grid, FlowStack |
title | String | sets the title of an element. | SubView |
text | String | set the text of a Text element | Text, SmartText |
image | String, File | sets the image location of an Image element | Image |
nopadding | Boolean | sets whether to display padding in a section in the general editor | EditorRow |
onPress | Action | sets the action to be executed when the user presses the button | Button, ActionButton |
bold | Boolean | sets whether the text is rendered bold | Text, SmartText |
italic | Boolean | sets whether the text is rendered italic | Text, SmartText |
underline | Boolean | sets whether the text is rendered underline | Text, SmartText |
strikethrough | Boolean | sets whether the text is rendered strikethrough | Text, SmartText |
list | Array | sets a list to iterate over (used by FlowStack, ForEach (not supported yet)) | FlowStack |
viewName | String | sets the name of the view to display in the SubView | SubView |
view | View | sets a literal definition of a view to load in the SubView | SubView |
viewArguments | Dict | sets a dict of named arguments to pass to an ItemCell or SubView | SubView |
location, | Location | sets a location to render on the Map element | Map |
address | Address | sets an address to render on the Map element | Map |
systemname | String | sets the system name of the image to display in the Image element | Image |
cornerradius | Number | sets the rounding of the corners of the element | All |
cornerradiusOnly | Array | sets the rounding of the corners of the element (separately for each corner | All |
hint | String | sets the hint to display in a TextField to inform a user what to type | TextField |
value | String, Boolean | sets the value of a form element | TextField, Toggle |
datasource | String | sets the datasource of a view | |
empty | String | sets the empty message displayed in a text element | |
styleName | String | applies the chosen style to the element (primaryButton only for now) | Button |
color | Color | sets the text color of an element | Text, SmartText, Button, Circle, Image(vector only), TextField |
font | Number, String | sets the size of the font and the boldness: “thin”, “ultrathin”, “regular”, “semibold”, “medium”, “bold” | Text, Button, SmartText |
padding | Array, Number | Set the distance between the content of the element and its edge. Either one number for all edges, or one for each. | All |
background | Color | sets the color of the background of the element | All |
border | Color | sets the color of the border | All |
shadow | Array | sets shadow for the element | All |
offset | Number Number | Sets the x and y offset | All |
opacity | Number | Sets the opacity of the element between 0 and 1 | All |
minWidth | Number | Sets the minimal width of the element | All |
maxWidth | Number | Sets the maximal width of the element | All |
minHeight | Number | Sets the minimal height of the element | All |
maxHeight | Number | Sets the maximal height of the element | All |
width | Number | Sets the width of the element | All |
height | Number | Sets the height of the element | All |
isLink | Boolean | changes button to special element with web link behaviour | Button |
src | String | sets url from which WebView(iframe) should load content | HTMLView |
content | String | sets direct content for WebView(iframe) | HTMLView |
isVector | Boolean | sets type of image | Image |
property | String | sets property to observe | Observer |
item | Item | sets item, which property we need to observe | Observer |
N.B. Each of these properties can be calculated using the CVU expression language.