1# ArkUI Subsystem Changelog
2
3## cl.arkui.1 Visual Effect Changes of the Menu Component
4
5**Access Level**
6
7Public
8
9**Reason for Change**
10
11The changes are made to maintain consistency with UX specifications.
12
13- Changes the display effect shown when the set width is less than the minimum width.
14- Changes how the context menu interacts with the user.
15- Adds an attribute to allow a menu to display across applications (if this attribute is not specified, the system auto-displays the menu across applications based on the device type).
16
17**Change Impact**
18
19The changes are compatible changes.
20
21- Allows the menu to display across applications.
22
23- Affects the avoidance logic of the context menu.
24
25**API Level**
26
2711
28
29**Change Since**
30
31OpenHarmony SDK 4.1.3.5
32
33**Key API/Component Changes**
34
35Menu
36
37- Before change:
38
39  - If a custom menu is set to a width less than 64 vp, it is displayed at the width of 64 vp.
40
41  - If there is no enough room for the context menu below the selected element, the context menu is flipped and displayed above the selected element instead.
42
43  - The submenu, if any, of a context menu, is displayed close to the edge.
44
45  - The menu can only be displayed in the application window.
46
47- After change:
48
49  - If a custom menu is set to a width less than 64 vp, it is displayed at the width of two columns.
50
51  - If there is no enough room for the context menu below the selected element, the context menu is moved upward vertically until it is completely displayed, while respecting the minimum bottom margin requirement for the menu.
52
53  - When the menu pops up within the application, it has a left and right margin of 16 vp, and it defaults to avoiding the status bar and navigation bar without additional clearance distance. When the menu pops up outside the application window, it has a left and right margin of 8 vp, and it defaults to avoiding the status bar and dock area without additional clearance distance. If there is a submenu, its margin is consistent with that of the level-1 menu.
54
55  <img src="figures/SubMenu.jpg" alt="isSubWindow" style="zoom:50%;" />
56
57  - You can use the **showInSubWindow** attribute to set whether to display the menu in a subwindow outside the application window on KLV devices. The value **true** means to show the menu in a subwindow outside the application window, and **false** means the opposite. If this attribute is not set, the menu is displayed in a subwindow outside the application window on KLV devices and inside the application window on non-KLV devices.
58
59  <img src="figures/SubWindow.png" alt="SubWindow"  />
60
61**Adaptation Guide**
62
63```
64/* Example of displaying the menu in a child window
65*(showInSubWindow?: boolean;)
66* Condition: KLV device
67* true: The menu is displayed in a subwindow outside the application window.
68* false: The menu is displayed inside the application window.
69*/
70@Entry
71@Component
72struct Index {
73  @State select: boolean = true
74  private iconStr: ResourceStr = $r("app.media.view_list_filled")
75  private iconStr2: ResourceStr = $r("app.media.view_list_filled")
76
77  @Builder
78  SubMenu() {
79    Menu() {
80      MenuItem({ content: "Copy", labelInfo: "Ctrl+C" })
81      MenuItem({ content: "Paste", labelInfo: "Ctrl+V" })
82    }
83  }
84
85  @Builder
86  MyMenu(){
87    Menu() {
88      MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" })
89      MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" })
90        .enabled(false)
91      MenuItem({
92        startIcon: this.iconStr,
93        content: "Menu option",
94        endIcon: $r("app.media.arrow_right_filled"),
95        builder: ():void=>this.SubMenu()
96      })
97      MenuItemGroup ({ header: 'Subtitle' }) {
98        MenuItem ({ content: "Menu option" })
99          .selectIcon(true)
100          .selected(this.select)
101          .onChange((selected) => {
102            console.info("menuItem select" + selected);
103            this.iconStr2 = $r("app.media.icon");
104          })
105        MenuItem({
106          startIcon: $r("app.media.view_list_filled"),
107          content: "Menu option",
108          endIcon: $r("app.media.arrow_right_filled"),
109          builder: ():void=>this.SubMenu()
110        })
111      }
112      MenuItem({
113        startIcon: this.iconStr2,
114        content: "Menu option",
115        endIcon: $r("app.media.arrow_right_filled")
116      })
117    }
118  }
119
120  build() {
121    Row() {
122      Column() {
123        Text('click to show menu')
124          .fontSize(50)
125          .fontWeight(FontWeight.Bold)
126      }
127      .bindMenu(this.MyMenu,{showInSubWindow:true})
128      .width('100%')
129    }
130    .height('100%')
131  }
132}
133
134```
135