Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
提交 12bcd9ea 编写于 作者: H HelloCrease
浏览文件
操作

update en docs 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 a33ba33b
展开全部 隐藏空白更改
内联 并排
Showing with 7072 addition and 890 deletion
en/application-dev/device/sensor-guidelines.md
浏览文件 @ 12bcd9ea
...@@ -22,16 +22,16 @@ ...@@ -22,16 +22,16 @@
## Available APIs ## Available APIs
| Module | API | Description | | Module| API| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| ohos.sensor | sensor.on(sensorType,callback:AsyncCallback&lt;Response&gt;):void | Subscribes to data changes of a type of sensor. | | ohos.sensor | sensor.on(sensorType, callback:AsyncCallback&lt;Response&gt;): void | Subscribes to data changes of a type of sensor.|
| ohos.sensor | sensor.once(sensorType,callback:AsyncCallback&lt;Response&gt;):void | Subscribes to only one data change of a type of sensor. | | ohos.sensor | sensor.once(sensorType, callback:AsyncCallback&lt;Response&gt;): void | Subscribes to only one data change of a type of sensor.|
| ohos.sensor | sensor.off(sensorType,callback:AsyncCallback&lt;void&gt;):void | Unsubscribes from sensor data changes. | | ohos.sensor | sensor.off(sensorType, callback:AsyncCallback&lt;void&gt;): void | Unsubscribes from sensor data changes.|
## How to Develop ## How to Develop
1. To obtain data from a type of sensor, configure the request permissions in the **config.json** file. 1. To obtain data from a type of sensor, configure the request permissions in the **config.json** file.
``` ```
"reqPermissions":[ "reqPermissions":[
...@@ -67,67 +67,59 @@ ...@@ -67,67 +67,59 @@
"when":"inuse" "when":"inuse"
} }
}, },
{
"name":"ohos.permission.VIBRATE",
"reason"":"",
"usedScene":{
"ability": [".MainAbility"],
"when":"inuse"
}
},
] ]
``` ```
2. Subscribe to data changes of a type of sensor. 2. Subscribe to data changes of a type of sensor.
``` ```
import sensor from "@ohos.sensor" import sensor from "@ohos.sensor"
sensor.on(type:sensorType,function(error,data){ sensor.on(sensor.sensorType.SENSOR_TYPE_ACCELEROMETER,function(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;
};
console.info("Subscription succeeded. data = "+ data);// The call is successful, and the obtained sensor data is printed. console.info("Subscription succeeded. data = "+ data);// The call is successful, and the obtained sensor data is printed.
} }
); );
``` ```
The following figure shows the successful call result when **SensorType** is **SENSOR_TYPE_ID_ACCELEROMETER**. The following figure shows the successful call result when **SensorType** is **SENSOR_TYPE_ID_ACCELEROMETER**.
![en-us_image_0000001241693881](figures/en-us_image_0000001241693881.png) ![en-us_image_0000001241693881](figures/en-us_image_0000001241693881.png)
3. Unsubscribe from sensor data changes. 3. Unsubscribe from sensor data changes.
``` ```
import sensor from "@ohos.sensor" import sensor from "@ohos.sensor"
sensor.off(type:sensorType,function(error) { sensor.off(sensor.sensorType.SENSOR_TYPE_ACCELEROMETER,function() {
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;
};
console.info("Succeeded in unsubscribing from acceleration sensor data.");// The unsubscription is successful, and the result is printed. console.info("Succeeded in unsubscribing from acceleration sensor data.");// The unsubscription is successful, and the result is printed.
} }
); );
``` ```
The following figure shows the successful call result when **SensorType** is **SENSOR_TYPE_ID_ACCELEROMETER**. The following figure shows the successful call result when **SensorType** is **SENSOR_TYPE_ID_ACCELEROMETER**.
![en-us_image_0000001196654004](figures/en-us_image_0000001196654004.png) ![en-us_image_0000001196654004](figures/en-us_image_0000001196654004.png)
4. Subscribe to only one data change of a type of sensor. 4. Subscribe to only one data change of a type of sensor.
``` ```
import sensor from "@ohos.sensor" import sensor from "@ohos.sensor"
sensor.once(tyep:sensorType,function(error, data) { sensor.once(sensor.sensorType.SENSOR_TYPE_ACCELEROMETER,function(data) {
if (error) {// The call fails, and error.code and error.message are printed. console.info("Data obtained successfully. data=" + data);// The call is successful, and the obtained sensor data is 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.
} }
); );
``` ```
The following figure shows the successful call result when **SensorType** is **SENSOR_TYPE_ID_ACCELEROMETER**. 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) ![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
浏览文件 @ 12bcd9ea
...@@ -8,20 +8,20 @@ You can set different vibration effects as needed, for example, customizing vibr ...@@ -8,20 +8,20 @@ You can set different vibration effects as needed, for example, customizing vibr
## Available APIs ## Available APIs
| Module | API | Description | | Module| API| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| ohos.vibrator | vibrate(duration:&nbsp;number):&nbsp;Promise&lt;void&gt; | Triggers&nbsp;vibration&nbsp;with&nbsp;the&nbsp;specified&nbsp;duration.&nbsp;This&nbsp;API&nbsp;uses&nbsp;a&nbsp;promise&nbsp;to&nbsp;return&nbsp;the&nbsp;result. | | ohos.vibrator | vibrate(duration:&nbsp;number):&nbsp;Promise&lt;void&gt; | Triggers vibration with the specified duration. This API uses a promise to return the result.|
| ohos.vibrator | vibrate(duration:&nbsp;number,&nbsp;callback?:&nbsp;AsyncCallback&lt;void&gt;):&nbsp;void | Triggers&nbsp;vibration&nbsp;with&nbsp;the&nbsp;specified&nbsp;duration.&nbsp;This&nbsp;API&nbsp;uses&nbsp;a&nbsp;callback&nbsp;to&nbsp;return&nbsp;the&nbsp;result. | | ohos.vibrator | vibrate(duration:&nbsp;number,&nbsp;callback?:&nbsp;AsyncCallback&lt;void&gt;):&nbsp;void | Triggers vibration with the specified duration. This API uses a callback to return the result.|
| ohos.vibrator | vibrate(effectId:&nbsp;EffectId):&nbsp;Promise&lt;void&gt; | Triggers&nbsp;vibration&nbsp;with&nbsp;the&nbsp;specified&nbsp;effect.&nbsp;This&nbsp;API&nbsp;uses&nbsp;a&nbsp;promise&nbsp;to&nbsp;return&nbsp;the&nbsp;result. | | ohos.vibrator | vibrate(effectId:&nbsp;EffectId):&nbsp;Promise&lt;void&gt; | Triggers vibration with the specified effect. This API uses a promise to return the result.|
| ohos.vibrator | vibrate(effectId:&nbsp;EffectId,&nbsp;callback?:&nbsp;AsyncCallback&lt;void&gt;):&nbsp;void | Triggers&nbsp;vibration&nbsp;with&nbsp;the&nbsp;specified&nbsp;effect.&nbsp;This&nbsp;API&nbsp;uses&nbsp;a&nbsp;callback&nbsp;to&nbsp;return&nbsp;the&nbsp;result. | | ohos.vibrator | vibrate(effectId:&nbsp;EffectId,&nbsp;callback?:&nbsp;AsyncCallback&lt;void&gt;):&nbsp;void | Triggers vibration with the specified effect. This API uses a callback to return the result.|
| ohos.vibrator | stop(stopMode:&nbsp;VibratorStopMode):&nbsp;Promise&lt;void&gt; | Stops&nbsp;vibration.&nbsp;This&nbsp;API&nbsp;uses&nbsp;a&nbsp;promise&nbsp;to&nbsp;return&nbsp;the&nbsp;result. | | ohos.vibrator | stop(stopMode:&nbsp;VibratorStopMode):&nbsp;Promise&lt;void&gt; | Stops vibration. This API uses a promise to return the result.|
| ohos.vibrator | stop(stopMode:&nbsp;VibratorStopMode,&nbsp;callback?:&nbsp;AsyncCallback&lt;void&gt;):&nbsp;void | Stops&nbsp;vibration.&nbsp;This&nbsp;API&nbsp;uses&nbsp;a&nbsp;callback&nbsp;to&nbsp;return&nbsp;the&nbsp;result. | | ohos.vibrator | stop(stopMode:&nbsp;VibratorStopMode,&nbsp;callback?:&nbsp;AsyncCallback&lt;void&gt;):&nbsp;void | Stops vibration. This API uses a callback to return the result.|
## How to Develop ## How to Develop
1. Declare the permissions required for controlling vibrators on the hardware device in the **config.json** file. 1. Declare the permissions required for controlling vibrators on the hardware device in the **config.json** file.
``` ```
"reqPermissions":[ "reqPermissions":[
{ {
...@@ -58,26 +58,26 @@ You can set different vibration effects as needed, for example, customizing vibr ...@@ -58,26 +58,26 @@ You can set different vibration effects as needed, for example, customizing vibr
``` ```
2. Trigger the device to vibrate. 2. Trigger the device to vibrate.
``` ```
import vibrator from "@ohos.vibrator" import vibrator from "@ohos.vibrator"
vibrator.vibrate(duration: number).then((error)=>{ vibrator.vibrate(1000).then((error)=>{
if(error){// The call fails, and error.code and error.message are printed. 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); Console.log("Promise return failed.error.code"+error.code+"error.message"+error.message);
}else{// The call succeeded. The device starts to vibrate. }else{// The call is successful, and the device starts to vibrate.
console.log("Promise returned to indicate a successful vibration.") Console.log("Promise returned to indicate a successful vibration.")
}; };
}) })
``` ```
3. Stop the vibration. 3. Stop the vibration.
``` ```
import vibrator from "@ohos.vibrator" import vibrator from "@ohos.vibrator"
vibrator.stop(stopMode: VibratorStopMode).then((error)=>{ vibrator.stop(vibrator.VibratorStopMode.VIBRATOR_STOP_MODE_PRESET).then((error)=>{
if(error){// The call fails, and error.code and error.message are printed. 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); Console.log("Promise return failed.error.code"+error.code+"error.message"+error.message);
}else{// The call succeeded. The device stops vibration. }else{// The call is successful, and the device stops vibration.
Console.log("Promise returned to indicate a successful stop."); Console.log("Promise returned to indicate a successful stop.");
}; };
}) })
......
en/application-dev/device/vibrator-overview.md
浏览文件 @ 12bcd9ea
...@@ -6,10 +6,11 @@ The vibrator service opens up the latest capabilities of the vibrator hardware t ...@@ -6,10 +6,11 @@ The vibrator service opens up the latest capabilities of the vibrator hardware t
## Working Principles ## 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 **Figure 1** Vibrator in Misc devices
![en-us_image_0000001180249428](figures/en-us_image_0000001180249428.png)
![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. - 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 ...@@ -17,9 +18,9 @@ The vibrator is a Misc device that consists of four modules: Vibrator API, Vibra
- Vibrator Service: manages services of vibrators. - Vibrator Service: manages services of vibrators.
- HD_IDL: adapts to different devices. - HDF layer: adapts to different devices.
## Constraints ## 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
浏览文件 @ 12bcd9ea
...@@ -3,6 +3,9 @@ The **\<web>** component displays web page content. ...@@ -3,6 +3,9 @@ The **\<web>** component displays web page content.
>![](../../public_sys-resources/icon-note.gif) **NOTE** >![](../../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. > 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 ## Constraints
The **\<web>** component does not follow the transition animation. A page allows only one **\<web>** component. 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. ...@@ -44,7 +47,7 @@ The following methods are supported.
``` ```
``` ```
<!-- xxx.js --> // xxx.js
export default { export default {
reloadWeb() { reloadWeb() {
this.$element('web').reload() this.$element('web').reload()
......
en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
浏览文件 @ 12bcd9ea
...@@ -48,7 +48,7 @@ Creates a date picker in the given date range. ...@@ -48,7 +48,7 @@ Creates a date picker in the given date range.
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| year | number | Year of the selected date.| | 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.| | day | number | Day of the selected date.|
......
en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
浏览文件 @ 12bcd9ea
...@@ -29,11 +29,11 @@ Creates a component that can automatically display the navigation bar, title, an ...@@ -29,11 +29,11 @@ Creates a component that can automatically display the navigation bar, title, an
| Name | Type | Default Value | Description | | 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. | | 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. | | 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. | | 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. | | hideTitleBar | boolean | false | Whether to hide the title bar. |
| hideBackButton | boolean | false | Whether to hide the back button. | | 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 ...@@ -67,7 +67,7 @@ Creates a component that can automatically display the navigation bar, title, an
| Name | Description | | 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 ## Example
...@@ -140,7 +140,7 @@ struct NavigationExample { ...@@ -140,7 +140,7 @@ struct NavigationExample {
.titleMode(NavigationTitleMode.Free) .titleMode(NavigationTitleMode.Free)
.hideTitleBar(false) .hideTitleBar(false)
.hideBackButton(false) .hideBackButton(false)
.onTitleModeChanged((titleModel: NavigationTitleMode) => { .onTitleModeChange((titleModel: NavigationTitleMode) => {
console.log('titleMode') console.log('titleMode')
}) })
.toolBar({ items: [ .toolBar({ items: [
......
en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md
浏览文件 @ 12bcd9ea
...@@ -22,7 +22,7 @@ RichText\(content:string\) ...@@ -22,7 +22,7 @@ RichText\(content:string\)
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| content | string | Yes| - | String in HTML format.| | content | string | Yes| - | String in HTML format.|
## Events ## Events
...@@ -41,8 +41,8 @@ RichText\(content:string\) ...@@ -41,8 +41,8 @@ RichText\(content:string\)
| \<br/> | Inserts a newline character.| \<p>This is a paragraph\<br/>This is a new paragraph\</p>| | \<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> | | \<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> | | \<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> | | \<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>This is an underlined paragraph\</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>\<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>\</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> | | 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> | | \<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
浏览文件 @ 12bcd9ea
...@@ -20,9 +20,9 @@ This component can contain a single child component. ...@@ -20,9 +20,9 @@ This component can contain a single child component.
## APIs ## APIs
ScrollBar(value: ScrollBarOption) ScrollBar(value: ScrollBarOptions)
- ScrollBarOption parameters - ScrollBarOptions parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| scroller | [Scroller](ts-container-scroll.md#scroller) | Yes | - | Scroller, which can be bound to and control scrollable components. | | 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
浏览文件 @ 12bcd9ea
...@@ -31,7 +31,7 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll ...@@ -31,7 +31,7 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll
| Name| Type| Default Value| Description| | 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.| | 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.| | placeholderFont | [Font](../../ui/ts-types.md) | - | Placeholder text style.|
| textFont | [Font](../../ui/ts-types.md) | - | Text font for the search text box.| | textFont | [Font](../../ui/ts-types.md) | - | Text font for the search text box.|
......
en/application-dev/reference/arkui-ts/ts-basic-components-select.md
浏览文件 @ 12bcd9ea
...@@ -20,8 +20,8 @@ Select(options: Array<SelectOption>) ...@@ -20,8 +20,8 @@ Select(options: Array<SelectOption>)
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
| ------ | ----------------------------------------------- | ---- | ------ | -------------- | | ------ | ----------------------------------------------- | ---- | ------ | -------------- |
| value | [ResourceStr](../../ui/ts-types.md#ResourceStr) | Yes| - | Value 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#ResourceStr) | No| - | Icon 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 ## Attributes
...@@ -29,20 +29,20 @@ Select(options: Array<SelectOption>) ...@@ -29,20 +29,20 @@ 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**.| | 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.| | value | string | - | Text of the drop-down button.|
| font | [Font](../../ui/ts-types.md) | - | Text font 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.| | fontColor | [ResourceColor](../../ui/ts-types.md) | - | 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.| | 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.| | 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.| | selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md) | - | 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.| | 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.| | 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 ## Events
| Name| Description| | 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 ## Example
...@@ -61,7 +61,7 @@ struct SliderExample { ...@@ -61,7 +61,7 @@ struct SliderExample {
.font({size: 30, weight:400, family: 'serif', style: FontStyle.Normal }) .font({size: 30, weight:400, family: 'serif', style: FontStyle.Normal })
.selectedOptionFont({size: 40, weight: 500, 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 }) .optionFont({size: 30, weight: 400, family: 'serif', style: FontStyle.Normal })
.onSelected((index:number)=>{ .onSelecte((index:number)=>{
console.info("Select:" + index) console.info("Select:" + index)
}) })
} }
......
en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
浏览文件 @ 12bcd9ea
...@@ -31,7 +31,7 @@ TextArea(value?:{placeholder?: string controller?: TextAreaController}) ...@@ -31,7 +31,7 @@ TextArea(value?:{placeholder?: string controller?: TextAreaController})
## Attributes ## 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 | | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
...@@ -49,15 +49,6 @@ In addition to [universal attributes](ts-universal-attributes.md), the following ...@@ -49,15 +49,6 @@ In addition to [universal attributes](ts-universal-attributes.md), the following
| End | Align the tail horizontally. | | 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 ## Events
| Name | Description | | Name | Description |
...@@ -67,6 +58,28 @@ Defines the controller for controlling the **&lt;TextArea&gt;** component. ...@@ -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. | | 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. | | 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 ## Example
......
en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md
浏览文件 @ 12bcd9ea
...@@ -18,32 +18,46 @@ TextClock(options?: {timeZoneOffset?: number, contorller?: TextClockController}) ...@@ -18,32 +18,46 @@ TextClock(options?: {timeZoneOffset?: number, contorller?: TextClockController})
- Parameters - 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.| | contorller | [TextClockContorller](#TextClockController) | No| null | Binds a controller to control the status of the **<TextClock\>** component.|
## Attributes ## 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>| | 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 ## TextClockController
Controller of the **<TextClock\>** component, which can be bound to the component for status control. Controller of the **<TextClock\>** component, which can be bound to the component for status control.
| API| Description| ### Objects to Import
| -------------------------------------------- | ------------------------------------------------------------ |
| start() | Starts the **<TextClock\>** component.|
| stop() | Stops the **<TextClock\>** component.|
```
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 ## Example
......
en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
浏览文件 @ 12bcd9ea
...@@ -31,7 +31,7 @@ TextInput(value?:{placeholder?: string controller?: TextInputController}) ...@@ -31,7 +31,7 @@ TextInput(value?:{placeholder?: string controller?: TextInputController})
## Attributes ## 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 | | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
...@@ -96,7 +96,8 @@ Sets the cursor in a specified position. ...@@ -96,7 +96,8 @@ Sets the cursor in a specified position.
| -------- | -------- | | -------- | -------- |
| onChange(value: string) =&gt; void | Triggered when the input changes. | | 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. | | 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. | | 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. | | 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. | | 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
浏览文件 @ 12bcd9ea
...@@ -23,36 +23,54 @@ None ...@@ -23,36 +23,54 @@ None
TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTimerController }) TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTimerController })
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| isCountDown | boolean | No | false | Whether to count down. | | isCountDown | boolean | No | false | Whether to count down. |
| 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. | | 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. | | controller | [TextTimerController](#texttimercontroller) | No | null | **&lt;TextTimer&gt;** controller. |
## Attributes
### TextTimerController | 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**. |
Defines the controller for controlling the **&lt;TextTimer&gt;** component.
| Name | Description | ## Events
| Name | Description |
| -------- | -------- | | -------- | -------- |
| start() | Starts the timer. | | 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. |
| pause() | Pauses the timer. |
| reset() | Resets the timer. |
## Attributes ## TextTimerController
| Name | Type | Default Value | Description | Defines the controller for controlling the **&lt;TextTimer&gt;** component.
| -------- | -------- | -------- | -------- |
| format | string | 'hh:mm:ss.ms' | Custom format. The value must contain at least one of the following keywords: **hh**, **mm**, **ss**, and **ms**. |
### Objects to Import
## Events ```
textTimerController: TextTimerController = new TextTimerController()
| 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. | ### start
start()
Starts the timer.
### pause
pause()
Pauses the timer.
### reset
reset()
Resets the timer.
## Example ## Example
...@@ -62,12 +80,12 @@ Defines the controller for controlling the **&lt;TextTimer&gt;** component. ...@@ -62,12 +80,12 @@ Defines the controller for controlling the **&lt;TextTimer&gt;** component.
@Entry @Entry
@Component @Component
struct TextTimerExample { struct TextTimerExample {
myTimerController: TextTimerController = new TextTimerController() textTimerController: TextTimerController = new TextTimerController()
@State format: string = 'hh:mm:ss.ms' @State format: string = 'hh:mm:ss.ms'
build() { build() {
Column() { Column() {
TextTimer({controller: this.myTimerController}) TextTimer({controller: this.textTimerController})
.format(this.format) .format(this.format)
.fontColor(Color.Black) .fontColor(Color.Black)
.fontSize(this.textSize) .fontSize(this.textSize)
...@@ -76,13 +94,13 @@ struct TextTimerExample { ...@@ -76,13 +94,13 @@ struct TextTimerExample {
}) })
Row() { Row() {
Button("start").onClick(() => { Button("start").onClick(() => {
this.myTimerController.start(); this.textTimerController.start();
}); });
Button("pause").onClick(() => { Button("pause").onClick(() => {
this.myTimerController.pause(); this.textTimerController.pause();
}); });
Button("reset").onClick(() => { Button("reset").onClick(() => {
this.myTimerController.reset(); this.textTimerController.reset();
}); });
} }
} }
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
浏览文件 @ 12bcd9ea
...@@ -15,25 +15,25 @@ None ...@@ -15,25 +15,25 @@ None
LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: number }) LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: number })
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| fingers | number | No | 1 | Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10. | | fingers | number | No | 1 | Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10. |
| repeat | boolean | No | false | Whether to continuously trigger the event callback. | | repeat | boolean | No | false | Whether to continuously trigger the event callback. |
| duration | number | No | 500 | Minimum hold-down time, in ms. | | duration | number | No | 500 | Minimum hold-down time, in ms. |
## Events ## Events
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| onAction((event?: LongPressGestureEvent) =&gt; void) | Callback invoked when a long press gesture is recognized. | | onAction((event?: GestureEvent) =&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. | | 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. | | 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 | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| repeat | boolean | Whether the event is repeated. | | repeat | boolean | Whether the event is repeated. |
## Example ## Example
...@@ -53,7 +53,7 @@ struct LongPressGestureExample { ...@@ -53,7 +53,7 @@ struct LongPressGestureExample {
.gesture( .gesture(
LongPressGesture({ repeat: true }) LongPressGesture({ repeat: true })
// Repeatedly triggered when the long press gesture exists. // Repeatedly triggered when the long press gesture exists.
.onAction((event: LongPressGestureEvent) => { .onAction((event: GestureEvent) => {
if (event.repeat) { this.count++ } if (event.repeat) { this.count++ }
}) })
// Triggered when the long press gesture ends. // Triggered when the long press gesture ends.
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ 12bcd9ea
...@@ -12,59 +12,59 @@ None ...@@ -12,59 +12,59 @@ None
## APIs ## APIs
PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOption](#pangestureoption)) PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOption](#pangestureoptions))
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| fingers | number | No | 1 | Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10. | | fingers | number | No | 1 | Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10. |
| direction | PanDirection | No | All | Slide direction. The enumerated value supports the AND (&amp;) and OR (\|) operations. | | direction | PanDirection | No | All | Slide direction. The enumerated value supports the AND (&amp;) and OR (\|) operations. |
| distance | number | No | 5.0 | Minimum slide recognition distance, in vp. | | distance | number | No | 5.0 | Minimum slide recognition distance, in vp. |
- PanDirection enums - PanDirection enums
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| All | All directions. | | All | All directions. |
| Horizontal | Horizontal slide. | | Horizontal | Horizontal slide. |
| Vertical | Vertical slide. | | Vertical | Vertical slide. |
| Left | Slide to the left. | | Left | Slide to the left. |
| Right | Slide to the right. | | Right | Slide to the right. |
| Up | Slide up. | | Up | Slide up. |
| Down | Slide down. | | Down | Slide down. |
| None | Slide disabled. | | 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 - Parameters
For details, see **PanGesture**. For details, see **PanGesture**.
- APIs - APIs
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| setDirection(value: PanDirection) | Sets the direction. | | setDirection(value: PanDirection) | Sets the direction. |
| setDistance(value: number) | Sets the distance. | | setDistance(value: number) | Sets the distance. |
| setFingers(value: number) | Sets the number of fingers. | | setFingers(value: number) | Sets the number of fingers. |
## Events ## Events
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| onActionStart(callback: (event?: PanGestureEvent) =&gt; void) | Callback for the pan gestures reorganization event. | | onActionStart(callback: (event?: GestureEvent) =&gt; void) | Callback for the pan gestures reorganization event. |
| onActionUpdate(callback: (event?: PanGestureEvent) =&gt; void) | Callback invoked when a pan gesture is recognized. | | onActionUpdate(callback: (event?: GestureEvent) =&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. | | 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. | | 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 | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| offsetX | number | Offset of the gesture event, in vp. | | offsetX | number | Offset of the gesture event, in vp. |
| offsetY | number | Offset of the gesture event, in vp. | | offsetY | number | Offset of the gesture event, in vp. |
## Example ## Example
...@@ -85,10 +85,10 @@ struct PanGestureExample { ...@@ -85,10 +85,10 @@ struct PanGestureExample {
.translate({ x: this.offsetX, y: this.offsetY, z: 5 }) .translate({ x: this.offsetX, y: this.offsetY, z: 5 })
.gesture( .gesture(
PanGesture({}) PanGesture({})
.onActionStart((event: PanGestureEvent) => { .onActionStart((event: GestureEvent) => {
console.info('Pan start') console.info('Pan start')
}) })
.onActionUpdate((event: PanGestureEvent) => { .onActionUpdate((event: GestureEvent) => {
this.offsetX = event.offsetX this.offsetX = event.offsetX
this.offsetY = event.offsetY this.offsetY = event.offsetY
}) })
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
浏览文件 @ 12bcd9ea
...@@ -15,27 +15,27 @@ None ...@@ -15,27 +15,27 @@ None
PinchGesture(options?: { fingers?: number, distance?: number }) PinchGesture(options?: { fingers?: number, distance?: number })
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| fingers | number | No | 2 | Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5. | | fingers | number | No | 2 | Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5. |
| distance | number | No | 3.0 | Minimum recognition distance, in vp. | | distance | number | No | 3.0 | Minimum recognition distance, in vp. |
## Events ## Events
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| onActionStart((event?: PinchGestureEvent) =&gt; void) | Callback invoked when a pinch gesture is recognized. | | onActionStart((event?: GestureEvent) =&gt; void) | Callback invoked when a pinch gesture is recognized. |
| onActionUpdate((event?: PinchGestureEvent) =&gt; void) | Callback invoked during the movement of a pinch gesture. | | onActionUpdate((event?: GestureEvent) =&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. | | 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. | | 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 | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| scale | number | Scale ratio. This attribute is used for the pinch gesture. | | scale | number | Scale ratio. This attribute is used for the pinch gesture. |
| pinchCenterX | number | X-coordinate of the center of the pinch gesture, in px. | | pinchCenterX | number | X-coordinate of the center of the pinch gesture, in px. |
| pinchCenterY | number | Y-coordinate of the center of the pinch gesture, in px. | | pinchCenterY | number | Y-coordinate of the center of the pinch gesture, in px. |
## Example ## Example
...@@ -55,10 +55,10 @@ struct PinchGestureExample { ...@@ -55,10 +55,10 @@ struct PinchGestureExample {
.scale({ x: this.scale, y: this.scale, z: this.scale }) .scale({ x: this.scale, y: this.scale, z: this.scale })
.gesture( .gesture(
PinchGesture() PinchGesture()
.onActionStart((event: PinchGestureEvent) => { .onActionStart((event: GestureEvent) => {
console.info('Pinch start') console.info('Pinch start')
}) })
.onActionUpdate((event: PinchGestureEvent) => { .onActionUpdate((event: GestureEvent) => {
this.scale = event.scale this.scale = event.scale
}) })
.onActionEnd(() => { .onActionEnd(() => {
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
浏览文件 @ 12bcd9ea
...@@ -15,25 +15,25 @@ None ...@@ -15,25 +15,25 @@ None
RotationGesture(options?: { fingers?: number, angle?: number }) RotationGesture(options?: { fingers?: number, angle?: number })
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| fingers | number | No | 2 | Minimum number of fingers to trigger a rotation. The value ranges from 2 to 5. | | fingers | number | No | 2 | Minimum number of fingers to trigger a rotation. The value ranges from 2 to 5. |
| angle | number | No | 1.0 | Minimum degree that can trigger the rotation gesture. | | angle | number | No | 1.0 | Minimum degree that can trigger the rotation gesture. |
## Events ## Events
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| onActionStart((event?: RotationGestureEvent) =&gt; void) | Callback invoked when a rotation gesture is recognized. | | onActionStart((event?: GestureEvent) =&gt; void) | Callback invoked when a rotation gesture is recognized. |
| onActionUpdate((event?: RotationGestureEvent) =&gt; void) | Callback invoked during the movement of the rotation gesture. | | onActionUpdate((event?: GestureEvent) =&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. | | 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. | | 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 | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| angle | number | Rotation angle. | | angle | number | Rotation angle. |
## Example ## Example
...@@ -53,10 +53,10 @@ struct RotationGestureExample { ...@@ -53,10 +53,10 @@ struct RotationGestureExample {
.margin(80).rotate({ x:1, y:2, z:3, angle: this.angle }) .margin(80).rotate({ x:1, y:2, z:3, angle: this.angle })
.gesture( .gesture(
RotationGesture() RotationGesture()
.onActionStart((event: RotationGestureEvent) => { .onActionStart((event: GestureEvent) => {
console.log('Rotation start') console.log('Rotation start')
}) })
.onActionUpdate((event: RotationGestureEvent) => { .onActionUpdate((event: GestureEvent) => {
this.angle = event.angle this.angle = event.angle
}) })
.onActionEnd(() => { .onActionEnd(() => {
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
浏览文件 @ 12bcd9ea
...@@ -15,33 +15,34 @@ None ...@@ -15,33 +15,34 @@ None
SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number }) SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number })
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| fingers | number | No | 1 | Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10. | | fingers | number | No | 1 | Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10. |
| direction | SwipeDirection | No | SwipeDirection.All | Swipe direction. | | direction | SwipeDirection | No | SwipeDirection.All | Swipe direction. |
| speed | number | No | 100 | Minimum speed of the swipe gesture (100 vp/s). | | speed | number | No | 100 | Minimum speed of the swipe gesture (100 vp/s). |
- SwipeDirection enums - SwipeDirection enums
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| All | All directions. | | All | All directions. |
| Horizontal | Horizontal direction. | | Horizontal | Horizontal direction. |
| Vertical | Vertical direction. | | Vertical | Vertical direction. |
## Events ## 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 | | 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. | | speed | number | Speed of the swipe gesture. |
![en-us_image_0000001231374559](figures/en-us_image_0000001231374661.png)
## Example ## Example
...@@ -64,7 +65,7 @@ struct SwipeGestureExample { ...@@ -64,7 +65,7 @@ struct SwipeGestureExample {
.rotate({x: 0, y: 0, z: 1, angle: this.rotateAngle}) .rotate({x: 0, y: 0, z: 1, angle: this.rotateAngle})
.gesture( .gesture(
SwipeGesture({fingers: 1, direction:SwipeDirection.Vertical}) SwipeGesture({fingers: 1, direction:SwipeDirection.Vertical})
.onAction((event: SwipeGestureEvent) => { .onAction((event: GestureEvent) => {
this.speed = event.speed this.speed = event.speed
this.rotateAngle = event.angle this.rotateAngle = event.angle
}) })
...@@ -73,4 +74,4 @@ struct SwipeGestureExample { ...@@ -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
浏览文件 @ 12bcd9ea
...@@ -30,16 +30,16 @@ Canvas(context: CanvasRenderingContext2D) ...@@ -30,16 +30,16 @@ Canvas(context: CanvasRenderingContext2D)
## Attributes ## Attributes
[Universal attributes](ts-universal-attributes-size.md) are supported. [Universal attributes]( ts-universal-attributes-index.md) are supported.
## Events ## 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 . | | onReady(callback: () =&gt; void) | None | Triggered when . |
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
浏览文件 @ 12bcd9ea
...@@ -15,12 +15,12 @@ addPath(path: Object): void ...@@ -15,12 +15,12 @@ addPath(path: Object): void
Adds a path to this path. Adds a path to this path.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| path | Object | Yes | null | Path to be added to this path. | | path | Object | Yes | null | Path to be added to this path. |
- Example - Example
``` ```
@Entry @Entry
@Component @Component
...@@ -58,7 +58,7 @@ closePath(): void ...@@ -58,7 +58,7 @@ closePath(): void
Moves the current point of the path back to the start point of the path, and draws a straight line between the current point and the start point. If the shape has already been closed or has only one point, this method does nothing. Moves the current point of the path back to the start point of the path, and draws a straight line between the current point and the start point. If the shape has already been closed or has only one point, this method does nothing.
- Example - Example
``` ```
@Entry @Entry
@Component @Component
...@@ -97,13 +97,13 @@ moveTo(x: number, y: number): void ...@@ -97,13 +97,13 @@ moveTo(x: number, y: number): void
Moves the current coordinate point of the path to the target point, without drawing a line during the movement. Moves the current coordinate point of the path to the target point, without drawing a line during the movement.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| x | number | Yes | 0 | X-coordinate of the target point. | | x | number | Yes | 0 | X-coordinate of the target point. |
| y | number | Yes | 0 | Y-coordinate of the target point. | | y | number | Yes | 0 | Y-coordinate of the target point. |
- Example - Example
``` ```
@Entry @Entry
@Component @Component
...@@ -142,13 +142,13 @@ lineTo(x: number, y: number): void ...@@ -142,13 +142,13 @@ lineTo(x: number, y: number): void
Draws a straight line from the current point to the target point. Draws a straight line from the current point to the target point.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| x | number | Yes | 0 | X-coordinate of the target point. | | x | number | Yes | 0 | X-coordinate of the target point. |
| y | number | Yes | 0 | Y-coordinate of the target point. | | y | number | Yes | 0 | Y-coordinate of the target point. |
- Example - Example
``` ```
@Entry @Entry
@Component @Component
...@@ -188,17 +188,17 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -188,17 +188,17 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
Draws a cubic bezier curve on the canvas. Draws a cubic bezier curve on the canvas.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve. | | cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve. |
| cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve. | | cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve. |
| cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve. | | cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve. |
| cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve. | | cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve. |
| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. | | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. | | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
- Example - Example
``` ```
@Entry @Entry
@Component @Component
...@@ -234,15 +234,15 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void ...@@ -234,15 +234,15 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
Draws a quadratic curve on the canvas. Draws a quadratic curve on the canvas.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter. | | cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter. |
| cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter. | | cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter. |
| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. | | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. | | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
- Example - Example
``` ```
@Entry @Entry
@Component @Component
...@@ -274,22 +274,22 @@ Draws a quadratic curve on the canvas. ...@@ -274,22 +274,22 @@ Draws a quadratic curve on the canvas.
## arc ## 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. Draws an arc on the canvas.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| x | number | Yes | 0 | X-coordinate of the center point of the arc. | | x | number | Yes | 0 | X-coordinate of the center point of the arc. |
| y | number | Yes | 0 | Y-coordinate of the center point of the arc. | | y | number | Yes | 0 | Y-coordinate of the center point of the arc. |
| radius | number | Yes | 0 | Radius of the arc. | | radius | number | Yes | 0 | Radius of the arc. |
| startAngle | number | Yes | 0 | Start radian of the arc. | | startAngle | number | Yes | 0 | Start radian of the arc. |
| endAngle | number | Yes | 0 | End radian of the arc. | | endAngle | number | Yes | 0 | End radian of the arc. |
| anticlockwise | boolean | No | false | Whether to draw the arc counterclockwise. | | anticlockwise | boolean | No | false | Whether to draw the arc counterclockwise. |
- Example - Example
``` ```
@Entry @Entry
@Component @Component
...@@ -324,16 +324,16 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -324,16 +324,16 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
Draws an arc based on the radius and points on the arc. Draws an arc based on the radius and points on the arc.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| x1 | number | Yes | 0 | X-coordinate of the first point on the arc. | | x1 | number | Yes | 0 | X-coordinate of the first point on the arc. |
| y1 | number | Yes | 0 | Y-coordinate of the first point on the arc. | | y1 | number | Yes | 0 | Y-coordinate of the first point on the arc. |
| x2 | number | Yes | 0 | X-coordinate of the second point on the arc. | | x2 | number | Yes | 0 | X-coordinate of the second point on the arc. |
| y2 | number | Yes | 0 | Y-coordinate of the second point on the arc. | | y2 | number | Yes | 0 | Y-coordinate of the second point on the arc. |
| radius | number | Yes | 0 | Radius of the arc. | | radius | number | Yes | 0 | Radius of the arc. |
- Example - Example
``` ```
@Entry @Entry
@Component @Component
...@@ -369,19 +369,19 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -369,19 +369,19 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
Draws an ellipse in the specified rectangular region. Draws an ellipse in the specified rectangular region.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| x | number | Yes | 0 | X-coordinate of the ellipse center. | | x | number | Yes | 0 | X-coordinate of the ellipse center. |
| y | number | Yes | 0 | Y-coordinate of the ellipse center. | | y | number | Yes | 0 | Y-coordinate of the ellipse center. |
| radiusX | number | Yes | 0 | Ellipse radius on the x-axis. | | radiusX | number | Yes | 0 | Ellipse radius on the x-axis. |
| radiusY | number | Yes | 0 | Ellipse radius on the y-axis. | | radiusY | number | Yes | 0 | Ellipse radius on the y-axis. |
| rotation | number | Yes | 0 | Rotation angle of the ellipse, in radians. | | rotation | number | Yes | 0 | Rotation angle of the ellipse, in radians. |
| startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse, in radians. | | startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse, in radians. |
| endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse, in radians. | | endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse, in radians. |
| anticlockwise | number | No | 0 | Whether to draw the ellipse in the counterclockwise direction. The value **0** means to draw the ellipse in the clockwise direction, and **1** means to draw the ellipse in the counterclockwise direction. This parameter is optional. The default value is **0**. | | anticlockwise | number | No | 0 | Whether to draw the ellipse in the counterclockwise direction. The value **0** means to draw the ellipse in the clockwise direction, and **1** means to draw the ellipse in the counterclockwise direction. This parameter is optional. The default value is **0**. |
- Example - Example
``` ```
@Entry @Entry
@Component @Component
...@@ -417,15 +417,15 @@ rect(x: number, y: number, width: number, height: number): void ...@@ -417,15 +417,15 @@ rect(x: number, y: number, width: number, height: number): void
Creates a rectangle. Creates a rectangle.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. | | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. | | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
| width | number | Yes | 0 | Width of the rectangle. | | width | number | Yes | 0 | Width of the rectangle. |
| height | number | Yes | 0 | Height of the rectangle. | | height | number | Yes | 0 | Height of the rectangle. |
- Example - Example
``` ```
@Entry @Entry
@Component @Component
......
en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
浏览文件 @ 12bcd9ea
...@@ -23,46 +23,47 @@ None ...@@ -23,46 +23,47 @@ None
AlphabetIndexer(value: {arrayValue : Array&lt;string&gt;, selected : number}) AlphabetIndexer(value: {arrayValue : Array&lt;string&gt;, selected : number})
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| arrayValue | Array&lt;string&gt; | Yes | - | Array of strings to be displayed in the alphabetic index bar. | | arrayValue | Array&lt;string&gt; | Yes | - | Array of strings to be displayed in the alphabetic index bar. |
| selected | number | Yes | - | ID of a selected item. | | selected | number | Yes | - | ID of a selected item. |
## Attributes ## Attributes
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| selectedColor | Color | Font color of the selected text. | | selectedColor | Color | Font color of the selected text. |
| popupColor | Color | Font color of the pop-up text. | | popupColor | Color | Font color of the pop-up text. |
| selectedBackgroundColor | Color | Background color of the selected text. | | selectedBackgroundColor | Color | Background color of the selected text. |
| popupBackground | Color | Background color of the pop-up text. | | popupBackground | Color | Background color of the pop-up text. |
| usingPopup | boolean | Whether to use pop-up text. | | usingPopup | boolean | Whether to use pop-up text. |
| selectedFont | {<br/>size?: number,<br/>weight?: FontWeight,<br/>family?: string,<br/>style?: FontStyle<br/>} | Font style of the selected text. | | selectedFont | {<br/>size?: number,<br/>weight?: FontWeight,<br/>family?: string,<br/>style?: FontStyle<br/>} | Font style of the selected text. |
| popupFont | {<br/>size?: number,<br/>weight?: FontWeight,<br/>family?: string,<br/>style?: FontStyle<br/>} | Font style of the pop-up text. | | popupFont | {<br/>size?: number,<br/>weight?: FontWeight,<br/>family?: string,<br/>style?: FontStyle<br/>} | Font style of the pop-up text. |
| font | {<br/>size?: number,<br/>weight?: FontWeight,<br/>family?: string,<br/>style?: FontStyle<br/>} | Default font style of the alphabetic index bar. | | font | {<br/>size?: number,<br/>weight?: FontWeight,<br/>family?: string,<br/>style?: FontStyle<br/>} | Default font style of the alphabetic index bar. |
| itemSize | Length | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set. | | itemSize | Length | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set. |
| alignStyle | IndexerAlign | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported. The alignment style affects the position of the pop-up window. | | alignStyle | IndexerAlign | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported. The alignment style affects the position of the pop-up window. |
- IndexerAlign enums - IndexerAlign enums
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| Left | The pop-up window is displayed on the right of the alphabetic indexer bar. | | Left | The pop-up window is displayed on the right of the alphabetic indexer bar. |
| Right | The pop-up window is displayed on the left of the alphabetic indexer bar. | | Right | The pop-up window is displayed on the left of the alphabetic indexer bar. |
## Events ## 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. |
| 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. | | onSelect(index:&nbsp;number)&nbsp;=&gt;&nbsp;void<sup>8+</sup> | Invoked when an item in the alphabetic indexer bar is selected. |
| onPopupSelected(callback: (index: number) =&gt; void)<sup>8+</sup> | Invoked when an item in the index pop-up window 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. |
| onPopupSelect(callback: (index: number) =&gt; void)<sup>8+</sup> | Invoked when an item in the index pop-up window is selected. |
## Example ## Example
``` ```
@Entry @Entry
@Component @Component
...@@ -80,7 +81,7 @@ struct AlphabetIndexerSample { ...@@ -80,7 +81,7 @@ struct AlphabetIndexerSample {
.popupFont({ size: 30, weight: FontWeight.Bolder }) // Font style of the pop-up text .popupFont({ size: 30, weight: FontWeight.Bolder }) // Font style of the pop-up text
.itemSize(28) // Size of each item (square) .itemSize(28) // Size of each item (square)
.alignStyle(IndexerAlign.Left) // Left aligned .alignStyle(IndexerAlign.Left) // Left aligned
.onSelected((index: number) => { .onSelect((index: number) => {
console.info(this.value[index] + 'Selected') // Event indicating that an item is selected console.info(this.value[index] + 'Selected') // Event indicating that an item is selected
}) })
.margin({ left: 50 }) .margin({ left: 50 })
......
en/application-dev/reference/arkui-ts/ts-container-rowsplit.md
浏览文件 @ 12bcd9ea
...@@ -25,9 +25,9 @@ RowSplit() ...@@ -25,9 +25,9 @@ RowSplit()
## Attributes ## Attributes
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| resizeable | boolean | Whether the divider can be dragged. The default value is **false**. | | resizeable | boolean | Whether the divider can be dragged. The default value is **false**. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> Similar to **&lt;RowSplit&gt;**, the divider of **&lt;RowSplit&gt;** can be dragged to a position that just fully holds a component. > Similar to **&lt;RowSplit&gt;**, the divider of **&lt;RowSplit&gt;** can be dragged to a position that just fully holds a component.
...@@ -35,14 +35,14 @@ RowSplit() ...@@ -35,14 +35,14 @@ RowSplit()
## Example ## Example
``` ```
@Entry @Entry
@Component @Component
struct RowSplitExample { struct RowSplitExample {
build() { build() {
Column() { 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() { RowSplit() {
Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
......
en/application-dev/reference/arkui-ts/ts-container-scroll.md
浏览文件 @ 12bcd9ea
...@@ -25,19 +25,19 @@ Scroll(scroller?: Scroller) ...@@ -25,19 +25,19 @@ Scroll(scroller?: Scroller)
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| scrollable | ScrollDirection | ScrollDirection.Vertical | Scroll method. | | scrollable | ScrollDirection | ScrollDirection.Vertical | Scroll method. |
| scrollBar | [BarState](ts-appendix-enums.md#barstate-enums) | Auto | Scroll bar status. | | scrollBar | [BarState](ts-appendix-enums.md#barstate-enums) | Auto | Scroll bar status. |
| scrollBarColor | Color | - | Color of the scroll bar. | | scrollBarColor | Color | - | Color of the scroll bar. |
| scrollBarWidth | Length | - | Width of the scrollbar. | | scrollBarWidth | Length | - | Width of the scrollbar. |
- ScrollDirection - ScrollDirection
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| Horizontal | Only horizontal scrolling is supported. | | Horizontal | Only horizontal scrolling is supported. |
| Vertical | Only vertical scrolling is supported. | | Vertical | Only vertical scrolling is supported. |
| None | Scrolling is disabled. | | None | Scrolling is disabled. |
## Scroller ## Scroller
...@@ -62,11 +62,11 @@ Scrolls to the specified position. ...@@ -62,11 +62,11 @@ Scrolls to the specified position.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| xOffset | Length | Yes | - | Horizontal scrolling offset. | | xOffset | Length | Yes | - | Horizontal scrolling offset. |
| yOffset | Length | Yes | - | Vertical scrolling offset. | | yOffset | Length | Yes | - | Vertical scrolling offset. |
| animation | {<br/>duration: number,<br/>curve: Curve \|<br/>CubicBezier \|<br/>SpringCurve<br/>} | No | | Animation configuration, which includes the following:<br/>- **duration**: scrolling duration.<br/>- **curve**: scrolling curve. | | animation | {<br/>duration: number,<br/>curve: Curve \|<br/>CubicBezier \|<br/>SpringCurve<br/>} | No | | Animation configuration, which includes the following:<br/>- **duration**: scrolling duration.<br/>- **curve**: scrolling curve. |
### scroller.scrollEdge ### scroller.scrollEdge
...@@ -78,9 +78,9 @@ Scrolls to the edge of the container. ...@@ -78,9 +78,9 @@ Scrolls to the edge of the container.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| value | Edge | Yes | - | Edge position to scroll to. | | value | Edge | Yes | - | Edge position to scroll to. |
### scroller.scrollPage ### scroller.scrollPage
...@@ -90,7 +90,7 @@ scrollPage(value: { next: boolean, direction?: Axis }): void ...@@ -90,7 +90,7 @@ scrollPage(value: { next: boolean, direction?: Axis }): void
Scrolls to the next or previous page. Scrolls to the next or previous page.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| next | boolean | Yes | - | Whether to turn to the next page. The value **true** means to scroll to the next page, and the value **false** means to scroll to the previous page. | | next | boolean | Yes | - | Whether to turn to the next page. The value **true** means to scroll to the next page, and the value **false** means to scroll to the previous page. |
...@@ -104,9 +104,9 @@ Obtains the scrolling offset. ...@@ -104,9 +104,9 @@ Obtains the scrolling offset.
- Return values - Return values
| Type | Description | | Type | Description |
| -------- | -------- | | -------- | -------- |
| {<br/>xOffset: number,<br/>yOffset: number<br/>} | **xOffset**: horizontal scrolling offset.<br/>**yOffset**: vertical scrolling offset. | | {<br/>xOffset: number,<br/>yOffset: number<br/>} | **xOffset**: horizontal scrolling offset.<br/>**yOffset**: vertical scrolling offset. |
### scroller.scrollToIndex ### scroller.scrollToIndex
...@@ -122,18 +122,18 @@ Scrolls to the specified index. ...@@ -122,18 +122,18 @@ Scrolls to the specified index.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | - | Index of the item to be scrolled to in the list. | | value | number | Yes | - | Index of the item to be scrolled to in the list. |
## Events ## 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. | | 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. | | onScrollEdge(side: Edge) =&gt; void | Callback for the event of scrolling to the edge. |
| onScrollEnd() =&gt; void | Invoked when scrolling stops. | | onScrollEnd() =&gt; void | Invoked when scrolling stops. |
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-container-tabs.md
浏览文件 @ 12bcd9ea
...@@ -36,15 +36,6 @@ Tabs(value: {barPosition?: BarPosition, index?: number, controller?: [TabsContro ...@@ -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. | | 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 ## Attributes
Touch target configuration is not supported. Touch target configuration is not supported.
...@@ -71,6 +62,27 @@ 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. | | 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 ## Example
......
en/application-dev/reference/arkui-ts/ts-explicit-animation.md
浏览文件 @ 12bcd9ea
...@@ -4,28 +4,28 @@ ...@@ -4,28 +4,28 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > ![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. > 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 - Attributes
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| duration | number | 1000 | Animation duration, in ms. | | duration | number | 1000 | Animation duration, in ms. |
| tempo | number | 1.0 | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation. | | tempo | number | 1.0 | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation. |
| curve | Curve \| Curves | Linear | Animation curve. | | curve | Curve \| Curves | Linear | Animation curve. |
| delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed. | | delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed. |
| iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. | | iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. |
| playMode | PlayMode | Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete. | | playMode | PlayMode | Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete. |
- APIs - APIs
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| onFinish() =&gt; void | Callback invoked when the animation playback is complete. | | onFinish() =&gt; void | Callback invoked when the animation playback is complete. |
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-media-components-video.md
浏览文件 @ 12bcd9ea
...@@ -15,9 +15,9 @@ The **&lt;Video&gt;** component does not support any child component. ...@@ -15,9 +15,9 @@ The **&lt;Video&gt;** component does not support any child component.
## APIs ## APIs
Video(value: VideoOption) Video(value: VideoOptions)
- VideoOption attributes - VideoOptions attributes
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| src | string | No | - | Path of the video source. | | src | string | No | - | Path of the video source. |
...@@ -27,13 +27,13 @@ Video(value: VideoOption) ...@@ -27,13 +27,13 @@ Video(value: VideoOption)
- PlaybackSpeed<sup>8+</sup> - PlaybackSpeed<sup>8+</sup>
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| Speed_Forward_0_75_X | 0.75x playback speed. | | Speed_Forward_0_75_X | 0.75x playback speed. |
| Speed_Forward_1_00_X | 1x playback speed. | | Speed_Forward_1_00_X | 1x playback speed. |
| Speed_Forward_1_25_X | 1.25x playback speed. | | Speed_Forward_1_25_X | 1.25x playback speed. |
| Speed_Forward_1_75_X | 1.75x playback speed. | | Speed_Forward_1_75_X | 1.75x playback speed. |
| Speed_Forward_2_00_X | 2x playback speed. | | Speed_Forward_2_00_X | 2x playback speed. |
## Attributes ## Attributes
...@@ -49,38 +49,94 @@ Video(value: VideoOption) ...@@ -49,38 +49,94 @@ Video(value: VideoOption)
## Events ## Events
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| onStart() =&gt; void | Triggered when the video is played. | | onStart() =&gt; void | Triggered when the video is played. |
| onPause() =&gt; void | Triggered when the video playback is paused. | | onPause() =&gt; void | Triggered when the video playback is paused. |
| onFinish() =&gt; void | Triggered when the video playback is finished. | | onFinish() =&gt; void | Triggered when the video playback is finished. |
| onError() =&gt; void | Triggered when the video playback fails. | | onError() =&gt; void | Triggered when the video playback fails. |
| onPrepared(event?: { duration: number }) =&gt; void | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**. | | onPrepared(event?: { duration: number }) =&gt; void | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**. |
| onSeeking(event?: { time: number }) =&gt; void | Triggered to report the time (in seconds) when the progress bar is being dragged. | | onSeeking(event?: { time: number }) =&gt; void | Triggered to report the time (in seconds) when the progress bar is being dragged. |
| onSeeked(event?: { time: number }) =&gt; void | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar. | | onSeeked(event?: { time: number }) =&gt; void | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar. |
| 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. | | 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 |
| -------- | -------- | ### Objects to Import
| start() : void | Starts playback. |
| pause() : void | Pauses playback. | ```
| stop() : void | Stops playback. | controller: VideoController = new VideoController();
| 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. |
### 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> - SeekMode<sup>8+</sup>
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| PreviousKeyframe | Seeks to the nearest previous keyframe. | | PreviousKeyframe | Seeks to the nearest previous keyframe. |
| NextKeyframe | Seeks to the nearest next keyframe. | | NextKeyframe | Seeks to the nearest next keyframe. |
| ClosestKeyframe | Seeks to the nearest keyframe. | | ClosestKeyframe | Seeks to the nearest keyframe. |
| Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe. | | Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe. |
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
浏览文件 @ 12bcd9ea
...@@ -10,7 +10,7 @@ The **CustomDialogController** class is used to display a custom dialog box. ...@@ -10,7 +10,7 @@ The **CustomDialogController** class is used to display a custom dialog box.
## APIs ## 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 - Parameters
......
en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
浏览文件 @ 12bcd9ea
...@@ -48,7 +48,6 @@ struct DatePickerDialogExample01 { ...@@ -48,7 +48,6 @@ struct DatePickerDialogExample01 {
onAccept: (value: DatePickerResult) => { onAccept: (value: DatePickerResult) => {
this.selectedDate.setFullYear(value.year, value.month, value.day) this.selectedDate.setFullYear(value.year, value.month, value.day)
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value)) console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
}
}, },
onCancel: () => { onCancel: () => {
console.info("DatePickerDialog:onCancel()") console.info("DatePickerDialog:onCancel()")
...@@ -82,7 +81,6 @@ struct DatePickerDialogExample02 { ...@@ -82,7 +81,6 @@ struct DatePickerDialogExample02 {
onAccept: (value: DatePickerResult) => { onAccept: (value: DatePickerResult) => {
this.selectedDate.setFullYear(value.year, value.month, value.day) this.selectedDate.setFullYear(value.year, value.month, value.day)
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value)) console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
}
}, },
onCancel: () => { onCancel: () => {
console.info("DatePickerDialog:onCancel()") console.info("DatePickerDialog:onCancel()")
......
en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
浏览文件 @ 12bcd9ea
...@@ -11,11 +11,11 @@ None ...@@ -11,11 +11,11 @@ None
## TextPickerDialog.show ## TextPickerDialog.show
show(options: TextPickerDialogOption) show(options: TextPickerDialogOptions)
Shows a text picker in the given settings. Shows a text picker in the given settings.
- TextPickerDialogOption parameters - TextPickerDialogOptions
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| range | string[] | Yes| - | Data selection range of the picker.| | range | string[] | Yes| - | Data selection range of the picker.|
......
en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
浏览文件 @ 12bcd9ea
...@@ -40,7 +40,6 @@ struct TimePickerDialogExample01 { ...@@ -40,7 +40,6 @@ struct TimePickerDialogExample01 {
TimePickerDialog.show({ TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime, useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => { onAccept: (value: TimePickerResult) => {
this.selectedDate.setHours(value.hour, value.minute, value.second)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
}, },
onCancel: () => { onCancel: () => {
...@@ -69,7 +68,6 @@ struct TimePickerDialogExample02 { ...@@ -69,7 +68,6 @@ struct TimePickerDialogExample02 {
TimePickerDialog.show({ TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime, useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => { onAccept: (value: TimePickerResult) => {
this.selectedDate.setHours(value.hour, value.minute, value.second)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
}, },
onCancel: () => { onCancel: () => {
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
浏览文件 @ 12bcd9ea
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > ![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 ## Required Permissions
...@@ -13,14 +13,14 @@ None ...@@ -13,14 +13,14 @@ None
## Attributes ## Attributes
| **Name** | **Type** | **Default Value** | **Description** | | **Name** | **Type** | **Default Value** | **Description** |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| touchable | boolean | true | Whether the current component is touchable. | | touchable | boolean | true | Whether the current component is touchable. |
## Example ## Example
``` ```
@Entry @Entry
@Component @Component
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
浏览文件 @ 12bcd9ea
...@@ -12,22 +12,22 @@ None ...@@ -12,22 +12,22 @@ None
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| hoverEffect | HoverEffect | HoverEffect.Auto | Hover effect of the component in hover state. | | hoverEffect | HoverEffect | HoverEffect.Auto | Hover effect of the component in hover state. |
- HoverEffect enums - HoverEffect enums
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| Auto | Default hover effect. | | Auto | Default hover effect. |
| Scale | Scale effect. | | Scale | Scale effect. |
| Board | Fade-in and fade-out effect. | | Highlight | Fade-in and fade-out effect. |
| None | No effect. | | None | No effect. |
## Example ## Example
``` ```
@Entry @Entry
@Component @Component
...@@ -43,17 +43,17 @@ struct HoverExample { ...@@ -43,17 +43,17 @@ struct HoverExample {
.position({ x: 40, y: 120 }) .position({ x: 40, y: 120 })
.hoverEffect(HoverEffect.Scale) .hoverEffect(HoverEffect.Scale)
.onHover((isHover: boolean) => { .onHover((isHover: boolean) => {
console.info('Scale' + isHover) console.info('Scale isHover: ' + isHover)
this.isHoverVal = isHover this.isHoverVal = isHover
}) })
Text('Board').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 380 }) Text('Board').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 380 })
Column() Column()
.width('80%').height(200).backgroundColor(Color.Gray) .width('80%').height(200).backgroundColor(Color.Gray)
.hoverEffect(HoverEffect.Board) .hoverEffect(HoverEffect.Highlight)
.position({ x: 40, y: 420 }) .position({ x: 40, y: 420 })
.onHover((isHover: boolean) => { .onHover((isHover: boolean) => {
console.info('HoverEffect.Board') console.info('Highlight isHover: ' +isHover )
this.isHoverVal = isHover this.isHoverVal = isHover
}) })
} }
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md
浏览文件 @ 12bcd9ea
...@@ -15,21 +15,21 @@ None ...@@ -15,21 +15,21 @@ None
## Attributes ## 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> - StateStyles<sup>8+</sup>
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| normal | ()=&gt;void | No | - | Style of the component when stateless. | | normal | ()=&gt;void | No | - | Style of the component when stateless. |
| pressed | ()=&gt;void | No | - | Style of the component in the pressed state. | | pressed | ()=&gt;void | No | - | Style of the component in the pressed state. |
| disabled | ()=&gt;void | No | - | Style of the component in disabled state. | | disabled | ()=&gt;void | No | - | Style of the component in disabled state. |
## Example ## Example
``` ```
@Entry @Entry
@Component @Component
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
浏览文件 @ 12bcd9ea
...@@ -13,21 +13,21 @@ None ...@@ -13,21 +13,21 @@ None
## Attributes ## 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 | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| message | string | Yes | - | Content of the popup message. | | message | string | Yes | - | Content of the popup message. |
| placementOnTop | boolean | No | false | Whether to display the popup above the component. The default value is **false**. | | placementOnTop | boolean | No | false | Whether to display the popup above the component. The default value is **false**. |
| primaryButton | {<br/>value: string,<br/>action: () =&gt; void<br/>} | No | - | First button.<br/>**value**: text of the primary button in the popup.<br/>**action**: callback function for clicking the primary button. | | primaryButton | {<br/>value: string,<br/>action: () =&gt; void<br/>} | No | - | First button.<br/>**value**: text of the primary button in the popup.<br/>**action**: callback function for clicking the primary button. |
| 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. | | 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. | | 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 | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| builder | () =&gt; any | Yes | - | Builder of the tooltip content. | | builder | () =&gt; any | Yes | - | Builder of the tooltip content. |
...@@ -39,16 +39,16 @@ None ...@@ -39,16 +39,16 @@ None
| onStateChange | (isVisible: boolean) =&gt; void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. | | onStateChange | (isVisible: boolean) =&gt; void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
- Placement<sup>8+</sup> enums - Placement<sup>8+</sup> enums
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| Left | The tooltip is on the left of the component. | | Left | The tooltip is on the left of the component. |
| Right | The tooltip is on the right of the component. | | Right | The tooltip is on the right of the component. |
| Top | The tooltip is on the top of the component. | | Top | The tooltip is on the top of the component. |
| Bottom | The tooltip is at the bottom of the component. | | Bottom | The tooltip is at the bottom of the component. |
| TopLeft | The tooltip is in the upper left corner of the component. | | TopLeft | The tooltip is in the upper left corner of the component. |
| TopRight | The tooltip is in the upper right corner of the component. | | TopRight | The tooltip is in the upper right corner of the component. |
| BottomLeft | The tooltip is in the lower left corner of the component. | | BottomLeft | The tooltip is in the lower left corner of the component. |
| BottomRight | The tooltip is in the lower right corner of the component. | | BottomRight | The tooltip is in the lower right corner of the component. |
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-universal-events-click.md
浏览文件 @ 12bcd9ea
...@@ -12,43 +12,43 @@ None ...@@ -12,43 +12,43 @@ None
## Events ## 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). | | onClick(callback: (event?: ClickEvent) =&gt; void) | No | Called when a click event occurs. For details about the event parameters, see [ClickEvent](#clickevent). |
### ClickEvent ### ClickEvent
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| screenX | number | X coordinate of the click relative to the left edge of the screen. | | 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. | | screenY | number | Y coordinate of the click relative to the upper edge of the screen. |
| x | number | X coordinate of the click relative to the left edge of the component being clicked. | | x | number | X coordinate of the click relative to the left edge of the component being clicked. |
| y | number | Y coordinate of the click relative to the upper edge of the component being clicked. | | y | number | Y coordinate of the click relative to the upper edge of the component being clicked. |
| target<sup>8+</sup> | EventTarget | Target element that is clicked. | | target<sup>8+</sup> | EventTarget | Target element that is clicked. |
| timestamp | number | Timestamp of the event. | | timestamp | number | Timestamp of the event. |
- EventTarget<sup>8+</sup> attributes - EventTarget<sup>8+</sup> attributes
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| area | Area | Area information of the target element.| | area | Area | Area information of the target element.|
- Area<sup>8+</sup> attributes - Area<sup>8+</sup> attributes
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| width | number | Width of the target element, in vp. | | width | number | Width of the target element, in vp. |
| height | number | Height 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. | | position | 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. | | globalPosition | Position | Position of the upper left corner of the target element relative to that of the page. |
- Position<sup>8+</sup> attributes - Position<sup>8+</sup> attributes
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| x | number | X-coordinate, in vp. | | x | number | X-coordinate, in vp. |
| y | number | Y-coordinate, in vp. | | y | number | Y-coordinate, in vp. |
## Example ## Example
......
en/application-dev/ui/Readme-EN.md 0 → 100644
浏览文件 @ 12bcd9ea
# 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
浏览文件 @ 12bcd9ea
...@@ -13,42 +13,20 @@ ArkUI is a UI development framework that provides what you'll need to develop ap ...@@ -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. - 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 ## Key Features
- 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.
- 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. - 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. - 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. - 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 Paradigm | Description | Applicable To | Intended Audience |
## Development Paradigms | -------- | -------- | -------- | -------- |
| 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 |
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. | 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 |
### 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 |
### Framework Structure ### Framework Structure
......
en/application-dev/ui/ui-js-components-calendar.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-js-components-canvas.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-js-components-chart.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-js-components-marquee.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-js-components-menu.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-js-components-path2d.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-js-components-qrcode.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-js-components-rating.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-js-components-search.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-js-components-slider.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-js-components-svg-graphics.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-js-components-svg-overview.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-js-components-svg-path.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-js-components-svg-text.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-js-components-swiper.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-js-components-switch.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-js-components-toolbar.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-ts-basic-components-button.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-ts-layout-flex.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-ts-layout-grid-container.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
en/application-dev/ui/ui-ts-layout-mediaquery.md 0 → 100644
浏览文件 @ 12bcd9ea
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或