1# ArkUI Subsystem Changelog
2
3## cl.arkui.1 Change in the Default Background Effect of Menus
4
5**Access Level**
6
7Public
8
9**Reason for Change**
10
11The change is made to enhance visual effects.
12
13**Change Impact**
14
15This change is a compatible change.
16
17In unified rendering mode, the default background of the menu is changed to a blur material.
18
19**API Level**
20
2111
22
23**Change Since**
24
25OpenHarmony SDK 4.1.5.2
26
27**Key API/Component Changes**
28
29**bindMenu**, **bindContextMenu**, **<\Select>**, **<\Navigation>**
30
31- Before change: The menu background is in white by default and does not support blur styles.
32- After change: By default, the menu background is transparent with a blur style applied. You can configure the background color and blur style for **bindMenu** and **bindContextMenu**.
33
34**Adaptation Guide**
35
36Example of removing a blur style from **bindMenu** or **bindContextMenu**:
37```ts
38@Entry
39@Component
40struct Index {
41  @State message: string = 'Custom menu';
42
43  @Builder
44  MenuBuilder() {
45    Menu() {
46      MenuItem({ content: "item00" })
47      MenuItem({ content: "item11" })
48    }
49  }
50
51  @Builder
52  ContextMenuBuilder() {
53    Menu() {
54      MenuItem({ content: "item22" })
55      MenuItem({ content: "item33" })
56    }
57  }
58
59  build() {
60    Row() {
61      Column() {
62        Text(this.message)
63          .fontSize(50)
64          .fontWeight(FontWeight.Bold)
65          .fontColor('black')
66          .bindMenu(this.MenuBuilder(), { backgroundColor: Color.White, backgroundBlurStyle: BlurStyle.NONE })
67          .bindContextMenu(this.ContextMenuBuilder(), ResponseType.LongPress, {
68            backgroundColor: Color.White,
69            backgroundBlurStyle: BlurStyle.NONE
70          })
71      }
72      .width('100%')
73    }
74    .height('100%').backgroundColor(Color.Orange)
75  }
76}
77```
78Before change:
79```ts
80.bindMenu(this.MenuBuilder())
81.bindContextMenu(this.ContextMenuBuilder(), ResponseType.LongPress)
82```
83After change:
84```ts
85.bindMenu(this.MenuBuilder(), { backgroundColor: Color.White, backgroundBlurStyle: BlurStyle.NONE })
86.bindContextMenu(this.ContextMenuBuilder(), ResponseType.LongPress, { backgroundColor: Color.White, backgroundBlurStyle: BlurStyle.NONE })
87```
88As shown in the preceding example, you can manually set the enumerated values of the background color and blur style.
89
90
91
92## cl.arkui.2 New Sheet Types
93
94**Access Level**
95
96Public
97
98**Reason for Change**
99
100The change is made to enhance visual effects.
101
102**Change Impact**
103
104This change is a compatible change.
105
106a. When the device width is less than 600 vp, the sheet is presented as a bottom sheet by default.
107
108b. When the device width is in the 600-840 vp range, the sheet is presented as a center sheet by default.
109
110c. When the device width is greater than 840 vp, the sheet is presented as a popup sheet by default, displayed under the node bound to through **bindSheet**.
111
112Before change: The sheet is presented as a bottom sheet on all devices.
113
114![en-us_image_alert](figures/2.1.png)
115
116After change: The sheet can also be presented as a center or popup sheet. Below shows a center sheet.
117
118![en-us_image_alert](figures/2.2.png)
119
120Below shows a popup sheet.
121
122![en-us_image_alert](figures/2.3.png)
123
124**API Level**
125
12611
127
128**Change Since**
129
130OpenHarmony SDK 4.1.5.2
131
132**Key API/Component Changes**
133
134bindSheet
135
136**Adaptation Guide**
137
138For a device whose width is greater than 840 vp, to display a center sheet, set **preferType** in **SheetOptions** to **SheetType.CENTER**.
139
140
141
142## cl.arkui.3 Change in the Style of the Bottom Sheet
143
144**Access Level**
145
146Public
147
148**Reason for Change**
149
150The change is made to enhance visual effects.
151
152**Change Impact**
153
154This change is a compatible change.
155
156a. With **SheetSize** in **SheetOptions** of the bottom sheet set to **Medium**, the sheet height is the screen height multiplied by 0.6.
157
158Before change:
159
160![en-us_image_alert](figures/3.1.png)
161
162After change:
163
164
165
166![en-us_image_alert](figures/3.2.png)
167
168b. The **FIT_CONTENT** option is added to **SheetSize** in **SheetOptions** for the bottom sheet. This option enables the sheet to adapt its height based on the content.
169
170Before change:
171
172![en-us_image_alert](figures/3.3.png)
173
174After change:
175
176![en-us_image_alert](figures/3.4.png)
177
178c. You can use **detents** in **SheetOptions** to specify an array of heights where the sheet can rest. This attribute takes effect only for the bottom sheet in portrait mode.
179
180Before change: The sheet cannot rest at different heights.
181
182After change:
183
184![en-us_image_alert](figures/3.5.gif)
185
186d. When the device is in landscape mode, the bottom sheet supports only one detent - 8 vp away from the top of the screen.
187
188Before change: The detent specifications of the bottom sheet in landscape mode are the same as those in portrait mode.
189
190After change:
191
192![en-us_image_alert](figures/3.6.png)
193
194e. When the height of the content area builder is set to a percentage, the percentage is based on the height set or the value of **detents**, not the screen height.
195
196**API Level**
197
19811
199
200**Change Since**
201
202OpenHarmony SDK 4.1.5.2
203
204**Key API/Component Changes**
205
206bindSheet
207
208**Adaptation Guide**
209
210a. When **detents** in **SheetOptions** is set, the first height in the tuple is the initial height.
211
212b. When **detents** is set in **SheetOptions**, the **height** attribute does not take effect.
213
214c. When **height** is set to a custom height or **FIT_CONTENT**, the maximum height is used if the height set is greater than the maximum height or less than **0**.
215
216
217
218## cl.arkui.4 Addition of the Center and PopUp Sheet Types
219
220**Access Level**
221
222Public
223
224**Reason for Change**
225
226The change is made to enhance visual effects.
227
228**Change Impact**
229
230This change is a compatible change.
231
232a. The default width and height of the center sheet are 480 vp and 560 vp, respectively.
233
234b. If a center sheet has fixed content, you can customize its height, 320 vp at minimum and length of the shorter edge of the device multiplied by 0.9 at maximum.
235
236c. The center sheet does not resize when switched between landscape and portrait modes.
237
238d. The default width and height of the popup sheet are 360 vp and 560 vp, respectively.
239
240e. If a popup sheet has fixed content, you can customize its height, 320 vp at minimum and length of the shorter edge of the device multiplied by 0.9 at maximum.
241
242**API Level**
243
24411
245
246**Change Since**
247
248OpenHarmony SDK 4.1.5.2
249
250**Key API/Component Changes**
251
252bindSheet
253
254**Adaptation Guide**
255
256When **height** is set to a custom height or **FIT_CONTENT**, the maximum height is used if the height set is greater than the maximum height; the minimum height is used if the height set is less than the minimum height; the default height is used if the height set is a negative value.
257
258
259
260## cl.arkui.5 Change in the Sheet Operation Area
261
262**Access Level**
263
264Public
265
266**Reason for Change**
267
268The change is made to enhance visual effects.
269
270**Change Impact**
271
272This change is a compatible change.
273
274a. A title area is added to accommodate the title specified in **SheetOptions**. This area is 56 vp high for a single-line or custom title and 72 vp high for a double-line title.
275
276Before change: There is no title area on the sheet.
277
278![en-us_image_alert](figures/5.1.png)
279
280After change: The title area is displayed on the sheet as needed.
281
282![en-us_image_alert](figures/5.2.png)
283
284b. You can specify whether to show a close icon through **showClose** in **SheetOptions**. By default, the icon is displayed.
285
286Before change: The sheet does not have a close icon.
287
288After change: The sheet shows a close icon by default.
289
290c. The size of the drag bar is changed to 48 x 4 vp. The drag bar is not displayed when sheet has only one detent and is displayed by default when sheet has multiple detents.
291
292Before change: The drag bar is displayed by default, with a size of 28 x 4 vp.
293
294After change: The drag bar is displayed by default only for the bottom sheet that has multiple detents, at a size of 48 x 4 vp.
295
296d. The drag bar does not move slightly in the x or y direction when dragged.
297
298Before change: The drag bar moves slightly in the x and y directions when dragged.
299
300After change: The drag bar does not move slightly in the x or y direction when dragged.
301
302**API Level**
303
30411
305
306**Change Since**
307
308OpenHarmony SDK 4.1.5.2
309
310**Key API/Component Changes**
311
312bindSheet
313
314**Adaptation Guide**
315
316None.
317
318
319
320## cl.arkui.6 Change in the Interaction with the Sheet Content Area
321
322**Access Level**
323
324Public
325
326**Reason for Change**
327
328The change is made to enhance the interaction experience.
329
330**Change Impact**
331
332This change is a compatible change.
333
334a. With a bottom sheet that has its content displayed on the top, swiping up expands the sheet (if multiple detents are available) or scrolls the content; swiping down shrinks (if multiple detents are available) or closes the sheet.
335
336b. With a bottom sheet that has its content displayed at the bottom, swiping up produces a bounce effect in the content area, without switching the sheet between detents; swiping down scrolls the content until it reaches the top.
337
338c. With a bottom, center, or popup sheet that has its content displayed in the center, swiping up or down scrolls the content until it reaches the bottom or top, without switching the sheet between detents.
339
340d. With a center sheet that has its content displayed on the top, swiping down closes the sheet; swiping up scrolls the content. With a center sheet that has its content displayed at the bottom, swiping up produces a bounce effect in the content area; swiping down scrolls the content.
341
342e. With a popup sheet that has its content displayed on the top, swiping down does not close the sheet; swiping up scrolls the content. With a popup sheet that has its content displayed at the bottom, swiping up produces a bounce effect in the content area; swiping down scrolls the content.
343
344Before change: The sheet does not interact when users swipe up or down on it.
345
346After change:
347
348![en-us_image_alert](figures/6.1.gif)
349
350**API Level**
351
35211
353
354**Change Since**
355
356OpenHarmony SDK 4.1.5.2
357
358**Key API/Component Changes**
359
360bindSheet
361
362**Adaptation Guide**
363
364None.
365
366
367
368## cl.arkui.7 Change in the Interaction with the Sheet Title Area
369
370**Access Level**
371
372Public
373
374**Reason for Change**
375
376The change is made to enhance the interaction experience.
377
378**Change Impact**
379
380This change is a compatible change.
381
382a. Swiping up in the title area of a bottom sheet switches the sheet to the adjacent larger detent; dragging up the title area switches the sheet straight to the largest detent; if the sheet is already at its largest detent, it produces a bounce effect.
383
384b.Swiping down in the title area of a bottom sheet switches the sheet to the adjacent smaller detent; dragging down the title area switches the sheet across detents and even closes it.
385
386c. Swiping up in the title area of a center sheet produces a bounce effect; swiping down with a velocity lower than the threshold also produces a bounce effect; dragging down or swiping down with a velocity higher than the threshold closes the sheet.
387
388Before change: Interaction in the title area triggers only the dismiss event.
389
390After change:
391
392![en-us_image_alert](figures/7.1.gif)
393
394**API Level**
395
39611
397
398**Change Since**
399
400OpenHarmony SDK 4.1.5.2
401
402**Key API/Component Changes**
403
404bindSheet
405
406**Adaptation Guide**
407
408None.
409
410**Example**
411
412See the preceding example after change.
413
414
415
416
417
418## cl.arkui.8 Change in Modes for Dismissing a Sheet
419
420**Access Level**
421
422Public
423
424**Reason for Change**
425
426The change is made to enhance the interaction experience.
427
428**Change Impact**
429
430This change is a compatible change.
431
432a. A sheet can be dismissed by touching the mask. By default, the bottom and center sheets have a mask, and the popup sheet has no mask.
433
434Before change: By default, the sheet has no mask, and users cannot dismiss the sheet by touching the mask.
435
436After change:
437
438![en-us_image_alert](figures/8.1.gif)
439
440b. A sheet can be dismissed by touching the close icon.
441
442c. A bottom or center sheet can be dismissed by a pull-down gesture.
443
444Before change: All sheets can be dismissed by a pull-down gesture.
445
446After change: Only the bottom and center sheets can be dismissed by a pull-down gesture.
447
448d. The **shouldDismiss** callback is added to **SheetOptions**. With the callback registered, when the user attempts to dismiss the sheet by a pull-down gesture or clicking the back button, the mask, or the close icon, the sheet is not dismissed immediately.
449
450Before change: If the dismiss event is triggered, the sheet is dismissed immediately.
451
452After change: With the **shouldDismiss** callback registered, when the user attempts to dismiss the sheet, the sheet is not dismissed immediately.
453
454![en-us_image_alert](figures/8.2.png)
455
456**API Level**
457
45811
459
460**Change Since**
461
462OpenHarmony SDK 4.1.5.2
463
464**Key API/Component Changes**
465
466bindSheet
467
468**Adaptation Guide**
469
470None.
471
472## cl.arkui.9 Change in the \<Select> Component
473
474**Access Level**
475
476Public
477
478**Reason for Change**
479
480The change is made to enhance visual effects.
481
482**Change Impact**
483
484This change is a compatible change.
485
486**API Level**
487
48811
489
490**Change Since**
491
492OpenHarmony SDK 4.1.5.2
493
494**Key API/Component Changes**
495
496\<Select>
497
498- Before change:
499  The distance between the drop-down button text and the left boundary and the distance between the arrow icon and the right boundary of the **\<Select>** component are 12 vp.
500
501  There is a horizontal offset when the drop-down button is aligned with the drop-down list box.
502
503  The distance between the drop-down button and the drop-down menu is 4 vp.
504
505  ![](figures/select.png)
506
507- After change:
508  The distance between the drop-down button text and the left boundary and the distance between the arrow icon and the right boundary of the **\<Select>** component are 16 vp.
509
510  There is not horizontal offset when the drop-down button is aligned with the drop-down list box.
511
512  The distance between the drop-down button and the drop-down menu is 8 vp.
513
514  ![](figures/selectExample.png)
515
516**Adaptation Guide**
517
518None.
519
520
521
522## cl.arkui.10 Change in Interaction with the \<Refresh> Component
523
524**Access Level**
525
526Public
527
528**Reason for Change**
529
530Previously, the **\<Refresh>** component supports the mouse-based drag-down action. This may result in conflicts with the multiselect action in certain scenarios. In addition, the support for the mouse-based drag-down action does not comply with the UX specifications.
531
532**Change Impact**
533
534This change is a non-compatible change. After change, the **\<Refresh>** component does not support the mouse-based drag-down action.
535
536**API Level**
537
5388
539
540**Change Since**
541
542OpenHarmony SDK 4.1.5.2
543
544**Key API/Component Changes**
545
546In versions earlier than API version 11, the **\<Refresh>** component supports the mouse-based drag-down action.
547
548In API version 11 and later versions, the **\<Refresh>** component does not support the mouse-based drag-down action.
549
550**Adaptation Guide**
551
552None.
553