list-item
Overview
list
contains one or many list-item
elements.
A list-item
can be defined as either static (for basic usage) or dynamically (will repeat itself for each item in a query). A simple static list will be defined as:
While a dynamic list will be defined as:
You can also mix dynamic and static list items together such as:
list-item
syntax
list-item
syntaxlist-item
attributes can be represented as either shorthand (perfect for quick and common use cases) or longhand (for more complicated use cases). In shorthand mode, you can simply add attributes such as content="test"
on a list-item
while in longhand mode you would nest a <content>test</content>
tag inside the list-item.
The following attributes on a list-item
support the shorthand notation:
Example: Shorthand attributes
Example: Longhand attributes
Example: Shorthand and longhand combined
Standard Attributes
bind
bind
Optional
Type: Same type as query
Default: unset
Shorthand supported? false
The presence of bind
makes the list selectable. bind
contains the variable that stores the object that the user selected. Must be the same data model type as the list-item
's query
.
Note: A list-item
's action
's on-press
has no effect if the bind
attribute is set.
content
content
Optional
Type: string
(static text, a format string or the return value of a JS/TS function)
Default: unset
Shorthand supported? true
Text that is displayed in the content position of the list-item
.
Example: Shorthand syntax
Example: Longhand syntax
footer
footer
Optional
Type: string
(static text, a format string or the return value of a JS/TS function)
Default: unset
Shorthand supported? true
Text that is displayed in the footer position of the list-item
.
Example: Shorthand syntax
Example: Longhand syntax
header
header
Optional
Type: string
(static text, a format string or the return value of a JS/TS function)
Default: unset
Shorthand supported? true
Text that is displayed in the header position of the list-item
.
Example: Shorthand syntax
Example: Longhand syntax
query
query
Optional
Default: unset
Shorthand supported? false
The presence of query
makes list-item
s dynamic. query
contains the name of the query or array variable to populate the objects shown as list-item
s.
Advanced Attributes
icon
icon
A shorthand attribute. See asset
> icon
image
image
A shorthand attribute. See asset
> src
on-press
on-press
A shorthand attribute. See action
> on-press
on-press-icon
on-press-icon
A shorthand attribute. See action
> icon
show-if
and hide-if
show-if
and hide-if
Last updated