Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 58b156c2 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!3220 同步英文文档到release分支 

Merge pull request !3220 from LiAn/OpenHarmony-3.1-Release
上级 bf46e39b 12bcd9ea
展开全部 显示空白变更内容
内联 并排
Showing with 7072 addition and 890 deletion
en/application-dev/device/sensor-guidelines.md
浏览文件 @ 58b156c2
......@@ -22,11 +22,11 @@
## Available APIs
| Module | API | Description |
| Module| API| Description|
| -------- | -------- | -------- |
| ohos.sensor | sensor.on(sensorType,callback:AsyncCallback<Response>):void | Subscribes to data changes of a type of sensor. |
| ohos.sensor | sensor.once(sensorType,callback:AsyncCallback<Response>):void | Subscribes to only one data change of a type of sensor. |
| ohos.sensor | sensor.off(sensorType,callback:AsyncCallback<void>):void | Unsubscribes from sensor data changes. |
| ohos.sensor | sensor.on(sensorType, callback:AsyncCallback<Response>): void | Subscribes to data changes of a type of sensor.|
| ohos.sensor | sensor.once(sensorType, callback:AsyncCallback<Response>): void | Subscribes to only one data change of a type of sensor.|
| ohos.sensor | sensor.off(sensorType, callback:AsyncCallback<void>): void | Unsubscribes from sensor data changes.|
## How to Develop
......@@ -67,14 +67,6 @@
"when":"inuse"
}
},
{
"name":"ohos.permission.VIBRATE",
"reason"":"",
"usedScene":{
"ability": [".MainAbility"],
"when":"inuse"
}
},
]
```
......@@ -82,11 +74,7 @@
```
import sensor from "@ohos.sensor"
sensor.on(type:sensorType,function(error,data){
if (error) {// The call fails, and error.code and error.message are printed.
console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message);
return;
};
sensor.on(sensor.sensorType.SENSOR_TYPE_ACCELEROMETER,function(data){
console.info("Subscription succeeded. data = "+ data);// The call is successful, and the obtained sensor data is printed.
}
);
......@@ -100,11 +88,7 @@
```
import sensor from "@ohos.sensor"
sensor.off(type:sensorType,function(error) {
if (error) {// The unsubscription fails, and error.code and error.message are printed.
console.error("Failed to unsubscribe from acceleration sensor data. Error code: " + error.code + "; message: " + error.message);
return;
};
sensor.off(sensor.sensorType.SENSOR_TYPE_ACCELEROMETER,function() {
console.info("Succeeded in unsubscribing from acceleration sensor data.");// The unsubscription is successful, and the result is printed.
}
);
......@@ -118,12 +102,8 @@
```
import sensor from "@ohos.sensor"
sensor.once(tyep:sensorType,function(error, data) {
if (error) {// The call fails, and error.code and error.message are printed.
console.error("Failed to obtain data. Error code: " + error.code + "; message: " + error.message);
return;
};
console.info("Data obtained successfully. data="+data);// The call is successful, and the obtained sensor data is printed.
sensor.once(sensor.sensorType.SENSOR_TYPE_ACCELEROMETER,function(data) {
console.info("Data obtained successfully. data=" + data);// The call is successful, and the obtained sensor data is printed.
}
);
```
......@@ -131,3 +111,15 @@
The following figure shows the successful call result when **SensorType** is **SENSOR_TYPE_ID_ACCELEROMETER**.
![en-us_image_0000001241733907](figures/en-us_image_0000001241733907.png)
If the API fails to be called, you are advised to use the **try/catch** statement to capture error information that may occur in the code. Example:
```
try {
sensor.once(sensor.sensorType.SENSOR_TYPE_ACCELEROMETER,function(data) {
console.info("Data obtained successfully. data=" + data);// The call is successful, and the obtained sensor data is printed.
});
} catch (error) {
console.error(error);
}
```
en/application-dev/device/vibrator-guidelines.md
浏览文件 @ 58b156c2
......@@ -8,14 +8,14 @@ You can set different vibration effects as needed, for example, customizing vibr
## Available APIs
| Module | API | Description |
| Module| API| Description|
| -------- | -------- | -------- |
| ohos.vibrator | vibrate(duration: number): Promise<void> | Triggers vibration with the specified duration. This API uses a promise to return the result. |
| ohos.vibrator | vibrate(duration: number, callback?: AsyncCallback<void>): void | Triggers vibration with the specified duration. This API uses a callback to return the result. |
| ohos.vibrator | vibrate(effectId: EffectId): Promise<void> | Triggers vibration with the specified effect. This API uses a promise to return the result. |
| ohos.vibrator | vibrate(effectId: EffectId, callback?: AsyncCallback<void>): void | Triggers vibration with the specified effect. This API uses a callback to return the result. |
| ohos.vibrator | stop(stopMode: VibratorStopMode): Promise<void> | Stops vibration. This API uses a promise to return the result. |
| ohos.vibrator | stop(stopMode: VibratorStopMode, callback?: AsyncCallback<void>): void | Stops vibration. This API uses a callback to return the result. |
| ohos.vibrator | vibrate(duration: number): Promise<void> | Triggers vibration with the specified duration. This API uses a promise to return the result.|
| ohos.vibrator | vibrate(duration: number, callback?: AsyncCallback<void>): void | Triggers vibration with the specified duration. This API uses a callback to return the result.|
| ohos.vibrator | vibrate(effectId: EffectId): Promise<void> | Triggers vibration with the specified effect. This API uses a promise to return the result.|
| ohos.vibrator | vibrate(effectId: EffectId, callback?: AsyncCallback<void>): void | Triggers vibration with the specified effect. This API uses a callback to return the result.|
| ohos.vibrator | stop(stopMode: VibratorStopMode): Promise<void> | Stops vibration. This API uses a promise to return the result.|
| ohos.vibrator | stop(stopMode: VibratorStopMode, callback?: AsyncCallback<void>): void | Stops vibration. This API uses a callback to return the result.|
## How to Develop
......@@ -61,11 +61,11 @@ You can set different vibration effects as needed, for example, customizing vibr
```
import vibrator from "@ohos.vibrator"
vibrator.vibrate(duration: number).then((error)=>{
if(error){// The call fails, and error.code and error.message are printed.
console.log("Promise return failed.error.code"+error.code+"error.message"+error.message);
}else{// The call succeeded. The device starts to vibrate.
console.log("Promise returned to indicate a successful vibration.")
vibrator.vibrate(1000).then((error)=>{
if (error) {// The call fails, and error.code and error.message are printed.
Console.log("Promise return failed.error.code"+error.code+"error.message"+error.message);
}else{// The call is successful, and the device starts to vibrate.
Console.log("Promise returned to indicate a successful vibration.")
};
})
```
......@@ -74,10 +74,10 @@ You can set different vibration effects as needed, for example, customizing vibr
```
import vibrator from "@ohos.vibrator"
vibrator.stop(stopMode: VibratorStopMode).then((error)=>{
if(error){// The call fails, and error.code and error.message are printed.
console.log("Promise return failed. error.code"+error.code+"error.message"+error.message);
}else{// The call succeeded. The device stops vibration.
vibrator.stop(vibrator.VibratorStopMode.VIBRATOR_STOP_MODE_PRESET).then((error)=>{
if (error) {// The call fails, and error.code and error.message are printed.
Console.log("Promise return failed.error.code"+error.code+"error.message"+error.message);
}else{// The call is successful, and the device stops vibration.
Console.log("Promise returned to indicate a successful stop.");
};
})
......
en/application-dev/device/vibrator-overview.md
浏览文件 @ 58b156c2
......@@ -6,10 +6,11 @@ The vibrator service opens up the latest capabilities of the vibrator hardware t
## Working Principles
The vibrator is a Misc device that consists of four modules: Vibrator API, Vibrator Framework, Vibrator Service, and HD_IDL.
The vibrator is a Misc device that consists of four modules: Vibrator API, Vibrator Framework, Vibrator Service, and HDF layer.
**Figure1** Vibrator in Misc devices
![en-us_image_0000001180249428](figures/en-us_image_0000001180249428.png)
**Figure 1** Vibrator in Misc devices
![0752d302-aeb9-481a-bb8f-e5524eb61eeb](figures/0752d302-aeb9-481a-bb8f-e5524eb61eeb.png)
- Vibrator API: provides basic vibrator APIs, including the APIs for querying the vibrator list, querying the vibrator by effect, and triggering and stopping vibration.
......@@ -17,9 +18,9 @@ The vibrator is a Misc device that consists of four modules: Vibrator API, Vibra
- Vibrator Service: manages services of vibrators.
- HD_IDL: adapts to different devices.
- HDF layer: adapts to different devices.
## Constraints
When using a vibrator, you need to declare and obtain the **ohos.permission.VIBRATE** permission first so that you can control the vibration effect.
When using a vibrator, you must declare the **ohos.permission.VIBRATE** permission before you can control the vibration effect. The sensitivity level of this permission is **system_grant**.
en/application-dev/reference/arkui-js/js-components-basic-web.md
浏览文件 @ 58b156c2
......@@ -3,6 +3,9 @@ The **\<web>** component displays web page content.
>![](../../public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 6. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
ohos.permission.INTERNET, required only for accessing online web pages.
## Constraints
The **\<web>** component does not follow the transition animation. A page allows only one **\<web>** component.
......@@ -44,7 +47,7 @@ The following methods are supported.
```
```
<!-- xxx.js -->
// xxx.js
export default {
reloadWeb() {
this.$element('web').reload()
......
en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
浏览文件 @ 58b156c2
......@@ -48,7 +48,7 @@ Creates a date picker in the given date range.
| Name| Type| Description|
| -------- | -------- | -------- |
| year | number | Year of the selected date.|
| month | number | Month of the selected date.|
| month | number | Month of the selected date. The value ranges from 0 to 11. The value **0** indicates January, and the value **11** indicates December. |
| day | number | Day of the selected date.|
......
en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
浏览文件 @ 58b156c2
......@@ -29,11 +29,11 @@ Creates a component that can automatically display the navigation bar, title, an
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| title | string \| [Custom Builder](../../ui/ts-types.md) | - | Page title. |
| title | string \| [CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | Page title. |
| subtitle | string | - | Subtitle of the page. |
| menus | Array&lt;NavigationMenuItem&gt; \| [Custom Builder](../../ui/ts-types.md) | - | Menu in the upper right corner of the page. |
| menus | Array&lt;NavigationMenuItem&gt; \| [CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | Menu in the upper right corner of the page. |
| titleMode | NavigationTitleMode | NavigationTitleMode.Free | Display mode of the page title bar. |
| toolBar | {<br/>items:[<br/>Object<br/>] }<br/>\| [Custom Builder](../../ui/ts-types.md) | - | Content of the toolbar.<br/>**items**: all items on the toolbar. |
| toolBar | {<br/>items:[<br/>Object<br/>] }<br/>\| [CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | Content of the toolbar.<br/>**items**: all items on the toolbar. |
| hideToolBar | boolean | false | Whether to hide the toolbar.<br/>**true**: Hide the toolbar.<br/>**false**: Show the toolbar. |
| hideTitleBar | boolean | false | Whether to hide the title bar. |
| hideBackButton | boolean | false | Whether to hide the back button. |
......@@ -67,7 +67,7 @@ Creates a component that can automatically display the navigation bar, title, an
| Name | Description |
| -------- | -------- |
| onTitleModeChanged(callback: (titleMode: NavigationTitleMode) =&gt; void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls. |
| onTitleModeChange(callback:&nbsp;(titleMode:&nbsp;NavigationTitleMode)&nbsp;=&gt;&nbsp;void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls. |
## Example
......@@ -140,7 +140,7 @@ struct NavigationExample {
.titleMode(NavigationTitleMode.Free)
.hideTitleBar(false)
.hideBackButton(false)
.onTitleModeChanged((titleModel: NavigationTitleMode) => {
.onTitleModeChange((titleModel: NavigationTitleMode) => {
console.log('titleMode')
})
.toolBar({ items: [
......
en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md
浏览文件 @ 58b156c2
......@@ -41,8 +41,8 @@ RichText\(content:string\)
| \<br/> | Inserts a newline character.| \<p>This is a paragraph\<br/>This is a new paragraph\</p>|
| \<hr/> | Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line.| \<p>This is a paragraph\</p>\<hr/>\<p>This is a paragraph\</p> |
| \<div>\</div> | Defines a generic container that is generally used to group block-level elements. It allows you to apply CSS styles to multiple elements at the same time.| \<div style='color:#0000FF'>\<h3>This is the heading in a div element\</h3>\</div> |
| \<i>\</i> | Displays text in italic style.| \<p>\<i>This is in italic style\</i>\</p> |
| \<u>\</u> | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \<u> tag where it could be confused with a hyperlink.| \<p>This is an underlined paragraph\</p>|
| \<i>\</i> | Displays text in italic style.| \<i>This is in italic style\</i> |
| \<u>\</u> | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \<u> tag where it could be confused with a hyperlink.| \<p>\<u>This is an underlined paragraph\<u>\<p> |
| \<style>\</style> | Used to embed CSS within an HTML document.| \<style>h1{color:red;}p{color:blue;}\</style> |
| style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**.| \<h1 style='color:blue;text-align:center'>This is a heading\</h1>\<p style='color:green'>This is a paragraph\</p> |
| \<script>\</script> | Used to embed or reference a client-side script, such as JavaScript.| \<script>document.write("Hello World!")\</script> |
......
en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
浏览文件 @ 58b156c2
......@@ -20,9 +20,9 @@ This component can contain a single child component.
## APIs
ScrollBar(value: ScrollBarOption)
ScrollBar(value: ScrollBarOptions)
- ScrollBarOption parameters
- ScrollBarOptions parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| scroller | [Scroller](ts-container-scroll.md#scroller) | Yes | - | Scroller, which can be bound to and control scrollable components. |
......
en/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @ 58b156c2
......@@ -31,7 +31,7 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| searchButton | string | –| Text on the search button located next to the search text box. By default, there is no search button.|
| placeholderColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Placeholder text color.|
| placeholderColor | [ResourceColor](../../ui/ts-types.md) | - | Placeholder text color.|
| placeholderFont | [Font](../../ui/ts-types.md) | - | Placeholder text style.|
| textFont | [Font](../../ui/ts-types.md) | - | Text font for the search text box.|
......
en/application-dev/reference/arkui-ts/ts-basic-components-select.md
浏览文件 @ 58b156c2
......@@ -20,8 +20,8 @@ Select(options: Array<SelectOption>)
| Name| Type| Mandatory| Default Value| Description|
| ------ | ----------------------------------------------- | ---- | ------ | -------------- |
| value | [ResourceStr](../../ui/ts-types.md#ResourceStr) | Yes| - | Value of an option in the drop-down list box.|
| icon | [ResourceStr](../../ui/ts-types.md#ResourceStr) | No| - | Icon of an option in the drop-down list box.|
| value | [ResourceStr](../../ui/ts-types.md) | Yes| - | Value of an option in the drop-down list box.|
| icon | [ResourceStr](../../ui/ts-types.md) | No| - | Icon of an option in the drop-down list box.|
## Attributes
......@@ -30,19 +30,19 @@ Select(options: Array<SelectOption>)
| selected | number | - | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.|
| value | string | - | Text of the drop-down button.|
| font | [Font](../../ui/ts-types.md) | - | Text font of the drop-down button.|
| fontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Text color of the drop-down button.|
| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Background color of the selected option in the drop-down list box.|
| fontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of the drop-down button.|
| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md) | - | Background color of the selected option in the drop-down list box.|
| selectedOptionFont | [Font](../../ui/ts-types.md) | - | Text font of the selected option in the drop-down list box.|
| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Text color of the selected option in the drop-down list box.|
| optionBgColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Background color of an option in the drop-down list box.|
| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of the selected option in the drop-down list box.|
| optionBgColor | [ResourceColor](../../ui/ts-types.md) | - | Background color of an option in the drop-down list box.|
| optionFont | [Font](../../ui/ts-types.md) | - | Text font of an option in the drop-down list box.|
| optionFontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Text color of an option in the drop-down list box.|
| optionFontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of an option in the drop-down list box.|
## Events
| Name| Description|
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onSelected(callback: (index: number, value?:string) => void)| Invoked when an option in the drop-down list box is selected. **index** indicates the index of the selected option. **value** indicates the value of the selected option.|
| onSelect(callback: (index: number, value?:string) => void) | Invoked when an option in the drop-down list box is selected. **index** indicates the index of the selected option. **value** indicates the value of the selected option.|
## Example
......@@ -61,7 +61,7 @@ struct SliderExample {
.font({size: 30, weight:400, family: 'serif', style: FontStyle.Normal })
.selectedOptionFont({size: 40, weight: 500, family: 'serif', style: FontStyle.Normal })
.optionFont({size: 30, weight: 400, family: 'serif', style: FontStyle.Normal })
.onSelected((index:number)=>{
.onSelecte((index:number)=>{
console.info("Select:" + index)
})
}
......
en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
浏览文件 @ 58b156c2
......@@ -31,7 +31,7 @@ TextArea(value?:{placeholder?: string controller?: TextAreaController})
## Attributes
In addition to [universal attributes](ts-universal-attributes.md), the following attributes are supported.
In addition to [universal attributes](ts-universal-attributes-index.md), the following attributes are supported.
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
......@@ -49,15 +49,6 @@ In addition to [universal attributes](ts-universal-attributes.md), the following
| End | Align the tail horizontally. |
### TextAreaController<sup>8+</sup>
Defines the controller for controlling the **&lt;TextArea&gt;** component.
| Name | Description |
| -------- | -------- |
| caretPosition(value: number): void | Position of the input cursor.<br/>**value**: indicates the length from the start of the string to the position where the input cursor is located. |
## Events
| Name | Description |
......@@ -67,6 +58,28 @@ Defines the controller for controlling the **&lt;TextArea&gt;** component.
| onCut<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be cut. |
| onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be pasted. |
## TextAreaController<sup>8+</sup>
Defines the controller for controlling the **&lt;TextArea&gt;** component.
### Objects to Import
```
controller: TextAreaController = new TextAreaController()
```
### caretPosition<sup>8+</sup>
caretPosition(value: number): void
Sets the position of the caret.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| ----- | ------ | ---- | ---- | ------------------- |
| value | number | Yes | - | Length from the start of the string to the position where the input cursor is located. |
## Example
......
en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md
浏览文件 @ 58b156c2
......@@ -18,32 +18,46 @@ TextClock(options?: {timeZoneOffset?: number, contorller?: TextClockController})
- Parameters
| Name| Type| Mandatory| Default Value| Description|
| Name | Type| Mandatory| Default Value | Description |
| -------- | -------- | ---- | ------------------ | ------------------------------------------------------------ |
| timeZoneOffset | number | No| Time zone offset| Sets the time zone offset. The value range is [-14, 12], indicating UTC+12 to UTC-12. A negative value indicates Eastern Standard Time, and a positive value indicates Western Standard Time. For example, **-8** indicates UTC+8. For countries or regions crossing the International Date Line, use -13 (UTC+13) and -14 (UTC+14) to ensure consistent time within the entire country or region.|
| timeZoneOffset | number | No | Time zone offset| Sets the time zone offset. The value range is [-14, 12], indicating UTC+12 to UTC-12. A negative value indicates Eastern Standard Time, and a positive value indicates Western Standard Time. For example, **-8** indicates UTC+8. For countries or regions crossing the International Date Line, use -13 (UTC+13) and -14 (UTC+14) to ensure consistent time within the entire country or region.|
| contorller | [TextClockContorller](#TextClockController) | No| null | Binds a controller to control the status of the **<TextClock\>** component.|
## Attributes
| Name| Type| Default Value| Description|
| Name | Type| Default Value | Description |
| ------ | -------- | -------- | ------------------------------------------------------------ |
| format | string | 'hhmmss' | Time format, for example, **yyyy/mm/dd** or **yyyy-mm-dd**. Supported time format strings: <ul><li>yyyy (year)</li> <li>mm (two-letter abbreviated month name)</li> <li>mmm (three-letter abbreviated month name)</li> <li>mmmm (full month name)</li> <li>dd (two-letter abbreviated day of the week)</li> <li>ddd (three-letter abbreviated day of the week)</li> <li>dddd (full day of the week)</li> <li>HH (24-hour format)</li> <li>hh (12-hour format)</li> <li>MM/mm (minute)</li> <li>SS/ss (second)</li></ul>|
## Events
| Name | Description |
| -------------------------------------------- | ------------------------------------------------------------ |
| onDateChange(event: (value: number) => void) | Triggered when the time changes in seconds at minimum.<br> **value**: Unix time stamp, which is the number of milliseconds that have elapsed since the Unix epoch.|
## TextClockController
Controller of the **<TextClock\>** component, which can be bound to the component for status control.
| API| Description|
| -------------------------------------------- | ------------------------------------------------------------ |
| start() | Starts the **<TextClock\>** component.|
| stop() | Stops the **<TextClock\>** component.|
### Objects to Import
```
controller: TextClockController = new TextClockController()
## Events
```
### start
start()
Starts the **<TextClock\>** component.
### stop
stop()
Stops the **<TextClock\>** component.
| Name| Description|
| -------------------------------------------- | ------------------------------------------------------------ |
| onDateChange(event: (value: number) => void) | Triggered when the time changes in seconds at minimum. <br /> value: Unix time stamp, which is the number of milliseconds that have elapsed since the Unix epoch.|
## Example
......
en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
浏览文件 @ 58b156c2
......@@ -31,7 +31,7 @@ TextInput(value?:{placeholder?: string controller?: TextInputController})
## Attributes
In addition to [universal attributes](ts-universal-attributes.md), the following attributes are supported.
In addition to [universal attributes](ts-universal-attributes-index.md), the following attributes are supported.
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
......@@ -96,7 +96,8 @@ Sets the cursor in a specified position.
| -------- | -------- |
| onChange(value: string) =&gt; void | Triggered when the input changes. |
| onSubmit(callback: (enterKey: EnterKeyType) =&gt; void) | Triggered when the Enter key on the physical or soft keyboard is pressed. |
| onEditChanged(callback: (isEditing: boolean) =&gt; void) | Triggered when the input status changes. |
| onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>(deprecated) </sup> | Triggered when the input status changes. |
| onEditChange(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) <sup>8+</sup> | Triggered when the input status changes. |
| onCopy<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be copied. |
| onCut<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be cut. |
| onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be pasted. |
......
en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
浏览文件 @ 58b156c2
......@@ -29,32 +29,50 @@ TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTim
| count | number | No | 60000 | Countdown time, in milliseconds. This parameter is valid only when **isCountDown** is set to **true**.<br/>- If the value of **count** is less than or equal to 0, the default value is used.<br/>- If the value of **count** is greater than 0, it is used. |
| controller | [TextTimerController](#texttimercontroller) | No | null | **&lt;TextTimer&gt;** controller. |
### TextTimerController
Defines the controller for controlling the **&lt;TextTimer&gt;** component.
| Name | Description |
| -------- | -------- |
| start() | Starts the timer. |
| pause() | Pauses the timer. |
| reset() | Resets the timer. |
## Attributes
| Name | Type | Default Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| format | string | 'hh:mm:ss.ms' | Custom format. The value must contain at least one of the following keywords: **hh**, **mm**, **ss**, and **ms**. |
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onTimer(callback: (utc: number, elapsedTime: number) =&gt; void) | Triggered when the time text changes.<br/>**utc**: currently displayed time, in milliseconds.<br/>**elapsedTime**: elapsed time of the timer, in milliseconds. |
## TextTimerController
Defines the controller for controlling the **&lt;TextTimer&gt;** component.
### Objects to Import
```
textTimerController: TextTimerController = new TextTimerController()
```
### start
start()
Starts the timer.
### pause
pause()
Pauses the timer.
### reset
reset()
Resets the timer.
## Example
......@@ -62,12 +80,12 @@ Defines the controller for controlling the **&lt;TextTimer&gt;** component.
@Entry
@Component
struct TextTimerExample {
myTimerController: TextTimerController = new TextTimerController()
textTimerController: TextTimerController = new TextTimerController()
@State format: string = 'hh:mm:ss.ms'
build() {
Column() {
TextTimer({controller: this.myTimerController})
TextTimer({controller: this.textTimerController})
.format(this.format)
.fontColor(Color.Black)
.fontSize(this.textSize)
......@@ -76,13 +94,13 @@ struct TextTimerExample {
})
Row() {
Button("start").onClick(() => {
this.myTimerController.start();
this.textTimerController.start();
});
Button("pause").onClick(() => {
this.myTimerController.pause();
this.textTimerController.pause();
});
Button("reset").onClick(() => {
this.myTimerController.reset();
this.textTimerController.reset();
});
}
}
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
浏览文件 @ 58b156c2
......@@ -24,13 +24,13 @@ LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: numb
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onAction((event?: LongPressGestureEvent) =&gt; void) | Callback invoked when a long press gesture is recognized. |
| onActionEnd((event?: LongPressGestureEvent) =&gt; void) | Callback invoked when the finger used for a long press gesture is lift. |
| onAction((event?: GestureEvent) =&gt; void) | Callback invoked when a long press gesture is recognized. |
| onActionEnd((event?: GestureEvent) =&gt; void) | Callback invoked when the finger used for a long press gesture is lift. |
| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a long press gesture is recognized. |
- LongPressGestureEvent<sup>8+</sup> attributes
- GestureEvent attributes related to the long press gesture
| Name | Type | Description |
| -------- | -------- | -------- |
| repeat | boolean | Whether the event is repeated. |
......@@ -53,7 +53,7 @@ struct LongPressGestureExample {
.gesture(
LongPressGesture({ repeat: true })
// Repeatedly triggered when the long press gesture exists.
.onAction((event: LongPressGestureEvent) => {
.onAction((event: GestureEvent) => {
if (event.repeat) { this.count++ }
})
// Triggered when the long press gesture ends.
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ 58b156c2
......@@ -12,7 +12,7 @@ None
## APIs
PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOption](#pangestureoption))
PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOption](#pangestureoptions))
- Parameters
| Name | Type | Mandatory | Default Value | Description |
......@@ -34,11 +34,11 @@ PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: nu
| None | Slide disabled. |
### PanGestureOption
### PanGestureOptions
The attributes of the slide gesture recognizer can be dynamically modified using the **PanGestureOption** AP. This avoids modifying attributes through status variables, which will cause the UI to be refreshed.
The attributes of the slide gesture recognizer can be dynamically modified using the **PanGestureOptions** AP. This avoids modifying attributes through status variables, which will cause the UI to be refreshed.
PanGestureOption(options?: { fingers?: number, direction?: PanDirection, distance?: number })
PanGestureOptions(options?: { fingers?: number, direction?: PanDirection, distance?: number })
- Parameters
For details, see **PanGesture**.
......@@ -53,14 +53,14 @@ PanGestureOption(options?: { fingers?: number, direction?: PanDirection, distanc
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onActionStart(callback: (event?: PanGestureEvent) =&gt; void) | Callback for the pan gestures reorganization event. |
| onActionUpdate(callback: (event?: PanGestureEvent) =&gt; void) | Callback invoked when a pan gesture is recognized. |
| onActionEnd(callback: (event?: PanGestureEvent) =&gt; void) | Callback invoked when the finger used for a pan gesture is lift. |
| onActionStart(callback: (event?: GestureEvent) =&gt; void) | Callback for the pan gestures reorganization event. |
| onActionUpdate(callback: (event?: GestureEvent) =&gt; void) | Callback invoked when a pan gesture is recognized. |
| onActionEnd(callback: (event?: GestureEvent) =&gt; void) | Callback invoked when the finger used for a pan gesture is lift. |
| onActionCancel(callback: () =&gt; void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized. |
- PanGestureEvent<sup>8+</sup> attributes
- GestureEvent attributes related to the pan gesture
| Name | Type | Description |
| -------- | -------- | -------- |
| offsetX | number | Offset of the gesture event, in vp. |
......@@ -85,10 +85,10 @@ struct PanGestureExample {
.translate({ x: this.offsetX, y: this.offsetY, z: 5 })
.gesture(
PanGesture({})
.onActionStart((event: PanGestureEvent) => {
.onActionStart((event: GestureEvent) => {
console.info('Pan start')
})
.onActionUpdate((event: PanGestureEvent) => {
.onActionUpdate((event: GestureEvent) => {
this.offsetX = event.offsetX
this.offsetY = event.offsetY
})
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
浏览文件 @ 58b156c2
......@@ -23,14 +23,14 @@ PinchGesture(options?: { fingers?: number, distance?: number })
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onActionStart((event?: PinchGestureEvent) =&gt; void) | Callback invoked when a pinch gesture is recognized. |
| onActionUpdate((event?: PinchGestureEvent) =&gt; void) | Callback invoked during the movement of a pinch gesture. |
| onActionEnd((event?: PinchGestureEvent) =&gt; void) | Callback invoked when the finger used for a pinch gesture is lift. |
| onActionStart((event?: GestureEvent) =&gt; void) | Callback invoked when a pinch gesture is recognized. |
| onActionUpdate((event?: GestureEvent) =&gt; void) | Callback invoked during the movement of a pinch gesture. |
| onActionEnd((event?: GestureEvent) =&gt; void) | Callback invoked when the finger used for a pinch gesture is lift. |
| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a pinch gesture is recognized. |
- PinchGestureEvent<sup>8+</sup> attributes
- GestureEvent attributes related to the pinch gesture
| Name | Type | Description |
| -------- | -------- | -------- |
| scale | number | Scale ratio. This attribute is used for the pinch gesture. |
......@@ -55,10 +55,10 @@ struct PinchGestureExample {
.scale({ x: this.scale, y: this.scale, z: this.scale })
.gesture(
PinchGesture()
.onActionStart((event: PinchGestureEvent) => {
.onActionStart((event: GestureEvent) => {
console.info('Pinch start')
})
.onActionUpdate((event: PinchGestureEvent) => {
.onActionUpdate((event: GestureEvent) => {
this.scale = event.scale
})
.onActionEnd(() => {
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
浏览文件 @ 58b156c2
......@@ -23,14 +23,14 @@ RotationGesture(options?: { fingers?: number, angle?: number })
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onActionStart((event?: RotationGestureEvent) =&gt; void) | Callback invoked when a rotation gesture is recognized. |
| onActionUpdate((event?: RotationGestureEvent) =&gt; void) | Callback invoked during the movement of the rotation gesture. |
| onActionEnd((event?: RotationGestureEvent) =&gt; void) | Callback invoked when the finger used for the rotation gesture is lift. |
| onActionStart((event?: GestureEvent) =&gt; void) | Callback invoked when a rotation gesture is recognized. |
| onActionUpdate((event?: GestureEvent) =&gt; void) | Callback invoked during the movement of the rotation gesture. |
| onActionEnd((event?: GestureEvent) =&gt; void) | Callback invoked when the finger used for the rotation gesture is lift. |
| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after the rotation gesture is recognized. |
- RotationGestureEvent<sup>8+</sup> attributes
- GestureEvent attributes related to the rotation gesture
| Name | Type | Description |
| -------- | -------- | -------- |
| angle | number | Rotation angle. |
......@@ -53,10 +53,10 @@ struct RotationGestureExample {
.margin(80).rotate({ x:1, y:2, z:3, angle: this.angle })
.gesture(
RotationGesture()
.onActionStart((event: RotationGestureEvent) => {
.onActionStart((event: GestureEvent) => {
console.log('Rotation start')
})
.onActionUpdate((event: RotationGestureEvent) => {
.onActionUpdate((event: GestureEvent) => {
this.angle = event.angle
})
.onActionEnd(() => {
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
浏览文件 @ 58b156c2
......@@ -31,17 +31,18 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onAction(callback:(event?: SwipeGestureEvent) =&gt; void) | Callback invoked when a swipe gesture is recognized. |
| onAction(callback:(event?: GestureEvent) =&gt; void) | Callback invoked when a swipe gesture is recognized. |
- SwipeGestureEvent attributes
- GestureEvent attributes related to the swipe gesture
| Name | Type | Description |
| -------- | -------- | -------- |
| angle | number | Angle of the swipe gesture. |
| angle | number | Angle of the swipe gesture.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE**<br/>>&nbsp;Angle calculation method: After the swipe gesture is identified, a line connecting the two fingers is identified as the initial line. As the fingers swipe, the line between the fingers rotates. Based on the coordinates of the initial line's and current line's end points, an arc tangent function is used to calculate the respective included angle of the points relative to the horizontal direction. Rotation angle = arctan2(cy2-cy1,cx2-cx1) - arctan2(y2-y1,x2-x1). The initial line is used as the coordinate system. The clockwise rotation is 0 to 180 degrees, and the counter-clockwise rotation is –180 to 0 degrees. |
| speed | number | Speed of the swipe gesture. |
![en-us_image_0000001231374559](figures/en-us_image_0000001231374661.png)
## Example
......@@ -64,7 +65,7 @@ struct SwipeGestureExample {
.rotate({x: 0, y: 0, z: 1, angle: this.rotateAngle})
.gesture(
SwipeGesture({fingers: 1, direction:SwipeDirection.Vertical})
.onAction((event: SwipeGestureEvent) => {
.onAction((event: GestureEvent) => {
this.speed = event.speed
this.rotateAngle = event.angle
})
......@@ -73,4 +74,4 @@ struct SwipeGestureExample {
}
```
![en-us_image_0000001257138365](figures/en-us_image_0000001257138365.gif)
![en-us_image_0000001231374559](figures/en-us_image_0000001231374559.gif)
en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
浏览文件 @ 58b156c2
......@@ -30,14 +30,14 @@ Canvas(context: CanvasRenderingContext2D)
## Attributes
[Universal attributes](ts-universal-attributes-size.md) are supported.
[Universal attributes]( ts-universal-attributes-index.md) are supported.
## Events
In addition to [universal events](ts-universal-events-click.md), the following events are supported.
In addition to [universal events](ts-universal-events-index.md), the following events are supported.
| Name | Parameter | Description |
| Name | Parameter | Description |
| -------- | -------- | -------- |
| onReady(callback: () =&gt; void) | None | Triggered when . |
......
en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
浏览文件 @ 58b156c2
......@@ -235,7 +235,7 @@ Sets the direction in which the specified animation plays.
Defines an **AnimationItem** object, which is returned by the **loadAnimation** interface and has attributes and interfaces. The attributes are described as follows:
| Name | Type | Description |
| Name | Type | Description |
| -------- | -------- | -------- |
| name | string | Animation name. |
| isLoaded | boolean | Whether the animation is loaded. |
......@@ -387,7 +387,7 @@ Sets the playback direction of an animation.
## AnimationItem.goToAndStop
goToAndStop(value: number, isFrame: boolean): void
goToAndStop(value: number, isFrame?: boolean): void
Sets the animation to stop at the specified frame or time.
......@@ -410,7 +410,7 @@ Sets the animation to stop at the specified frame or time.
## AnimationItem.goToAndPlay
goToAndPlay(value: number, isFrame: boolean): void
goToAndPlay( value: number, isFrame: boolean, name?: string): void
Sets the animation to start from the specified frame or time progress.
......
en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
浏览文件 @ 58b156c2
......@@ -274,7 +274,7 @@ Draws a quadratic curve on the canvas.
## arc
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: number): void
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
Draws an arc on the canvas.
......
en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
浏览文件 @ 58b156c2
......@@ -31,7 +31,7 @@ AlphabetIndexer(value: {arrayValue : Array&lt;string&gt;, selected : number})
## Attributes
| Name | Type | Description |
| Name | Type | Description |
| -------- | -------- | -------- |
| selectedColor | Color | Font color of the selected text. |
| popupColor | Color | Font color of the pop-up text. |
......@@ -53,11 +53,12 @@ AlphabetIndexer(value: {arrayValue : Array&lt;string&gt;, selected : number})
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onSelected(index: number) =&gt; void | Callback invoked when an item in the alphabetic indexer bar is selected. |
| onSelected(index:&nbsp;number)&nbsp;=&gt;&nbsp;void<sup>(deprecated) </sup> | Invoked when an item in the alphabetic indexer bar is selected. |
| onSelect(index:&nbsp;number)&nbsp;=&gt;&nbsp;void<sup>8+</sup> | Invoked when an item in the alphabetic indexer bar is selected. |
| onRequestPopupData(callback: (index: number) =&gt; Array&lt;string&gt;)<sup>8+</sup> | Invoked when a request for displaying content in the index prompt window is sent when an item in the alphabetic indexer bar is selected.<br/>The return value is a string array corresponding to the indexes. The string array is displayed vertically in the pop-up window. It can display up to five strings at a time and allows scrolling. |
| onPopupSelected(callback: (index: number) =&gt; void)<sup>8+</sup> | Invoked when an item in the index pop-up window is selected. |
| onPopupSelect(callback: (index: number) =&gt; void)<sup>8+</sup> | Invoked when an item in the index pop-up window is selected. |
## Example
......@@ -80,7 +81,7 @@ struct AlphabetIndexerSample {
.popupFont({ size: 30, weight: FontWeight.Bolder }) // Font style of the pop-up text
.itemSize(28) // Size of each item (square)
.alignStyle(IndexerAlign.Left) // Left aligned
.onSelected((index: number) => {
.onSelect((index: number) => {
console.info(this.value[index] + 'Selected') // Event indicating that an item is selected
})
.margin({ left: 50 })
......
en/application-dev/reference/arkui-ts/ts-container-rowsplit.md
浏览文件 @ 58b156c2
......@@ -25,7 +25,7 @@ RowSplit()
## Attributes
| Name | Type | Description |
| Name | Type | Description |
| -------- | -------- | -------- |
| resizeable | boolean | Whether the divider can be dragged. The default value is **false**. |
......@@ -42,7 +42,7 @@ RowSplit()
struct RowSplitExample {
build() {
Column() {
Text('The secant line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%')
Text('The second line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%')
RowSplit() {
Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
......
en/application-dev/reference/arkui-ts/ts-container-scroll.md
浏览文件 @ 58b156c2
......@@ -129,7 +129,7 @@ Scrolls to the specified index.
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onScroll(xOffset: number, yOffset: number) =&gt; void | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. |
| onScrollEdge(side: Edge) =&gt; void | Callback for the event of scrolling to the edge. |
......
en/application-dev/reference/arkui-ts/ts-container-tabs.md
浏览文件 @ 58b156c2
......@@ -36,15 +36,6 @@ Tabs(value: {barPosition?: BarPosition, index?: number, controller?: [TabsContro
| End | If the **vertical** attribute is set to **true**, the tab is on the right of the container. If the **vertical** attribute is set to **false**, the tab is at the bottom of the container. |
### TabsController
Defines a tab controller, which is used to control switching of tabs.
| API | Description |
| -------- | -------- |
| changeIndex(value: number): void | Changes the index of a tab. The value starts from **0**. |
## Attributes
Touch target configuration is not supported.
......@@ -71,6 +62,27 @@ Touch target configuration is not supported.
| -------- | -------- |
| onChange(callback: (index: number) =&gt; void) | Event triggered when a tab is switched. |
## TabsController
Defines a tab controller, which is used to control switching of tabs.
### Objects to Import
```
controller: TabsController = new TabsController()
```
### changeIndex
changeIndex(value: number): void
Switches to the specified tab.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | - | Index of a tab. The value starts from **0**. |
## Example
......
en/application-dev/reference/arkui-ts/ts-explicit-animation.md
浏览文件 @ 58b156c2
......@@ -4,12 +4,12 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
| Name | Description |
| Name | Description |
| -------- | -------- |
| animateTo(value: [AnimationOption](#animationoption-object), event: ()=&gt; void) : void | Provides a transition animation when the status changes due to the closure code.<br/>**event** specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function. |
| animateTo(value: [AnimationOptions](#animationoptions), event: ()=&gt; void) : void | Provides a transition animation when the status changes due to the closure code.<br/>**event** specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function. |
## AnimationOption Object
## AnimationOptions
- Attributes
| Name | Type | Default Value | Description |
......
en/application-dev/reference/arkui-ts/ts-media-components-video.md
浏览文件 @ 58b156c2
......@@ -15,9 +15,9 @@ The **&lt;Video&gt;** component does not support any child component.
## APIs
Video(value: VideoOption)
Video(value: VideoOptions)
- VideoOption attributes
- VideoOptions attributes
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| src | string | No | - | Path of the video source. |
......@@ -49,7 +49,7 @@ Video(value: VideoOption)
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onStart() =&gt; void | Triggered when the video is played. |
| onPause() =&gt; void | Triggered when the video playback is paused. |
......@@ -61,18 +61,74 @@ Video(value: VideoOption)
| onUpdate(event?: { time: number }) =&gt; void | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second. |
### VideoController
## VideoController
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> A **VideoController** object can control one or more videos.
A **VideoController** object can control one or more videos.
| Name | Description |
| -------- | -------- |
| start() : void | Starts playback. |
| pause() : void | Pauses playback. |
| stop() : void | Stops playback. |
| setCurrentTime(value: number) | Sets the video playback position. |
| setCurrentTime(value: number, seekMode: SeekMode)<sup>8+</sup> | Sets the video playback position with the specified seek mode. |
### Objects to Import
```
controller: VideoController = new VideoController();
```
### start
start(): void
Starts playback.
### pause
pause(): void
Pauses playback.
### stop
stop(): void
Stops playback.
### setCurrentTime
setCurrentTime(value: number)
Sets the video playback position.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | - | Video playback position. |
### requestFullscreen
requestFullscreen(value: boolean)
Requests full-screen mode.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | false | Whether the playback is in full-screen mode. |
### exitFullscreen
exitFullscreen()
Exits full-screen mode.
### setCurrentTime<sup>8+</sup>
setCurrentTime(value: number, seekMode: SeekMode)
Sets the video playback position with the specified seek mode.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | - | Video playback position. |
| seekMode | SeekMode | Yes | - | Seek mode. |
- SeekMode<sup>8+</sup>
| Name | Description |
......
en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
浏览文件 @ 58b156c2
......@@ -10,7 +10,7 @@ The **CustomDialogController** class is used to display a custom dialog box.
## APIs
CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, autoCancel?: boolean})
CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean})
- Parameters
......
en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
浏览文件 @ 58b156c2
......@@ -48,7 +48,6 @@ struct DatePickerDialogExample01 {
onAccept: (value: DatePickerResult) => {
this.selectedDate.setFullYear(value.year, value.month, value.day)
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
}
},
onCancel: () => {
console.info("DatePickerDialog:onCancel()")
......@@ -82,7 +81,6 @@ struct DatePickerDialogExample02 {
onAccept: (value: DatePickerResult) => {
this.selectedDate.setFullYear(value.year, value.month, value.day)
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
}
},
onCancel: () => {
console.info("DatePickerDialog:onCancel()")
......
en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
浏览文件 @ 58b156c2
......@@ -11,11 +11,11 @@ None
## TextPickerDialog.show
show(options: TextPickerDialogOption)
show(options: TextPickerDialogOptions)
Shows a text picker in the given settings.
- TextPickerDialogOption parameters
- TextPickerDialogOptions
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| range | string[] | Yes| - | Data selection range of the picker.|
......
en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
浏览文件 @ 58b156c2
......@@ -40,7 +40,6 @@ struct TimePickerDialogExample01 {
TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => {
this.selectedDate.setHours(value.hour, value.minute, value.second)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
......@@ -69,7 +68,6 @@ struct TimePickerDialogExample02 {
TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => {
this.selectedDate.setHours(value.hour, value.minute, value.second)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
浏览文件 @ 58b156c2
......@@ -2,7 +2,7 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
......@@ -13,7 +13,7 @@ None
## Attributes
| **Name** | **Type** | **Default Value** | **Description** |
| **Name** | **Type** | **Default Value** | **Description** |
| -------- | -------- | -------- | -------- |
| touchable | boolean | true | Whether the current component is touchable. |
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
浏览文件 @ 58b156c2
......@@ -12,7 +12,7 @@ None
## Attributes
| Name | Type | Default Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| hoverEffect | HoverEffect | HoverEffect.Auto | Hover effect of the component in hover state. |
......@@ -21,7 +21,7 @@ None
| -------- | -------- |
| Auto | Default hover effect. |
| Scale | Scale effect. |
| Board | Fade-in and fade-out effect. |
| Highlight | Fade-in and fade-out effect. |
| None | No effect. |
......@@ -43,17 +43,17 @@ struct HoverExample {
.position({ x: 40, y: 120 })
.hoverEffect(HoverEffect.Scale)
.onHover((isHover: boolean) => {
console.info('Scale' + isHover)
console.info('Scale isHover: ' + isHover)
this.isHoverVal = isHover
})
Text('Board').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 380 })
Column()
.width('80%').height(200).backgroundColor(Color.Gray)
.hoverEffect(HoverEffect.Board)
.hoverEffect(HoverEffect.Highlight)
.position({ x: 40, y: 420 })
.onHover((isHover: boolean) => {
console.info('HoverEffect.Board')
console.info('Highlight isHover: ' +isHover )
this.isHoverVal = isHover
})
}
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md
浏览文件 @ 58b156c2
......@@ -15,9 +15,9 @@ None
## Attributes
| Name | Type | Default Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| stateStyle | StateStyles | - | Sets the styles of a component for different states. |
| stateStyles | StateStyles | - | Styles of a component for different states. |
- StateStyles<sup>8+</sup>
| Name | Type | Mandatory | Default Value | Description |
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
浏览文件 @ 58b156c2
......@@ -13,12 +13,12 @@ None
## Attributes
| Name | Type | Default Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| bindPopup | show: boolean,<br/>popup: PopupOption \| CustomPopupOption | - | Settings of the popup bound to a component.<br/>**show**: whether to display the popup on the creation page by default. The default value is **false**.<br/>**popup**: parameters of the current popup. |
| bindPopup | show: boolean,<br/>popup: PopupOptions \| CustomPopupOptions | - | Settings of the popup bound to a component.<br/>**show**: whether to display the popup on the creation page by default. The default value is **false**.<br/>**popup**: parameters of the current popup. |
- PopupOption attributes
- PopupOptions attributes
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| message | string | Yes | - | Content of the popup message. |
......@@ -27,7 +27,7 @@ None
| secondaryButton | {<br/>value: string,<br/>action: () =&gt; void<br/>} | No | - | Second button.<br/>**value**: text of the secondary button in the popup.<br/>**action**: callback function for clicking the secondary button. |
| onStateChange | (isVisible: boolean) =&gt; void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
- CustomPopupOption<sup>8+</sup>
- CustomPopupOptions<sup>8+</sup>
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| builder | () =&gt; any | Yes | - | Builder of the tooltip content. |
......
en/application-dev/reference/arkui-ts/ts-universal-events-click.md
浏览文件 @ 58b156c2
......@@ -12,14 +12,14 @@ None
## Events
| Name | Bubble Supported | Description |
| Name | Bubble Supported | Description |
| -------- | -------- | -------- |
| onClick(callback: (event?: ClickEvent) =&gt; void) | No | Called when a click event occurs. For details about the event parameters, see [ClickEvent](#clickevent). |
### ClickEvent
| Name | Type | Description |
| Name | Type | Description |
| -------- | -------- | -------- |
| screenX | number | X coordinate of the click relative to the left edge of the screen. |
| screenY | number | Y coordinate of the click relative to the upper edge of the screen. |
......@@ -40,8 +40,8 @@ None
| -------- | -------- | -------- |
| width | number | Width of the target element, in vp. |
| height | number | Height of the target element, in vp. |
| pos | Position | Position of the upper left corner of the target element relative to that of the parent element. |
| globalPos | Position | Position of the upper left corner of the target element relative to that of the page. |
| position | Position | Position of the upper left corner of the target element relative to that of the parent element. |
| globalPosition | Position | Position of the upper left corner of the target element relative to that of the page. |
- Position<sup>8+</sup> attributes
......
en/application-dev/ui/Readme-EN.md 0 → 100644
浏览文件 @ 58b156c2
# UI Development
- [ArkUI Overview](arkui-overview.md)
- JavaScript-based Web-like Development Paradigm
- [Overview](ui-js-overview.md)
- Framework
- [File Organization](js-framework-file.md)
- ["js" Tag](js-framework-js-tag.md)
- [app.js](js-framework-js-file.md)
- Syntax
- [HML](js-framework-syntax-hml.md)
- [CSS](js-framework-syntax-css.md)
- [JavaScript](js-framework-syntax-js.md)
- [Lifecycle](js-framework-lifecycle.md)
- [Resource Limitations and Access](js-framework-resource-restriction.md)
- [Multi-Language Capability](js-framework-multiple-languages.md)
- Building the UI
- [Component Overview](ui-js-building-ui-component.md)
- Building the Layout
- [Layout Description](ui-js-building-ui-layout-intro.md)
- [Adding Title and Paragraph Text](ui-js-building-ui-layout-text.md)
- [Adding an Image](ui-js-building-ui-layout-image.md)
- [Adding a Comment](ui-js-building-ui-layout-comment.md)
- [Adding a Container](ui-js-building-ui-layout-external-container.md)
- [Adding Interactions](ui-js-building-ui-interactions.md)
- [Developing Animations](ui-js-building-ui-animation.md)
- [Defining Gesture Events](ui-js-building-ui-event.md)
- [Defining Page Routes](ui-js-building-ui-routes.md)
- Common Component Development Guidelines
- Container Components
- [List Development](ui-js-components-list.md)
- [Dialog Development](ui-js-components-dialog.md)
- [Form Development](ui-js-components-form.md)
- [Stepper Development](ui-js-components-stepper.md)
- [Tabs Development](ui-js-component-tabs.md)
- [Swiper Development](ui-js-components-swiper.md)
- Basic Components
- [Text Development](ui-js-components-text.md)
- [Input Development](ui-js-components-input.md)
- [Button Development](ui-js-components-button.md)
- [Picker Development](ui-js-components-picker.md)
- [Image Development](ui-js-components-images.md)
- [Image-animator Development](ui-js-components-image-animator.md)
- [Rating Development](ui-js-components-rating.md)
- [Slider Development](ui-js-components-slider.md)
- [Chart Development](ui-js-components-chart.md)
- [Switch Development](ui-js-components-switch.md)
- [Toolbar Development](ui-js-components-toolbar.md)
- [Menu Development](ui-js-components-menu.md)
- [Marquee Development](ui-js-components-marquee.md)
- [Qrcode Development](ui-js-components-qrcode.md)
- [Search Development](ui-js-components-search.md)
- Canvas Development
- [CanvasRenderingContext2D](ui-js-components-canvasrenderingcontext2d.md)
- [Path2D](ui-js-components-path2d.md)
- [OffscreenCanvas](ui-js-components-offscreencanvas.md)
- [Grid-container Development](ui-js-components-calendar.md)
- Svg
- [Basics](ui-js-components-svg-overview.md)
- [Graph Drawing](ui-js-components-svg-graphics.md)
- [Path Drawing](ui-js-components-svg-path.md)
- [Text Drawing](ui-js-components-svg-text.md)
- Animation Development Guidelines
- CSS Animation
- [Defining Attribute Style Animations](ui-js-animate-attribute-style.md)
- [Defining Animations with the transform Attribute](ui-js-animate-transform.md)
- [Defining Animations with the background-position Attribute](ui-js-animate-background-position-style.md)
- [Defining Animations for SVG Components](ui-js-animate-svg.md)
- JS Animation
- [Component Animation](ui-js-animate-component.md)
- Interpolator Animation
- [Animation Effect](ui-js-animate-dynamic-effects.md)
- [Animation Frame](ui-js-animate-frame.md)
- [Custom Components](ui-js-custom-components.md)
- TypeScript-based Declarative Development Paradigm
- [Overview](ui-ts-overview.md)
- Framework Overview
- File Organization
- [Directory Structure](ts-framework-directory.md)
- [Rules for Accessing Application Code Files](ts-framework-file-access-rules.md)
- ["js" Tag](ts-framework-js-tag.md)
- Resource Access
- [Accessing Application Resources](ts-application-resource-access.md)
- [Accessing System Resources](ts-system-resource-access.md)
- [Media Resource Types](ts-media-resource-type.md)
- [Pixel Units](ts-pixel-units.md)
- [Types](ts-types.md)
- Declarative Syntax
- [Overview](ts-syntax-intro.md)
- General UI Description Specifications
- [Basic Concepts](ts-general-ui-concepts.md)
- Declarative UI Description Specifications
- [Configuration Without Parameters](ts-parameterless-configuration.md)
- [Configuration with Mandatory Parameters](ts-configuration-with-mandatory-parameters.md)
- [Attribute Configuration](ts-attribution-configuration.md)
- [Event Configuration](ts-event-configuration.md)
- [Child Component Configuration](ts-child-component-configuration.md)
- Componentization
- [@Component](ts-component-based-component.md)
- [@Entry](ts-component-based-entry.md)
- [@Preview](ts-component-based-preview.md)
- [@Builder](ts-component-based-builder.md)
- [@Extend](ts-component-based-extend.md)
- [@CustomDialog](ts-component-based-customdialog.md)
- [@Styles](ts-component-based-styles.md)
- About UI State Management
- [Basic Concepts](ts-ui-state-mgmt-concepts.md)
- Managing Component States
- [@State](ts-component-states-state.md)
- [@Prop](ts-component-states-prop.md)
- [@Link](ts-component-states-link.md)
- Managing Application States
- [AppStorage](ts-application-states-appstorage.md)
- [PersistentStorage](ts-application-states-apis-persistentstorage.md)
- [Environment](ts-application-states-apis-environment.md)
- Managing Other States
- [@Observed and @ObjectLink](ts-other-states-observed-objectlink.md)
- [@Consume and @Provide](ts-other-states-consume-provide.md)
- [@Watch](ts-other-states-watch.md)
- About Rendering Control Syntax
- [if/else](ts-rending-control-syntax-if-else.md)
- [ForEach](ts-rending-control-syntax-foreach.md)
- [LazyForEach](ts-rending-control-syntax-lazyforeach.md)
- About @Component
- [build Function](ts-function-build.md)
- [Initialization of Custom Components' Member Variables](ts-custom-component-initialization.md)
- [Custom Component Lifecycle Callbacks](ts-custom-component-lifecycle-callbacks.md)
- [Component Creation and Re-initialization](ts-component-creation-re-initialization.md)
- [About Syntactic Sugar](ts-syntactic-sugar.md)
- Common Component Development Guidelines
- [Button](ui-ts-basic-components-button.md)
- [Web](ui-ts-components-web.md)
- Common Layout Development Guidelines
- [Flex Layout](ui-ts-layout-flex.md)
- [Grid Layout](ui-ts-layout-grid-container.md)
- [Media Query](ui-ts-layout-mediaquery.md)
- Experiencing the Declarative UI
- [Creating a Declarative UI Project](ui-ts-creating-project.md)
- [Getting to Know Components](ui-ts-components.md)
- [Creating a Simple Page](ui-ts-creating-simple-page.md)
- Defining Page Layout and Connection
- [Building a Food Data Model](ui-ts-building-data-model.md)
- [Building a Food Category List Layout](ui-ts-building-category-list-layout.md)
- [Building a Food Category Grid Layout](ui-ts-building-category-grid-layout.md)
- [Implementing Page Redirection and Data Transmission](ui-ts-page-redirection-data-transmission.md)
en/application-dev/ui/arkui-overview.md
浏览文件 @ 58b156c2
......@@ -13,42 +13,20 @@ ArkUI is a UI development framework that provides what you'll need to develop ap
- Page: the smallest unit for ArkUI application scheduling. You can design multiple pages for your application, manage their files on a per-page basis, and schedule page redirection through routing APIs, so as to implement decoupling of application functions.
## Key Capabilities
- Diverse components: In addition to a wide range of basic components, such as components for text display, image display, and keypress interaction, ArkUI provides media components that support video playback. Better yet, it also provides polymorphic components, which can adapt to styles of different devices.
- Flexible layouts: Creating a responsive UI in ArkUI is easy, with our carefully-designed layout approaches: Besides the classic flexible layout capability, you also have access to the list, grid, and atomic layouts that auto-adapt to screen resolutions.
## Key Features
- UI components: In addition to a wide range of basic components, such as components for text display, image display, and keypress interaction, ArkUI provides media components that support video playback. Better yet, it also provides polymorphic components, which can adapt to styles of different devices.
- Layout: Creating a responsive UI in ArkUI is easy, with our carefully-designed layout approaches: Besides the classic flexible layout capability, you also have access to the list, grid, and atomic layouts that auto-adapt to screen resolutions.
- Animation: Apart from animations embedded in components, ArkUI offers additional animation features: attribute animation, transition animation, and custom animation.
- UI interaction: ArkUI allows users to interact with your application UI properly, regardless of the system platform and input device. By default, the UI accepts input from touch gestures, remote controls, and mouse devices, with support for the event notification capability.
- Drawing: ArkUI offers advanced drawing capabilities that allow you to draw custom shapes with a range of editors, from images to fill colors and texts.
- Interaction: ArkUI allows users to interact with your application UI properly, regardless of the system platform and input device. By default, the UI accepts input from touch gestures, remote controls, and mouse devices, with support for the event notification capability.
- Platform API channel: ArkUI provides an API extension mechanism through which platform capabilities are encapsulated to produce JavaScript APIs in a unified style.
- Two development paradigms: ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
## Development Paradigms
ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
### Web-like Development Paradigm
The web-like development paradigm uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. It could be helpful if you are developing small- and medium-sized applications with simple UIs.
### Declarative Development Paradigm
The declarative development paradigm uses the TypeScript programming language and extends the declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and state management. The programming mode used is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. With type annotations in TypeScript, you can enforce type checking at compile time. If you are developing large applications, the declarative development paradigm is more applicable.
### Web-like Development Paradigm vs. Declarative Development Paradigm
| Development Paradigm | Language | UI Update Mode | Applicable To | Intended Audience |
| -------- | -------- | -------- | -------- | -------- |
| Web-like development paradigm | JavaScript | Data-driven | Applets and service widgets with simple UIs | Frontend web developers |
| Declarative development paradigm | Extended TypeScript (eTS) | Data-driven | Applications involving technological sophistication and teamwork | Mobile application and system application developers |
| Development Paradigm | Description | Applicable To | Intended Audience |
| -------- | -------- | -------- | -------- |
| Web-like development paradigm | Uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. | Small- and medium-sized applications and service widgets with simple UIs | Frontend web developers |
| Declarative development paradigm | Uses the TypeScript programming language and extends the declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and state management. The programming mode used is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. With type annotations in TypeScript, you can enforce type checking at compile time. | Applications involving technological sophistication and teamwork | Mobile application and system application developers |
### Framework Structure
......
en/application-dev/ui/ui-js-components-calendar.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-js-components-canvas.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-js-components-chart.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-js-components-marquee.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-js-components-menu.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-js-components-path2d.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-js-components-qrcode.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-js-components-rating.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-js-components-search.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-js-components-slider.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-js-components-svg-graphics.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-js-components-svg-overview.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-js-components-svg-path.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-js-components-svg-text.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-js-components-swiper.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-js-components-switch.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-js-components-toolbar.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-ts-basic-components-button.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-ts-layout-flex.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-ts-layout-grid-container.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
en/application-dev/ui/ui-ts-layout-mediaquery.md 0 → 100644
浏览文件 @ 58b156c2
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或