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 115 116After change: The sheet can also be presented as a center or popup sheet. Below shows a center sheet. 117 118 119 120Below shows a popup sheet. 121 122 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 161 162After change: 163 164 165 166 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 173 174After change: 175 176 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 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 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 279 280After change: The title area is displayed on the sheet as needed. 281 282 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 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 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 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 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  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  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