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
<list>
<list-item>
<pills>
<pill label="Status" color="positive" show-if="$:shouldShowPill()" />
</pills>
</list-item>
</list>
<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
<list>
<list-item>
<pills list="$:getMyPills()" />
</list-item>
</list>
function getMyPills() {
return [
{label: "Pill 1", color: "negative"},
{label: "Pill 2", color: "info"}
];
}
Standard Attributes
None
Advanced Attributes
list
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
show-ifhide-ifshow-if
and hide-if
Last updated