@@ -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
interfaceBuilder{
...
...
@@ -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 **\<Text>** component as follows:
- Set the optional parameter **content** of the **\<Text>** component as follows:
```ts
Text('test')
...
...
@@ -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
...
...
@@ -176,7 +176,7 @@ 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!');
})
}
...
...
@@ -187,7 +187,7 @@ 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!');
})
}
...
...
@@ -198,7 +198,7 @@ For a component that supports child components, for example, a container compone
| 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'**.|
| 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. |