!13234 翻译完成 11398+12100

Merge pull request !13234 from ester.zhou/TR-11398

en/application-dev/quick-start/arkts-rendering-control.md

@@ -34,7 +34,7 @@ Column() {
 
 You can use **ForEach** to obtain data from arrays and create components for each data item.
 
-```
+```ts
 ForEach(
   arr: any[], 
   itemGenerator: (item: any, index?: number) => void,
@@ -275,7 +275,7 @@ struct MyComponent {
 >
 >   ```ts
 >   LazyForEach(dataSource, 
->     item => Text(`${item.i}. item.data.label`)),
+>     item => Text(`${item.i}. item.data.label`),
 >     item => item.data.id.toString())
 >   ```
 

en/application-dev/reference/arkui-js/Readme-EN.md

@@ -96,10 +96,9 @@
 
 -   Custom Components
     - [Basic Usage](js-components-custom-basic-usage.md)
-    - [Style Inheritance](js-components-custom-style.md)
-    - [Custom Events](js-components-custom-events.md)
     - [props](js-components-custom-props.md)
-    - [Event Parameter](js-components-custom-event-parameter.md)
+    - [Style Inheritance](js-components-custom-style.md)
     - [slot](js-components-custom-slot.md)
     - [Lifecycle Definition](js-components-custom-lifecycle.md)
--   [Data Type Attributes](js-appendix-types.md)
+- [Dynamic Component Creation](js-components-create-elements.md)
+- [Data Type Attributes](js-appendix-types.md)

en/application-dev/reference/arkui-js/js-components-create-elements.md

+# Dynamic Component Creation
+
+You can dynamically add components with specified attributes and styles to pages.
+
+>  **NOTE**
+>
+>  This API is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## createElement
+
+createElement(tag: string): Element
+
+Creates a component object.
+
+**Parameters**
+
+| Name    | Type      | Mandatory  | Description     |
+| ------- | ------------ | ---- | ------- |
+| tag | string | Yes   | Component name.|
+
+**Return value**
+
+| Type       | Description           |
+| ----------- | ------------- |
+| Element | Component object corresponding to the value of **tag**.|
+
+```js
+let newImage = dom.createElement('image')
+```
+
+
+## setAttribute
+
+setAttribute(name: string, value: string): void
+
+Dynamically sets the attributes of this component.
+
+**Parameters**
+
+| Name    | Type      | Mandatory  | Description     |
+| ------- | ------------ | ---- | ------- |
+| name | string | Yes   | Attribute name.|
+| value | string | Yes   | Attribute value.|
+
+```js
+newImage.setAttribute('src', 'common/testImage.jpg')
+```
+
+
+## setStyle
+
+setStyle(name: string, value: string): boolean
+
+Dynamically sets the style of this component.
+
+**Parameters**
+
+| Name    | Type      | Mandatory  | Description     |
+| ------- | ------------ | ---- | ------- |
+| name | string |  Yes   | Style name.|
+| value | string |  Yes   | Style value.|
+
+**Return value**
+
+| Type       | Description           |
+| ----------- | ------------- |
+| boolean | Returns **true** if the setting is successful; returns **false** otherwise.|
+
+```js
+newImage.setStyle('width', '120px')
+```
+
+
+## addChild
+
+addChild(child: Element): void
+
+Adds a dynamically created component to the parent component.
+
+**Parameters**
+
+| Name    | Type      | Mandatory  | Description   |
+| ------- | ------------ | ---- | ------- |
+| child | Element | Yes   | Component object.|
+
+```js
+newDiv.addChild(newImage)
+```
+
+
+## Example
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <div id="parentDiv" class="parent"></div>
+  <button onclick="appendDiv" class="btn">Dynamically create a <div> component.</button>
+  <button onclick="appendImage" class="btn">Dynamically create an <image> component and add it to the newly created <div> component.</button>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.parent {
+  flex-direction: column;
+}
+
+.btn {
+  width: 70%;
+  height: 60px;
+  margin: 15px;
+}
+```
+
+```js
+// xxx.js
+let newDiv = null
+let newImage = null
+
+export default {
+  appendDiv() {
+    let parent = this.$element('parentDiv')
+    newDiv = dom.createElement('div')
+    newDiv.setStyle('width', '150px')
+    newDiv.setStyle('height', '150px')
+    newDiv.setStyle('backgroundColor', '#AEEEEE')
+    newDiv.setStyle('marginTop', '15px')
+    parent.addChild(newDiv)
+  },
+  appendImage() {
+    newImage = dom.createElement('image')
+    newImage.setAttribute('src', 'common/testImage.jpg')
+    newImage.setStyle('width', '120px')
+    newImage.setStyle('height', '120px')
+    newDiv.addChild(newImage)
+  }
+}
+```

en/application-dev/reference/arkui-js/js-components-custom-event-parameter.md

-# Event Parameter
-
-A child component can also pass parameters to an upper-layer component through the bound event. The following example describes how to pass parameters through the custom event:
-
-
-```html
-<!-- comp.hml -->
-<div class="item">  
-   <text class="text-style" onclick="childClicked">Click to View Hidden Text</text> 
-   <text class="text-style" if="{{ showObj }}">hello world</text> 
-</div>
-```
-
-
-```js
-// comp.js
-export default { 
-  childClicked () {
-    this.$emit('eventType1', {text: 'Received parameters from the child component.'});
-    this.showObj = !this.showObj;
-  },
-}
-```
-
-
-In the following example, the child component passes the **text** parameter to the parent component, and the parent component obtains the parameter through **e.detail**:
-
-
-```html
-<!-- xxx.hml -->
-<element name='comp' src='../../common/comp/comp.hml'></element>
-<div class="container">  
-   <text>Parent component: {{text}}</text> 
-   <comp @event-type1="textClicked"></comp>  
-</div>
-```
-
-
-```js
-// xxx.js
-export default { 
-  data: {
-    text: 'Start'
-  },
-  textClicked (e) {
-    this.text = e.detail.text;
-  },
-}
-```
-
-![EventParameters](figures/EventParameters.gif)

en/application-dev/reference/arkui-js/js-components-custom-events.md

-# Custom Events
-
-The following example describes how to define a child component **comp**:
-
-
-```html
-<!-- comp.hml -->
-<div class="item">  
-      <text class="text-style" onclick="childClicked">Click here to view the hidden text.</text> 
-   <text class="text-style" if="{{showObj}}">hello world</text> 
-</div>
-```
-
-
-```css
-/* comp.css */
-.item {  
-  width: 700px;   
-  flex-direction: column;   
-  height: 300px;   
-  align-items: center;   
-  margin-top: 100px;  
-} 
-.text-style { 
-  font-weight: 500; 
-  font-family: Courier; 
-  font-size: 40px;
-}
-```
-
-
-```js
-// comp.js
-export default { 
-  data: {  
-    showObj: false,  
-  },  
-  childClicked () {  
-    this.$emit('eventType1'); 
-    this.showObj = !this.showObj;  
-  },  
-}
-```
-
-
-The following example describes how to introduce the child component:
-
-
-```html
-<!-- xxx.hml --> 
-<element name='comp' src='../../common/component/comp.hml'></element>  
-<div class="container">  
-  <comp @event-type1="textClicked"></comp>  
-</div>
-```
-
-
-```css
-/* xxx.css */
-.container {  
-  background-color: #f8f8ff;  
-  flex: 1;  
-  flex-direction: column;  
-  align-content: center; 
-} 
-```
-
-
-```js
-// xxx.js
-export default {    
-  textClicked () {},  
-}
-```
-
-For more information, see [Basic Usage](./js-components-custom-basic-usage.md).

en/application-dev/reference/arkui-js/js-components-svg-animate.md

@@ -52,7 +52,7 @@ Not supported
 ```
 
 
-![zh-cn_image_0000001173324703](figures/en-us_image_0000001173324703.gif)
+![en-us_image_0000001173324703](figures/en-us_image_0000001173324703.gif)
 
 
 ```html
@@ -68,7 +68,7 @@ Not supported
 ```
 
 
-![zh-cn_image_0000001167662852](figures/en-us_image_0000001167662852.gif)
+![en-us_image_0000001167662852](figures/en-us_image_0000001167662852.gif)
 
 
 ```html
@@ -83,7 +83,7 @@ Not supported
 ```
 
 
-![zh-cn_image_0000001127284938](figures/en-us_image_0000001127284938.gif)
+![en-us_image_0000001127284938](figures/en-us_image_0000001127284938.gif)
 
 
 ```html
@@ -117,4 +117,4 @@ Not supported
 ```
 
 
-![animate-4](figures/animate-4.gif)
+![en-us_image_0000001127125126](figures/en-us_image_0000001127125126.gif)