pills

Overview

pills appear next to the header of a list-item. They can be used to convey status-like information about the item in a dynamic and colorful way. Pills can either be declared in the view XML (Static pills) or in the view JS/TS (Dynamic pills).

Example: Static pills

main.view.xml

<list>
    <list-item>
        <pills>
            <pill label="Status" color="positive" show-if="$:shouldShowPill()" />
        </pills>
    </list-item>
</list>

main.js

<list>
    <list-item query="projects">
        <pills>
            <!-- pass $object to a JS/TS function to evaluate ab object's fields -->
            <pill label="{$:getStatus($object)}" color="info" />
            <!-- or access the field directly with a format_string -->
            <pill label="{status}" color="secondary" />
        </pills>
    </list-item>
</list>

Example: Dynamic pills

main.view.xml

<list>
    <list-item>
        <pills list="$:getMyPills()" />
    </list-item>
</list>

main.js

function getMyPills() {
    return [
        {label: "Pill 1", color: "negative"},
        {label: "Pill 2", color: "info"}
    ];
}

Standard Attributes

None

Advanced Attributes

list

Required

Default: unset

Shorthand supported? false

An array of pill objects. The list attribute makes pills dynamic - i.e. the pills can be constructed dynamically using your app's JS/TS.

<list>
    <list-item>
        <pills list="$:getMyPills()" />
    </list-item>
</list>

function getMyPills() {
    return [
        {label: "Pill 1", color: "negative"},
        {label: "Pill 2", color: "info"}
    ];
}

show-if and hide-if

pageshow-ifpagehide-if