@@ -15,12 +15,11 @@ Environment is a singleton object created by the ArkUI framework at application
...
@@ -15,12 +15,11 @@ Environment is a singleton object created by the ArkUI framework at application
- Use **Environment.EnvProp** to save the environment variables of the device to AppStorage.
- Use **Environment.EnvProp** to save the environment variables of the device to AppStorage.
```ts
```ts
// Save the language code of the device to AppStorage. The default value is en.
// Save languageCode to AppStorage. The default value is en.
// Whenever its value changes in the device environment, it will update its value in AppStorage.
Environment.EnvProp('languageCode','en');
Environment.EnvProp('languageCode','en');
```
```
-To keep a component variable updated with changes in the device environment, this variable should be decorated with \@StorageProp.
-Decorate the variables with \@StorageProp to link them with components.
```ts
```ts
@StorageProp('languageCode')lang:string='en';
@StorageProp('languageCode')lang:string='en';
...
@@ -29,6 +28,7 @@ Environment is a singleton object created by the ArkUI framework at application
...
@@ -29,6 +28,7 @@ Environment is a singleton object created by the ArkUI framework at application
The chain of updates is as follows: Environment > AppStorage > Component.
The chain of updates is as follows: Environment > AppStorage > Component.
> **NOTE**
> **NOTE**
>
> An \@StorageProp decorated variable can be locally modified, but the change will not be updated to AppStorage. This is because the environment variable parameters are read-only to the application.
> An \@StorageProp decorated variable can be locally modified, but the change will not be updated to AppStorage. This is because the environment variable parameters are read-only to the application.
...
@@ -69,3 +69,29 @@ if (lang.get() === 'en') {
...
@@ -69,3 +69,29 @@ if (lang.get() === 'en') {
console.info('Hello!');
console.info('Hello!');
}
}
```
```
## Restrictions
Environment can be called only when the [UIContext](../reference/apis/js-apis-arkui-UIContext.md#uicontext), which can be obtained through [runScopedTask](../reference/apis/js-apis-arkui-UIContext.md#runscopedtask), is specified. If Environment is called otherwise, no device environment data can be obtained.
| start | Date | No| Date('1970-1-1') | Start date of the picker.|
| start | Date | No| Start date of the picker.<br>Default value: **Date('1970-1-1')**|
| end | Date | No| Date('2100-12-31') | End date of the picker.|
| end | Date | No| End date of the picker.<br>Default value: **Date('2100-12-31')**|
| selected | Date | No| Current system date| Selected date.|
| selected | Date | No| Selected date.<br>Default value: current system date|
| lunar | boolean | No| false | Whether to display the lunar calendar.|
| lunar | boolean | No| Whether to display the lunar calendar.<br>Default value: **false**|
| showTime | boolean | No| false | Whether to display the time item.|
| showTime | boolean | No| Whether to display the time item.<br>Default value: **false**|
| useMilitaryTime | boolean | No| false | Whether to display time in 24-hour format.|
| useMilitaryTime | boolean | No| Whether to display time in 24-hour format.<br>Default value: **false**|
| disappearTextStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No| - | Font color, font size, and font width for the top and bottom items.|
| disappearTextStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.|
| textStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No| - | Font color, font size, and font width of all items except the top, bottom, and selected items.|
| textStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.|
| selectedTextStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No| - | Font color, font size, and font width of the selected item.|
| selectedTextStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.|
| onAccept | (value: [DatePickerResult](../arkui-ts/ts-basic-components-datepicker.md#datepickerresult)) => void | No| - | Callback invoked when the OK button in the dialog box is clicked.|
| onAccept | (value: [DatePickerResult](../arkui-ts/ts-basic-components-datepicker.md#datepickerresult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.|
| onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked.|
| onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.|
| onChange | (value: [DatePickerResult](../arkui-ts/ts-basic-components-datepicker.md#datepickerresult)) => void | No| - | Callback invoked when the selected item in the picker changes.|
| onChange | (value: [DatePickerResult](../arkui-ts/ts-basic-components-datepicker.md#datepickerresult)) => void | No| Callback invoked when the selected item in the picker changes.|
| range | string[] \| [Resource](../arkui-ts/ts-types.md#resource)\|[TextPickerRangeContent](../arkui-ts/ts-basic-components-textpicker.md#textpickerrangecontent10)[] | Yes| Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed.|
| range | string[] \| [Resource](../arkui-ts/ts-types.md#resource)\|[TextPickerRangeContent](../arkui-ts/ts-basic-components-textpicker.md#textpickerrangecontent10)[] | Yes| Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed.|
| selected | number | No| Index of the selected item.<br>Default value: **0**|
| selected | number | No| Index of the selected item.<br>Default value: **0**|
...
@@ -507,7 +520,7 @@ In the following API examples, you must first use [getFont()](#getfont) in **UIC
...
@@ -507,7 +520,7 @@ In the following API examples, you must first use [getFont()](#getfont) in **UIC
### registerFont
### registerFont
registerFont(options: FontOptions): void
registerFont(options: font.FontOptions): void
Registers a custom font with the font manager.
Registers a custom font with the font manager.
...
@@ -515,9 +528,9 @@ Registers a custom font with the font manager.
...
@@ -515,9 +528,9 @@ Registers a custom font with the font manager.
| [FontInfo](js-apis-font.md#fontinfo10) | Information about the system font.|
**Example**
```ts
letfont=uiContext.getFont();
font.getFontByName('Sans Italic')
```
## ComponentUtils
## ComponentUtils
In the following API examples, you must first use [getComponentUtils()](#getcomponentutils) in **UIContext** to obtain a **ComponentUtils** instance, and then call the APIs using the obtained instance.
In the following API examples, you must first use [getComponentUtils()](#getcomponentutils) in **UIContext** to obtain a **ComponentUtils** instance, and then call the APIs using the obtained instance.
| ComponentInfo | Size, position, translation, scaling, rotation, and affine matrix information of the component. |
| [ComponentInfo](js-apis-arkui-componentUtils.md#componentinfo) | Size, position, translation, scaling, rotation, and affine matrix information of the component.|
**Example**
**Example**
...
@@ -567,7 +628,7 @@ In the following API examples, you must first use [getUIInspector()](#getuiinspe
...
@@ -567,7 +628,7 @@ In the following API examples, you must first use [getUIInspector()](#getuiinspe
| [ComponentObserver](js-apis-arkui-inspector.md#componentobserver) | Component observer, which is used to register and unregister listeners for completion of component layout or drawing.|
| [ComponentObserver](js-apis-arkui-inspector.md#componentobserver) | Component observer, which is used to register and unregister listeners for completion of component layout or drawing.|
**Example**
**Example**
...
@@ -598,7 +659,7 @@ In the following API examples, you must first use [getMediaQuery()](#getmediaque
...
@@ -598,7 +659,7 @@ In the following API examples, you must first use [getMediaQuery()](#getmediaque
Replaces the current page with another one using the named route and destroys the current page. This API uses an asynchronous callback to return the result.
Replaces the current page with another one using the named route and destroys the current page. This API uses a promise to return the result.
Replaces the current page with another one using the named route and destroys the current page. This API uses an asynchronous callback to return the result.
Replaces the current page with another one using the named route and destroys the current page. This API uses a promise to return the result.
| options | [RouterOptions](js-apis-router.md#routeroptions) | No | Description of the page. The **url** parameter indicates the URL of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If no URL is set, the application returns to the previous page, and the page is not rebuilt. The page in the page stack is not reclaimed. It will be reclaimed after being popped up.|
| options | [router.RouterOptions](js-apis-router.md#routeroptions) | No | Description of the page. The **url** parameter indicates the URL of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If no URL is set, the application returns to the previous page, and the page is not rebuilt. The page in the page stack is not reclaimed. It will be reclaimed after being popped up.|
| Promise<[ShowDialogSuccessResponse](js-apis-promptAction.md#showdialogsuccessresponse)> | Promise used to return the dialog box response result.|
| Promise<[promptAction.ShowDialogSuccessResponse](js-apis-promptAction.md#showdialogsuccessresponse)> | Promise used to return the dialog box response result.|
| callback | AsyncCallback<[ActionMenuSuccessResponse](js-apis-promptAction.md#actionmenusuccessresponse)> | Yes | Callback used to return the action menu response result.|
| callback | [promptAction.ActionMenuSuccessResponse](js-apis-promptAction.md#actionmenusuccessresponse) | Yes | Callback used to return the action menu response result.|
| Promise<[ActionMenuSuccessResponse](js-apis-promptAction.md#actionmenusuccessresponse)> | Promise used to return the action menu response result.|
| Promise<[promptAction.ActionMenuSuccessResponse](js-apis-promptAction.md#actionmenusuccessresponse)> | Promise used to return the action menu response result.|
| count | number | Yes | Number of steps. The value must be a positive integer.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.|
| count | number | Yes | Number of steps. The value must be a positive integer.<br>Value range: [1, +∞)<br>**NOTE**<br>A value less than 1 evaluates to the value **1**.|
| end | boolean | Yes | Whether jumping occurs when the interpolation ends.<br>- **true**: Jumping occurs when the interpolation ends.<br>- **false**: Jumping occurs when the interpolation starts.|
| end | boolean | Yes | Whether jumping occurs when the interpolation ends.<br>- **true**: Jumping occurs when the interpolation ends.<br>- **false**: Jumping occurs when the interpolation starts.|
**Return value**
**Return value**
...
@@ -174,7 +174,7 @@ Creates a spring animation curve. If multiple spring animations are applied to t
...
@@ -174,7 +174,7 @@ Creates a spring animation curve. If multiple spring animations are applied to t
| Name | Type | Mandatory | Description |
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ----- |
| --------- | ------ | ---- | ----- |
| response | number | No | Duration of one complete oscillation.<br>Default value: **0.55**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
| response | number | No | Duration of one complete oscillation.<br>Default value: **0.55**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
| dampingFraction | number | No | Damping coefficient.<br>**0**: undamped. In this case, the spring oscillates forever.<br>> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.<br>**1**: critically damped.<br>> 1: overdamped. In this case, the spring approaches equilibrium gradually.<br>Default value: **0.825**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
| dampingFraction | number | No | Damping coefficient.<br>**0**: undamped. In this case, the spring oscillates forever.<br>> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.<br>**1**: critically damped.<br>> 1: overdamped. In this case, the spring approaches equilibrium gradually.<br>Default value: **0.825**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.825**.|
| overlapDuration | number | No | Duration for animations to overlap, in seconds. When animations overlap, the **response** values of these animations will transit smoothly over this duration if they are different.<br>Default value: **0**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0**.<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained using the **interpolate** function of the curve.|
| overlapDuration | number | No | Duration for animations to overlap, in seconds. When animations overlap, the **response** values of these animations will transit smoothly over this duration if they are different.<br>Default value: **0**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0**.<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained using the **interpolate** function of the curve.|
...
@@ -209,7 +209,7 @@ Creates a responsive spring animation curve. It is a special case of [springMoti
...
@@ -209,7 +209,7 @@ Creates a responsive spring animation curve. It is a special case of [springMoti
| --------- | ------ | ---- | ----- |
| --------- | ------ | ---- | ----- |
| response | number | No | See **response** in **springMotion**.<br>Default value: **0.15**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.15**.|
| response | number | No | See **response** in **springMotion**.<br>Default value: **0.15**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.15**.|
| dampingFraction | number | No | See **dampingFraction** in **springMotion**.<br>Default value: **0.86**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.86**.|
| dampingFraction | number | No | See **dampingFraction** in **springMotion**.<br>Default value: **0.86**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.86**.|
| overlapDuration | number | No | See **overlapDuration** in **springMotion**.<br>Default value: **0.25**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.25**.<br> To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). In addition, the interpolation cannot be obtained using the **interpolate** function of the curve.|
| overlapDuration | number | No | See **overlapDuration** in **springMotion**.<br>Default value: **0.25**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.25**.<br> To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). In addition, the interpolation cannot be obtained using the **interpolate** function of the curve.|
**Return value**
**Return value**
...
@@ -237,16 +237,16 @@ Creates an interpolating spring curve animated from 0 to 1. The actual animation
...
@@ -237,16 +237,16 @@ Creates an interpolating spring curve animated from 0 to 1. The actual animation
**Parameters**
**Parameters**
| Name | Type | Mandatory | Description |
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ----- |
| --------- | ------ | ---- | ----- |
| velocity | number | Yes | Initial velocity. It is applied by external factors to the spring animation, designed to help ensure the smooth transition from the previous motion state. The velocity is the normalized velocity, and its value is equal to the actual velocity at the beginning of the animation divided by the animation attribute change value.|
| velocity | number | Yes | Initial velocity. It is applied by external factors to the spring animation, designed to help ensure the smooth transition from the previous motion state. The velocity is the normalized velocity, and its value is equal to the actual velocity at the beginning of the animation divided by the animation attribute change value.<br>Value range: (-∞, +∞)|
| mass | number | Yes | Mass, which influences the inertia in the spring system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.|
| mass | number | Yes | Mass, which influences the inertia in the spring system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **1**.|
| stiffness | number | Yes | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.|
| stiffness | number | Yes | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **1**.|
| damping | number | Yes | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.|
| damping | number | Yes | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **1**.|
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>The spring animation curve is physics-based. Its duration depends on the** interpolatingSpring** parameters, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained using the [interpolate](#interpolate9) function of the curve.|
**Example**
**Example**
...
@@ -279,10 +279,10 @@ Creates a custom curve.
...
@@ -279,10 +279,10 @@ Creates a custom curve.
```ts
```ts
importCurvesfrom'@ohos.curves'
importCurvesfrom'@ohos.curves'
interpolate(fraction){
letinterpolate=function(fraction){
returnMath.sqrt(fraction);
returnMath.sqrt(fraction)
}
}
privatecurve=Curves.customCurve(this.interpolate)// Create a custom curve.
letcurve=Curves.customCurve(interpolate)// Create a custom interpolation curve.
```
```
...
@@ -316,7 +316,7 @@ Since API version 9, this API is supported in ArkTS widgets.
...
@@ -316,7 +316,7 @@ Since API version 9, this API is supported in ArkTS widgets.
```ts
```ts
importCurvesfrom'@ohos.curves'
importCurvesfrom'@ohos.curves'
letcurve=Curves.initCurve(Curve.EaseIn)// Create an ease-in curve.
letcurveValue=Curves.initCurve(Curve.EaseIn)// Create an ease-in curve.
letvalue:number=curve.interpolate(0.5)// Calculate the interpolation for half of the time.
letvalue:number=curve.interpolate(0.5)// Calculate the interpolation for half of the time.
@@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets.
...
@@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name| Type| Mandatory| Description|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- |
| group | string | No| Group name.|
| group | string | No| Group name.<br>**NOTE**<br>If there are multiple check box groups with the same group name, only the first check box group takes effect.|
@@ -303,7 +303,7 @@ Provides the text style information.
...
@@ -303,7 +303,7 @@ Provides the text style information.
| fontSize | [Length](ts-types.md#length)\| number | No| Font size.<br>Default value: **16fp**|
| fontSize | [Length](ts-types.md#length)\| number | No| Font size.<br>Default value: **16fp**|
| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | No| Font style.<br>Default value: **FontStyle.Normal**|
| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | No| Font style.<br>Default value: **FontStyle.Normal**|
| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight)\| number \| string | No| Font weight.<br>For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a heavier font weight. The default value is **400**.<br>For the string type, only strings of the number type are supported, for example, **"400"**, **"bold"**, **"bolder"**, **"lighter"**, **"regular"**, and **"medium"**, which correspond to the enumerated values in **FontWeight**.<br>Default value: **FontWeight.Normal**|
| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight)\| number \| string | No| Font weight.<br>For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a heavier font weight. The default value is **400**.<br>For the string type, only strings of the number type are supported, for example, **"400"**, **"bold"**, **"bolder"**, **"lighter"**, **"regular"**, and **"medium"**, which correspond to the enumerated values in **FontWeight**.<br>Default value: **FontWeight.Normal**|
| fontFamily | [ResourceStr](ts-types.md#resourcestr)\| number \| string | No| Font family. Default value: **'HarmonyOS Sans'**.<br>Currently, only the default font is supported.<br>Default font: **'HarmonyOS Sans'**|
| fontFamily | [ResourceStr](ts-types.md#resourcestr)\| number \| string | No| Font family. The HarmonyOS Sans font and [register custom fonts](../apis/js-apis-font.md) are supported.<br>Default font: **'HarmonyOS Sans'**|
| decoration | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} | No| Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None,<br>color: Color.Black<br>}|
| decoration | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} | No| Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None,<br>color: Color.Black<br>}|
@@ -45,8 +45,8 @@ Among the [universal attributes](ts-universal-attributes-size.md) and [universal
...
@@ -45,8 +45,8 @@ Among the [universal attributes](ts-universal-attributes-size.md) and [universal
| selectedBackgroundColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected text.<br>If the opacity is not set, the color is opaque. For example, **0x80000000** indicates black with 50% opacity.|
| selectedBackgroundColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected text.<br>If the opacity is not set, the color is opaque. For example, **0x80000000** indicates black with 50% opacity.|
| caretPosition<sup>10+</sup> | number | Caret position.|
| caretPosition<sup>10+</sup> | number | Caret position.|
| showUnit<sup>10+</sup> | [CustomBuilder](ts-types.md#CustomBuilder8) | Unit for content in the component.<br>By default, there is no unit.|
| showUnit<sup>10+</sup> | [CustomBuilder](ts-types.md#CustomBuilder8) | Unit for content in the component.<br>By default, there is no unit.|
| showError<sup>10+</sup> | string \| undefined | Error text displayed when an error occurs.<br>By default, no error text is displayed.|
| showError<sup>10+</sup> | string \| undefined | Error message displayed when an error occurs.<br>By default, no error message is displayed.<br>**NOTE**<br>If the parameter type is string and the input content does not comply with specifications, the error message is displayed. If the parameter type is undefined, no error message is displayed. See [Example 2](#example-2).|
| showUnderline<sup>10+</sup> | boolean | Whether to show an underline.<br>Default value: **false**|
| showUnderline<sup>10+</sup> | boolean | Whether to show an underline.<br>Default value: **false**|
| passwordIcon<sup>10+</sup> | [PasswordIcon](#passwordicon10) | Password icon to display at the end of the password text box.<br>By default, the system-provided icon is used.|
| passwordIcon<sup>10+</sup> | [PasswordIcon](#passwordicon10) | Password icon to display at the end of the password text box.<br>By default, the system-provided icon is used.|
| enableKeyboardOnFocus<sup>10+</sup> | boolean | Whether to enable the input method when the component obtains focus.<br>Default value: **true** |
| enableKeyboardOnFocus<sup>10+</sup> | boolean | Whether to enable the input method when the component obtains focus.<br>Default value: **true** |
...
@@ -129,7 +129,7 @@ Sets the position of the caret.
...
@@ -129,7 +129,7 @@ Sets the position of the caret.
| value | number | Yes | Length from the start of the string to the position where the caret is located.|
| value | number | Yes | Length from the start of the string to the position where the caret is located.|
| size | [Length](#length) | No | Font size. If the value is of the number type, the unit fp is used. The value cannot be a percentage.<br>Default value: **16.0** |
| size | [Length](#length) | No | Font size. If the value is of the number type, the unit fp is used. The value cannot be a percentage.<br>Default value: **16.0** |
| weight | [FontWeight](ts-appendix-enums.md#fontweight)\| number \| string | No | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a thicker font.<br>Default value: **400**\|**FontWeight.Normal** |
| weight | [FontWeight](ts-appendix-enums.md#fontweight)\| number \| string | No | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a thicker font.<br>Default value: **400**\|**FontWeight.Normal** |
| family | string \|[Resource](#resource) | No | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, HarmonyOS Sans'**. Currently, only the **'HarmonyOS Sans'** font is supported.|
| family | string \|[Resource](#resource) | No | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, HarmonyOS Sans'**. The HarmonyOS Sans font and [register custom fonts](../apis/js-apis-font.md) are supported.|
| style | [FontStyle](ts-appendix-enums.md#fontstyle) | No | Font style.<br>Default value: **FontStyle.Normal** |
| style | [FontStyle](ts-appendix-enums.md#fontstyle) | No | Font style.<br>Default value: **FontStyle.Normal** |
| source | string \|[Resource](ts-types.md#resource)\|[linearGradient](ts-universal-attributes-gradient-color.md) | Source or gradient color of the border image.<br>**NOTE**<br>The border image source applies only to container components, such as **\<Row>**, **\<Column>**, and **\<Flex>**.|
| source | string \|[Resource](ts-types.md#resource)\|[linearGradient](ts-universal-attributes-gradient-color.md) | Source or gradient color of the border image.<br>**NOTE**<br>The border image source applies only to container components, such as **\<Row>**, **\<Column>**, and **\<Flex>**.|
| slice | [Length](ts-types.md#length)\|[EdgeWidths](ts-types.md#edgewidths9) | Slice width of the border image.<br>Default value: **0**|
| slice | [Length](ts-types.md#length)\|[EdgeWidths](ts-types.md#edgewidths9) | Slice width of the upper left corner, upper right corner, lower left corner, and lower right corner of the border image.<br>Default value: **0**<br>**NOTE**<br>If this parameter is set to a negative value, the default value is used.<br>When this parameter is set to a value of the [Length](ts-types.md#length) type, the value applies to the four corners in a unified manner.<br>When this parameter is set to a value of the [EdgeWidths](ts-types.md#edgewidths9) type:<br>- **Top**: slice height of the upper left or upper right corner of the image.<br>- **Bottom**: slice height of the lower left or lower right corner of the image.<br>- **Left**: slice width of the upper left or lower left corner of the image.<br>- **Right**: slice width of the upper right or lower right corner of the image.|
| width | [Length](ts-types.md#length)\|[EdgeWidths](ts-types.md#edgewidths9) | Width of the border image.<br>Default value: **0**|
| width | [Length](ts-types.md#length)\|[EdgeWidths](ts-types.md#edgewidths9) | Width of the border image.<br>Default value: **0**<br>**NOTE**<br>If this parameter is set to a negative value, the default value is used.<br>When this parameter is set to a value of the [Length](ts-types.md#length) type, the value applies to the four corners in a unified manner.<br>When this parameter is set to a value of the [EdgeWidths](ts-types.md#edgewidths9) type:<br>- **Top**: width of the top edge of the border image.<br>- **Bottom**: width of the bottom edge of the border image.<br>- **Left**: width of the left edge of the border image.<br>- **Right**: width of the right edge of the border image.<br>If this parameter is set to a negative value, the value **1** is used.|
| outset | [Length](ts-types.md#length)\|[EdgeWidths](ts-types.md#edgewidths9) | Amount by which the border image is extended beyond the border box.<br>Default value: **0**|
| outset | [Length](ts-types.md#length)\|[EdgeWidths](ts-types.md#edgewidths9) | Amount by which the border image is extended beyond the border box.<br>Default value: **0**<br>**NOTE**<br>If this parameter is set to a negative value, the default value is used.<br>When this parameter is set to a value of the [Length](ts-types.md#length) type, the value applies to the four corners in a unified manner.<br>When this parameter is set to a value of the [EdgeWidths](ts-types.md#edgewidths9) type:<br>- **Top**: amount by which the top edge of the border image is extended beyond the border box.<br>- **Bottom**: amount by which the bottom edge of the border image is extended beyond the border box.<br>- **Left**: amount by which the left edge of the border image is extended beyond the border box.<br>- **Right**: amount by which the right edge of the border image is extended beyond the border box.|
| repeat | [RepeatMode](#repeatmode)| Repeat mode of the border image.<br>Default value: **RepeatMode.Stretch**|
| repeat | [RepeatMode](#repeatmode) | Repeat mode of the source image's slices on the border.<br>Default value: **RepeatMode.Stretch**|
| fill | boolean | Whether to fill the center of the border image.<br>Default value: **false** |
| fill | boolean | Whether to fill the center of the border image.<br>Default value: **false** |
## RepeatMode
## RepeatMode
...
@@ -32,9 +32,9 @@ This API is supported in ArkTS widgets.
...
@@ -32,9 +32,9 @@ This API is supported in ArkTS widgets.
| Name | Description |
| Name | Description |
| ------- | ----------------------------------- |
| ------- | ----------------------------------- |
| Repeat | The source image's slices are tiled. Tiles beyond the border box will be clipped. |
| Repeat | The source image's slices are tiled. Tiles beyond the border box will be clipped. |
| Stretch | The source image's slices stretched to fill the border box. |
| Stretch | The source image's slices are stretched to fill the border box. |
| Round | The source image's slices are tiled to fill the border box. Tiles may be compressed when needed.|
| Round | The source image's slices are tiled to fill the border box. Tiles may be compressed when needed.|
| Space | The source image's slices are tiled to fill the border box. Extra space will be filled in between tiles. |
| Space | The source image's slices are tiled to fill the border box. Extra space will be distributed in between tiles. |
@@ -17,8 +17,8 @@ Universal text attributes include text style attributes applicable to text conta
...
@@ -17,8 +17,8 @@ Universal text attributes include text style attributes applicable to text conta
| fontSize | [Length](ts-types.md#length) | Font size. If the value is of the number type, the unit fp is used. The default font size is 16. This attribute cannot be set in percentage.<br>Since API version 9, this API is supported in ArkTS widgets.|
| fontSize | [Length](ts-types.md#length) | Font size. If the value is of the number type, the unit fp is used. The default font size is 16. This attribute cannot be set in percentage.<br>Since API version 9, this API is supported in ArkTS widgets.|
| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | Font style.<br>Default value: **FontStyle.Normal**<br>Since API version 9, this API is supported in ArkTS widgets.|
| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | Font style.<br>Default value: **FontStyle.Normal**<br>Since API version 9, this API is supported in ArkTS widgets.|
| fontWeight | number \|[FontWeight](ts-appendix-enums.md#fontweight)\| string | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight. The string type supports only the string of the number type, for example, **400**, **"bold"**, **"bolder"**, **"lighter"**, **"regular"**, and **"medium"**, which correspond to the enumerated values in **FontWeight**.<br>Default value: **FontWeight.Normal**<br>Since API version 9, this API is supported in ArkTS widgets.|
| fontWeight | number \|[FontWeight](ts-appendix-enums.md#fontweight)\| string | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight. The string type supports only the string of the number type, for example, **400**, **"bold"**, **"bolder"**, **"lighter"**, **"regular"**, and **"medium"**, which correspond to the enumerated values in **FontWeight**.<br>Default value: **FontWeight.Normal**<br>Since API version 9, this API is supported in ArkTS widgets.|
| fontFamily | string \|[Resource](ts-types.md#resource) | Font family.<br> Default value: **'HarmonyOS Sans'**. Currently, only the default font is supported.<br>Since API version 9, this API is supported in ArkTS widgets.|
| fontFamily | string \|[Resource](ts-types.md#resource) | Font family.<br>The HarmonyOS Sans font and [register custom fonts](../apis/js-apis-font.md) are supported.<br>Since API version 9, this API is supported in ArkTS widgets.|
| lineHeight | string \| number \|[Resource](ts-types.md#resource) | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.<br>Since API version 9, this API is supported in ArkTS widgets.|
| lineHeight | string \| number \|[Resource](ts-types.md#resource) | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value is of the number type, the unit fp is used.<br>Since API version 9, this API is supported in ArkTS widgets.|
| decoration | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} | Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None,<br>color: Color.Black<br>}<br>Since API version 9, this API is supported in ArkTS widgets.|
| decoration | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} | Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None,<br>color: Color.Black<br>}<br>Since API version 9, this API is supported in ArkTS widgets.|
