From 6e41870f71c10ad2a4f2686261670a44bbcb9c09 Mon Sep 17 00:00:00 2001 From: esterzhou Date: Sat, 31 Dec 2022 16:49:50 +0800 Subject: [PATCH] update docs (12348) Signed-off-by: esterzhou --- .../quick-start/arkts-basic-ui-description.md | 54 +++++++++---------- .../reference/arkui-ts/ts-types.md | 12 ++--- 2 files changed, 33 insertions(+), 33 deletions(-) diff --git a/en/application-dev/quick-start/arkts-basic-ui-description.md b/en/application-dev/quick-start/arkts-basic-ui-description.md index d20efe1285..4ef7f97c28 100644 --- a/en/application-dev/quick-start/arkts-basic-ui-description.md +++ b/en/application-dev/quick-start/arkts-basic-ui-description.md @@ -15,7 +15,7 @@ In ArkTS, you define a custom component by using decorators **@Component** and * } ``` -- **build** function: a function that complies with the **Builder** API definition and is used to define the declarative UI description of components. A **build** function must be defined for custom components, and custom constructors are prohibited for custom components. +- **build** function: A custom component must implement the **build** function and must implement no constructor. The **build** function meets the definition of the **Builder** API and is used to define the declarative UI description of components. ```ts interface Builder { @@ -49,9 +49,9 @@ Column() { } ``` -### Structs with Mandatory Parameters +### Structs with Parameters -A struct with mandatory parameters is a component whose API definition expects parameters enclosed in the parentheses. You can use constants to assign values to the parameters. +A struct with parameters is a component whose API definition expects parameters enclosed in the parentheses. You can use constants to assign values to the parameters. Sample code: @@ -61,7 +61,7 @@ Sample code: Image('https://xyz/test.jpg') ``` -- Set the mandatory parameter **content** of the **\** component as follows: +- Set the optional parameter **content** of the **\** component as follows: ```ts Text('test') @@ -83,35 +83,35 @@ Component attributes are configured using an attribute method, which follows the ```ts Text('test') - .fontSize(12) + .fontSize(12) ``` - Example of configuring multiple attributes at the same time by using the "**.**" operator to implement chain call: ```ts Image('test.jpg') - .alt('error.jpg') - .width(100) - .height(100) + .alt('error.jpg') + .width(100) + .height(100) ``` - Example of passing variables or expressions in addition to constants: ```ts Text('hello') - .fontSize(this.size) + .fontSize(this.size) Image('test.jpg') - .width(this.count % 2 === 0 ? 100 : 200) - .height(this.offset + 100) + .width(this.count % 2 === 0 ? 100 : 200) + .height(this.offset + 100) ``` - For attributes of built-in components, ArkUI also provides some predefined [enumeration types](../reference/arkui-ts/ts-appendix-enums.md), which you can pass as parameters to methods if they meet the parameter type requirements. For example, you can configure the font color and weight attributes of the **\** component as follows: ```ts Text('hello') - .fontSize(20) - .fontColor(Color.Red) - .fontWeight(FontWeight.Bold) + .fontSize(20) + .fontColor(Color.Red) + .fontWeight(FontWeight.Bold) ``` ### Event Configuration @@ -123,7 +123,7 @@ Events supported by components are configured using event methods, which each fo ```ts Button('add counter') .onClick(() => { - this.counter += 2 + this.counter += 2; }) ``` @@ -132,7 +132,7 @@ Events supported by components are configured using event methods, which each fo ```ts Button('add counter') .onClick(function () { - this.counter += 2 + this.counter += 2; }.bind(this)) ``` @@ -140,13 +140,13 @@ Events supported by components are configured using event methods, which each fo ```ts myClickHandler(): void { - this.counter += 2 + this.counter += 2; } ... - + Button('add counter') - .onClick(this.myClickHandler) + .onClick(this.myClickHandler.bind(this)) ``` ### Child Component Configuration @@ -158,11 +158,11 @@ For a component that supports child components, for example, a container compone ```ts Column() { Text('Hello') - .fontSize(100) + .fontSize(100) Divider() Text(this.myText) - .fontSize(100) - .fontColor(Color.Red) + .fontSize(100) + .fontColor(Color.Red) } ``` @@ -176,10 +176,10 @@ For a component that supports child components, for example, a container compone .height(100) Button('click +1') .onClick(() => { - console.info('+1 clicked!') + console.info('+1 clicked!'); }) } - + Divider() Row() { Image('test2.jpg') @@ -187,10 +187,10 @@ For a component that supports child components, for example, a container compone .height(100) Button('click +2') .onClick(() => { - console.info('+2 clicked!') + console.info('+2 clicked!'); }) } - + Divider() Row() { Image('test3.jpg') @@ -198,7 +198,7 @@ For a component that supports child components, for example, a container compone .height(100) Button('click +3') .onClick(() => { - console.info('+3 clicked!') + console.info('+3 clicked!'); }) } } diff --git a/en/application-dev/reference/arkui-ts/ts-types.md b/en/application-dev/reference/arkui-ts/ts-types.md index c2f9bc37be..ffc46108ad 100644 --- a/en/application-dev/reference/arkui-ts/ts-types.md +++ b/en/application-dev/reference/arkui-ts/ts-types.md @@ -142,12 +142,12 @@ The **LengthConstrain** type is used to describe the maximum and minimum lengths The **Font** type is used to set the text style. -| Name | Type | Mandatory | Description | -| ------ | ---------------------------------------- | ---- | ---------------------------------------- | -| size | [Length](#length) | No | Font size. If the value is of the number type, the unit fp is used. | -| 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. The default value is **400**. A larger value indicates a larger font weight.| -| 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, sans-serif'**.| -| style | [FontStyle](ts-appendix-enums.md#fontstyle) | No | Font style. | +| Name | Type | Mandatory| Description | +| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| 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.| +| 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. The default value is **400**. A larger value indicates a larger font weight.| +| 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, sans-serif'**. Currently, only the **'sans-serif'** font is supported.| +| style | [FontStyle](ts-appendix-enums.md#fontstyle) | No | Font style. | ## Area8+ -- GitLab