codecamp

垂直列表形式显示的菜单

以垂直列表形式显示的菜单。

说明
  • 该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
  • Menu组件需和bindMenubindContextMenu方法配合使用,不支持作为普通组件单独使用。

子组件

包含MenuItemMenuItemGroup子组件。

接口

Menu()

作为菜单的固定容器,无参数。

属性

除支持通用属性外,还支持以下属性:

名称

参数类型

描述

fontSize

Length

统一设置Menu中所有文本的尺寸,Length为number类型时,使用fp单位。

示例

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State select: boolean = true
  5. private iconStr: ResourceStr = $r("app.media.view_list_filled")
  6. private iconStr2: ResourceStr = $r("app.media.view_list_filled")
  7. @Builder
  8. SubMenu() {
  9. Menu() {
  10. MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
  11. MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
  12. }
  13. }
  14. @Builder
  15. MyMenu(){
  16. Menu() {
  17. MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
  18. MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
  19. .enabled(false)
  20. MenuItem({
  21. startIcon: this.iconStr,
  22. content: "菜单选项",
  23. endIcon: $r("app.media.arrow_right_filled"),
  24. builder: this.SubMenu.bind(this)
  25. })
  26. MenuItemGroup({ header: '小标题' }) {
  27. MenuItem({ content: "菜单选项" })
  28. .selectIcon(true)
  29. .selected(this.select)
  30. .onChange((selected) => {
  31. console.info("menuItem select" + selected);
  32. this.iconStr2 = $r("app.media.icon");
  33. })
  34. MenuItem({
  35. startIcon: $r("app.media.view_list_filled"),
  36. content: "菜单选项",
  37. endIcon: $r("app.media.arrow_right_filled"),
  38. builder: this.SubMenu.bind(this)
  39. })
  40. }
  41. MenuItem({
  42. startIcon: this.iconStr2,
  43. content: "菜单选项",
  44. endIcon: $r("app.media.arrow_right_filled")
  45. })
  46. }
  47. }
  48. build() {
  49. Row() {
  50. Column() {
  51. Text('click to show menu')
  52. .fontSize(50)
  53. .fontWeight(FontWeight.Bold)
  54. }
  55. .bindMenu(this.MyMenu)
  56. .width('100%')
  57. }
  58. .height('100%')
  59. }
  60. }

跑马灯组件
展示菜单Menu中具体的item菜单项
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

媒体组件

像素

枚举

类型

接口

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }