Gist
Search…
Basics
The basic building blocks to build a user interface.

Block

The block widget is a jack of all trades. It can be used to give padding, create rounded corners, fit and scale with flex and apply background colors / images.
The only required properties are type and components.

Example

1
{
2
"type": "blockWidget",
3
"safeInsets": false,
4
"padding": ["m","m","m",""],
5
"backgroundColor": "white",
6
"borderColor": "black",
7
"borderWidth": 1,
8
"borderRadius": 10,
9
"height": 150,
10
"backgroundImage": "$user.backgroundImage",
11
"flex": 1,
12
"components": []
13
}
Copied!

Text

The overflow property supports: ellipsis, fade, clip.
The textAlign property supports: center, left, right, end, start, justify.
style, color, textAlign, maxlines & overflow are optional.
1
{
2
"type": "textWidget",
3
"text": "$person.name",
4
"style": "bodyText",
5
"color": "black",
6
"textAlign": "left",
7
"maxLines": 1,
8
"overflow": "ellipsis"
9
}
Copied!

Image

The fit property supports: none, fitWidth, cover, contain, scaleDown, fill, fitHeight and defaults to cover.
width, cornerRadius & fadeInDuration are optional.
1
{
2
"type": "imageWidget",
3
"image": "$person.imageUrl",
4
"fit": "cover",
5
"height": 50,
6
"width": 50,
7
"cornerRadius": 25,
8
"fadeInDuration": 200
9
}
Copied!

Action

An action widget can be used to wrap any component and make it tappable.
The behaviour property supports:
    push pushes a new route into the navigation stack.
    system offloads the action onto the operating system. Actions like mailto:[email protected] will open the default email client.
    back pops the navigation stack one step back.
    retain replaces the current view with a new route.

Example

1
{
2
"type": "actionWidget",
3
"action": "/events",
4
"behaviour": "push",
5
"component": {}
6
}
Copied!

Conditional

This component is used to conditionally show a component based on a specified condition.
The condition property supports: >, <, == & in. If no operator is specified the condition will check if the property is null.

Example

1
{
2
"type": "conditionalWidget",
3
"condition": "$items > 2",
4
"true": {},
5
"false": {}
6
}
Copied!

Icon

The icon widget is used to display an icon from any loaded icon font.
Note: Icon fonts need to be loaded in the assets section of the configuration.
1
{
2
"type": "IconWidget",
3
"color": "black",
4
"font": "IconFont-One",
5
"size": 18,
6
"value": "\e012"
7
}
Copied!

Markdown

The markdown widget takes content from the value property and renders it on screen.
All the properties except from type and value are optional.
1
{
2
"type": "markdownWidget",
3
"value": "$venue.details",
4
"textColor": "black",
5
"headingColor": "purple",
6
"textStyleA": "bodyText",
7
"colorA": "blue",
8
"textStyleP": "bodyText",
9
"textStyleStrong": "boldBodyText",
10
"textStyleLi": "bodyText",
11
"textStyleCode": "codeBodyText",
12
"textStyleBlockquote": "bodyText",
13
"textStyleEm": "bodyText",
14
"textStyleH1": "headingTextOne",
15
"textStyleH2": "headingTextTwo",
16
"textStyleH3": "headingTextThree",
17
"textStyleH4": "headingTextFour",
18
"textStyleH5": "headingTextFive",
19
"textStyleH6": "headingTextSix"
20
}
Copied!
Last modified 6mo ago