list-item

Overview

list contains one or many list-item elements.

main.view.xml

<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 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

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

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

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

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

Optional

Default: unset

Shorthand supported? false

The presence of query makes list-items dynamic. query contains the name of the query or array variable to populate the objects shown as list-items.

<var name="my_users" type="query:user" />

<list>
    <list-item query="my_users">
        <header>{name}</header>
    </list-item>
</list>

Advanced Attributes

icon

A shorthand attribute. See asset > icon

image

A shorthand attribute. See asset > src

on-press

A shorthand attribute. See action > on-press

on-press-icon

A shorthand attribute. See action > icon

show-if and hide-if

pageshow-ifpagehide-if