| refreshing | boolean | Yes| - | Whether the current component is being refreshed.|
| refreshing | boolean | Yes| - | Whether the current component is being refreshed.<br/>This parameter can be used with [$$](../../ui/ts-syntactic-sugar.md) for two-way binding of variables. |
| offset | Length | No| 16 | Distance to the top of the parent component from the **<Refresh\>** component that comes to rest after a successful pull-down gesture.|
| friction | number \| string | No| 62 | Coefficient of friction, which indicates the **<Refresh\>** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100.<br>- **0** indicates that the **\<Refresh>** component is not sensitive to the pull-down gesture.<br>- **100** indicates that the **\<Refresh>** component is highly sensitive to the pull-down gesture.<br>- A larger value indicates a more sensitive response of the **\<Refresh>** component to the pull-down gesture.|
@@ -8,7 +8,7 @@ A decorator @Decorator can decorate a class, structure, or class attribute. Mult
In the example below, the elements decorated by @Component take on the form of a component, and the variables decorated by @State can be used to represent states.
```
```ts
@Component
structMyComponent{
@Statecount:number=0
...
...
@@ -18,7 +18,7 @@ struct MyComponent {
Multiple decorators can be defined on a single line, as shown below:
```
```ts
@Entry@ComponentstructMyComponent{
}
```
...
...
@@ -26,7 +26,7 @@ Multiple decorators can be defined on a single line, as shown below:
However, you are advised to define the decorators on multiple lines, as shown below:
```
```ts
@Entry
@Component
structMyComponent{
...
...
@@ -36,7 +36,7 @@ struct MyComponent {
### Supported Decorators
| Decorator | Decorates... | Description |
| Decorator | Decorates... | Description |
| -------- | -------- | -------- |
| @Component | struct | The decorated structure has the component-based capability. The build method must be implemented to update the UI. |
| @Entry | struct | The decorated component is used as the entry of a page. The component is rendered and displayed when the page is loaded. |
...
...
@@ -56,10 +56,9 @@ struct MyComponent {
## Chain Call
You can configure the UI structure and its attributes and events and separate them with a dot(.) to implement chain call.
You can configure the UI structure and its attributes and events and separate them with a dot(.) to implement chain call.
```
```ts
Column(){
Image('1.jpg')
.alt('error.jpg')
...
...
@@ -73,8 +72,7 @@ Column() {
Components can be implemented based on structs. Components cannot inherit from each other. The structs implemented components can be created and destroyed more quickly than class implemented components.
```
```ts
@Component
structMyComponent{
@Statedata:string=''
...
...
@@ -87,10 +85,10 @@ struct MyComponent {
## Instantiating a struct Without the new Keyword
You can omit the new keyword when instantiating a struct.
You can omit the **new** keyword when instantiating a struct.
```
```ts
// Definition
@Component
structMyComponent{
...
...
@@ -114,7 +112,7 @@ new Column() {
TypeScript has the following restrictions on generators:
- Expressions can be used only in character strings (${expression}), if conditions, ForEach parameters, and component parameters.
- Expressions can be used only in character strings (**${expression}**), if conditions, ForEach parameters, and component parameters.
- No expressions should cause any application state variables (@State, @Link, and @Prop) to change. Otherwise, undefined and potentially unstable framework behavior may occur.
...
...
@@ -125,11 +123,11 @@ None of the above restrictions apply to anonymous function implementations of ev
Incorrect:
```
```ts
build(){
leta:number=1// invalid: variable declaration not allowed
Column(){
Text('Hello ${this.myName.toUpperCase()}') // ok.
Text(`Hello ${this.myName.toUpperCase()}`)// ok.
ForEach(this.arr.reverse(),...,...)// invalid: Array.reverse modifies the @State array variable in place
}
buildSpecial()// invalid: no function calls
...
...
@@ -137,13 +135,15 @@ build() {
}
```
## $$
## Two-Way Binding of Variables
$$ supports two-way binding for simple variables and @State, @Link, and @Prop decorated variables.
Currently, $$ supports only the rendering between the show parameter of the bindPopup attribute and the @State decorated variable, and the checked attribute of the <Radio> component.
Currently, $$ supports only the rendering between the **show** parameter of the **[bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md)** attribute and the @State decorated variable, the **checked** attribute of the **\<Radio>** component, and the **refreshing** parameter of the **\<Refresh>** component.