Basics
The basic building blocks to build a user interface.
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.{
"type": "blockWidget",
"safeInsets": false,
"padding": ["m","m","m",""],
"backgroundColor": "white",
"borderColor": "black",
"borderWidth": 1,
"borderRadius": 10,
"height": 150,
"backgroundImage": "$user.backgroundImage",
"flex": 1,
"components": []
}
The
overflow property supports: ellipsis, fade, clip.The
textAlign property supports: center, left, right, end, start, justify.style, color, textAlign, maxlines & overflow are optional.{
"type": "textWidget",
"text": "$person.name",
"style": "bodyText",
"color": "black",
"textAlign": "left",
"maxLines": 1,
"overflow": "ellipsis"
}
The
fit property supports: none, fitWidth, cover, contain, scaleDown, fill, fitHeight and defaults to cover.width, cornerRadius & fadeInDuration are optional.{
"type": "imageWidget",
"image": "$person.imageUrl",
"fit": "cover",
"height": 50,
"width": 50,
"cornerRadius": 25,
"fadeInDuration": 200
}
An action widget can be used to wrap any component and make it tappable.
The behaviour property supports:
pushpushes a new route into the navigation stack.systemoffloads the action onto the operating system. Actions likemailto:[email protected]will open the default email client.backpops the navigation stack one step back.retainreplaces the current view with a new route.
{
"type": "actionWidget",
"action": "/events",
"behaviour": "push",
"component": {}
}
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.{
"type": "conditionalWidget",
"condition": "$items > 2",
"true": {},
"false": {}
}
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.
{
"type": "IconWidget",
"color": "black",
"font": "IconFont-One",
"size": 18,
"value": "\e012"
}
The markdown widget takes content from the
value property and renders it on screen.All the properties except from
type and value are optional.{
"type": "markdownWidget",
"value": "$venue.details",
"textColor": "black",
"headingColor": "purple",
"textStyleA": "bodyText",
"colorA": "blue",
"textStyleP": "bodyText",
"textStyleStrong": "boldBodyText",
"textStyleLi": "bodyText",
"textStyleCode": "codeBodyText",
"textStyleBlockquote": "bodyText",
"textStyleEm": "bodyText",
"textStyleH1": "headingTextOne",
"textStyleH2": "headingTextTwo",
"textStyleH3": "headingTextThree",
"textStyleH4": "headingTextFour",
"textStyleH5": "headingTextFive",
"textStyleH6": "headingTextSix"
}
Last modified 2yr ago