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![Navigation](figures/navigation_menu_api9.png)
31
32In API version 10, the **value** sub-attribute of the **menus** attribute is not displayed.
33![Navigation](figures/navigation_menu_api10.png)
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![Navigation](figures/navigation_title_mode_free_sdk9.png)
70
71Display position in Free mode in API version 10, which is the same as that in Full mode
72
73![Navigation](figures/navigation_title_mode_free_sdk10.png)
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![Navigation](figures/pixl_round_api9.png)
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![Navigation](figures/pixl_round_api10.png)
278