Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
“4c921ab7b28f00581aa1dba3e7d399653c2da9a8”上不存在“en/device-dev/kernel/kernel-lite-small-shell-cmd-sys-sys.md”
提交 7b9751be 编写于 作者: E ester.zhou
浏览文件
操作

update docs (8765) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 dc322053
显示空白变更内容
内联 并排
Showing with 134 addition and 94 deletion
en/application-dev/reference/apis/js-apis-timer.md
浏览文件 @ 7b9751be
# Timer
The **Timer** module provides basic timer capabilities. You can use the APIs of this module to execute functions at the specified time.
> **NOTE**
>
> The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## setTimeout
......@@ -7,6 +12,8 @@ setTimeout(handler[,delay[,…args]]): number
Sets a timer for the system to call a function after the timer goes off.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
......@@ -23,15 +30,15 @@ Sets a timer for the system to call a function after the timer goes off.
**Example**
```js
export default {
```js
export default {
setTimeOut() {
var timeoutID = setTimeout(function() {
console.log('delay 1s');
}, 1000);
}
}
```
}
```
## clearTimeout
......@@ -40,6 +47,8 @@ clearTimeout(timeoutID: number): void
Cancels the timer created via **setTimeout()**.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
......@@ -48,16 +57,16 @@ Cancels the timer created via **setTimeout()**.
**Example**
```js
export default {
```js
export default {
clearTimeOut() {
var timeoutID = setTimeout(function() {
console.log('do after 1s delay.');
}, 1000);
clearTimeout(timeoutID);
}
}
```
}
```
## setInterval
......@@ -66,6 +75,8 @@ setInterval(handler[, delay[, ...args]]): number
Sets a repeating timer for the system to repeatedly call a function at a fixed interval.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
......@@ -82,15 +93,15 @@ Sets a repeating timer for the system to repeatedly call a function at a fixed i
**Example**
```js
export default {
```js
export default {
setInterval() {
var intervalID = setInterval(function() {
console.log('do very 1s.');
}, 1000);
}
}
```
}
```
## clearInterval
......@@ -99,6 +110,8 @@ clearInterval(intervalID: number): void
Cancels the repeating timer set via **setInterval()**.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
......@@ -107,13 +120,13 @@ Cancels the repeating timer set via **setInterval()**.
**Example**
```js
export default {
```js
export default {
clearInterval() {
var intervalID = setInterval(function() {
console.log('do very 1s.');
}, 1000);
clearInterval(intervalID);
}
}
```
\ No newline at end of file
}
```
en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
浏览文件 @ 7b9751be
# TextPicker
The **\<TextPicker>** component allows users to select text from a list of options.
The **TextPicker** component allows users to scroll to select text.
> **NOTE**
>
......@@ -26,30 +24,29 @@ TextPicker(value: {range: string[] | Resource, value?: string, selected?: number
Creates a text picker based on the selection range specified by **range**.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| range | string[]\|&nbsp;[Resource](../../ui/ts-types.md) | Yes | - | Data selection range of the picker. |
| value | string | No | - | Search text. |
| selected | number | No | Index of the first item | Index of the selected item in the array. |
| range | string[] \| [Resource](../../ui/ts-types.md#resource-type)| Yes| - | Data selection range of the picker.|
| value | string | No | - | Value of the selected item. This parameter does not take effect when the **selected** parameter is set. If the value is not within the range, the first item in the range is used instead. |
| selected | number | No| First item | Index of the selected item in the range. |
## Attributes
| Name | Type | Default Value | Description |
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| defaultPickerItemHeight | Length | - | Default height of an item in the picker. |
| defaultPickerItemHeight | Length | - | Default height of an item in the picker.|
## Events
| Name | Description |
| Name| Description|
| -------- | -------- |
| onChange(callback: (value: string, index: number) =&gt; void) | Triggered when an item in the picker is selected.<br/>- **value**: text of the selected item.<br/>- **index**: index of the selected item. |
| onChange(callback: (value: string, index: number) =&gt; void) | Triggered when an item in the picker is selected.<br>- **value**: value of the selected item.<br>- **index**: index of the selected item.|
## Example
```ts
// xxx.ets
@Entry
......
en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
浏览文件 @ 7b9751be
# Text Picker Dialog Box
> **NOTE**<br>
You can display a text picker in a dialog box to allow users to select text from the given range.
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
You can display a text picker in a dialog box to allow users to select text from the given range.
## Required Permissions
......@@ -16,24 +18,26 @@ show(options: TextPickerDialogOptions)
Shows a text picker in the given settings.
- TextPickerDialogOptions
| Name | Type | Mandatory | Default Value | Description |
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| range | string[] | Yes | - | Data selection range of the picker. |
| selected | number | No | First element | Index value of the selected item in the range. |
| defaultPickerItemHeight | number | No | - | Height of the default selected item in the picker. |
| onAccept | (value: TextPickerResult) => void | No | - | Callback invoked when the OK button in the dialog box is clicked. |
| onCancel | () => void | No | - | Triggered when the Cancel button in the dialog box is clicked. |
| onChange | (value: TextPickerResult) => void | No | - | Callback invoked when the selected item in the picker changes. |
| range | string[] | Yes| - | Data selection range of the picker.|
| selected | number | No| First item | Index of the selected item in the range.|
| value | string | No | - | Value of the selected item. This parameter does not take effect when the **selected** parameter is set. If the value is not within the range, the first item in the range is used instead.|
| defaultPickerItemHeight | number | No| - | Default height of an item in the picker.|
| onAccept | (value: TextPickerResult) => void | No| - | Triggered when the OK button in the dialog box is clicked.|
| onCancel | () => void | No| - | Triggered when the Cancel button in the dialog box is clicked.|
| onChange | (value: TextPickerResult) => void | No| - | Triggered when the selected item in the picker changes.|
- TextPickerResult
| Name | Type | Description |
| Name| Type| Description|
| -------- | -------- | -------- |
| value | string | Text of the selected item. |
| index | number | Index value of the selected item in the range. |
| value | string | Value of the selected item.|
| index | number | Index of the selected item in the range.|
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct TextPickerDialogExample {
......
en/application-dev/ui/ts-syntactic-sugar.md
浏览文件 @ 7b9751be
# About Syntactic Sugar
## Decorators
A decorator @Decorator can decorate a class, structure, or class attribute. Multiple decorators can be applied to the same target element and defined on a single line or multiple lines. It is recommended that the decorators be defined on multiple lines.
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.
A decorator **@Decorator** can decorate a class, structure, or class attribute. Multiple decorators can be applied to the same target element and defined on a single line or multiple lines. It is recommended that the decorators be defined on multiple lines.
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
......@@ -15,6 +16,7 @@ struct MyComponent {
}
```
Multiple decorators can be defined on a single line, as shown below:
......@@ -23,6 +25,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:
......@@ -37,26 +40,26 @@ struct MyComponent {
### Supported Decorators
| Decorator | Decorates... | Description |
| -------- | -------- | -------- |
| @Component | struct | The decorated structure has the component-based capability. The build method must be implemented to update the UI. |
| ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| @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. |
| @Preview | struct | Custom components decorated by @Preview can be previewed in the Previewer of DevEco Studio. When the page is loaded, the custom components decorated by @Preview are created and displayed. |
| @Builder | Methods | In the decorated method, you can use the declarative UI description to quickly generate multiple layouts in a custom component. |
| @Extend | Methods | This decorator adds new attribute functions to a preset component, allowing you to quickly define and reuse the custom style of the component. |
| @Preview | struct | Custom components decorated by **@Preview** can be previewed in DevEco Studio. When the target page is loaded, the custom components decorated by **@Preview** are created and displayed.|
| @Builder | Methods | In the decorated method, you can use the declarative UI description to quickly generate multiple layouts in a custom component.|
| @Extend | Methods | This decorator adds attribute functions to a preset component, allowing you to quickly define and reuse the custom style of the component.|
| @CustomDialog | struct | This decorator is used to decorate custom pop-up dialog boxes. |
| @State | Primitive data types, classes, and arrays | If the decorated state data is modified, the build method of the component will be called to update the UI. |
| @Prop | Primitive data types | This decorator is used to establish one-way data binding between the parent and child components. When the data associated with the parent component is modified, the UI of the current component is updated. |
| @Link | Primitive data types, classes, and arrays | This decorator is used to establish two-way data binding between the parent and child components. The internal state data of the parent component is used as the data source. Any changes made to one component will be reflected to the other. |
| @State | Primitive data types, classes, and arrays | If the decorated state data is modified, the **build** method of the component will be called to update the UI. |
| @Prop | Primitive data types | This decorator is used to establish one-way data binding between the parent and child components. When the data associated with the parent component is modified, the UI of the current component is updated.|
| @Link | Primitive data types, classes, and arrays | This decorator is used to establish two-way data binding between the parent and child components. The internal state data of the parent component is used as the data source. Any changes made to one component will be reflected to the other.|
| @Observed | Classes | This decorator is used to indicate that the data changes in the class will be managed by the UI page. |
| @ObjectLink | Objects of @Observed decorated classes | When the decorated state variable is modified, the parent and sibling components that have the state variable will be notified for UI re-rendering. |
| @Consume | Primitive data types, classes, and arrays | When the @Consume decorated variable detects the update of the @Provide decorated variable, the re-rendering of the current custom component is triggered. |
| @Provide | Primitive data types, classes, and arrays | As the data provider, @Provide can update the data of child nodes and trigger page rendering. |
| @Watch | Variables decorated by @State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp, or @StorageLink | This decorator is used to listen for the changes of the state variables. The application can register a callback method through @Watch. |
| @ObjectLink | Objects of **@Observed** decorated classes | When the decorated state variable is modified, the parent and sibling components that have the state variable will be notified for UI re-rendering.|
| @Consume | Primitive data types, classes, and arrays | When the **@Consume** decorated variable detects the update of the **@Provide** decorated variable, the re-rendering of the current custom component is triggered.|
| @Provide | Primitive data types, classes, and arrays | As the data provider, **@Provide** can update the data of child nodes and trigger page rendering.|
| @Watch | Variables decorated by **@State**, **@Prop**, **@Link**, **@ObjectLink**, **@Provide**, **@Consume**, **@StorageProp**, or **@StorageLink** | This decorator is used to listen for the changes of the state variables. The application can register a callback method through **@Watch**. |
## 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() {
......@@ -70,7 +73,7 @@ Column() {
## struct
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.
Components can be implemented based on **struct**s. Components cannot inherit from each other. The **struct**s implemented components can be created and destroyed more quickly than **class** implemented components.
```ts
@Component
......@@ -85,8 +88,7 @@ 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
......@@ -96,7 +98,7 @@ struct MyComponent {
}
}
// Use
// Usage
Column() {
MyComponent()
}
......@@ -112,17 +114,16 @@ 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.
- No expressions should cause any application state variables (**@State**, **@Link**, and **@Prop**) to change. Otherwise, undefined and potentially unstable framework behavior may occur.
- The generator function cannot contain local variables.
None of the above restrictions apply to anonymous function implementations of event-handling functions (such as onClick)
None of the above restrictions apply to anonymous function implementations of event-handling functions (such as **onClick**)
Incorrect:
```ts
build() {
let a: number = 1 // invalid: variable declaration not allowed
......@@ -135,12 +136,11 @@ build() {
}
```
## $$
## $
$$ supports two-way binding for simple variables and @State, @Link, and @Prop decorated 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](../reference/arkui-ts/ts-universal-attributes-popup.md)** 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, and the **checked** attribute of the **\<Radio>** component.
```ts
......@@ -167,3 +167,29 @@ struct bindPopup {
}
```
## Restrictions on Declaring Multiple Data Types of State Variables
If a **@State**, **@Provide**, **@Link**, or **@Consume** decorated state variable supports multiple data types, they must be all simple data types or references at one time.
Example:
```ts
@Entry
@Component
struct Index {
// Incorrect: @State message: string | Resource = 'Hello World'
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(`${ this.message }`)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
```
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或