item

Overview
An item within a context-menu should make it clear to the user what will happen when they select that item. An item has a label, an associated action (via its on-press attribute) and optionally an icon.
Best practices
Naming an item: Give an item a short, concise name. Use action words only if the item triggers an action.
Icons: Really consider the role that icons play. They are meant to supplement communication and should almost be able to portray a concept without accompanying text - so choose them wisely.
Apply icons to all child items within one group, or none.
Basic Example
main.view.xml
<context-menu>
    <item label="Video Tutorials" icon="fa-play" on-press="$:navigate.link('video_tutorials')" />
    <item label="FAQ" icon="fa-question-circle" on-press="$:navigate.link('faq')" />
    <!-- A `divider` element will automatically be added to separate the above items -->
    <!-- from non-customizable app items, e.g. 'Diagnostics' -->
</context-menu>
Standard Attributes
icon
Optional
Type: string
Default: unset
The icon to display on the item, it will be placed on the left of the label by default. The icon can be a Font Awesome icon, an Ionicons icon or a png icon asset.
main.view.xml
<context-menu>
    <item label="FAQ" icon="fa-question-circle" on-press="$:navigate.link('faq')" />
</context-menu>
label
Optional
Type: string (static text, a format string or the return value of a JS/TS function)
Default: Unset
The text that appears on the item to describe it.
main.view.xml
<context-menu>
    <item label="FAQ" icon="fa-question-circle" on-press="$:navigate.link('faq')" />
</context-menu>
on-press
on-press
Note: When constructing an item from JavaScript/TypeScript, use onPress, i.e.:
main.js
function buildContextMenuItem() {
    return component.contextMenuItem({
        label= "Video Tutorials",
        icon="fa-play",
        onPress:function() {
            navigate.link("video_tuts");
        }
    })
}
Advanced Attributes
from-js
Optional
Default: unset
Construct a context-menu item from JavaScript/TypeScript.
main.view.xml
<context-menu>
    <item from-js="$:buildContextMenuItem()">
</context-menu>
main.js
function buildContextMenuItem() {
    return component.contextMenuItem({
        label= "Video Tutorials",
        icon="fa-play",
        onPress:function() {
            navigate.link("video_tuts");
        }
    })
}
validate
Optional
Type: boolean
Default: false
Set to true to ensure that no required input fields in the current view are empty before performing the on-press action.
show-if and hide-if
show-if
hide-if

divider

date-input

Last modified 1yr ago

item

Overview

Basic Example

Standard Attributes

`icon`

`label`

`on-press`

Advanced Attributes

`from-js`

`validate`

`show-if` and `hide-if`