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
.
Basic Example
<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
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.
<context-menu>
<item label="FAQ" icon="fa-question-circle" on-press="$:navigate.link('faq')" />
</context-menu>
label
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.
<context-menu>
<item label="FAQ" icon="fa-question-circle" on-press="$:navigate.link('faq')" />
</context-menu>
on-press
on-presson-press
Note: When constructing an item from JavaScript/TypeScript, use onPress
, i.e.:
function buildContextMenuItem() {
return component.contextMenuItem({
label= "Video Tutorials",
icon="fa-play",
onPress:function() {
navigate.link("video_tuts");
}
})
}
Advanced Attributes
from-js
from-js
Optional
Default: unset
Construct a context-menu
item
from JavaScript/TypeScript.
<context-menu>
<item from-js="$:buildContextMenuItem()">
</context-menu>
function buildContextMenuItem() {
return component.contextMenuItem({
label= "Video Tutorials",
icon="fa-play",
onPress:function() {
navigate.link("video_tuts");
}
})
}
validate
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-ifhide-ifshow-if
and hide-if
Last updated