Data Lists / Grids
Lists & grids that display data from data sources.
The list widget is used to display components in a vertical list from a datasource. The template will be applied on every item within the datasource.
The optional
limit
property is used to determine the maximum number of items that should be taken from the data source.The
mainAxisAlignment
property supports the following options: start
, end
, spaceBetween
, spaceAround
& spaceEvenly
.The
crossAxisAlignment
property supports the following options: start
, end
, center
, stretch
& baseline
.mainAxisAlignment
, crossAxisAlignment
are optional.{
"type": "listWidget",
"dataSource": "$list.items",
"limit": 5,
"mainAxisAlignment": "spaceBetween",
"crossAxisAlignment": "start",
"template": {}
}
The horizontal list widget is used to display components in a horizontal list from a datasource. The template will be applied on every item within the datasource.
The
mainAxisAlignment
property supports the following options: start
, end
, spaceBetween
, spaceAround
& spaceEvenly
.The optional
limit
property is used to determine the maximum number of items that should be taken from the data source.{
"type": "horizontalListWidget",
"mainAxisAlignment": "start",
"dataSource": "$list.items",
"limit": 5,
"template": {}
}
The horizontal list scroll widget is used to display components in a horizontal scrollable list from a datasource. The template will be applied on every item within the datasource. The optional
limit
property is used to determine the maximum number of items that should be taken from the data source.{
"type": "horizontalListScrollWidget",
"height": 130,
"dataSource": "$list.items",
"limit": 5,
"template": {}
}
The grid widget is used to display a number of components from a datasource. The template will be applied on every item within the datasource.
childAspectRatio
defaults to 1.0 when unspecified. Like the fixedGridWidget
itemPadding
is also optional.{
"type": "gridWidget",
"itemPadding": "xs",
"columns": 2,
"childAspectRatio": 1.5,
"dataSource": "$user.photos",
"template": {}
}
Last modified 2yr ago