menu
提供菜单组件,作为临时性弹出窗口,用于展示用户可执行的操作。
权限列表
无
子组件
<option>子组件。
属性
除支持通用属性外,还支持如下属性:↵
目标元素选择器。当使用目标元素选择器后,点击目标元素会自动弹出menu菜单。弹出菜单位置优先为目标元素右下角,当右边可视空间不足时会适当左移,当下方空间不足时会适当上移。 |
||||
|
||||
说明: 不支持focusable、disabled属性。
样式
仅支持如下样式:
设置菜单的字体样式。见text组件font-style的样式属性。 |
||||
设置菜单的字体粗细。见text组件font-weight的样式属性。 |
||||
设置菜单的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。 |
事件
仅支持如下事件:
方法
仅支持如下方法。
显示menu菜单。(x, y)指定菜单弹窗位置。其中x表示距离可见区域左边沿的 X 轴坐标,不包含任何滚动偏移,y表示距离可见区域上边沿的 Y 轴坐标,不包含任何滚动偏移以及状态栏。菜单优先显示在弹窗位置右下角,当右边可视空间不足时会适当左移,当下方空间不足时会适当上移。 |
示例
<!-- xxx.hml -->
<div class="container">
<text onclick="onTextClick" class="title-text">Show popup menu.</text>
<menu id="apiMenu" onselected="onMenuSelected">
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
<option value="Item 3">Item 3</option>
</menu>
</div>
/* xxx.css */
.container {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.title-text {
margin: 20px;
}
// xxx.js
import prompt from '@system.prompt';
export default {
onMenuSelected(e) {
prompt.showToast({
message: e.value
})
},
onTextClick() {
this.$element("apiMenu").show({x:280,y:120});
}
}