Update docs (22145)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/quick-start/arkts-environment.md

@@ -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.
 
   ```ts
-  // Save the language code of the device to AppStorage. The default value is en.
-  // Whenever its value changes in the device environment, it will update its value in AppStorage.
+  // Save languageCode to AppStorage. The default value is 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
   @StorageProp('languageCode') lang : string = 'en';
@@ -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.
 
 > **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.
 
 
@@ -69,3 +69,29 @@ if (lang.get() === 'en') {
   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.
+
+
+```ts
+// EntryAbility.ts
+import UIAbility from '@ohos.app.ability.UIAbility';
+import window from '@ohos.window';
+
+export default class EntryAbility extends UIAbility {
+  onWindowStageCreate(windowStage: window.WindowStage) {
+    windowStage.loadContent('pages/Index');
+    let window = windowStage.getMainWindow()
+    window.then(window => {
+      let uicontext = window.getUIContext()
+      uicontext.runScopedTask(() => {
+        Environment.EnvProp('languageCode', 'en');
+      })
+    })
+  }
+}
+```

en/application-dev/reference/apis/js-apis-arkui-drawableDescriptor.md

@@ -57,7 +57,7 @@ struct Index {
     Row() {
       Column() {
         Image((<LayeredDrawableDescriptor> (this.resManager.getDrawableDescriptor($r('app.media.icon').id))))
-        Image(((<LayeredDrawableDescriptor> (this.resManager.getDrawableDescriptor($r('app.media.drawable')
+        Image(((<LayeredDrawableDescriptor> (this.resManager.getDrawableDescriptor($r('app.media.icon')
           .id))).getForeground()).getPixelMap())
       }.height('50%')
     }.width('50%')
@@ -80,7 +80,8 @@ Obtains this **pixelMap** object.
 
 **Example**
   ```ts
-pixmap: PixelMap = (<DrawableDescriptor> (this.resManager.getDrawableDescriptor($r('app.media.icon')
+let resManager = getContext().resourceManager
+let pixmap: PixelMap = (<DrawableDescriptor> (resManager.getDrawableDescriptor($r('app.media.icon')
     .id))).getPixelMap();
   ```
 
@@ -99,7 +100,8 @@ Obtains the **pixelMap** object where the foreground, background, and mask are b
 
 **Example**
   ```ts
-pixmap: PixelMap = (<LayeredDrawableDescriptor> (this.resManager.getDrawableDescriptor($r('app.media.drawable')
+let resManager = getContext().resourceManager
+let pixmap: PixelMap = (<LayeredDrawableDescriptor> (resManager.getDrawableDescriptor($r('app.media.icon')
           .id))).getPixelMap();
   ```
 
@@ -118,7 +120,8 @@ Obtains the **DrawableDescriptor** object of the foreground.
 
 **Example**
   ```ts
-drawable: DrawableDescriptor = (<LayeredDrawableDescriptor> (this.resManager.getDrawableDescriptor($r('app.media.drawable')
+let resManager = getContext().resourceManager
+let drawable: DrawableDescriptor = (<LayeredDrawableDescriptor> (resManager.getDrawableDescriptor($r('app.media.icon')
     .id))).getForeground();
   ```
 
@@ -137,7 +140,8 @@ Obtains the **DrawableDescriptor** object of the background.
 
 **Example**
   ```ts
-drawable: DrawableDescriptor = (<LayeredDrawableDescriptor> (this.resManager.getDrawableDescriptor($r('app.media.drawable')
+let resManager = getContext().resourceManager
+let drawable: DrawableDescriptor = (<LayeredDrawableDescriptor> (resManager.getDrawableDescriptor($r('app.media.icon')
     .id))).getBackground();
   ```
 
@@ -156,6 +160,26 @@ Obtains the **DrawableDescriptor** object of the mask.
 
 **Example**
   ```ts
-drawable: DrawableDescriptor = (<LayeredDrawableDescriptor> (this.resManager.getDrawableDescriptor($r('app.media.drawable')
+let resManager = getContext().resourceManager
+let drawable: DrawableDescriptor = (<LayeredDrawableDescriptor> (resManager.getDrawableDescriptor($r('app.media.icon')
     .id))).getMask();
   ```
+## LayeredDrawableDescriptor.getMaskClipPath
+static getMaskClipPath(): string
+
+Obtains the built-in clipping path parameters of the system. It is a static method of **LayeredDrawableDescriptor**.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Return value**
+
+| Type                                      | Description                  |
+| ---------------------------------------- | -------------------- |
+| string | String of the clipping path.|
+
+**Example**
+  ```ts
+Image($r('app.media.icon'))
+    .width('200px').height('200px')
+    .clip(new Path({commands:LayeredDrawableDescriptor.getMaskClipPath()}))
+  ```

en/application-dev/reference/apis/js-apis-curve.md

@@ -41,7 +41,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **System capability**: SystemCapability.ArkUI.ArkUI.Full
 
-| Name               | Description:                                                        |
+| Name               | Description                                                        |
 | ------------------- | ------------------------------------------------------------ |
 | Linear              | The animation speed keeps unchanged.                          |
 | Ease                | The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.|
@@ -78,7 +78,7 @@ Creates a step curve.
 
 | Name| Type   | Mandatory| Description                                                        |
 | ------ | ------- | ----| ------------------------------------------------------------ |
-| 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.|
 
 **Return value**
@@ -174,7 +174,7 @@ Creates a spring animation curve. If multiple spring animations are applied to t
 | 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**.|
-| 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.|
 
 
@@ -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**.|
 | 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**
 
@@ -237,16 +237,16 @@ Creates an interpolating spring curve animated from 0 to 1. The actual animation
 **Parameters**
 | 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.|
-| 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.|
-| 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.|
-| 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.|
+| 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.<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.<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.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **1**.|
 
 **Return value**
 
 | Type                          | Description            |
 | ---------------------------------- | ---------------- |
-|  [ICurve](#icurve)| Interpolation curve.|
+|  [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**
 
@@ -279,10 +279,10 @@ Creates a custom curve.
 
 ```ts
 import Curves from '@ohos.curves'
-interpolate(fraction) {
-    return Math.sqrt(fraction);
+let interpolate = function(fraction) {
+    return Math.sqrt(fraction)
   }
-private curve = Curves.customCurve(this.interpolate) // Create a custom curve.
+let curve = Curves.customCurve(interpolate) // Create a custom interpolation curve.
 ```
 
 
@@ -316,7 +316,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 ```ts
 import Curves from '@ohos.curves'
-let curve = Curves.initCurve(Curve.EaseIn) // Create an ease-in curve.
+let curveValue = Curves.initCurve(Curve.EaseIn) // Create an ease-in curve.
 let value: number = curve.interpolate(0.5) // Calculate the interpolation for half of the time.
 ```
 

en/application-dev/reference/apis/js-apis-font.md

@@ -54,7 +54,7 @@ struct FontExample {
     // Both familyName and familySrc support the string type.
     font.registerFont({
       familyName: 'medium',
-      familySrc: '/font/medium.ttf'
+      familySrc: '/font/medium.ttf' // The font file is at the same level as the pages directory.
     })
 
     // Both familyName and familySrc support the Resource type.
@@ -138,7 +138,7 @@ Obtains information about a system font based on the font name.
 | ---------------- | ---------------------------- |
 | FontInfo         | Information about the system font.                |
 
-## FontInfo
+## FontInfo<sup>10+</sup>
 
 **System capability**: SystemCapability.ArkUI.ArkUI.Full
 
@@ -170,7 +170,7 @@ struct FontExample {
     Column() {
       Button("getFontByName")
         .onClick(() => {
-          this.fontInfo = font.getFontByName('HarmonyOS Sans Italic')
+          this.fontInfo = font.getFontByName('Sans Italic')
           console.log("getFontByName(): path = " + this.fontInfo.path)
           console.log("getFontByName(): postScriptName = " + this.fontInfo.postScriptName)
           console.log("getFontByName(): fullName = " + this.fontInfo.fullName)

en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md

@@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 | 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.|
 
 ## Attributes
 

en/application-dev/reference/arkui-ts/ts-basic-components-richeditor.md

@@ -303,7 +303,7 @@ Provides the text style information.
 | 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**|
 | 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>}|
 
 

en/application-dev/reference/arkui-ts/ts-basic-components-span.md

@@ -58,6 +58,12 @@ struct SpanExample {
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
       Text('Basic Usage').fontSize(9).fontColor(0xCCCCCC)
+      Text() {
+        Span('In Line')
+        Span(' Component')
+        Span(' !')
+      }
+
       Text() {
         Span('This is the Span component').fontSize(12).textCase(TextCase.Normal)
           .decoration({ type: TextDecorationType.None, color: Color.Red })
@@ -118,4 +124,4 @@ struct SpanExample {
 }
 ```
 
-![span](figures/span.png)
+![Span](figures/span.png)

en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md

@@ -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.|
 | caretStyle<sup>10+</sup> | {<br>width: [Length](ts-types.md#length)<br>} | Caret style.                                       |
 | 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.|
-| showError<sup>10+</sup> | string \| undefined | Error text displayed when an error occurs.<br>By default, no error text is displayed.|
+| 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 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**|
 | 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**  |
@@ -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.|
 ### setTextSelection<sup>10+</sup>
 
-setTextSelection(selectionStart: number, selectionStart: number): void
+setTextSelection(selectionStart: number, selectionEnd: number): void
 
 Sets the text selection area, which will be highlighted.
 
@@ -248,17 +248,20 @@ struct TextInputExample {
 ### Example 2
 
 ```ts
-// xxx.ets
 @Entry
 @Component
 struct TextInputExample {
-  @State PassWordSrc1:Resource=$r('app.media.icon')
-  @State PassWordSrc2:Resource=$r('app.media.icon')
+  @State PassWordSrc1: Resource = $r('app.media.onIcon')
+  @State PassWordSrc2: Resource = $r('app.media.offIcon')
+  @State TextError: string = undefined
+  @State Text: string = ''
+  @State NameText: string = 'test'
+
   @Builder itemEnd() {
     Select([{ value: 'KB' },
       { value: 'MB' },
-      { value: 'GB'},
-      { value: 'TB',}])
+      { value: 'GB' },
+      { value: 'TB', }])
       .height("48vp")
       .borderRadius(0)
       .selected(2)
@@ -269,30 +272,49 @@ struct TextInputExample {
       .selectedOptionFont({ size: 20, weight: 400 })
       .optionFont({ size: 20, weight: 400 })
       .backgroundColor(Color.Transparent)
-      .responseRegion({height:"40vp",width:"80%",x:'10%',y:'6vp'})
+      .responseRegion({ height: "40vp", width: "80%", x: '10%', y: '6vp' })
       .onSelect((index: number) => {
         console.info('Select:' + index)
       })
   }
 
   build() {
-    Column() {
+    Column({ space: 20 }) {
       // Customize the password icon.
-      TextInput({ placeholder: 'user define password icon' })
+      TextInput({ placeholder: 'Custom password icon' })
         .type(InputType.Password)
-        .width(400)
+        .width(380)
         .height(60)
-        .passwordIcon({onIconSrc:this.PassWordSrc1,offIconSrc : this.PassWordSrc2})
+        .passwordIcon({ onIconSrc: this.PassWordSrc1, offIconSrc: this.PassWordSrc2 })
       // Show an underline.
-      TextInput({ placeholder: 'underline style' })
+      TextInput({ placeholder: 'Underline style' })
         .showUnderline(true)
-        .width(400)
+        .width(380)
         .height(60)
         .showError('Error')
         .showUnit(this.itemEnd.bind(this))
+
+      Text (`User name: ${this.Text}`)
+        .width('95%')
+      TextInput({ placeholder: 'Enter user name', text: this.Text })
+        .showUnderline(true)
+        .width(380)
+        .showError(this.TextError)
+        .onChange((value: string) => {
+          this.Text = value
+        })
+        .onSubmit(() => {// If the entered user name is incorrect, the text box will be cleared and the error message will be displayed.
+          if (this.Text == this.NameText) {
+            this.TextError = undefined
+          } else {
+            this.TextError ='Incorrect user name.'
+            this.Text = ''
+          }
+        })
+
     }.width('100%')
   }
 }
 ```
 
-![showUnit](figures/showUnit.png)
+![TextInputError](figures/TextInputError.PNG)

en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md

@@ -45,10 +45,12 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
 
 ## TimePickerResult
 
-| Name    | Type  | Description     |
-| ------ | ------ | ------- |
-| hour   | number | Hour portion of the selected time.|
-| minute | number | Minute portion of the selected time.|
+Describes a time in 24-hour format.
+
+| Name  | Type| Description                               |
+| ------ | -------- | ----------------------------------- |
+| hour   | number   | Hour portion of the selected time.<br>Value range: [0-23]|
+| minute | number   | Minute portion of the selected time.<br>Value range: [0-59]|
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-types.md

@@ -158,7 +158,7 @@ The **Font** type is used to set the text style.
 | ------ | ---------------------------------------- | ---- | ---------------------------------------- |
 | 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** |
-| 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**                              |
 
 ## Area<sup>8+</sup>

en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md

@@ -16,14 +16,14 @@ You can draw an image around a component.
 
 This API is supported in ArkTS widgets.
 
-| Name    | Type                                      | Description                                      |
-| ------ | ---------------------------------------- | ---------------------------------------- |
+| Name  | Type                                                        | Description                                                        |
+| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
 | 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**                   |
-| width  | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | Width of the border image.<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**                 |
-| repeat | [RepeatMode](#repeatmode)            | Repeat mode of the border image.<br>Default value: **RepeatMode.Stretch** |
-| fill   | boolean                                  | Whether to fill the center of the border image.<br>Default value: **false**               |
+| 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**<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**<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 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**                    |
 
 ## RepeatMode
 
@@ -32,9 +32,9 @@ This API is supported in ArkTS widgets.
 | Name     | Description                                 |
 | ------- | ----------------------------------- |
 | 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.|
-| 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.  |
 
 ## Example
 
@@ -77,35 +77,88 @@ struct Index {
 // xxx.ets
 @Entry
 @Component
-struct Index {
-  @State outSetValue: number = 40
+struct BorderImage {
+  @State WidthValue: number = 0
+  @State SliceValue: number = 0
+  @State OutSetValue: number = 0
+  @State RepeatValue: RepeatMode[] = [RepeatMode.Repeat, RepeatMode.Stretch, RepeatMode.Round, RepeatMode.Space]
+  @State SelectIndex: number = 0
+  @State SelectText: string = 'Repeat'
+  @State FillValue: boolean = false
 
   build() {
     Row() {
-      Column() {
+      Column({ space: 20 }) {
         Row() {
           Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50)
         }
         .borderImage({
           source: $r('app.media.icon'),
-          slice: `${this.outSetValue}%`,
-          width: `${this.outSetValue}px`,
-          outset: '5px',
-          repeat: RepeatMode.Repeat,
-          fill: false
+          slice: this.SliceValue,
+          width: this.WidthValue,
+          outset: this.OutSetValue,
+          repeat: this.RepeatValue[this.SelectIndex],
+          fill: this.FillValue
         })
 
-        Slider({
-          value: this.outSetValue,
-          min: 0,
-          max: 100,
-          style: SliderStyle.OutSet
-        })
-          .margin({ top: 30 })
-          .onChange((value: number, mode: SliderChangeMode) => {
-            this.outSetValue = value
-            console.info('value:' + value + 'mode:' + mode.toString())
+        Column() {
+          Text(`borderImageSlice = ${this.SliceValue}px`)
+          Slider({
+            value: this.SliceValue,
+            min: 0,
+            max: 100,
+            style: SliderStyle.OutSet
+          })
+            .onChange((value: number, mode: SliderChangeMode) => {
+              this.SliceValue = value
+            })
+        }
+
+        Column() {
+          Text(`borderImageWidth = ${this.WidthValue}px`)
+          Slider({
+            value: this.WidthValue,
+            min: 0,
+            max: 100,
+            style: SliderStyle.OutSet
+          })
+            .onChange((value: number, mode: SliderChangeMode) => {
+              this.WidthValue = value
+            })
+        }
+
+        Column() {
+          Text(`borderImageOutSet = ${this.OutSetValue}px`)
+          Slider({
+            value: this.OutSetValue,
+            min: 0,
+            max: 100,
+            style: SliderStyle.OutSet
           })
+            .onChange((value: number, mode: SliderChangeMode) => {
+              this.OutSetValue = value
+            })
+        }
+
+        Row() {
+          Text('borderImageRepeat: ')
+          Select([{ value: 'Repeat' }, { value: 'Stretch' }, { value: 'Round' }, { value: 'Space' }])
+            .value(this.SelectText)
+            .selected(this.SelectIndex)
+            .onSelect((index: number, text: string) => {
+              this.SelectIndex = index
+              this.SelectText = text
+            })
+        }
+
+        Row() {
+          Text(`borderImageFill: ${this.FillValue} `)
+          Toggle({ type: ToggleType.Switch, isOn: this.FillValue })
+            .onChange((isOn: boolean) => {
+              this.FillValue = isOn
+            })
+        }
+
       }
       .width('100%')
     }
@@ -114,4 +167,4 @@ struct Index {
 }
 ```
 
-![zh-cn_image_borderImage](figures/borderImage.gif)
+![borderImage](figures/borderImage.gif)

en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md

@@ -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.|
 | 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.|
-| 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.|
-| 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.|
+| 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 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.|
 
 

en/application-dev/ui/arkts-layout-development-flex-layout.md

@@ -532,7 +532,7 @@ When the size of the container in the flex layout is not large enough, the follo
 
     Text('flexBasis(100)')
       .flexBasis(100)
-      .width(200) // When width is set to 200 and flexBasis 100, the width is 100 vp, which means that the settings of flexBasis take precedence.
+      .width(200) // When both width and flexBasis are set, flexBasis take precedence, and the width is 100 vp.
       .height(100)
       .backgroundColor(0xD2B48C)
   }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
@@ -546,7 +546,7 @@ When the size of the container in the flex layout is not large enough, the follo
   ```ts
   Flex() {
     Text('flexGrow(1)')
-      .flexGrow(2) 
+      .flexGrow(1) 
       .width(100)
       .height(100)
       .backgroundColor(0xF5DEB3)