Links

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

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

Last modified 1yr ago