1# ArkUI Subsystem Changelog 2 3## cl.arkui.1 Visibility Change of the menus Attribute in \<Navigation> 4 5**Change Impact** 6 7The **value** sub-attribute of the **menus** attribute is not displayed. To display the value, you can use a custom builder. 8 9**Example** 10```ts 11@Entry 12@Component 13struct Index { 14 build() { 15 Column() { 16 Navigation() { 17 Text('Navigation') 18 }.title("Navigation Menu") 19 .menus([ 20 {icon: 'common/image/icon.png', value: 'menu1'}, 21 {icon: 'common/image/icon.png', value: 'menu2'}, 22 {icon: 'common/image/icon.png', value: 'menu3'} 23 ]) 24 } 25 } 26} 27``` 28In API version 9, the **value** sub-attribute of the **menus** attribute is displayed. 29 30 31 32In API version 10, the **value** sub-attribute of the **menus** attribute is not displayed. 33 34 35## cl.arkui.2 Change of the Default Display Position for Free Mode of the titleMode Attribute in \<Navigation> 36 37**Change Impact** 381. In the **\<Navigation>** component, the display position of a custom title with **titleMode** set to **Full** is the same as that with **titleMode** set to **Free**. 392. If a custom title is used with a label in Free mode, the label is deviated rightwards. 40 41**Example** 42```ts 43@Entry 44@Component 45struct Index { 46 @Builder NavigationTile() { 47 Column() { 48 Text('title').fontColor('#182431').fontSize(30).lineHeight(41) 49 Text('subTitle').fontColor('#182431').fontSize(14).lineHeight(19).margin(top:2, bottom: 20) 50 } 51 } 52 53 build() { 54 Column() { 55 Navigation() { 56 Text('Navigation') 57 }.title(this.NavigationTitle) 58 .titleMode(NavigationTitleMode.Free) 59 .menus([ 60 {icon: 'common/image/icon.png', value: 'menu1'} 61 ]) 62 } 63 } 64} 65``` 66 67Display position in Free mode in API version 9 68 69 70 71Display position in Free mode in API version 10, which is the same as that in Full mode 72 73 74 75## cl.arkui.3 Change of Handling of Invalid Strings 76 77**Change Impact** 78 79An invalid string that contains digits is not parsed into digits. Instead, it is regarded as an invalid value and is set to the default value according to predefined rules. 80 81**Example** 82```ts 83@Entry 84@Component 85struct GridRowExample { 86 @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown] 87 @State currentBp: string = 'unknown' 88 89 build() { 90 Column() { 91 GridRow({ 92 columns: 5, 93 gutter: { x: 5, y: 10 }, 94 breakpoints: { value: ["400vp", "600vp", "800vp"], 95 reference: BreakpointsReference.WindowSize }, 96 direction: GridRowDirection.Row 97 }) { 98 ForEach(this.bgColors, (color) => { 99 GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { 100 Row().width("100%").height("20vp") 101 }.borderColor(color).borderWidth(2) 102 }) 103 }.width("100%").height("100%") 104 }.width("80pv").margin({ left: 10, top: 5, bottom: 5 }).height(200) 105 .border({ color: '#880606', width: 2 }) 106 } 107} 108``` 109 110API version 9: In the preceding example, the value **"80pv"** of the **width** attribute in **\<GridRow>** is equivalent to **80**. 111 112API version 10: In the preceding example, the value **"80pv"** is regarded as an invalid value. Therefore, the **width** attribute in **\<GridRow>** is set to the default value, which means that the attribute is not set. 113 114## cl.arkui.4 Change of Invalid Values of the loop Attribute in \<Swiper> to true 115 116**Change Impact** 117 118The value used in place of any invalid value of the **loop** attribute in the **\<Swiper>** component is changed from **false** to **true**. 119 120API version 9: The value **false** is used when the **loop** attribute is set to an invalid value. 121 122API version 10: The value **true** is used when the **loop** attribute is set to an invalid value. 123 124## cl.arkui.5 Change of Speed Threshold for Page Turning from 180 px/s to 1200 px/s in \<Swiper> 125 126**Change Impact** 127 128A faster speed is required to turn pages. 129 130## cl.arkui.6 Renaming of the isShowBackground Attribute in the \<Swiper> Component 131 132**Change Impact** 133 134Renamed the **isShowBackground** attribute in the **\<Swiper>** component **showBackground**. 135 136**Example** 137 138```ts 139class MyDataSource implements IDataSource { 140 private list: number[] = [] 141 private listener: DataChangeListener 142 143 constructor(list: number[]) { 144 this.list = list 145 } 146 147 totalCount(): number { 148 return this.list.length 149 } 150 151 getData(index: number): any { 152 return this.list[index] 153 } 154 155 registerDataChangeListener(listener: DataChangeListener): void { 156 this.listener = listener 157 } 158 159 unregisterDataChangeListener() { 160 } 161} 162 163@Entry 164@Component 165struct SwiperExample { 166 private swiperController: SwiperController = new SwiperController() 167 private data: MyDataSource = new MyDataSource([]) 168 169 aboutToAppear(): void { 170 let list = [] 171 for (var i = 1; i <= 10; i++) { 172 list.push(i.toString()); 173 } 174 this.data = new MyDataSource(list) 175 } 176 177 build() { 178 Column({ space: 5 }) { 179 Swiper(this.swiperController) { 180 LazyForEach(this.data, (item: string) => { 181 Text(item) 182 .width('90%') 183 .height(160) 184 .backgroundColor(0xAFEEEE) 185 .textAlign(TextAlign.Center) 186 .fontSize(30) 187 }, item => item) 188 } 189 .cachedCount(2) 190 .index(1) 191 .autoPlay(true) 192 .indicator(true) 193 .displayArrow({ 194 showBackground: true, 195 isSidebarMiddle: true, 196 backgroundSize: 24, 197 backgroundColor: Color.White, 198 arrowSize: 18, 199 arrowColor: Color.Blue 200 }, false) 201 202 Row({ space: 12 }) { 203 Button('showNext') 204 .onClick(() => { 205 this.swiperController.showNext() 206 }) 207 Button('showPrevious') 208 .onClick(() => { 209 this.swiperController.showPrevious() 210 }) 211 }.margin(5) 212 }.width('100%') 213 .margin({ top: 5 }) 214 } 215} 216``` 217 218## cl.arkui.7 Changing of the Right Margin of the Rightmost Menu Icons in the \<Navigation> Component 219 220**Change Impact** 221 222Changed the right margin of the rightmost menu icons in the **\<Navigation>** component menus from 36 vp to 24 vp, to account for the offset of menus by 12 vp on the right. 223 224## cl.arkui.8 Change in Pixel Rounding 225 226**Change Impact** 227 228Coordinates, widths, and heights with decimals are rounded off to integers. 229 230API version 9: The pixel coordinates, component widths and heights, and border widths are not rounded. 231 232API version 10: The pixel coordinates, component widths and heights, and border widths are rounded off to integers. 233 234**Example** 235```ts 236@Entry 237@Component 238struct Index { 239 build() { 240 Column() { 241 Row() { 242 Row() { 243 Row() { 244 Row() { 245 Row() 246 .width('100%') 247 .height('100%') 248 .border({width: '1', color: 'blue'}) 249 } 250 .width('100%') 251 .height('100%') 252 .border({width: '1', color: 'red'}) 253 } 254 .width('100%') 255 .height('100%') 256 .border({width: '1', color: 'blue'}) 257 } 258 .width('100%') 259 .height('100%') 260 .border({width: '1', color: 'red'}) 261 } 262 .width('81') 263 .height('81') 264 .border({width: '1', color: 'blue'}) 265 } 266 .width('100%') 267 .height('100%') 268 } 269} 270``` 271API version 9: The pixel coordinates, component widths and heights, and border widths are not rounded. 272 273 274 275API version 10: The widths of the left and top borders are rounded up, and the widths of the right and bottom borders are rounded down. 276 277 278