Update docs (22121)

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

en/application-dev/application-models/common-event-subscription.md

@@ -12,7 +12,7 @@ For details about the APIs, see [API Reference](../reference/apis/js-apis-common
 
 | API| Description|
 | -------- | -------- |
-| createSubscriber(subscribeInfo: [CommonEventSubscribeInfo](../reference/apis/js-apis-commonEventManager.md#commoneventsubscribeinfo), callback: AsyncCallback<[CommonEventData](../reference/apis/js-apis-commonEventManager.md#commoneventdata)>): void | Creates a subscriber. This API uses an asynchronous callback to return the result.|
+| createSubscriber(subscribeInfo: [CommonEventSubscribeInfo](../reference/apis/js-apis-commonEventManager.md#commoneventsubscribeinfo), callback: AsyncCallback<[CommonEventSubscriber](../reference/apis/js-apis-inner-commonEvent-commonEventSubscriber.md#usage)>): void | Creates a subscriber. This API uses an asynchronous callback to return the result.|
 | createSubscriber(subscribeInfo: CommonEventSubscribeInfo): Promise<CommonEventSubscriber> | Creates a subscriber. This API uses a promise to return the result.|
 | subscribe(subscriber: CommonEventSubscriber, callback: AsyncCallback): void | Subscribes to common events.|
 

en/application-dev/quick-start/arkts-create-custom-components.md

 # Creating a Custom Component
 
 
-In ArkUI, components are what's displayed on the UI. They can be classified as built-in components – those directly provided by ArkUI framework, and custom components – those defined by developers. Defining the entire application UI with just built-in components would lead to a monolithic design, low code maintainability, and poor execution performance. A good UI is the result of a well-thought-out development process, with such factors as code reusability, separation of service logic from the UI, and version evolution carefully considered. Creating custom components that encapsulate the UI and some business logic is a critical step in this process.
+In ArkUI, components are what's displayed on the UI. They can be classified as built-in components – those directly provided by the ArkUI framework, and custom components – those defined by developers. Defining the entire application UI with just built-in components would lead to a monolithic design, low code maintainability, and poor execution performance. A good UI is the result of a well-thought-out development process, with such factors as code reusability, separation of service logic from the UI, and version evolution carefully considered. Creating custom components that encapsulate the UI and some business logic is a critical step in this process.
 
 
 The custom component has the following features:
@@ -62,7 +62,7 @@ To fully understand the preceding example, a knowledge of the following concepts
 
 - [Basic Structure of a Custom Component](#basic-structure-of-a-custom-component)
 
-- [Member Functions/Variables](#member-functionsvariables)
+- Member functions/Variables
 
 - [Rules of for Custom Component Parameters](#rules-of-for-custom-component-parameters)
 
@@ -70,7 +70,6 @@ To fully understand the preceding example, a knowledge of the following concepts
 
 - [Universal Style of a Custom Component](#universal-style-of-a-custom-component)
 
-- [Custom Attribute Methods](#custom-attribute-methods)
 
 
 ## Basic Structure of a Custom Component
@@ -80,7 +79,7 @@ To fully understand the preceding example, a knowledge of the following concepts
   >
   > The name or its class or function name of a custom component must be different from that of any built-in components.
 
-- \@Component: The \@Component decorator can decorate only the data structures declared by the **struct** keyword. After being decorated by \@Component, a struct has the componentization capability. It must implement the **build** function to describe the UI. One struct can be decorated by only one \@Component.
+- \@Component: The \@Component decorator can decorate only the structs declared by the **struct** keyword. After being decorated by \@Component, a struct has the componentization capability. It must implement the **build** function to describe the UI. One struct can be decorated by only one \@Component.
   > **NOTE**
   >
   > Since API version 9, this decorator is supported in ArkTS widgets.
@@ -314,67 +313,3 @@ struct MyComponent {
 > **NOTE**
 >
 > When ArkUI sets styles for custom components, an invisible container component is set for **MyComponent2**. These styles are set on the container component instead of the **\<Button>** component of **MyComponent2**. As seen from the rendering result, the red background color is not directly applied to the button. Instead, it is applied to the container component that is invisible to users where the button is located.
-
-
-## Custom Attribute Methods
-
-Custom components do not support custom attribute methods. You can use the Controller capability to implement custom APIs.
-
-
-```ts
-// Custom controller
-export class MyComponentController {
-  item: MyComponent = null;
-
-  setItem(item: MyComponent) {
-    this.item = item;
-  }
-
-  changeText(value: string) {
-    this.item.value = value;
-  }
-}
-
-// Custom component
-@Component
-export default struct MyComponent {
-  public controller: MyComponentController = null;
-  @State value: string = 'Hello World';
-
-  build() {
-    Column() {
-      Text(this.value)
-        .fontSize(50)
-    }
-  }
-
-  aboutToAppear() {
-    if (this.controller)
-      this.controller.setItem (this); // Link to the controller.
-  }
-}
-
-// Processing logic
-@Entry
-@Component
-struct StyleExample {
-  controller = new MyComponentController();
-
-  build() {
-    Column() {
-      MyComponent({ controller: this.controller })
-    }
-    .onClick(() => {
-      this.controller.changeText('Text');
-    })
-  }
-}
-```
-
-In the preceding example:
-
-1. The **aboutToAppear** method of the **MyComponent** child component passes the current **this** pointer to the **item** member variable of **MyComponentController**.
-
-2. The **StyleExample** parent component holds a **Controller** instance and with which calls the **changeText** API of **Controller**. That is, the value of the state variable **value** of **MyComponent** is changed through the **this** pointer of the **MyComponent** child component held by the controller.
-
-Through the encapsulation of the controller, **MyComponent** exposes the **changeText** API. All instances that hold the controller can call the **changeText** API to change the value of the **MyComponent** state variable **value**.

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';

en/application-dev/quick-start/module-configuration-file.md

@@ -367,7 +367,7 @@ The **extensionAbilities** tag represents the configuration of extensionAbilitie
 | icon | Icon of the ExtensionAbility component. The value is an icon resource index. If **ExtensionAbility** is set to **MainElement** of the current module, this attribute is mandatory and its value must be unique in the application.| String| Yes (initial value: left empty)|
 | label | Name of the ExtensionAbility component displayed to users. The value is a string resource index.<br>**NOTE**<br>If **ExtensionAbility** is set to **MainElement** of the current module, this attribute is mandatory and its value must be unique in the application.| String| No|
 | type | Type of the ExtensionAbility component. The options are as follows:<br>- **form**: ExtensionAbility of a widget.<br>- **workScheduler**: ExtensionAbility of a Work Scheduler task.<br>- **inputMethod**: ExtensionAbility of an input method.<br>- **service**: service component running in the background.<br>- **accessibility**: ExtensionAbility of an accessibility feature.<br>- **dataShare**: ExtensionAbility for data sharing.<br>- **fileShare**: ExtensionAbility for file sharing.<br>- **staticSubscriber**: ExtensionAbility for static broadcast.<br>- **wallpaper**: ExtensionAbility of the wallpaper.<br>- **backup**: ExtensionAbility for data backup.<br>- **window**: ExtensionAbility of a window. This type of ExtensionAbility creates a window during startup for which you can develop the GUI. The window is then combined with other application windows through **abilityComponent**.<br>- **thumbnail**: ExtensionAbility for obtaining file thumbnails. You can provide thumbnails for files of customized file types.<br>- **preview**: ExtensionAbility for preview. This type of ExtensionAbility can parse the file and display it in a window. You can combine the window with other application windows.<br>**NOTE**<br>The **service** and **dataShare** types apply only to system applications and do not take effect for third-party applications. | String| No|
-| permissions | Permissions required for another application to access the ExtensionAbility component.<br>The value is generally in the reverse domain name notation and contains a maximum of 255 bytes. It is an array of permission names predefined by the system or customized. The name of a customized permission must be the same as the **name** value of a permission defined in the **defPermissions** attribute.| String array| Yes (initial value: left empty)|
+| permissions | Permissions required for another application to access the ExtensionAbility component.<br>The value is generally in the reverse domain name notation and contains a maximum of 255 bytes. It is an array of [predefined permission names](../security/permission-list.md).| String array| Yes (initial value: left empty)|
 | uri | Data URI provided by the ExtensionAbility component. The value is a string with a maximum of 255 bytes, in the reverse domain name notation.<br>**NOTE**<br>This attribute is mandatory when the type of the ExtensionAbility component is set to **dataShare**.| String| Yes (initial value: left empty)|
 |skills | Feature set of [wants](../application-models/want-overview.md) that can be received by the ExtensionAbility component.<br>Configuration rule: In an entry package, you can configure multiple **skills** attributes with the entry capability. (A **skills** attribute with the entry capability is the one that has **ohos.want.action.home** and **entity.system.home** configured.) The **label** and **icon** in the first ExtensionAbility that has **skills** configured are used as the **label** and **icon** of the entire OpenHarmony service/application.<br>**NOTE**<br>The **skills** attribute with the entry capability can be configured for the feature package of an OpenHarmony application, but not for an OpenHarmony service.| Array| Yes (initial value: left empty)|
 | [metadata](#metadata)| Metadata of the ExtensionAbility component.| Object| Yes (initial value: left empty)|

en/application-dev/reference/apis/js-apis-system-timer.md

@@ -36,8 +36,8 @@ Defines the initialization options for **createTimer**.
 | Name     | Type                                         | Mandatory| Description                                                        |
 | --------- | --------------------------------------------- | ---- | ------------------------------------------------------------ |
 | type      | number                                        | Yes  | Timer type.<br>**1**: CPU time type. (The start time of the timer cannot be later than the current system time.)<br>**2**: wakeup type.<br>**4**: exact type.<br>**8**: idle type (not supported currently).|
-| repeat    | boolean                                       | Yes  | Whether the timer is a repeating timer. The value **true** means that the timer is a repeating timer, and **false** means that the timer is a one-shot timer.                       |
-| interval  | number                                        | No  | Repeat interval. For a repeating timer, the value must be greater than 5000 ms. For a one-shot timer, the value is **0**.|
+| repeat    | boolean                                       | Yes  | Whether the timer is a repeating timer.<br>The value **true** means that the timer is a repeating timer, and **false** means that the timer is a one-shot timer.                       |
+| interval  | number                                        | No  | Repeat interval.<br>For a repeating timer, the value must be greater than 5000 ms. For a one-shot timer, the value is **0**.|
 | wantAgent | [WantAgent](js-apis-app-ability-wantAgent.md) | No  | **WantAgent** object of the notification to be sent when the timer expires. (An application MainAbility can be started, but not a Service ability.)|
 | callback  | number                                        | Yes  | Callback used to return the timer ID.                            |
 

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

@@ -3326,6 +3326,10 @@ struct WebComponent {
 
 Implements a **WebCookieManager** instance to manage behavior of cookies in **\<Web>** components. All **\<Web>** components in an application share a **WebCookieManager** instance.
 
+> **NOTE**
+>
+> You must load the **\<Web>** component before calling APIs in **WebCookieManager**.
+
 ### getCookie
 
 static getCookie(url: string): string
@@ -3788,6 +3792,10 @@ struct WebComponent {
 
 Implements a **WebStorage** object to manage the Web SQL database and HTML5 Web Storage APIs. All **\<Web>** components in an application share a **WebStorage** object.
 
+> **NOTE**
+>
+> You must load the **\<Web>** component before calling the APIs in **WebStorage**.
+
 ### deleteOrigin
 
 static deleteOrigin(origin : string): void
@@ -4248,6 +4256,10 @@ struct WebComponent {
 
 Implements a **WebDataBase** object.
 
+> **NOTE**
+>
+> You must load the **\<Web>** component before calling the APIs in **WebDataBase**.
+
 ### getHttpAuthCredentials
 
 static getHttpAuthCredentials(host: string, realm: string): Array\<string>
@@ -4426,6 +4438,10 @@ struct WebComponent {
 
 Implements a **GeolocationPermissions** object.
 
+> **NOTE**
+>
+> You must load the **\<Web>** component before calling the APIs in **GeolocationPermissions**.
+
 ### Required Permissions
 
 **ohos.permission.LOCATION**, **ohos.permission.APPROXIMATELY_LOCATION**, and **ohos.permission.LOCATION_IN_BACKGROUND**, which are required for accessing the location information. For details about the permissions, see [@ohos.geolocation (Geolocation)](./js-apis-geolocation.md).

en/application-dev/reference/arkui-js-lite/js-components-basic-chart.md

@@ -165,7 +165,7 @@ Not supported
            strokeColor: '#0081ff',
            fillColor: '#cce5ff',
            data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
-           gradient: true,
+           gradient: false,
          }
        ],
        lineOps: {

en/application-dev/reference/arkui-js-lite/js-components-basic-qrcode.md

@@ -28,9 +28,9 @@ Not supported
 
 | Name| Parameter| Description|
 | -------- | -------- | -------- |
-| click | - | Triggered when the component is clicked. |
-| longpress | - | Triggered when the component is long pressed. |
-| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+| click | - | Triggered when the component is clicked.|
+| longpress | - | Triggered when the component is long pressed.|
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
 
 
 ## Styles
@@ -39,8 +39,8 @@ Not supported
 | -------- | -------- | -------- | -------- | -------- |
 | color | &lt;color&gt; | \#000000 | No| Color of the QR code.|
 | background-color | &lt;color&gt; | \#ffffff | No| Background color of the QR code.|
-| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
-| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used.|
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used.|
 | padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
 | padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
 | margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
@@ -49,7 +49,7 @@ Not supported
 | border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
 | border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
 | display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
-| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
 
 >  **NOTE**
 > - If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is center displayed.
@@ -63,10 +63,10 @@ Not supported
 ```html
 <!-- xxx.hml -->
 <div class="container">
-  <qrcode value="{{qr_value}}" class="qrCode" style="color: {{qr_color}};background-color: {{qr_bcol}};"></qrcode>
-  <input type="button" onclick="changeColor" class="button">Color</input>
-  <input type="button" onclick="changeBackgroundColor" class="button">BackgroundColor</input>
-  <input type="button" onclick="changeColor" class="button">Value</input>
+    <qrcode value="{{qr_value}}" class="qrCode" style="color: {{qr_col}};background-color: {{qr_bcol}};"></qrcode>
+    <input type="button" onclick="changeColor" class="button">Color</input>
+    <input type="button" onclick="changeBackgroundColor" class="button">BackgroundColor</input>
+    <input type="button" onclick="changeValue" class="button">Value</input>
 </div>
 ```
 
@@ -93,32 +93,32 @@ Not supported
 ```javascript
 // xxx.js
 export default {
-  data: {
-    qr_col: '#87ceeb',
-    qr_bcol: '#f0ffff',
-    qr_value: 'value'
-  },
-  changeColor() {
-    if (this.qr_col == '#87ceeb') {
-      this.qr_col = '#fa8072';
-    } else {
-      this.qr_col = '#87ceeb';
+    data: {
+        qr_col: '#87ceeb',
+        qr_bcol: '#f0ffff',
+        qr_value: 'value'
+    },
+    changeColor() {
+        if (this.qr_col == '#87ceeb') {
+            this.qr_col = '#fa8072';
+        } else {
+            this.qr_col = '#87ceeb';
+        }
+    },
+    changeBackgroundColor() {
+        if (this.qr_bcol == '#f0ffff') {
+            this.qr_bcol = '#ffffe0';
+        } else {
+            this.qr_bcol = '#f0ffff';
+        }
+    },
+    changeValue() {
+        if (this.qr_value == 'value') {
+            this.qr_value = 'change';
+        } else {
+            this.qr_value = 'value';
+        }
     }
-  },
-  changeBackgroundColor() {
-    if (this.qr_bcol == '#f0ffff') {
-      this.qr_bcol = '#ffffe0';
-    } else {
-      this.qr_bcol = '#f0ffff';
-    }
-  },
-  changeValue() {
-    if (this.qr_value == 'value') {
-      this.qr_value = 'change';
-    } else {
-      this.qr_value = 'value';
-    }
-  }
 }
 ```
 

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

@@ -26,6 +26,11 @@ StepperItem()
 | nextLabel | string | Text label of the button on the right. The default value is **Start** for the last page and **Next** for the other pages.|
 | status | [ItemState](#itemstate) | Display status of **nextLabel** in the stepper. Optional.<br>Default value: **ItemState.Normal**|
 
+>  **NOTE**
+>
+>  - The **\<StepperItem>** component does not support setting of the universal width attribute. By default, its width is the same as that of the parent **\<Stepper>** component.
+>  - The **\<StepperItem>** component does not support setting of the universal height attribute. Its height is the height of the parent **\<Stepper>** component minus the height of the label button.
+>  - The **\<StepperItem>** component does not support setting of the **aspectRadio** or **constrainSize** attribute, which may affect the length and width.
 ## ItemState
 
 |   Name   | Description|

en/application-dev/reference/arkui-ts/ts-container-panel.md

@@ -38,8 +38,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | fullHeight | string \| number | Panel height in the **PanelMode.Full** mode.<br>Default value: main axis height of the panel minus 8 vp<br>**NOTE**<br>This attribute cannot be set in percentage.|
 | halfHeight | string \| number | Panel height in the **PanelMode.Half** mode.<br>Default value: half of the main axis height of the panel<br>**NOTE**<br>This attribute cannot be set in percentage.|
 | miniHeight | string \| number | Panel height in the **PanelMode.Mini** mode.<br>Default value: **48**<br>Unit: vp<br>**NOTE**<br>This attribute cannot be set in percentage.|
-| show | boolean | Whether to show the panel.|
-| backgroundMask<sup>9+</sup>|[ResourceColor](ts-types.md#resourcecolor)|Background mask of the panel.|
+| show | boolean | Whether to show the panel.<br>Default value: **true**|
+| backgroundMask<sup>9+</sup>|[ResourceColor](ts-types.md#resourcecolor)|Background mask of the panel.<br>Default value: **'#08182431'**|
 
 ## PanelType
 
@@ -101,4 +101,4 @@ struct PanelExample {
 }
 ```
 
-![en-us_image_0000001256978381](figures/en-us_image_0000001256978381.gif)
+![en-us_image_0000001174422896](figures/en-us_image_0000001174422896.gif)