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