list-item
Overview
list
contains one or many list-item
elements.

<list>
<list-item>
<asset src="icons/checkmark-flat.png" />
<pills>
<pill label="Pill 1" color="info" />
<pill label="Pill 2" color="secondary" />
</pills>
<header>Header</header>
<content>Content</content>
<footer>Footer</footer>
<accent label="Accent" color="positive" />
<action on-press="$:doSomething()" icon="fa-bars" />
</list-item>
</list>
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:
<list>
<list-item heading="Accept" />
<list-item heading="Reject" />
<list-item heading="More info" />
</list>
While a dynamic list will be defined as:
<list>
<list-item query="my_query" heading="{title}" />
</list>
You can also mix dynamic and static list items together such as:
<list>
<list-item heading="More info" />
<list-item query="my_query" heading="{title}" />
<list-item heading="Accept" />
<list-item heading="Reject" />
</list>
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:
<list-item
header="..."
content="..."
footer="..."
icon="..."
image="..."
on-press="..."
on-press-icon="..."
/>
Example: Shorthand attributes
<list>
<list-item content="More info" />
</list>
Example: Longhand attributes
<list>
<list-item>
<content>More Info</content>
</list-item>
</list>
Example: Shorthand and longhand combined
<list-item header="My header">
<pills list="$:getMyPills()" />
</list-item>
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
.
<var name="my_users" type="query:user" />
<var name="selected_user" type="user" />
<list>
<list-item query="my_users" bind="selected_user">
<header>{name}</header>
</list-item>
</list>
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
<list>
<list-item content="Click to view more information about the user" />
</list>
Example: Longhand syntax
<list>
<list-item>
<content>Click to view more information about the user</content>
<!-- or -->
<content>{formatString}</content>
<!-- or -->
<content value="Click to view more information about the user" />
</list-item>
</list>
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
<list>
<list-item footer="Click to view more information about the user" />
</list>
Example: Longhand syntax
<list>
<list-item>
<footer>Click to view more information about the user</footer>
<!-- or -->
<footer>{formatString}</footer>
<!-- or -->
<footer value="Click to view more information about the user" />
</list-item>
</list>
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
<list>
<list-item header="Create new user" />
</list>
Example: Longhand syntax
<list>
<list-item>
<header>Create new user</header>
<!-- or -->
<header>{formatString}</header>
<!-- or -->
<header value="Create new user" />
</list-item>
</list>
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.
<var name="my_users" type="query:user" />
<list>
<list-item query="my_users">
<header>{name}</header>
</list-item>
</list>
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-ifhide-ifshow-if
and hide-if
Last updated