diff --git a/en/application-dev/reference/arkui-ts/figures/DataPickerDialog.gif b/en/application-dev/reference/arkui-ts/figures/DataPickerDialog.gif deleted file mode 100644 index e447f0d8916e19385da7f38e1c4b15334e4a6a70..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/DataPickerDialog.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/DatePickerApi10.gif b/en/application-dev/reference/arkui-ts/figures/DatePickerApi10.gif new file mode 100644 index 0000000000000000000000000000000000000000..cdb8e983b563f6b337b096d248bb33d02dc245ce Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/DatePickerApi10.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/DatePickerDialogApi10.gif b/en/application-dev/reference/arkui-ts/figures/DatePickerDialogApi10.gif new file mode 100644 index 0000000000000000000000000000000000000000..7b8186f3fd474e6e3b386a97b8c30123351be6b3 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/DatePickerDialogApi10.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/datePicker.gif b/en/application-dev/reference/arkui-ts/figures/datePicker.gif deleted file mode 100644 index 52ee9ca7eb42b521cf879e364c95694ca698b834..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/datePicker.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001210353788.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001210353788.gif index 38ffa5ca3c66dc3852f3a6045789473e8bdb0c41..f55a5e26c8b0dc0c11405b0b342399324afc3dbc 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001210353788.gif and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001210353788.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858383.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858383.gif deleted file mode 100644 index b8a7961adce1b592b8fdbce98966c70cf1da68e8..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858383.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/keyEvent.gif b/en/application-dev/reference/arkui-ts/figures/keyEvent.gif new file mode 100644 index 0000000000000000000000000000000000000000..27f4299b764f7bfda8e468ae987be57f43b701aa Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/keyEvent.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/keyEvent.png b/en/application-dev/reference/arkui-ts/figures/keyEvent.png deleted file mode 100644 index defa53e2581a56c7fb0933d85c0ce1578ebbfd48..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/keyEvent.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/mouse.png b/en/application-dev/reference/arkui-ts/figures/mouse.png index 28baf4e713b69b4bea0e9ed3498a4a2ce12fc2b3..dd458d1940316dedd65d51542a78dc598cd61adf 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/mouse.png and b/en/application-dev/reference/arkui-ts/figures/mouse.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/mouse1.png b/en/application-dev/reference/arkui-ts/figures/mouse1.png index dc3ea1fb958f1de66f6310e22b6163ebfbfb7494..aa6709fa32eb5c6a29eff6ea54588fc86e8240c6 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/mouse1.png and b/en/application-dev/reference/arkui-ts/figures/mouse1.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/tabContent3.gif b/en/application-dev/reference/arkui-ts/figures/tabContent3.gif index 2cb1d18f9c8f726cc02a7709ad07d641016cae61..7e731b125a0b7f365be9791dc9583c217b4ff6ce 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/tabContent3.gif and b/en/application-dev/reference/arkui-ts/figures/tabContent3.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/tabs3.gif b/en/application-dev/reference/arkui-ts/figures/tabs3.gif new file mode 100644 index 0000000000000000000000000000000000000000..05cb0c42a59d683778bdbf5db5d3d60e06127da2 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/tabs3.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/tabs4.gif b/en/application-dev/reference/arkui-ts/figures/tabs4.gif new file mode 100644 index 0000000000000000000000000000000000000000..47d89944df6653ca510840f26a626457c2a6b2c0 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/tabs4.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/tabs5.gif b/en/application-dev/reference/arkui-ts/figures/tabs5.gif new file mode 100644 index 0000000000000000000000000000000000000000..3829041cf21aea29248c41a0c8bc1ce9249af3db Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/tabs5.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md b/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md index bb8c77dd981948116af501bcd05378fd75503200..59c35d6c4c69792801a813059688860dfe9e4c29 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md @@ -26,6 +26,26 @@ Creates a date picker in the given date range. | end | Date | No | End date of the picker.
Default value: **Date('2100-12-31')** | | selected | Date | No | Date of the selected item.
Default value: current system date
Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| +**Handling in the case of exceptions** + +| Exception | Result | +| -------- | ------------------------------------------------------------ | +| The start date is later than the end date, and the selected date is not set. | The start date, end date, and selected date are set to the default values. | +| The start date is later than the end date, and the selected date is earlier than the default start date. | The start date and end date are set to the default values, and the selected date is set to the default start date. | +| The start date is later than the end date, and the selected date is later than the default end date. | The start date and end date are set to the default values, and the selected date is set to the default end date. | +| The start date is later than the end date, and the selected date is within the range of the default start date and end date. | The start date and end date are set to the default values, and the selected date is set to the specified value.| +| The selected date is earlier than the start date. | The selected date is set to the start date. | +| The selected date is later than the end date. | The selected date is set to the end date. | +| The start date is later than the current system date, and the selected date is not set. | The selected date is set to the start date. | +| The end date is earlier than the current system date, and the selected date is not set. | The selected date is set to the end date. | +| The set date is in invalid format, for example, **'1999-13-32'**. | The default value is used. | +| The start date or end date is earlier than the valid date range. | The start date or end date is set to the earliest date in the valid date range. | +| The start date or end date is later than the valid date range. | The start date or end date is set to the latest date in the valid date range. | + +The valid date range is from 1900-1-31 to 2100-12-31. + +The exception detection and handling with the selected date comes after that with the start date and end date. + ## Attributes In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. @@ -48,9 +68,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the In addition to the [universal events](ts-universal-events-click.md), the following events are supported. -| Name | Description | -| ---------------------------------------- | ----------- | -| onChange(callback: (value: DatePickerResult) => void) | Triggered when a date is selected.| +| Name | Description | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onChange(callback: (value: DatePickerResult) => void)(deprecated) | Triggered when a date is selected.
**NOTE**
This API is supported since API version 8 and deprecated since API version 10. You are advised to use **onDateChange(callback: (value: Date) => void)** instead.| +| onDateChange(callback: (value: Date) => void)10+ | Triggered when a date is selected. | ## DatePickerResult @@ -84,10 +105,13 @@ struct DatePickerExample { end: new Date('2100-1-1'), selected: this.selectedDate }) + .disappearTextStyle({color: Color.Gray, font: {size: '16fp', weight: FontWeight.Bold}}) + .textStyle({color: '#ff182431', font: {size: '18fp', weight: FontWeight.Normal}}) + .selectedTextStyle({color: '#ff0000FF', font: {size: '26fp', weight: FontWeight.Regular}}) .lunar(this.isLunar) - .onChange((value: DatePickerResult) => { - this.selectedDate.setFullYear(value.year, value.month, value.day) - console.info('select current date is: ' + JSON.stringify(value)) + .onDateChange((value: Date) => { + this.selectedDate = value + console.info('select current date is: ' + value.toString()) }) }.width('100%') @@ -95,4 +119,4 @@ struct DatePickerExample { } ``` -![datePicker](figures/datePicker.gif) +![datePicker](figures/DatePickerApi10.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-formcomponent.md b/en/application-dev/reference/arkui-ts/ts-basic-components-formcomponent.md index d75762999a60eebdcb3dc87de0aeca332cd6e6ab..3b8ae1031235123dc9490bcbbddc197828dcab67 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-formcomponent.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-formcomponent.md @@ -12,10 +12,6 @@ The **FormComponent** is used to display widgets. ## Required Permissions -ohos.permission.GET_BUNDLE_INFO - -ohos.permission.GET_BUNDLE_INFO_PRIVILEGED - ohos.permission.REQUIRE_FORM diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md index d2861f650f3ede62450d477ee1904b0e29e17cf2..4bb8b494268a33881eed4810af59ea1984706ec2 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md @@ -22,10 +22,16 @@ Since API version 9, this API is supported in ArkTS widgets. ## Attributes +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + | Name| Type| Description| | -------- | -------- | -------- | | color | [ResourceColor](ts-types.md#resourcecolor) | Foreground color of the **\** component.
Default value: **'#99666666'**
Since API version 9, this API is supported in ArkTS widgets.| -| enableLoading10+ | boolean | Whether to show the loading animation.
Default value: **true**
**NOTE**
The component still takes up space in the layout when the loading animation is not shown.
While the universal attribute **Visibility.Hidden** hides the entire component, including borders and paddings, **enableLoading=false** hides the loading animation only.| +| enableLoading10+ | boolean | Whether to show the loading animation.
Default value: **true**
**NOTE**
The component still takes up space in the layout when the loading animation is not shown.
Unlike the universal attribute **Visibility.Hidden**, which hides the entire component, including borders and paddings, **enableLoading=false** hides the loading animation only.| + +## Events + +The [universal events](ts-universal-events-click.md) are supported. ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md b/en/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md index 9ac58d5d98086229ddc723eae67a6ae43796c283..b329ce3e897475ccdae7b168c67468be2b6c3d52 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md @@ -22,17 +22,17 @@ PatternLock(controller?: PatternLockController) ## Attributes -Except for **backgroundColor**, the universal attributes are not supported. +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. | Name | Type | Description | | --------------- | ------------------------------------- | ------------------------------------------------------------ | -| sideLength | [Length](ts-types.md#length) | Width and height (same value) of the component. If this attribute is set to 0 or a negative value, the component is not displayed.
Default value: **300vp**| -| circleRadius | [Length](ts-types.md#length) | Radius of the grid dot.
Default value: **14vp** | -| regularColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in unselected state.
Default value: **Color.Black**| -| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in selected state.
Default value: **Color.Black**| -| activeColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in activated state, which is when the dot is highlighted but not selected.
Default value: **Color.Black**| +| sideLength | [Length](ts-types.md#length) | Width and height (same value) of the component. If this attribute is set to **0** or a negative number, the component is not displayed.
Default value: **288vp**| +| circleRadius | [Length](ts-types.md#length) | Radius of the grid dot. If this attribute is set to **0** or a negative value, the default value is used.
Default value: **6vp** | +| regularColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in the unselected state.
Default value: **Color.Black**| +| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in the selected state.
Default value: **Color.Black**| +| activeColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in the activated state, which is when the dot is highlighted but not selected.
Default value: **Color.Black**| | pathColor | [ResourceColor](ts-types.md#resourcecolor) | Path color.
Default value: **Color.Blue** | -| pathStrokeWidth | number \| string | Width of the path stroke. If this attribute is set to 0 or a negative value, the path stroke is not displayed.
Default value: **34vp** | +| pathStrokeWidth | number \| string | Width of the path stroke. If this attribute is set to **0** or a negative value, the path stroke is not displayed.
Default value: **12vp** | | autoReset | boolean | Whether to allow the user to reset the component status (that is, clear the input) by touching the component again after the input is complete. The value **true** means that the user can reset the component status by touching the component again after the input is complete, and **false** means the opposite.
Default value: **true**| ## Events diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md index 5939f8899543cdb715d6f758821af47c6ea022f7..a9a5642fda606b7bdcd7727abdee23b6f6dc0b35 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md @@ -48,7 +48,7 @@ Except touch target attributes, the universal attributes are supported. | selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected part of the slider track.
Since API version 9, this API is supported in ArkTS widgets.| | showSteps | boolean | Whether to display the current step.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| | showTips | value: boolean,
content10+?: [ResourceStr](ts-types.md#resourcestr) | **value**: whether to display a tooltip when the user drags the slider.
Default value: **false**
**content**: text content of the tooltip. The default value is the current percentage.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
When **direction** is set to **Axis.Horizontal**, the tooltip is displayed right above the slider. When **direction** is set to **Axis.Vertical**, the tooltip is displayed on the left of the slider.
The drawing area of the tooltip is the overlay of the slider.
If no margin is set for the slider or the margin is not large enough, the tooltip will be clipped.| -| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.
Default value: **4.0vp** when **style** is set to **[SliderStyle](#sliderstyle).OutSet**; **20.0vp** when **style** is set to **[SliderStyle](#sliderstyle).InSet**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 evaluates to the default value.| +| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.
Default value: **4.0vp** when **style** is set to **[SliderStyle](#sliderstyle).OutSet**; **20.0vp** when **style** is set to **[SliderStyle](#sliderstyle).InSet**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than or equal to 0 evaluates to the default value.| | blockBorderColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Border color of the slider in the block direction.| | blockBorderWidth10+ | [Length](ts-types.md#length) | Border width of the slider in the block direction.| | stepColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Step color.| @@ -59,7 +59,7 @@ Except touch target attributes, the universal attributes are supported. ## SliderBlockStyle10+ -Desribes the style of the slider in the block direction. +Describes the style of the slider in the block direction. | Name | Type | Mandatory| Description | | ----- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | diff --git a/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md b/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md index eb02f7a2612744645c0b167eb4d6f128f6f425b5..cc44bf4a37191793ff3557fde6e0ccc4a17e53cf 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md +++ b/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md @@ -27,8 +27,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| tabBar | string \| [Resource](ts-types.md#resource) \| {
icon?: string \| [Resource](ts-types.md#resource),
text?: string \| [Resource](ts-types.md#resource)
}
\| [CustomBuilder](ts-types.md)8+ | Content displayed on the tab bar.
**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).
**NOTE**
If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image.
If the content set exceeds the space provided by the tab bar, it will be clipped.| -| tabBar9+ | [SubTabBarStyle](#subtabbarstyle9) \| [BottomTabBarStyle](#bottomtabbarstyle9) | Content displayed on the tab bar.
**SubTabBarStyle**: subtab style. It takes text as its input parameter.
**BottomTabBarStyle**: bottom and side tab style. It takes text and images as its input parameters.
**NOTE**
The bottom tab style does not include an underline.
When an icon display error occurs, a gray blank block is displayed.| +| tabBar | string \| [Resource](ts-types.md#resource) \| {
icon?: string \| [Resource](ts-types.md#resource),
text?: string \| [Resource](ts-types.md#resource)
}
\| [CustomBuilder](ts-types.md)8+ | Content displayed on the tab bar.
**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).
**NOTE**
When using an SVG image for the icon, delete the width and height attributes of the image. Otherwise, the icon size will be determined by the width and height attributes of the SVG image.
If the content set exceeds the space provided by the tab bar, it will be clipped.| +| tabBar9+ | [SubTabBarStyle](#subtabbarstyle9) \| [BottomTabBarStyle](#bottomtabbarstyle9) | Content displayed on the tab bar.
**SubTabBarStyle**: subtab style. It takes text as its input parameter.
**BottomTabBarStyle**: bottom and side tab style. It takes text and images as its input parameters.
**NOTE**
The bottom tab style does not include an indicator.
When an icon display error occurs, a gray blank block is displayed.| > **NOTE** > @@ -71,7 +71,7 @@ The following attributes are supported. | Name | Type | Description | | ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -| indicator10+ | [IndicatorStyle](#indicatorstyle10)| Underline indicator style of the selected subtab. It is valid only in the horizontal layout.
| +| indicator10+ | [IndicatorStyle](#indicatorstyle10)| Indicator style of the selected subtab. It is valid only in the horizontal layout. | | selectedMode10+ | [SelectedMode](#selectedmode10) | Display mode of the selected subtab.
Default value: **SelectedMode.INDICATOR**| | board10+ | [BoardStyle](#boardstyle10) | Board style of the selected subtab.| | labelStyle10+ | [LabelStyle](#labelstyle10) | Label text and font of the subtab.| @@ -80,23 +80,23 @@ The following attributes are supported. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------------------------------- | -| color | [ResourceColor](ts-types.md#resourcecolor) | No| Underline indicator color and board color.
Default value: **#FF007DFF**| -| height | [Length](ts-types.md#length) | No| Height of the underline indicator. It cannot be set in percentage.
Default value: **2.0**
Unit: vp| -| width | [Length](ts-types.md#length) | No| Width of the underline indicator. It cannot be set in percentage.
Default value: **0.0**
Unit: vp
**NOTE**
If this parameter is set to **0**, the tab text width is used.| -| borderRadius | [Length](ts-types.md#length) | No| Radius of the rounded corner of the underline indicator. It cannot be set in percentage.
Default value: **0.0**
Unit: vp| -| marginTop | [Length](ts-types.md#length) | No| Spacing between the underline indicator and text. It cannot be set in percentage.
Default value: **8.0**
Unit: vp| +| color | [ResourceColor](ts-types.md#resourcecolor) | No| Color of the indicator and board.
Default value: **#FF007DFF** | +| height | [Length](ts-types.md#length) | No| Height of the indicator. It cannot be set in percentage.
Default value: **2.0**
Unit: vp| +| width | [Length](ts-types.md#length) | No| Width of the indicator. It cannot be set in percentage.
Default value: **0.0**
Unit: vp
**NOTE**
If this parameter is set to **0**, the tab text width will be used instead. | +| borderRadius | [Length](ts-types.md#length) | No| Rounded corner radius of the indicator. It cannot be set in percentage.
Default value: **0.0**
Unit: vp| +| marginTop | [Length](ts-types.md#length) | No| Spacing between the indicator and text. It cannot be set in percentage.
Default value: **8.0**
Unit: vp| ## SelectedMode10+ | Name | Description | | ---------- | ------------------------ | -| INDICATOR | Underline indicator mode. | +| INDICATOR | Indicator mode. | | BOARD | Board mode. | ## BoardStyle10+ | Name| Type| Mandatory| Description| | -------- | -------- | -------- | ------------------------------------ | -| borderRadius | [Length](ts-types.md#length) | No| Radius of the rounded corner of the board. It cannot be set in percentage.
Default value: **8.0**
Unit: vp| +| borderRadius | [Length](ts-types.md#length) | No| Rounded corner radius of the board. It cannot be set in percentage.
Default value: **8.0**
Unit: vp | ## LabelStyle10+ @@ -129,6 +129,7 @@ A constructor used to create a **BottomTabBarStyle** instance. ### of10+ static of(icon: ResourceStr, text: ResourceStr) + Static constructor used to create a **BottomTabBarStyle** instance. **Parameters** @@ -140,7 +141,7 @@ Static constructor used to create a **BottomTabBarStyle** instance. ## Example -Example 1: +### Example 1 ```ts // xxx.ets @@ -246,7 +247,7 @@ struct TabContentExample { ![tabContent](figures/tabContent1.gif) -Example 2: +### Example 2 ```ts // xxx.ets @@ -302,7 +303,7 @@ struct TabContentExample { ![tabContent](figures/tabContent2.gif) -Example 3: +### Example 3 ```ts // xxx.ets @@ -400,7 +401,7 @@ struct TabBarStyleExample { ![tabbarStyle](figures/TabBarStyle.jpeg) -Example 4 +### Example 4 ```ts // xxx.ets @@ -422,7 +423,7 @@ struct TabsAttr { private spaceFlag: boolean = true; build() { Column() { - Button ("Underline Indicator Color Change").width ('100%').margin ({bottom:'12vp'}) + Button ("Change Indicator Color").width ('100%').margin ({bottom:'12vp'}) .onClick((event: ClickEvent) => { // Animation configuration for the width and height attributes of the