diff --git a/en/application-dev/device/sensor-guidelines.md b/en/application-dev/device/sensor-guidelines.md index 88d24d59bc4885135b92302c3446c7c81bd33d5d..734d75b2573d18ef261ea4f430ab907002fe1e3c 100644 --- a/en/application-dev/device/sensor-guidelines.md +++ b/en/application-dev/device/sensor-guidelines.md @@ -22,16 +22,16 @@ ## Available APIs - | Module | API | Description | +| Module| API| Description| | -------- | -------- | -------- | -| ohos.sensor | sensor.on(sensorType,callback:AsyncCallback<Response>):void | Subscribes to data changes of a type of sensor. | -| ohos.sensor | sensor.once(sensorType,callback:AsyncCallback<Response>):void | Subscribes to only one data change of a type of sensor. | -| ohos.sensor | sensor.off(sensorType,callback:AsyncCallback<void>):void | Unsubscribes from sensor data changes. | +| ohos.sensor | sensor.on(sensorType, callback:AsyncCallback<Response>): void | Subscribes to data changes of a type of sensor.| +| ohos.sensor | sensor.once(sensorType, callback:AsyncCallback<Response>): void | Subscribes to only one data change of a type of sensor.| +| ohos.sensor | sensor.off(sensorType, callback:AsyncCallback<void>): void | Unsubscribes from sensor data changes.| ## How to Develop -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":[ @@ -67,67 +67,59 @@ "when":"inuse" } }, - { - "name":"ohos.permission.VIBRATE", - "reason"":"", - "usedScene":{ - "ability": [".MainAbility"], - "when":"inuse" - } - }, ] ``` - + 2. Subscribe to data changes of a type of sensor. ``` import sensor from "@ohos.sensor" - sensor.on(type:sensorType,function(error,data){ - if (error) {// The call fails, and error.code and error.message are printed. - console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); - return; - }; + sensor.on(sensor.sensorType.SENSOR_TYPE_ACCELEROMETER,function(data){ console.info("Subscription succeeded. data = "+ data);// The call is successful, and the obtained sensor data is printed. } ); ``` - + 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) 3. Unsubscribe from sensor data changes. ``` import sensor from "@ohos.sensor" - sensor.off(type:sensorType,function(error) { - if (error) {// The unsubscription fails, and error.code and error.message are printed. - console.error("Failed to unsubscribe from acceleration sensor data. Error code: " + error.code + "; message: " + error.message); - return; - }; + sensor.off(sensor.sensorType.SENSOR_TYPE_ACCELEROMETER,function() { console.info("Succeeded in unsubscribing from acceleration sensor data.");// The unsubscription is successful, and the result is printed. } ); ``` - + 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) 4. Subscribe to only one data change of a type of sensor. ``` import sensor from "@ohos.sensor" - sensor.once(tyep:sensorType,function(error, data) { - if (error) {// The call fails, and error.code and error.message are printed. - console.error("Failed to obtain data. Error code: " + error.code + "; message: " + error.message); - return; - }; - console.info("Data obtained successfully. data="+data);// The call is successful, and the obtained sensor data is printed. + sensor.once(sensor.sensorType.SENSOR_TYPE_ACCELEROMETER,function(data) { + console.info("Data obtained successfully. data=" + data);// The call is successful, and the obtained sensor data is printed. } ); ``` - + The following figure shows the successful call result when **SensorType** is **SENSOR_TYPE_ID_ACCELEROMETER**. - + ![en-us_image_0000001241733907](figures/en-us_image_0000001241733907.png) + + If the API fails to be called, you are advised to use the **try/catch** statement to capture error information that may occur in the code. Example: + + ``` + try { + sensor.once(sensor.sensorType.SENSOR_TYPE_ACCELEROMETER,function(data) { + console.info("Data obtained successfully. data=" + data);// The call is successful, and the obtained sensor data is printed. + }); + } catch (error) { + console.error(error); + } + ``` diff --git a/en/application-dev/device/vibrator-guidelines.md b/en/application-dev/device/vibrator-guidelines.md index 88bdeb6884eee52e1591993ec60099d31eb77e3c..982d6c9b0983684729ea41b1d3b45ab9409a43e5 100644 --- a/en/application-dev/device/vibrator-guidelines.md +++ b/en/application-dev/device/vibrator-guidelines.md @@ -8,20 +8,20 @@ You can set different vibration effects as needed, for example, customizing vibr ## Available APIs - | Module | API | Description | + | Module| API| Description| | -------- | -------- | -------- | -| ohos.vibrator | vibrate(duration: number): Promise<void> | Triggers vibration with the specified duration. This API uses a promise to return the result. | -| ohos.vibrator | vibrate(duration: number, callback?: AsyncCallback<void>): void | Triggers vibration with the specified duration. This API uses a callback to return the result. | -| ohos.vibrator | vibrate(effectId: EffectId): Promise<void> | Triggers vibration with the specified effect. This API uses a promise to return the result. | -| ohos.vibrator | vibrate(effectId: EffectId, callback?: AsyncCallback<void>): void | Triggers vibration with the specified effect. This API uses a callback to return the result. | -| ohos.vibrator | stop(stopMode: VibratorStopMode): Promise<void> | Stops vibration. This API uses a promise to return the result. | -| ohos.vibrator | stop(stopMode: VibratorStopMode, callback?: AsyncCallback<void>): void | Stops vibration. This API uses a callback to return the result. | +| ohos.vibrator | vibrate(duration: number): Promise<void> | Triggers vibration with the specified duration. This API uses a promise to return the result.| +| ohos.vibrator | vibrate(duration: number, callback?: AsyncCallback<void>): void | Triggers vibration with the specified duration. This API uses a callback to return the result.| +| ohos.vibrator | vibrate(effectId: EffectId): Promise<void> | Triggers vibration with the specified effect. This API uses a promise to return the result.| +| ohos.vibrator | vibrate(effectId: EffectId, callback?: AsyncCallback<void>): void | Triggers vibration with the specified effect. This API uses a callback to return the result.| +| ohos.vibrator | stop(stopMode: VibratorStopMode): Promise<void> | Stops vibration. This API uses a promise to return the result.| +| ohos.vibrator | stop(stopMode: VibratorStopMode, callback?: AsyncCallback<void>): void | Stops vibration. This API uses a callback to return the result.| ## How to Develop -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":[ { @@ -58,26 +58,26 @@ You can set different vibration effects as needed, for example, customizing vibr ``` 2. Trigger the device to vibrate. - + ``` import vibrator from "@ohos.vibrator" - vibrator.vibrate(duration: number).then((error)=>{ - if(error){// The call fails, and error.code and error.message are printed. - console.log("Promise return failed.error.code"+error.code+"error.message"+error.message); - }else{// The call succeeded. The device starts to vibrate. - console.log("Promise returned to indicate a successful vibration.") + vibrator.vibrate(1000).then((error)=>{ + if (error) {// The call fails, and error.code and error.message are printed. + Console.log("Promise return failed.error.code"+error.code+"error.message"+error.message); + }else{// The call is successful, and the device starts to vibrate. + Console.log("Promise returned to indicate a successful vibration.") }; }) ``` 3. Stop the vibration. - + ``` import vibrator from "@ohos.vibrator" - vibrator.stop(stopMode: VibratorStopMode).then((error)=>{ - if(error){// The call fails, and error.code and error.message are printed. - console.log("Promise return failed. error.code"+error.code+"error.message"+error.message); - }else{// The call succeeded. The device stops vibration. + vibrator.stop(vibrator.VibratorStopMode.VIBRATOR_STOP_MODE_PRESET).then((error)=>{ + if (error) {// The call fails, and error.code and error.message are printed. + Console.log("Promise return failed.error.code"+error.code+"error.message"+error.message); + }else{// The call is successful, and the device stops vibration. Console.log("Promise returned to indicate a successful stop."); }; }) diff --git a/en/application-dev/device/vibrator-overview.md b/en/application-dev/device/vibrator-overview.md index 3d8f187054dd1f0da3e3099bd10e3cb28e5a9b15..88460b4fe415d836a687363c10ceda68c1e98390 100644 --- a/en/application-dev/device/vibrator-overview.md +++ b/en/application-dev/device/vibrator-overview.md @@ -6,10 +6,11 @@ The vibrator service opens up the latest capabilities of the vibrator hardware t ## Working Principles -The vibrator is a Misc device that consists of four modules: Vibrator API, Vibrator Framework, Vibrator Service, and HD_IDL. +The vibrator is a Misc device that consists of four modules: Vibrator API, Vibrator Framework, Vibrator Service, and HDF layer. - **Figure1** Vibrator in Misc devices - ![en-us_image_0000001180249428](figures/en-us_image_0000001180249428.png) + **Figure 1** Vibrator in Misc devices + +![0752d302-aeb9-481a-bb8f-e5524eb61eeb](figures/0752d302-aeb9-481a-bb8f-e5524eb61eeb.png) - Vibrator API: provides basic vibrator APIs, including the APIs for querying the vibrator list, querying the vibrator by effect, and triggering and stopping vibration. @@ -17,9 +18,9 @@ The vibrator is a Misc device that consists of four modules: Vibrator API, Vibra - Vibrator Service: manages services of vibrators. -- HD_IDL: adapts to different devices. +- HDF layer: adapts to different devices. ## Constraints -When using a vibrator, you need to declare and obtain the **ohos.permission.VIBRATE** permission first so that you can control the vibration effect. +When using a vibrator, you must declare the **ohos.permission.VIBRATE** permission before you can control the vibration effect. The sensitivity level of this permission is **system_grant**. diff --git a/en/application-dev/reference/arkui-js/js-components-basic-web.md b/en/application-dev/reference/arkui-js/js-components-basic-web.md index 403162b023a9ea4788559e5f96812ce9a5f785ea..7130a68b89c88a8e02cc9872a0eaa29d17807105 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-web.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-web.md @@ -3,6 +3,9 @@ The **\** component displays web page content. >![](../../public_sys-resources/icon-note.gif) **NOTE** > This component is supported since API version 6. Updates will be marked with a superscript to indicate their earliest API version. +## Required Permissions +ohos.permission.INTERNET, required only for accessing online web pages. + ## Constraints The **\** component does not follow the transition animation. A page allows only one **\** component. @@ -44,7 +47,7 @@ The following methods are supported. ``` ``` - +// xxx.js export default { reloadWeb() { this.$element('web').reload() diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001231374559.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001231374559.gif new file mode 100644 index 0000000000000000000000000000000000000000..23a03cf07feddcb9866e7ab141c212ebf01bf8b2 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001231374559.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001231374661.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001231374661.png new file mode 100644 index 0000000000000000000000000000000000000000..438d698967ec582748d39118ad509743c131aa3c Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001231374661.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md b/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md index f14fcd3c6df29523f7fe798de697ca69a04bbdd9..d8c994e636c06ad43593963892bd020534747456 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md @@ -48,7 +48,7 @@ Creates a date picker in the given date range. | Name| Type| Description| | -------- | -------- | -------- | | year | number | Year of the selected date.| -| month | number | Month of the selected date.| +| month | number | Month of the selected date. The value ranges from 0 to 11. The value **0** indicates January, and the value **11** indicates December. | | day | number | Day of the selected date.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md index 73793a0f011b51fdb410e346c49b9570f4c25368..eaec942aac1e53c0bb6e23988bdb55eba6e29a31 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md @@ -29,11 +29,11 @@ Creates a component that can automatically display the navigation bar, title, an | Name | Type | Default Value | Description | | -------- | -------- | -------- | -------- | -| title | string \| [Custom Builder](../../ui/ts-types.md) | - | Page title. | +| title | string \| [CustomBuilder](../../ui/ts-types.md)8+ | - | Page title. | | subtitle | string | - | Subtitle of the page. | -| menus | Array<NavigationMenuItem> \| [Custom Builder](../../ui/ts-types.md) | - | Menu in the upper right corner of the page. | +| menus | Array<NavigationMenuItem> \| [CustomBuilder](../../ui/ts-types.md)8+ | - | Menu in the upper right corner of the page. | | titleMode | NavigationTitleMode | NavigationTitleMode.Free | Display mode of the page title bar. | -| toolBar | {
items:[
Object
] }
\| [Custom Builder](../../ui/ts-types.md) | - | Content of the toolbar.
**items**: all items on the toolbar. | +| toolBar | {
items:[
Object
] }
\| [CustomBuilder](../../ui/ts-types.md)8+ | - | Content of the toolbar.
**items**: all items on the toolbar. | | hideToolBar | boolean | false | Whether to hide the toolbar.
**true**: Hide the toolbar.
**false**: Show the toolbar. | | hideTitleBar | boolean | false | Whether to hide the title bar. | | hideBackButton | boolean | false | Whether to hide the back button. | @@ -67,7 +67,7 @@ Creates a component that can automatically display the navigation bar, title, an | Name | Description | | -------- | -------- | -| onTitleModeChanged(callback: (titleMode: NavigationTitleMode) => void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls. | +| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls. | ## Example @@ -140,7 +140,7 @@ struct NavigationExample { .titleMode(NavigationTitleMode.Free) .hideTitleBar(false) .hideBackButton(false) - .onTitleModeChanged((titleModel: NavigationTitleMode) => { + .onTitleModeChange((titleModel: NavigationTitleMode) => { console.log('titleMode') }) .toolBar({ items: [ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md b/en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md index 76f1ec8a496d8b31e4c7df7498971c3460987edc..d5d79e4e4fbc004715cac5dd92fce24f5a7f9b6d 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md @@ -22,7 +22,7 @@ RichText\(content:string\) | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | | content | string | Yes| - | String in HTML format.| - + ## Events @@ -41,8 +41,8 @@ RichText\(content:string\) | \
| Inserts a newline character.| \

This is a paragraph\
This is a new paragraph\

| | \
| Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line.| \

This is a paragraph\

\
\

This is a paragraph\

| | \
\
| 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.| \
\

This is the heading in a div element\

\
| -| \\ | Displays text in italic style.| \

\This is in italic style\\

| -| \\ | 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 \ tag where it could be confused with a hyperlink.| \

This is an underlined paragraph\

| +| \\ | Displays text in italic style.| \This is in italic style\ | +| \\ | 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 \ tag where it could be confused with a hyperlink.| \

\This is an underlined paragraph\\

| | \ | Used to embed CSS within an HTML document.| \ | | 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;'**.| \

This is a heading\

\

This is a paragraph\

| | \ | Used to embed or reference a client-side script, such as JavaScript.| \ | diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md b/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md index eac2cce6037bc2c7608f0ef3d3c84fc2c81be5e5..f07fde18fa2eab1eaec4c4354dfda5eb316ca7be 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md @@ -20,9 +20,9 @@ This component can contain a single child component. ## APIs -ScrollBar(value: ScrollBarOption) +ScrollBar(value: ScrollBarOptions) -- ScrollBarOption parameters +- ScrollBarOptions parameters | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | | scroller | [Scroller](ts-container-scroll.md#scroller) | Yes | - | Scroller, which can be bound to and control scrollable components. | diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-search.md b/en/application-dev/reference/arkui-ts/ts-basic-components-search.md index 4a3936bd7cf2d65558e5c5433b4c57150c6f3000..fbd02e43d85081fbc64ed53d7987e86bcb3d053a 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-search.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-search.md @@ -31,7 +31,7 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | | searchButton | string | –| Text on the search button located next to the search text box. By default, there is no search button.| -| placeholderColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Placeholder text color.| +| placeholderColor | [ResourceColor](../../ui/ts-types.md) | - | Placeholder text color.| | placeholderFont | [Font](../../ui/ts-types.md) | - | Placeholder text style.| | textFont | [Font](../../ui/ts-types.md) | - | Text font for the search text box.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-select.md b/en/application-dev/reference/arkui-ts/ts-basic-components-select.md index 25d73234a372a9e13f9a693e2e834e45d6bf9cda..4699fe90c574530e27774d811e4329da363e6cd0 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-select.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-select.md @@ -20,8 +20,8 @@ Select(options: Array) | Name| Type| Mandatory| Default Value| Description| | ------ | ----------------------------------------------- | ---- | ------ | -------------- | - | value | [ResourceStr](../../ui/ts-types.md#ResourceStr) | Yes| - | Value of an option in the drop-down list box.| - | icon | [ResourceStr](../../ui/ts-types.md#ResourceStr) | No| - | Icon of an option in the drop-down list box.| + | value | [ResourceStr](../../ui/ts-types.md) | Yes| - | Value of an option in the drop-down list box.| + | icon | [ResourceStr](../../ui/ts-types.md) | No| - | Icon of an option in the drop-down list box.| ## Attributes @@ -29,20 +29,20 @@ Select(options: Array) | ----------------------- | --------------------------------------------------- | ------ | ----------------------------------------------- | | selected | number | - | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.| | value | string | - | Text of the drop-down button.| -| font | [Font](../../ui/ts-types.md) | - | Text font of the drop-down button.| -| fontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Text color of the drop-down button.| -| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Background color of the selected option in the drop-down list box.| -| selectedOptionFont | [Font](../../ui/ts-types.md) | - | Text font of the selected option in the drop-down list box.| -| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Text color of the selected option in the drop-down list box.| -| optionBgColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Background color of an option in the drop-down list box.| -| 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.| +| font | [Font](../../ui/ts-types.md) | - | Text font of the drop-down button.| +| fontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of the drop-down button.| +| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md) | - | Background color of the selected option in the drop-down list box.| +| selectedOptionFont | [Font](../../ui/ts-types.md) | - | Text font of the selected option in the drop-down list box.| +| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of the selected option in the drop-down list box.| +| optionBgColor | [ResourceColor](../../ui/ts-types.md) | - | Background color of an option in the drop-down list box.| +| optionFont | [Font](../../ui/ts-types.md) | - | Text font of an option in the drop-down list box.| +| optionFontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of an option in the drop-down list box.| ## Events | Name| Description| | ------------------------------------------------------------ | ------------------------------------------------------------ | -| onSelected(callback: (index: number, value?:string) => void)| Invoked when an option in the drop-down list box is selected. **index** indicates the index of the selected option. **value** indicates the value of the selected option.| +| onSelect(callback: (index: number, value?:string) => void) | Invoked when an option in the drop-down list box is selected. **index** indicates the index of the selected option. **value** indicates the value of the selected option.| ## Example @@ -61,7 +61,7 @@ struct SliderExample { .font({size: 30, weight:400, family: 'serif', style: FontStyle.Normal }) .selectedOptionFont({size: 40, weight: 500, family: 'serif', style: FontStyle.Normal }) .optionFont({size: 30, weight: 400, family: 'serif', style: FontStyle.Normal }) - .onSelected((index:number)=>{ + .onSelecte((index:number)=>{ console.info("Select:" + index) }) } diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md index 1e4c9f90e5815ec2ee326eac5ae35fbc68efc0a9..9acf78b9759c113a654d03940f299b5df1adc290 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md @@ -31,7 +31,7 @@ TextArea(value?:{placeholder?: string controller?: TextAreaController}) ## Attributes -In addition to [universal attributes](ts-universal-attributes.md), the following attributes are supported. +In addition to [universal attributes](ts-universal-attributes-index.md), the following attributes are supported. | Name | Type | Default Value | Description | | -------- | -------- | -------- | -------- | @@ -49,15 +49,6 @@ In addition to [universal attributes](ts-universal-attributes.md), the following | End | Align the tail horizontally. | -### TextAreaController8+ - -Defines the controller for controlling the **<TextArea>** component. - -| Name | Description | -| -------- | -------- | -| caretPosition(value: number): void | Position of the input cursor.
**value**: indicates the length from the start of the string to the position where the input cursor is located. | - - ## Events | Name | Description | @@ -67,6 +58,28 @@ Defines the controller for controlling the **<TextArea>** component. | onCut8+(callback:(value: string) => void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.
**value**: text to be cut. | | onPaste8+(callback:(value: string) => void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.
**value**: text to be pasted. | +## TextAreaController8+ + +Defines the controller for controlling the **<TextArea>** component. + +### Objects to Import + +``` +controller: TextAreaController = new TextAreaController() + +``` + +### caretPosition8+ + +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 diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md index 6f23dd45ae12120f7dcec85d26d16383e2b464ab..32e8897dfc8623d7167c4c3294d2efd5e2619601 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md @@ -18,32 +18,46 @@ TextClock(options?: {timeZoneOffset?: number, contorller?: TextClockController}) - Parameters - | Name| Type| Mandatory| Default Value| Description| + | Name | Type| Mandatory| Default Value | Description | | -------- | -------- | ---- | ------------------ | ------------------------------------------------------------ | - | timeZoneOffset | number | No| Time zone offset| Sets the time zone offset. The value range is [-14, 12], indicating UTC+12 to UTC-12. A negative value indicates Eastern Standard Time, and a positive value indicates Western Standard Time. For example, **-8** indicates UTC+8. For countries or regions crossing the International Date Line, use -13 (UTC+13) and -14 (UTC+14) to ensure consistent time within the entire country or region.| + | timeZoneOffset | number | No | Time zone offset| Sets the time zone offset. The value range is [-14, 12], indicating UTC+12 to UTC-12. A negative value indicates Eastern Standard Time, and a positive value indicates Western Standard Time. For example, **-8** indicates UTC+8. For countries or regions crossing the International Date Line, use -13 (UTC+13) and -14 (UTC+14) to ensure consistent time within the entire country or region.| | contorller | [TextClockContorller](#TextClockController) | No| null | Binds a controller to control the status of the **** component.| ## Attributes -| Name| Type| Default Value| Description| +| Name | Type| Default Value | Description | | ------ | -------- | -------- | ------------------------------------------------------------ | | format | string | 'hhmmss' | Time format, for example, **yyyy/mm/dd** or **yyyy-mm-dd**. Supported time format strings:
  • yyyy (year)
  • mm (two-letter abbreviated month name)
  • mmm (three-letter abbreviated month name)
  • mmmm (full month name)
  • dd (two-letter abbreviated day of the week)
  • ddd (three-letter abbreviated day of the week)
  • dddd (full day of the week)
  • HH (24-hour format)
  • hh (12-hour format)
  • MM/mm (minute)
  • SS/ss (second)
| +## Events + +| Name | Description | +| -------------------------------------------- | ------------------------------------------------------------ | +| onDateChange(event: (value: number) => void) | Triggered when the time changes in seconds at minimum.
**value**: Unix time stamp, which is the number of milliseconds that have elapsed since the Unix epoch.| + ## TextClockController Controller of the **** component, which can be bound to the component for status control. -| API| Description| -| -------------------------------------------- | ------------------------------------------------------------ | -| start() | Starts the **** component.| -| stop() | Stops the **** component.| +### Objects to Import +``` +controller: TextClockController = new TextClockController() -## Events +``` + +### start + +start() + +Starts the **** component. + +### stop + +stop() + +Stops the **** component. -| Name| Description| -| -------------------------------------------- | ------------------------------------------------------------ | -| onDateChange(event: (value: number) => void) | Triggered when the time changes in seconds at minimum.
value: Unix time stamp, which is the number of milliseconds that have elapsed since the Unix epoch.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md index 369fe964a4861711c0862a40f9a17b84a05492c2..b24dec295a1264222075a3c4cc51216bc8373715 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md @@ -31,7 +31,7 @@ TextInput(value?:{placeholder?: string controller?: TextInputController}) ## Attributes -In addition to [universal attributes](ts-universal-attributes.md), the following attributes are supported. +In addition to [universal attributes](ts-universal-attributes-index.md), the following attributes are supported. | Name | Type | Default Value | Description | | -------- | -------- | -------- | -------- | @@ -96,7 +96,8 @@ Sets the cursor in a specified position. | -------- | -------- | | onChange(value: string) => void | Triggered when the input changes. | | onSubmit(callback: (enterKey: EnterKeyType) => void) | Triggered when the Enter key on the physical or soft keyboard is pressed. | -| onEditChanged(callback: (isEditing: boolean) => void) | Triggered when the input status changes. | +| onEditChanged(callback: (isEditing: boolean) => void)(deprecated) | Triggered when the input status changes. | +| onEditChange(callback: (isEditing: boolean) => void) 8+ | Triggered when the input status changes. | | onCopy8+(callback:(value: string) => void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.
**value**: text to be copied. | | onCut8+(callback:(value: string) => void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.
**value**: text to be cut. | | onPaste8+(callback:(value: string) => void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.
**value**: text to be pasted. | diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md b/en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md index 0fef4104bbc778aaf8e7d2350d53d653d7145581..9664340b21efcc4e5784f2a32cc84e1023a98843 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md @@ -23,36 +23,54 @@ None TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTimerController }) - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | 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**.
- If the value of **count** is less than or equal to 0, the default value is used.
- If the value of **count** is greater than 0, it is used. | - | controller | [TextTimerController](#texttimercontroller) | No | null | **<TextTimer>** controller. | + | 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**.
- If the value of **count** is less than or equal to 0, the default value is used.
- If the value of **count** is greater than 0, it is used. | + | controller | [TextTimerController](#texttimercontroller) | No | null | **<TextTimer>** 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 **<TextTimer>** component. - | Name | Description | +## Events + +| Name | Description | | -------- | -------- | -| start() | Starts the timer. | -| pause() | Pauses the timer. | -| reset() | Resets the timer. | +| onTimer(callback: (utc: number, elapsedTime: number) => void) | Triggered when the time text changes.
**utc**: currently displayed time, in milliseconds.
**elapsedTime**: elapsed time of the timer, in milliseconds. | -## 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 **<TextTimer>** component. +### Objects to Import -## Events +``` +textTimerController: TextTimerController = new TextTimerController() - | Name | Description | -| -------- | -------- | -| onTimer(callback: (utc: number, elapsedTime: number) => void) | Triggered when the time text changes.
**utc**: currently displayed time, in milliseconds.
**elapsedTime**: elapsed time of the timer, in milliseconds. | +``` + +### start + +start() + +Starts the timer. + +### pause + +pause() + +Pauses the timer. + +### reset + +reset() + +Resets the timer. ## Example @@ -62,12 +80,12 @@ Defines the controller for controlling the **<TextTimer>** component. @Entry @Component struct TextTimerExample { - myTimerController: TextTimerController = new TextTimerController() + textTimerController: TextTimerController = new TextTimerController() @State format: string = 'hh:mm:ss.ms' build() { Column() { - TextTimer({controller: this.myTimerController}) + TextTimer({controller: this.textTimerController}) .format(this.format) .fontColor(Color.Black) .fontSize(this.textSize) @@ -76,13 +94,13 @@ struct TextTimerExample { }) Row() { Button("start").onClick(() => { - this.myTimerController.start(); + this.textTimerController.start(); }); Button("pause").onClick(() => { - this.myTimerController.pause(); + this.textTimerController.pause(); }); Button("reset").onClick(() => { - this.myTimerController.reset(); + this.textTimerController.reset(); }); } } diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md index 78911b09c70cb2d6218d6180a2675d9616294462..7857f66342105d3ddbfb15cd6f4c5f33e32cd546 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md @@ -15,25 +15,25 @@ None LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: number }) - 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. | - | repeat | boolean | No | false | Whether to continuously trigger the event callback. | - | duration | number | No | 500 | Minimum hold-down time, in ms. | + | 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. | + | duration | number | No | 500 | Minimum hold-down time, in ms. | ## Events - | Name | Description | +| Name | Description | | -------- | -------- | -| onAction((event?: LongPressGestureEvent) => void) | Callback invoked when a long press gesture is recognized. | -| onActionEnd((event?: LongPressGestureEvent) => void) | Callback invoked when the finger used for a long press gesture is lift. | -| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after a long press gesture is recognized. | +| onAction((event?: GestureEvent) => void) | Callback invoked when a long press gesture is recognized. | +| onActionEnd((event?: GestureEvent) => void) | Callback invoked when the finger used for a long press gesture is lift. | +| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after a long press gesture is recognized. | -- LongPressGestureEvent8+ attributes - | Name | Type | Description | +- GestureEvent attributes related to the long press gesture + | Name | Type | Description | | -------- | -------- | -------- | - | repeat | boolean | Whether the event is repeated. | + | repeat | boolean | Whether the event is repeated. | ## Example @@ -53,7 +53,7 @@ struct LongPressGestureExample { .gesture( LongPressGesture({ repeat: true }) // Repeatedly triggered when the long press gesture exists. - .onAction((event: LongPressGestureEvent) => { + .onAction((event: GestureEvent) => { if (event.repeat) { this.count++ } }) // Triggered when the long press gesture ends. diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md index 86ec87b6d1f59620e9b26d761b0f08b4677fb159..76c51b674b80f17de07c1d662893d0efa270cd4d 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md @@ -12,59 +12,59 @@ None ## APIs -PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOption](#pangestureoption)) +PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOption](#pangestureoptions)) - Parameters - | Name | Type | Mandatory | Default Value | Description | + | 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. | - | direction | PanDirection | No | All | Slide direction. The enumerated value supports the AND (&) and OR (\|) operations. | - | distance | number | No | 5.0 | Minimum slide recognition distance, in vp. | + | 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 (&) and OR (\|) operations. | + | distance | number | No | 5.0 | Minimum slide recognition distance, in vp. | - PanDirection enums - | Name | Description | + | Name | Description | | -------- | -------- | - | All | All directions. | - | Horizontal | Horizontal slide. | - | Vertical | Vertical slide. | - | Left | Slide to the left. | - | Right | Slide to the right. | - | Up | Slide up. | - | Down | Slide down. | - | None | Slide disabled. | + | All | All directions. | + | Horizontal | Horizontal slide. | + | Vertical | Vertical slide. | + | Left | Slide to the left. | + | Right | Slide to the right. | + | Up | Slide up. | + | Down | Slide down. | + | None | Slide disabled. | -### PanGestureOption +### PanGestureOptions -The attributes of the slide gesture recognizer can be dynamically modified using the **PanGestureOption** AP. This avoids modifying attributes through status variables, which will cause the UI to be refreshed. +The attributes of the slide gesture recognizer can be dynamically modified using the **PanGestureOptions** AP. This avoids modifying attributes through status variables, which will cause the UI to be refreshed. -PanGestureOption(options?: { fingers?: number, direction?: PanDirection, distance?: number }) +PanGestureOptions(options?: { fingers?: number, direction?: PanDirection, distance?: number }) - Parameters For details, see **PanGesture**. - APIs - | Name | Description | + | Name | Description | | -------- | -------- | - | setDirection(value: PanDirection) | Sets the direction. | - | setDistance(value: number) | Sets the distance. | - | setFingers(value: number) | Sets the number of fingers. | + | setDirection(value: PanDirection) | Sets the direction. | + | setDistance(value: number) | Sets the distance. | + | setFingers(value: number) | Sets the number of fingers. | ## Events - | Name | Description | +| Name | Description | | -------- | -------- | -| onActionStart(callback: (event?: PanGestureEvent) => void) | Callback for the pan gestures reorganization event. | -| onActionUpdate(callback: (event?: PanGestureEvent) => void) | Callback invoked when a pan gesture is recognized. | -| onActionEnd(callback: (event?: PanGestureEvent) => void) | Callback invoked when the finger used for a pan gesture is lift. | -| onActionCancel(callback: () => void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized. | +| onActionStart(callback: (event?: GestureEvent) => void) | Callback for the pan gestures reorganization event. | +| onActionUpdate(callback: (event?: GestureEvent) => void) | Callback invoked when a pan gesture is recognized. | +| onActionEnd(callback: (event?: GestureEvent) => void) | Callback invoked when the finger used for a pan gesture is lift. | +| onActionCancel(callback: () => void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized. | -- PanGestureEvent8+ attributes - | Name | Type | Description | +- GestureEvent attributes related to the pan gesture + | Name | Type | Description | | -------- | -------- | -------- | - | offsetX | number | Offset of the gesture event, in vp. | - | offsetY | 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. | ## Example @@ -85,10 +85,10 @@ struct PanGestureExample { .translate({ x: this.offsetX, y: this.offsetY, z: 5 }) .gesture( PanGesture({}) - .onActionStart((event: PanGestureEvent) => { + .onActionStart((event: GestureEvent) => { console.info('Pan start') }) - .onActionUpdate((event: PanGestureEvent) => { + .onActionUpdate((event: GestureEvent) => { this.offsetX = event.offsetX this.offsetY = event.offsetY }) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md index 328feb245f82260fdb593364c8c377659669971e..88e5122a44a112ca8bff3d06386b390b54c7df96 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md @@ -15,27 +15,27 @@ None PinchGesture(options?: { fingers?: number, distance?: number }) - 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. | - | distance | number | No | 3.0 | Minimum recognition distance, in vp. | + | 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. | ## Events - | Name | Description | +| Name | Description | | -------- | -------- | -| onActionStart((event?: PinchGestureEvent) => void) | Callback invoked when a pinch gesture is recognized. | -| onActionUpdate((event?: PinchGestureEvent) => void) | Callback invoked during the movement of a pinch gesture. | -| onActionEnd((event?: PinchGestureEvent) => void) | Callback invoked when the finger used for a pinch gesture is lift. | -| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after a pinch gesture is recognized. | +| onActionStart((event?: GestureEvent) => void) | Callback invoked when a pinch gesture is recognized. | +| onActionUpdate((event?: GestureEvent) => void) | Callback invoked during the movement of a pinch gesture. | +| onActionEnd((event?: GestureEvent) => void) | Callback invoked when the finger used for a pinch gesture is lift. | +| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after a pinch gesture is recognized. | -- PinchGestureEvent8+ attributes - | Name | Type | Description | +- GestureEvent attributes related to the pinch gesture + | Name | Type | Description | | -------- | -------- | -------- | - | 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. | - | pinchCenterY | number | Y-coordinate of the center of the pinch gesture, in px. | + | 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. | + | pinchCenterY | number | Y-coordinate of the center of the pinch gesture, in px. | ## Example @@ -55,10 +55,10 @@ struct PinchGestureExample { .scale({ x: this.scale, y: this.scale, z: this.scale }) .gesture( PinchGesture() - .onActionStart((event: PinchGestureEvent) => { + .onActionStart((event: GestureEvent) => { console.info('Pinch start') }) - .onActionUpdate((event: PinchGestureEvent) => { + .onActionUpdate((event: GestureEvent) => { this.scale = event.scale }) .onActionEnd(() => { diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md index 16eb5921d688a188d76147f92439a3e120c3aa61..cd4d73e60f9d2b4a43402f379ec4f8e456ae7fd5 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md @@ -15,25 +15,25 @@ None RotationGesture(options?: { fingers?: number, angle?: number }) - 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. | - | angle | number | No | 1.0 | Minimum degree that can trigger the rotation gesture. | + | 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. | ## Events - | Name | Description | +| Name | Description | | -------- | -------- | -| onActionStart((event?: RotationGestureEvent) => void) | Callback invoked when a rotation gesture is recognized. | -| onActionUpdate((event?: RotationGestureEvent) => void) | Callback invoked during the movement of the rotation gesture. | -| onActionEnd((event?: RotationGestureEvent) => void) | Callback invoked when the finger used for the rotation gesture is lift. | -| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after the rotation gesture is recognized. | +| onActionStart((event?: GestureEvent) => void) | Callback invoked when a rotation gesture is recognized. | +| onActionUpdate((event?: GestureEvent) => void) | Callback invoked during the movement of the rotation gesture. | +| onActionEnd((event?: GestureEvent) => void) | Callback invoked when the finger used for the rotation gesture is lift. | +| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after the rotation gesture is recognized. | -- RotationGestureEvent8+ attributes - | Name | Type | Description | +- GestureEvent attributes related to the rotation gesture + | Name | Type | Description | | -------- | -------- | -------- | - | angle | number | Rotation angle. | + | angle | number | Rotation angle. | ## Example @@ -53,10 +53,10 @@ struct RotationGestureExample { .margin(80).rotate({ x:1, y:2, z:3, angle: this.angle }) .gesture( RotationGesture() - .onActionStart((event: RotationGestureEvent) => { + .onActionStart((event: GestureEvent) => { console.log('Rotation start') }) - .onActionUpdate((event: RotationGestureEvent) => { + .onActionUpdate((event: GestureEvent) => { this.angle = event.angle }) .onActionEnd(() => { diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md index 4a3b138a0e5652bddebcff46479d43773fc1354e..7e6ec61e15dc004d7c9a4a26211f5f6e22dbc4de 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md @@ -15,33 +15,34 @@ None SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number }) - 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. | - | direction | SwipeDirection | No | SwipeDirection.All | Swipe direction. | - | speed | number | No | 100 | Minimum speed of the swipe gesture (100 vp/s). | + | 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. | + | speed | number | No | 100 | Minimum speed of the swipe gesture (100 vp/s). | - SwipeDirection enums - | Name | Description | + | Name | Description | | -------- | -------- | - | All | All directions. | - | Horizontal | Horizontal direction. | - | Vertical | Vertical direction. | + | All | All directions. | + | Horizontal | Horizontal direction. | + | Vertical | Vertical direction. | ## Events - | Name | Description | +| Name | Description | | -------- | -------- | -| onAction(callback:(event?: SwipeGestureEvent) => void) | Callback invoked when a swipe gesture is recognized. | +| onAction(callback:(event?: GestureEvent) => void) | Callback invoked when a swipe gesture is recognized. | -- SwipeGestureEvent attributes - | Name | Type | Description | +- GestureEvent attributes related to the swipe gesture + | Name | Type | Description | | -------- | -------- | -------- | - | angle | number | Angle of the swipe gesture. | - | speed | number | Speed of the swipe gesture. | + | angle | number | Angle of the swipe gesture.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> Angle calculation method: After the swipe gesture is identified, a line connecting the two fingers is identified as the initial line. As the fingers swipe, the line between the fingers rotates. Based on the coordinates of the initial line's and current line's end points, an arc tangent function is used to calculate the respective included angle of the points relative to the horizontal direction. Rotation angle = arctan2(cy2-cy1,cx2-cx1) - arctan2(y2-y1,x2-x1). The initial line is used as the coordinate system. The clockwise rotation is 0 to 180 degrees, and the counter-clockwise rotation is –180 to 0 degrees. | + | speed | number | Speed of the swipe gesture. | +![en-us_image_0000001231374559](figures/en-us_image_0000001231374661.png) ## Example @@ -64,7 +65,7 @@ struct SwipeGestureExample { .rotate({x: 0, y: 0, z: 1, angle: this.rotateAngle}) .gesture( SwipeGesture({fingers: 1, direction:SwipeDirection.Vertical}) - .onAction((event: SwipeGestureEvent) => { + .onAction((event: GestureEvent) => { this.speed = event.speed this.rotateAngle = event.angle }) @@ -73,4 +74,4 @@ struct SwipeGestureExample { } ``` -![en-us_image_0000001257138365](figures/en-us_image_0000001257138365.gif) +![en-us_image_0000001231374559](figures/en-us_image_0000001231374559.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md index 40adadc6097c2e27f33c7f245661cf070257b096..be29bb3bdb125c821da0748c8163f7a09e2920fa 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md @@ -30,16 +30,16 @@ Canvas(context: CanvasRenderingContext2D) ## Attributes -[Universal attributes](ts-universal-attributes-size.md) are supported. +[Universal attributes]( ts-universal-attributes-index.md) are supported. ## Events -In addition to [universal events](ts-universal-events-click.md), the following events are supported. +In addition to [universal events](ts-universal-events-index.md), the following events are supported. - | Name | Parameter | Description | +| Name | Parameter | Description | | -------- | -------- | -------- | -| onReady(callback: () => void) | None | Triggered when . | +| onReady(callback: () => void) | None | Triggered when . | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md index 8d676b0de93488e61d5fe09388d758115c6143e3..6af901e21636c03f1189766ea5296217bf72cc91 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md @@ -12,7 +12,7 @@ None ## Modules to Import - + ``` import lottie from 'lottie-ohos-ets' ``` @@ -30,15 +30,15 @@ path: string, container: object, render: string, loop: boolean, autoplay: boolea Loads an animation. Before calling this method, declare the **Animator('__lottie_ets')** object and check that the canvas layout is complete. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onAppear()** and **onPageShow()**. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | path | string | Yes | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**. | - | container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance. | - | render | string | Yes | Rendering type. The value can only be **"canvas"**. | - | loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. | - | autoplay | boolean | No | Whether to automatically play the animation. The default value is **true**. | - | name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation. The default value is null. | - | initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. | + | path | string | Yes | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**. | + | container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance. | + | render | string | Yes | Rendering type. The value can only be **"canvas"**. | + | loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. | + | autoplay | boolean | No | Whether to automatically play the animation. The default value is **true**. | + | name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation. The default value is null. | + | initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. | ## lottie.destroy @@ -48,12 +48,12 @@ destroy(name: string): void Destroys the animation. This method must be called when a page exits. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onDisappear()** and **onPageHide()**. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed. | + | name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed. | - Example - + ``` import lottie from 'lottie-web' @@ -128,12 +128,12 @@ play(name: string): void Plays a specified animation. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played. | + | name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played. | - Example - + ``` lottie.play(this.animateName) ``` @@ -146,12 +146,12 @@ pause(name: string): void Pauses a specified animation. The next time **lottie.play()** is called, the animation starts from the current frame. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. | + | name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. | - Example - + ``` lottie.pause(this.animateName) ``` @@ -164,12 +164,12 @@ togglePause(name: string): void Pauses or plays a specified animation. This method is equivalent to the switching between **lottie.play()** and **lottie.pause()**. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. | + | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. | - Example - + ``` lottie.togglePause(this.animateName) ``` @@ -182,12 +182,12 @@ stop(name: string): void Stops the specified animation. The next time **lottie.play()** is called, the animation starts from the first frame. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. | + | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. | - Example - + ``` lottie.stop(this.animateName) ``` @@ -200,13 +200,13 @@ setSpeed(speed: number, name: string): void Sets the playback speed of the specified animation. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed. | - | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped. | + | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed. | + | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped. | - Example - + ``` lottie.setSpeed(5, this.animateName) ``` @@ -219,13 +219,13 @@ setDirection(direction: AnimationDirection, name: string): void Sets the direction in which the specified animation plays. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.
**AnimationDirection**: 1 \| -1. | - | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set. | + | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.
**AnimationDirection**: 1 \| -1. | + | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set. | - Example - + ``` lottie.setDirection(-1, this.animateName) ``` @@ -235,28 +235,28 @@ Sets the direction in which the specified animation plays. Defines an **AnimationItem** object, which is returned by the **loadAnimation** interface and has attributes and interfaces. The attributes are described as follows: - | Name | Type | Description | +| Name | Type | Description | | -------- | -------- | -------- | -| name | string | Animation name. | -| isLoaded | boolean | Whether the animation is loaded. | -| currentFrame | number | Frame that is being played. The default precision is a floating-point number greater than or equal to 0.0. After **setSubframe(false)** is called, the value is a positive integer without decimal points. | -| currentRawFrame | number | Number of frames that are being played. The precision is a floating point number greater than or equal to 0.0. | -| firstFrame | number | First frame of the animation segment that is being played. | -| totalFrames | number | Total number of frames in the animation segment that is being played. | -| frameRate | number | Frame rate (frame/s). | -| frameMult | number | Frame rate (frame/ms). | -| playSpeed | number | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed. | -| playDirection | number | Playback direction. The options are **1** (forward) and **-1** (backward). | -| playCount | number | Number of times the animation plays. | -| isPaused | boolean | Whether the current animation is paused. The value **true** means that the animation is paused. | -| autoplay | boolean | Whether to automatically play the animation upon completion of the loading. The value **false** means that the **play()** interface needs to be called to start playing. | -| loop | boolean \| number | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. | -| renderer | any | Animation rendering object, which depends on the rendering type. | -| animationID | string | Animation ID. | -| timeCompleted | number | Number of frames that are played for an animation sequence. The value is affected by the setting of **AnimationSegment** and is the same as the value of **totalFrames**. | -| segmentPos | number | ID of the current animation segment. The value is a positive integer greater than or equal to 0. | -| isSubframeEnabled | boolean | Whether the precision of **currentFrame** is a floating point number. | -| segments | AnimationSegment \| AnimationSegment[] | Current segment of the animation. | +| name | string | Animation name. | +| isLoaded | boolean | Whether the animation is loaded. | +| currentFrame | number | Frame that is being played. The default precision is a floating-point number greater than or equal to 0.0. After **setSubframe(false)** is called, the value is a positive integer without decimal points. | +| currentRawFrame | number | Number of frames that are being played. The precision is a floating point number greater than or equal to 0.0. | +| firstFrame | number | First frame of the animation segment that is being played. | +| totalFrames | number | Total number of frames in the animation segment that is being played. | +| frameRate | number | Frame rate (frame/s). | +| frameMult | number | Frame rate (frame/ms). | +| playSpeed | number | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed. | +| playDirection | number | Playback direction. The options are **1** (forward) and **-1** (backward). | +| playCount | number | Number of times the animation plays. | +| isPaused | boolean | Whether the current animation is paused. The value **true** means that the animation is paused. | +| autoplay | boolean | Whether to automatically play the animation upon completion of the loading. The value **false** means that the **play()** interface needs to be called to start playing. | +| loop | boolean \| number | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. | +| renderer | any | Animation rendering object, which depends on the rendering type. | +| animationID | string | Animation ID. | +| timeCompleted | number | Number of frames that are played for an animation sequence. The value is affected by the setting of **AnimationSegment** and is the same as the value of **totalFrames**. | +| segmentPos | number | ID of the current animation segment. The value is a positive integer greater than or equal to 0. | +| isSubframeEnabled | boolean | Whether the precision of **currentFrame** is a floating point number. | +| segments | AnimationSegment \| AnimationSegment[] | Current segment of the animation. | ## AnimationItem.play @@ -266,12 +266,12 @@ play(name?: string): void Plays an animation. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | name | string | No | Name of the target animation. By default, the value is null. | + | name | string | No | Name of the target animation. By default, the value is null. | - Example - + ``` this.animateItem.play() ``` @@ -284,12 +284,12 @@ destroy(name?: string): void Destroys an animation. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | name | string | No | Name of the target animation. By default, the value is null. | + | name | string | No | Name of the target animation. By default, the value is null. | - Example - + ``` this.animateItem.destroy() ``` @@ -302,12 +302,12 @@ pause(name?: string): void Pauses an animation. When the **play** interface is called next time, the animation is played from the current frame. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | name | string | No | Name of the target animation. By default, the value is null. | + | name | string | No | Name of the target animation. By default, the value is null. | - Example - + ``` this.animateItem.pause() ``` @@ -320,12 +320,12 @@ togglePause(name?: string): void Pauses or plays an animation. This method is equivalent to the switching between **play** and **pause**. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | name | string | No | Name of the target animation. By default, the value is null. | + | name | string | No | Name of the target animation. By default, the value is null. | - Example - + ``` this.animateItem.togglePause() ``` @@ -338,12 +338,12 @@ stop(name?: string): void Stops an animation. When the **play** interface is called next time, the animation is played from the first frame. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | name | string | No | Name of the target animation. By default, the value is null. | + | name | string | No | Name of the target animation. By default, the value is null. | - Example - + ``` this.animateItem.stop() ``` @@ -356,12 +356,12 @@ setSpeed(speed: number): void Sets the playback speed of an animation. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed. | + | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed. | - Example - + ``` this.animateItem.setSpeed(5); ``` @@ -374,12 +374,12 @@ setDirection(direction: AnimationDirection): void Sets the playback direction of an animation. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.
**AnimationDirection**: 1 \| -1. | + | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.
**AnimationDirection**: 1 \| -1. | - Example - + ``` this.animateItem.setDirection(-1) ``` @@ -387,19 +387,19 @@ Sets the playback direction of an animation. ## AnimationItem.goToAndStop -goToAndStop(value: number, isFrame: boolean): void +goToAndStop(value: number, isFrame?: boolean): void Sets the animation to stop at the specified frame or time. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. | - | isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress. The default value is **false**. | - | name | string | No | Name of the target animation. By default, the value is null. | + | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. | + | isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress. The default value is **false**. | + | name | string | No | Name of the target animation. By default, the value is null. | - Example - + ``` // Set the animation to stop at the specified frame. this.animateItem.goToAndStop(25, true) @@ -410,19 +410,19 @@ Sets the animation to stop at the specified frame or time. ## AnimationItem.goToAndPlay -goToAndPlay(value: number, isFrame: boolean): void +goToAndPlay( value: number, isFrame: boolean, name?: string): void Sets the animation to start from the specified frame or time progress. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. | - | isFrame | boolean | Yes | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress. The default value is **false**. | - | name | string | No | Name of the target animation. By default, the value is null. | + | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. | + | isFrame | boolean | Yes | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress. The default value is **false**. | + | name | string | No | Name of the target animation. By default, the value is null. | - Example - + ``` // Set the animation to stop at the specified frame. this.animateItem.goToAndPlay(25, true) @@ -438,13 +438,13 @@ playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean Sets the animation to play only the specified segment. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.
If all segments in the segment list are played, only the last segment is played in the next cycle. | - | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. | + | segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.
If all segments in the segment list are played, only the last segment is played in the next cycle. | + | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. | - Example - + ``` // Set the animation to play the specified segment. this.animateItem.playSegments([10, 20], false) @@ -460,12 +460,12 @@ resetSegments(forceFlag: boolean): void Resets the settings configured by the **playSegments** method to play all the frames. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. | + | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. | - Example - + ``` this.animateItem.resetSegments(true) ``` @@ -478,7 +478,7 @@ resize(): void Resizes the animation layout. - Example - + ``` this.animateItem.resize() ``` @@ -491,12 +491,12 @@ setSubframe(useSubFrame: boolean): void Sets the precision of the **currentFrame** attribute to display floating-point numbers. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.
**true**: The **currentFrame** attribute displays floating-point numbers.
**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers. | + | useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.
**true**: The **currentFrame** attribute displays floating-point numbers.
**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers. | - Example - + ``` this.animateItem.setSubframe(false) ``` @@ -509,12 +509,12 @@ getDuration(inFrames?: boolean): void Obtains the duration (irrelevant to the playback speed) or number of frames for playing an animation sequence. The settings are related to the input parameter **initialSegment** of the **Lottie.loadAnimation** interface. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | inFrames | boolean | No | Whether to obtain the duration or number of frames. **true**: number of frames. **false**: duration, in ms. The default value is **false**. | + | inFrames | boolean | No | Whether to obtain the duration or number of frames. **true**: number of frames. **false**: duration, in ms. The default value is **false**. | - Example - + ``` this.animateItem.getDuration(true) ``` @@ -527,13 +527,13 @@ addEventListener<T = any>(name: AnimationEventName, callback: AnimationEve Adds an event listener. After the event is complete, the specified callback function is triggered. This method returns the function object that can delete the event listener. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | name | AnimationEventName | Yes | Animation event type. The available options are as follows:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images' | - | callback | AnimationEventCallback<T> | Yes | Custom callback. | + | name | AnimationEventName | Yes | Animation event type. The available options are as follows:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images' | + | callback | AnimationEventCallback<T> | Yes | Custom callback. | - Example - + ``` private callbackItem: any = function() { console.log("grunt loopComplete") @@ -552,13 +552,13 @@ removeEventListener<T = any>(name: AnimationEventName, callback?: Animatio Removes an event listener. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | name | AnimationEventName | Yes | Animation event type. The available options are as follows:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images' | - | callback | AnimationEventCallback<T> | Yes | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. | + | name | AnimationEventName | Yes | Animation event type. The available options are as follows:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images' | + | callback | AnimationEventCallback<T> | Yes | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. | - Example - + ``` this.animateItem.removeEventListener('loopComplete', this.animateName) ``` @@ -571,13 +571,13 @@ triggerEvent<T = any>(name: AnimationEventName, args: T): void Directly triggers all configured callbacks of a specified event. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | name | AnimationEventName | Yes | Animation event type. | - | args | any | Yes | Custom callback parameters. | + | name | AnimationEventName | Yes | Animation event type. | + | args | any | Yes | Custom callback parameters. | - Example - + ``` private triggerCallBack: any = function(item) { console.log("trigger loopComplete, name:" + item.name) diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md index 4ac71e31814747edb77ee2ff3409b2c2b88bc1b8..33471a248de86a79f1fb72c2fa3365e7e2b330f8 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md @@ -15,12 +15,12 @@ addPath(path: Object): void Adds a path to this path. - 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 - + ``` @Entry @Component @@ -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. - Example - + ``` @Entry @Component @@ -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. - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | x | number | Yes | 0 | X-coordinate of the target point. | - | y | number | Yes | 0 | Y-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. | - Example - + ``` @Entry @Component @@ -142,13 +142,13 @@ lineTo(x: number, y: number): void Draws a straight line from the current point to the target point. - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | x | number | Yes | 0 | X-coordinate of the target point. | - | y | number | Yes | 0 | Y-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. | - Example - + ``` @Entry @Component @@ -188,17 +188,17 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, Draws a cubic bezier curve on the canvas. - 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. | - | 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. | - | 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. | - | y | number | Yes | 0 | Y-coordinate of the end point on 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. | + | 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. | + | 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. | - Example - + ``` @Entry @Component @@ -234,15 +234,15 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void Draws a quadratic curve on the canvas. - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | cpx | number | Yes | 0 | X-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. | - | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. | + | cpx | number | Yes | 0 | X-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. | + | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. | - Example - + ``` @Entry @Component @@ -274,22 +274,22 @@ Draws a quadratic curve on the canvas. ## arc -arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: number): void +arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void Draws an arc on the canvas. - 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. | - | y | number | Yes | 0 | Y-coordinate of the center point of the arc. | - | radius | number | Yes | 0 | Radius of the arc. | - | startAngle | number | Yes | 0 | Start radian of the arc. | - | endAngle | number | Yes | 0 | End radian of the arc. | - | anticlockwise | boolean | No | false | Whether to draw the arc counterclockwise. | + | 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. | + | radius | number | Yes | 0 | Radius of the arc. | + | startAngle | number | Yes | 0 | Start radian of the arc. | + | endAngle | number | Yes | 0 | End radian of the arc. | + | anticlockwise | boolean | No | false | Whether to draw the arc counterclockwise. | - Example - + ``` @Entry @Component @@ -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. - 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. | - | 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. | - | y2 | number | Yes | 0 | Y-coordinate of the second point on the arc. | - | radius | number | Yes | 0 | Radius of 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. | + | 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. | + | radius | number | Yes | 0 | Radius of the arc. | - Example - + ``` @Entry @Component @@ -369,19 +369,19 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number Draws an ellipse in the specified rectangular region. - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | x | number | Yes | 0 | X-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. | - | radiusY | number | Yes | 0 | Ellipse radius on the y-axis. | - | 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. | - | 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**. | + | x | number | Yes | 0 | X-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. | + | radiusY | number | Yes | 0 | Ellipse radius on the y-axis. | + | 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. | + | 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**. | - Example - + ``` @Entry @Component @@ -417,15 +417,15 @@ rect(x: number, y: number, width: number, height: number): void Creates a rectangle. - 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. | - | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. | - | width | number | Yes | 0 | Width of the rectangle. | - | height | number | Yes | 0 | Height 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. | + | width | number | Yes | 0 | Width of the rectangle. | + | height | number | Yes | 0 | Height of the rectangle. | - Example - + ``` @Entry @Component diff --git a/en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md b/en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md index 89610005db9561f3cb52282fd4a97cc414a57d23..ba2b3259ee48b1627a1f100b1e33f496b7b3a974 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md +++ b/en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md @@ -23,46 +23,47 @@ None AlphabetIndexer(value: {arrayValue : Array<string>, selected : number}) - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | arrayValue | Array<string> | Yes | - | Array of strings to be displayed in the alphabetic index bar. | - | selected | number | Yes | - | ID of a selected item. | + | arrayValue | Array<string> | Yes | - | Array of strings to be displayed in the alphabetic index bar. | + | selected | number | Yes | - | ID of a selected item. | ## Attributes - | Name | Type | Description | +| Name | Type | Description | | -------- | -------- | -------- | -| selectedColor | Color | Font color of the selected text. | -| popupColor | Color | Font color of the pop-up text. | -| selectedBackgroundColor | Color | Background color of the selected text. | -| popupBackground | Color | Background color of the pop-up text. | -| usingPopup | boolean | Whether to use pop-up text. | -| selectedFont | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | Font style of the selected text. | -| popupFont | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | Font style of the pop-up text. | -| font | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | 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. | -| 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. | +| selectedColor | Color | Font color of the selected text. | +| popupColor | Color | Font color of the pop-up text. | +| selectedBackgroundColor | Color | Background color of the selected text. | +| popupBackground | Color | Background color of the pop-up text. | +| usingPopup | boolean | Whether to use pop-up text. | +| selectedFont | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | Font style of the selected text. | +| popupFont | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | Font style of the pop-up text. | +| font | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | 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. | +| 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 - | Name | Description | + | Name | Description | | -------- | -------- | - | 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. | + | 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. | ## Events - | Name | Description | +| Name | Description | | -------- | -------- | -| onSelected(index: number) => void | Callback invoked when an item in the alphabetic indexer bar is selected. | -| onRequestPopupData(callback: (index: number) => Array<string>)8+ | Invoked when a request for displaying content in the index prompt window is sent when an item in the alphabetic indexer bar is selected.
The return value is a string array corresponding to the indexes. The string array is displayed vertically in the pop-up window. It can display up to five strings at a time and allows scrolling. | -| onPopupSelected(callback: (index: number) => void)8+ | Invoked when an item in the index pop-up window is selected. | +| onSelected(index: number) => void(deprecated) | Invoked when an item in the alphabetic indexer bar is selected. | +| onSelect(index: number) => void8+ | Invoked when an item in the alphabetic indexer bar is selected. | +| onRequestPopupData(callback: (index: number) => Array<string>)8+ | Invoked when a request for displaying content in the index prompt window is sent when an item in the alphabetic indexer bar is selected.
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) => void)8+ | Invoked when an item in the index pop-up window is selected. | ## Example - + ``` @Entry @Component @@ -80,7 +81,7 @@ struct AlphabetIndexerSample { .popupFont({ size: 30, weight: FontWeight.Bolder }) // Font style of the pop-up text .itemSize(28) // Size of each item (square) .alignStyle(IndexerAlign.Left) // Left aligned - .onSelected((index: number) => { + .onSelect((index: number) => { console.info(this.value[index] + 'Selected') // Event indicating that an item is selected }) .margin({ left: 50 }) diff --git a/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md b/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md index 66689eb6452cf7a71a11d2f242be8d996526728a..04f4a38ccca5fe7f11919dfdd1cbbbb0e5305b80 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md +++ b/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md @@ -25,9 +25,9 @@ RowSplit() ## 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** > Similar to **<RowSplit>**, the divider of **<RowSplit>** can be dragged to a position that just fully holds a component. @@ -35,14 +35,14 @@ RowSplit() ## Example - + ``` @Entry @Component struct RowSplitExample { build() { Column() { - Text('The secant line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%') + Text('The second line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%') RowSplit() { Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) diff --git a/en/application-dev/reference/arkui-ts/ts-container-scroll.md b/en/application-dev/reference/arkui-ts/ts-container-scroll.md index fe9f455dd4fe3052843fd4f22e76605acd0457f2..076505a2951dac1b2e3a729768f56f8d52692775 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-scroll.md +++ b/en/application-dev/reference/arkui-ts/ts-container-scroll.md @@ -25,19 +25,19 @@ Scroll(scroller?: Scroller) ## Attributes -| Name | Type | Default Value | Description | +| Name | Type | Default Value | Description | | -------- | -------- | -------- | -------- | -| scrollable | ScrollDirection | ScrollDirection.Vertical | Scroll method. | -| scrollBar | [BarState](ts-appendix-enums.md#barstate-enums) | Auto | Scroll bar status. | +| scrollable | ScrollDirection | ScrollDirection.Vertical | Scroll method. | +| scrollBar | [BarState](ts-appendix-enums.md#barstate-enums) | Auto | Scroll bar status. | | scrollBarColor | Color | - | Color of the scroll bar. | | scrollBarWidth | Length | - | Width of the scrollbar. | - ScrollDirection - | Name | Description | + | Name | Description | | -------- | -------- | - | Horizontal | Only horizontal scrolling is supported. | - | Vertical | Only vertical scrolling is supported. | - | None | Scrolling is disabled. | + | Horizontal | Only horizontal scrolling is supported. | + | Vertical | Only vertical scrolling is supported. | + | None | Scrolling is disabled. | ## Scroller @@ -62,11 +62,11 @@ Scrolls to the specified position. - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | xOffset | Length | Yes | - | Horizontal scrolling offset. | - | yOffset | Length | Yes | - | Vertical scrolling offset. | - | animation | {
duration: number,
curve: Curve \|
CubicBezier \|
SpringCurve
} | No | | Animation configuration, which includes the following:
- **duration**: scrolling duration.
- **curve**: scrolling curve. | + | xOffset | Length | Yes | - | Horizontal scrolling offset. | + | yOffset | Length | Yes | - | Vertical scrolling offset. | + | animation | {
duration: number,
curve: Curve \|
CubicBezier \|
SpringCurve
} | No | | Animation configuration, which includes the following:
- **duration**: scrolling duration.
- **curve**: scrolling curve. | ### scroller.scrollEdge @@ -78,9 +78,9 @@ Scrolls to the edge of the container. - 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 @@ -90,7 +90,7 @@ scrollPage(value: { next: boolean, direction?: Axis }): void Scrolls to the next or previous page. - 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. | @@ -104,9 +104,9 @@ Obtains the scrolling offset. - Return values - | Type | Description | + | Type | Description | | -------- | -------- | - | {
xOffset: number,
yOffset: number
} | **xOffset**: horizontal scrolling offset.
**yOffset**: vertical scrolling offset. | + | {
xOffset: number,
yOffset: number
} | **xOffset**: horizontal scrolling offset.
**yOffset**: vertical scrolling offset. | ### scroller.scrollToIndex @@ -122,18 +122,18 @@ Scrolls to the specified index. - 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 - | Name | Description | +| Name | Description | | -------- | -------- | -| onScroll(xOffset: number, yOffset: number) => void | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. | -| onScrollEdge(side: Edge) => void | Callback for the event of scrolling to the edge. | -| onScrollEnd() => void | Invoked when scrolling stops. | +| onScroll(xOffset: number, yOffset: number) => void | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. | +| onScrollEdge(side: Edge) => void | Callback for the event of scrolling to the edge. | +| onScrollEnd() => void | Invoked when scrolling stops. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-container-tabs.md b/en/application-dev/reference/arkui-ts/ts-container-tabs.md index 42797131cef70c6f80bc8baa55302732432f2e06..4f797a9f483942a8b4af751730e9ddbedc85899a 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-tabs.md +++ b/en/application-dev/reference/arkui-ts/ts-container-tabs.md @@ -36,15 +36,6 @@ Tabs(value: {barPosition?: BarPosition, index?: number, controller?: [TabsContro | End | If the **vertical** attribute is set to **true**, the tab is on the right of the container. If the **vertical** attribute is set to **false**, the tab is at the bottom of the container. | -### TabsController - -Defines a tab controller, which is used to control switching of tabs. - -| API | Description | -| -------- | -------- | -| changeIndex(value: number): void | Changes the index of a tab. The value starts from **0**. | - - ## Attributes Touch target configuration is not supported. @@ -71,6 +62,27 @@ Touch target configuration is not supported. | -------- | -------- | | onChange(callback: (index: number) => 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 diff --git a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md index f8c65982db423a9dc3eb4a7573b9501e15a1b73d..d3a75465226905a1a9b144f09dffd50d5a7ee0a7 100644 --- a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md @@ -4,28 +4,28 @@ > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - | Name | Description | +| Name | Description | | -------- | -------- | -| animateTo(value: [AnimationOption](#animationoption-object), event: ()=> void) : void | Provides a transition animation when the status changes due to the closure code.
**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: ()=> void) : void | Provides a transition animation when the status changes due to the closure code.
**event** specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function. | -## AnimationOption Object +## AnimationOptions - Attributes - | Name | Type | Default Value | Description | + | Name | Type | Default Value | Description | | -------- | -------- | -------- | -------- | - | 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. | - | curve | Curve \| Curves | Linear | Animation curve. | - | 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. | - | playMode | PlayMode | Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete. | + | 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. | + | curve | Curve \| Curves | Linear | Animation curve. | + | 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. | + | playMode | PlayMode | Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete. | - APIs - | Name | Description | + | Name | Description | | -------- | -------- | - | onFinish() => void | Callback invoked when the animation playback is complete. | + | onFinish() => void | Callback invoked when the animation playback is complete. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-media-components-video.md b/en/application-dev/reference/arkui-ts/ts-media-components-video.md index 8e2f943835a48517e45377c0ac81fd6145471bed..461eac8e5042ffc2594879c11fde7d426124a7ba 100644 --- a/en/application-dev/reference/arkui-ts/ts-media-components-video.md +++ b/en/application-dev/reference/arkui-ts/ts-media-components-video.md @@ -15,9 +15,9 @@ The **<Video>** component does not support any child component. ## APIs -Video(value: VideoOption) +Video(value: VideoOptions) -- VideoOption attributes +- VideoOptions attributes | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | | src | string | No | - | Path of the video source. | @@ -27,13 +27,13 @@ Video(value: VideoOption) - PlaybackSpeed8+ - | Name | Description | + | Name | Description | | -------- | -------- | - | Speed_Forward_0_75_X | 0.75x playback speed. | - | Speed_Forward_1_00_X | 1x playback speed. | - | Speed_Forward_1_25_X | 1.25x playback speed. | - | Speed_Forward_1_75_X | 1.75x playback speed. | - | Speed_Forward_2_00_X | 2x playback speed. | + | Speed_Forward_0_75_X | 0.75x playback speed. | + | Speed_Forward_1_00_X | 1x playback speed. | + | Speed_Forward_1_25_X | 1.25x playback speed. | + | Speed_Forward_1_75_X | 1.75x playback speed. | + | Speed_Forward_2_00_X | 2x playback speed. | ## Attributes @@ -49,38 +49,94 @@ Video(value: VideoOption) ## Events - | Name | Description | +| Name | Description | | -------- | -------- | -| onStart() => void | Triggered when the video is played. | -| onPause() => void | Triggered when the video playback is paused. | -| onFinish() => void | Triggered when the video playback is finished. | +| onStart() => void | Triggered when the video is played. | +| onPause() => void | Triggered when the video playback is paused. | +| onFinish() => void | Triggered when the video playback is finished. | | onError() => void | Triggered when the video playback fails. | -| onPrepared(event?: { duration: number }) => void | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**. | -| onSeeking(event?: { time: number }) => void | Triggered to report the time (in seconds) when the progress bar is being dragged. | -| onSeeked(event?: { time: number }) => void | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar. | -| onUpdate(event?: { time: number }) => void | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second. | +| onPrepared(event?: { duration: number }) => void | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**. | +| onSeeking(event?: { time: number }) => void | Triggered to report the time (in seconds) when the progress bar is being dragged. | +| onSeeked(event?: { time: number }) => void | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar. | +| onUpdate(event?: { time: number }) => void | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second. | -### VideoController +## VideoController -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> A **VideoController** object can control one or more videos. +A **VideoController** object can control one or more videos. - | Name | Description | -| -------- | -------- | -| start() : void | Starts playback. | -| pause() : void | Pauses playback. | -| stop() : void | Stops playback. | -| setCurrentTime(value: number) | Sets the video playback position. | -| setCurrentTime(value: number, seekMode: SeekMode)8+ | Sets the video playback position with the specified seek mode. | + +### Objects to Import + +``` +controller: VideoController = new VideoController(); +``` + +### start + +start(): void + +Starts playback. + +### pause + +pause(): void + +Pauses playback. + +### stop + +stop(): void + +Stops playback. + +### setCurrentTime + +setCurrentTime(value: number) + +Sets the video playback position. + +- Parameters + | Name | Type | Mandatory | Default Value | Description | + | -------- | -------- | -------- | -------- | -------- | + | value | number | Yes | - | Video playback position. | + +### requestFullscreen + +requestFullscreen(value: boolean) + +Requests full-screen mode. + +- Parameters + | Name | Type | Mandatory | Default Value | Description | + | -------- | -------- | -------- | -------- | -------- | + | value | number | Yes | false | Whether the playback is in full-screen mode. | + +### exitFullscreen + +exitFullscreen() + +Exits full-screen mode. + +### setCurrentTime8+ + +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. | - SeekMode8+ - | Name | Description | + | Name | Description | | -------- | -------- | - | PreviousKeyframe | Seeks to the nearest previous keyframe. | - | NextKeyframe | Seeks to the nearest next keyframe. | - | ClosestKeyframe | Seeks to the nearest keyframe. | - | Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe. | + | PreviousKeyframe | Seeks to the nearest previous keyframe. | + | NextKeyframe | Seeks to the nearest next keyframe. | + | ClosestKeyframe | Seeks to the nearest keyframe. | + | Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md b/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md index c064d4cd32cfa97c3b96203628506e73e2486b50..c92528167d4bd71bc5d349afec978fafe7731077 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md @@ -10,7 +10,7 @@ The **CustomDialogController** class is used to display a custom dialog box. ## APIs -CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean}) +CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean}) - Parameters diff --git a/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md index 33f5b2b99a98549ba58125493535f8efbad948b5..0a323a7abe01a0b6ccf50c2c6a18179ae0bbe9ff 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md @@ -48,7 +48,6 @@ struct DatePickerDialogExample01 { onAccept: (value: DatePickerResult) => { this.selectedDate.setFullYear(value.year, value.month, value.day) console.info("DatePickerDialog:onAccept()" + JSON.stringify(value)) - } }, onCancel: () => { console.info("DatePickerDialog:onCancel()") @@ -82,7 +81,6 @@ struct DatePickerDialogExample02 { onAccept: (value: DatePickerResult) => { this.selectedDate.setFullYear(value.year, value.month, value.day) console.info("DatePickerDialog:onAccept()" + JSON.stringify(value)) - } }, onCancel: () => { console.info("DatePickerDialog:onCancel()") diff --git a/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md index 5102db0b6f597b3b18210c31619a8271a1ae8cb0..7a81a17c79418684213543b1dda4a023a55ba209 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md @@ -11,11 +11,11 @@ None ## TextPickerDialog.show -show(options: TextPickerDialogOption) +show(options: TextPickerDialogOptions) Shows a text picker in the given settings. -- TextPickerDialogOption parameters +- TextPickerDialogOptions | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | | range | string[] | Yes| - | Data selection range of the picker.| diff --git a/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md index 5c0bc59793f8386e1cc1e93d1b5c6d11da00f8b7..2dba7f369d72c031022544ce941e71501428259b 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md @@ -40,7 +40,6 @@ struct TimePickerDialogExample01 { TimePickerDialog.show({ useMilitaryTime: this.isUseMilitaryTime, onAccept: (value: TimePickerResult) => { - this.selectedDate.setHours(value.hour, value.minute, value.second) console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) }, onCancel: () => { @@ -69,7 +68,6 @@ struct TimePickerDialogExample02 { TimePickerDialog.show({ useMilitaryTime: this.isUseMilitaryTime, onAccept: (value: TimePickerResult) => { - this.selectedDate.setHours(value.hour, value.minute, value.second) console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) }, onCancel: () => { diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md index dfdd81c8275ad9c5ddebf9aeec2626c7959d5402..c8aed1d08bb6797e69b650aefc2d1b7adb9b47fb 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md @@ -2,7 +2,7 @@ > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Required Permissions @@ -13,14 +13,14 @@ None ## Attributes - | **Name** | **Type** | **Default Value** | **Description** | -| -------- | -------- | -------- | -------- | -| touchable | boolean | true | Whether the current component is touchable. | +| **Name** | **Type** | **Default Value** | **Description** | +| -------- | -------- | -------- | -------- | +| touchable | boolean | true | Whether the current component is touchable. | ## Example - + ``` @Entry @Component diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md index 7c1c225962fcbda50f7277fba18bef4166a3f1e2..56ea57821dfedf2870eeba23e2031b95921b885b 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md @@ -12,22 +12,22 @@ None ## 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 - | Name | Description | + | Name | Description | | -------- | -------- | - | Auto | Default hover effect. | - | Scale | Scale effect. | - | Board | Fade-in and fade-out effect. | - | None | No effect. | + | Auto | Default hover effect. | + | Scale | Scale effect. | + | Highlight | Fade-in and fade-out effect. | + | None | No effect. | ## Example - + ``` @Entry @Component @@ -43,17 +43,17 @@ struct HoverExample { .position({ x: 40, y: 120 }) .hoverEffect(HoverEffect.Scale) .onHover((isHover: boolean) => { - console.info('Scale' + isHover) + console.info('Scale isHover: ' + isHover) this.isHoverVal = isHover }) Text('Board').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 380 }) Column() .width('80%').height(200).backgroundColor(Color.Gray) - .hoverEffect(HoverEffect.Board) + .hoverEffect(HoverEffect.Highlight) .position({ x: 40, y: 420 }) .onHover((isHover: boolean) => { - console.info('HoverEffect.Board') + console.info('Highlight isHover: ' +isHover ) this.isHoverVal = isHover }) } diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md index e4ab894bb4ec9529aaec2fcdc073b8fa56132b0a..48bd346aa8202c019f7425097f66f1453dc96fd7 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md @@ -15,21 +15,21 @@ None ## Attributes - | Name | Type | Default Value | Description | +| Name | Type | Default Value | Description | | -------- | -------- | -------- | -------- | -| stateStyle | StateStyles | - | Sets the styles of a component for different states. | +| stateStyles | StateStyles | - | Styles of a component for different states. | - StateStyles8+ - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | normal | ()=>void | No | - | Style of the component when stateless. | - | pressed | ()=>void | No | - | Style of the component in the pressed state. | - | disabled | ()=>void | No | - | Style of the component in disabled state. | + | normal | ()=>void | No | - | Style of the component when stateless. | + | pressed | ()=>void | No | - | Style of the component in the pressed state. | + | disabled | ()=>void | No | - | Style of the component in disabled state. | ## Example - + ``` @Entry @Component diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md index 224ece16207a0d67c4ebdb05f55d157442271301..9d801b2503cc4225907879d5eba7596c120db3b6 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md @@ -13,21 +13,21 @@ None ## Attributes - | Name | Type | Default Value | Description | +| Name | Type | Default Value | Description | | -------- | -------- | -------- | -------- | -| bindPopup | show: boolean,
popup: PopupOption \| CustomPopupOption | - | Settings of the popup bound to a component.
**show**: whether to display the popup on the creation page by default. The default value is **false**.
**popup**: parameters of the current popup. | +| bindPopup | show: boolean,
popup: PopupOptions \| CustomPopupOptions | - | Settings of the popup bound to a component.
**show**: whether to display the popup on the creation page by default. The default value is **false**.
**popup**: parameters of the current popup. | -- PopupOption attributes - | Name | Type | Mandatory | Default Value | Description | +- PopupOptions attributes + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | 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**. | - | primaryButton | {
value: string,
action: () => void
} | No | - | First button.
**value**: text of the primary button in the popup.
**action**: callback function for clicking the primary button. | - | secondaryButton | {
value: string,
action: () => void
} | No | - | Second button.
**value**: text of the secondary button in the popup.
**action**: callback function for clicking the secondary button. | - | onStateChange | (isVisible: boolean) => void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. | + | 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**. | + | primaryButton | {
value: string,
action: () => void
} | No | - | First button.
**value**: text of the primary button in the popup.
**action**: callback function for clicking the primary button. | + | secondaryButton | {
value: string,
action: () => void
} | No | - | Second button.
**value**: text of the secondary button in the popup.
**action**: callback function for clicking the secondary button. | + | onStateChange | (isVisible: boolean) => void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. | -- CustomPopupOption8+ +- CustomPopupOptions8+ | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | | builder | () => any | Yes | - | Builder of the tooltip content. | @@ -39,16 +39,16 @@ None | onStateChange | (isVisible: boolean) => void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. | - Placement8+ enums - | Name | Description | + | Name | Description | | -------- | -------- | - | Left | The tooltip is on the left of the component. | - | Right | The tooltip is on the right of the component. | - | Top | The tooltip is on the top 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. | - | TopRight | The tooltip is in the upper right 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. | + | Left | The tooltip is on the left of the component. | + | Right | The tooltip is on the right of the component. | + | Top | The tooltip is on the top 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. | + | TopRight | The tooltip is in the upper right 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. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-click.md b/en/application-dev/reference/arkui-ts/ts-universal-events-click.md index 85f747e8f45c5094683abdd91b52e08effbad07e..92ceedcdc8cdf532dcaf9bfb3205c7f9d4cf7c6d 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-events-click.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-events-click.md @@ -12,43 +12,43 @@ None ## Events - | Name | Bubble Supported | Description | +| Name | Bubble Supported | Description | | -------- | -------- | -------- | -| onClick(callback: (event?: ClickEvent) => void) | No | Called when a click event occurs. For details about the event parameters, see [ClickEvent](#clickevent). | +| onClick(callback: (event?: ClickEvent) => void) | No | Called when a click event occurs. For details about the event parameters, see [ClickEvent](#clickevent). | ### ClickEvent - | Name | Type | Description | +| Name | Type | Description | | -------- | -------- | -------- | -| screenX | number | X coordinate of the click relative to the left edge of the screen. | -| screenY | number | Y coordinate of the click relative to the upper edge of the screen. | -| 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. | -| target8+ | EventTarget | Target element that is clicked. | -| timestamp | number | Timestamp of the event. | +| 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. | +| 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. | +| target8+ | EventTarget | Target element that is clicked. | +| timestamp | number | Timestamp of the event. | - EventTarget8+ attributes - | Name | Type | Description | + | Name | Type | Description | | -------- | -------- | -------- | - | area | Area | Area information of the target element.| + | area | Area | Area information of the target element.| - Area8+ attributes - | Name | Type | Description | + | Name | Type | Description | | -------- | -------- | -------- | - | width | number | Width of the target element, in vp. | - | height | number | Height of the target element, in vp. | - | pos | Position | Position of the upper left corner of the target element relative to that of the parent element. | - | globalPos | Position | Position of the upper left corner of the target element relative to that of the page. | + | width | number | Width of the target element, in vp. | + | height | number | Height of the target element, in vp. | + | position | Position | Position of the upper left corner of the target element relative to that of the parent element. | + | globalPosition | Position | Position of the upper left corner of the target element relative to that of the page. | - Position8+ attributes - | Name | Type | Description | + | Name | Type | Description | | -------- | -------- | -------- | - | x | number | X-coordinate, in vp. | - | y | number | Y-coordinate, in vp. | + | x | number | X-coordinate, in vp. | + | y | number | Y-coordinate, in vp. | ## Example diff --git a/en/application-dev/ui/Readme-EN.md b/en/application-dev/ui/Readme-EN.md new file mode 100644 index 0000000000000000000000000000000000000000..32ac7687a68e1702f82c6cf8c12ed4ff18bcad74 --- /dev/null +++ b/en/application-dev/ui/Readme-EN.md @@ -0,0 +1,145 @@ +# 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) diff --git a/en/application-dev/ui/arkui-overview.md b/en/application-dev/ui/arkui-overview.md index a5ba95916cfd3fad3e6eebe945ea6f22f6aa2aea..43bff6f16355673a8bc4b027680e427b9801d4d3 100644 --- a/en/application-dev/ui/arkui-overview.md +++ b/en/application-dev/ui/arkui-overview.md @@ -13,42 +13,20 @@ ArkUI is a UI development framework that provides what you'll need to develop ap - Page: the smallest unit for ArkUI application scheduling. You can design multiple pages for your application, manage their files on a per-page basis, and schedule page redirection through routing APIs, so as to implement decoupling of application functions. -## Key Capabilities - -- Diverse components: In addition to a wide range of basic components, such as components for text display, image display, and keypress interaction, ArkUI provides media components that support video playback. Better yet, it also provides polymorphic components, which can adapt to styles of different devices. - -- Flexible layouts: Creating a responsive UI in ArkUI is easy, with our carefully-designed layout approaches: Besides the classic flexible layout capability, you also have access to the list, grid, and atomic layouts that auto-adapt to screen resolutions. +## Key Features +- UI components: In addition to a wide range of basic components, such as components for text display, image display, and keypress interaction, ArkUI provides media components that support video playback. Better yet, it also provides polymorphic components, which can adapt to styles of different devices. +- Layout: Creating a responsive UI in ArkUI is easy, with our carefully-designed layout approaches: Besides the classic flexible layout capability, you also have access to the list, grid, and atomic layouts that auto-adapt to screen resolutions. - Animation: Apart from animations embedded in components, ArkUI offers additional animation features: attribute animation, transition animation, and custom animation. - -- UI interaction: ArkUI allows users to interact with your application UI properly, regardless of the system platform and input device. By default, the UI accepts input from touch gestures, remote controls, and mouse devices, with support for the event notification capability. - - Drawing: ArkUI offers advanced drawing capabilities that allow you to draw custom shapes with a range of editors, from images to fill colors and texts. - +- Interaction: ArkUI allows users to interact with your application UI properly, regardless of the system platform and input device. By default, the UI accepts input from touch gestures, remote controls, and mouse devices, with support for the event notification capability. - Platform API channel: ArkUI provides an API extension mechanism through which platform capabilities are encapsulated to produce JavaScript APIs in a unified style. +- Two development paradigms: ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice. - -## Development Paradigms - -ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice. - - -### Web-like Development Paradigm - -The web-like development paradigm uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. It could be helpful if you are developing small- and medium-sized applications with simple UIs. - - -### Declarative Development Paradigm - -The declarative development paradigm uses the TypeScript programming language and extends the declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and state management. The programming mode used is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. With type annotations in TypeScript, you can enforce type checking at compile time. If you are developing large applications, the declarative development paradigm is more applicable. - - -### Web-like Development Paradigm vs. Declarative Development Paradigm - - | Development Paradigm | Language | UI Update Mode | Applicable To | Intended Audience | -| -------- | -------- | -------- | -------- | -------- | -| Web-like development paradigm | JavaScript | Data-driven | Applets and service widgets with simple UIs | Frontend web developers | -| Declarative development paradigm | Extended TypeScript (eTS) | Data-driven | Applications involving technological sophistication and teamwork | Mobile application and system application developers | +| Development Paradigm | Description | Applicable To | Intended Audience | +| -------- | -------- | -------- | -------- | +| Web-like development paradigm | Uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. | Small- and medium-sized applications and service widgets with simple UIs | Frontend web developers | +| Declarative development paradigm | Uses the TypeScript programming language and extends the declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and state management. The programming mode used is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. With type annotations in TypeScript, you can enforce type checking at compile time. | Applications involving technological sophistication and teamwork | Mobile application and system application developers | ### Framework Structure diff --git a/en/application-dev/ui/figures/en-us_image_0000001148858818.png b/en/application-dev/ui/figures/en-us_image_0000001148858818.png new file mode 100644 index 0000000000000000000000000000000000000000..3be38a7df454954c455b44bb1fbb6b2158be3785 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001148858818.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001167746622.png b/en/application-dev/ui/figures/en-us_image_0000001167746622.png new file mode 100644 index 0000000000000000000000000000000000000000..e53f6d7e1c8b3060ae000d78555ea0b33ffc97bf Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001167746622.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001168059158.png b/en/application-dev/ui/figures/en-us_image_0000001168059158.png new file mode 100644 index 0000000000000000000000000000000000000000..205d18f50424811f04dcecc1b6a95c52530c6527 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001168059158.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001168956332.png b/en/application-dev/ui/figures/en-us_image_0000001168956332.png new file mode 100644 index 0000000000000000000000000000000000000000..adb255e05d2f54161e79e0f0a21ddc6b04552793 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001168956332.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001190466492.png b/en/application-dev/ui/figures/en-us_image_0000001190466492.png new file mode 100644 index 0000000000000000000000000000000000000000..aebc1b5e3afbc74a161bdc481b1578ef79105a87 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001190466492.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001215645452.png b/en/application-dev/ui/figures/en-us_image_0000001215645452.png new file mode 100644 index 0000000000000000000000000000000000000000..21478ddee0ac2a56230eb67406ba7ddb4600ee74 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001215645452.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001215796030.png b/en/application-dev/ui/figures/en-us_image_0000001215796030.png new file mode 100644 index 0000000000000000000000000000000000000000..a449a54d3ebbb0fe35754a0b6191e090a9f57fb6 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001215796030.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001215965420.png b/en/application-dev/ui/figures/en-us_image_0000001215965420.png new file mode 100644 index 0000000000000000000000000000000000000000..69ab2b53dc50fbe5f146b336993f86bf1e4a5f24 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001215965420.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001217236574.png b/en/application-dev/ui/figures/en-us_image_0000001217236574.png new file mode 100644 index 0000000000000000000000000000000000000000..0b45eda696b180bb917b10db8eb803e7babd1538 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001217236574.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001218108718.png b/en/application-dev/ui/figures/en-us_image_0000001218108718.png new file mode 100644 index 0000000000000000000000000000000000000000..2fd6c145acd07026766c368d2e20724b0d1f8a04 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218108718.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001218259634.png b/en/application-dev/ui/figures/en-us_image_0000001218259634.png new file mode 100644 index 0000000000000000000000000000000000000000..a54bd7cd05accb496c691b2527b08b0a11cd8c66 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218259634.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001218259636.png b/en/application-dev/ui/figures/en-us_image_0000001218259636.png new file mode 100644 index 0000000000000000000000000000000000000000..3d767cc276109fce015bb59bb0527b7830d23f54 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218259636.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001218419614.png b/en/application-dev/ui/figures/en-us_image_0000001218419614.png new file mode 100644 index 0000000000000000000000000000000000000000..101f60e44760d98db7a904189f387e2b3557cf32 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218419614.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001218419616.png b/en/application-dev/ui/figures/en-us_image_0000001218419616.png new file mode 100644 index 0000000000000000000000000000000000000000..746eb1f0ddc9ac1581f191b1e76d8d028dfd418e Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218419616.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001218579606.png b/en/application-dev/ui/figures/en-us_image_0000001218579606.png new file mode 100644 index 0000000000000000000000000000000000000000..c8697767f19ae5cc5f7b30c4cbc2a23ffafb0844 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218579606.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001218579608.png b/en/application-dev/ui/figures/en-us_image_0000001218579608.png new file mode 100644 index 0000000000000000000000000000000000000000..74526d5efee72c20ce09c731842c0d1c56159a97 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218579608.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001218579610.png b/en/application-dev/ui/figures/en-us_image_0000001218579610.png new file mode 100644 index 0000000000000000000000000000000000000000..1f407b77a24e90c854f25472e37c97e1cd40287b Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218579610.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001218739566.png b/en/application-dev/ui/figures/en-us_image_0000001218739566.png new file mode 100644 index 0000000000000000000000000000000000000000..4384ea3a2997c4417eee0fbe0e6475c4925b5c36 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218739566.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001218739568.png b/en/application-dev/ui/figures/en-us_image_0000001218739568.png new file mode 100644 index 0000000000000000000000000000000000000000..a66ff857ba7629951a39a1c2cc19c7b6fb43b9e1 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218739568.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001218739570.png b/en/application-dev/ui/figures/en-us_image_0000001218739570.png new file mode 100644 index 0000000000000000000000000000000000000000..006efca8f390adea7edb0b4f54609c04fd0bd098 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218739570.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001222967800.png b/en/application-dev/ui/figures/en-us_image_0000001222967800.png new file mode 100644 index 0000000000000000000000000000000000000000..00964c1cfa5f006f2e8ac064133e23a2d8fc92aa Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001222967800.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683112.gif b/en/application-dev/ui/figures/en-us_image_0000001231683112.gif new file mode 100644 index 0000000000000000000000000000000000000000..8e64d09f33bcbba8117775ea6f5946cc4556d0c3 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683112.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683116.png b/en/application-dev/ui/figures/en-us_image_0000001231683116.png new file mode 100644 index 0000000000000000000000000000000000000000..11dac18df74e1fd4d09adc43bb264253294df23f Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683116.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683124.png b/en/application-dev/ui/figures/en-us_image_0000001231683124.png new file mode 100644 index 0000000000000000000000000000000000000000..d4301a19383a2abbfb7038275e59adc901046307 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683124.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683128.gif b/en/application-dev/ui/figures/en-us_image_0000001231683128.gif new file mode 100644 index 0000000000000000000000000000000000000000..52af9a2cddfa15e4f08358a0023f456b35d535c6 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683128.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683144.gif b/en/application-dev/ui/figures/en-us_image_0000001231683144.gif new file mode 100644 index 0000000000000000000000000000000000000000..cfe44e409c1ddf0f7a70b59367a7885033a2b42f Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683144.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683148.gif b/en/application-dev/ui/figures/en-us_image_0000001231683148.gif new file mode 100644 index 0000000000000000000000000000000000000000..353e2ffb9a84cba7616291730c7c0c670adc2b13 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683148.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683152.png b/en/application-dev/ui/figures/en-us_image_0000001231683152.png new file mode 100644 index 0000000000000000000000000000000000000000..acdf7a05ea58d00687571fbcb496372b64ab1c87 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683152.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683156.png b/en/application-dev/ui/figures/en-us_image_0000001231683156.png new file mode 100644 index 0000000000000000000000000000000000000000..8df470cc4c0e146972977c1b7dadecc8cbc67838 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683156.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683164.gif b/en/application-dev/ui/figures/en-us_image_0000001231683164.gif new file mode 100644 index 0000000000000000000000000000000000000000..2dd2706317ddfaf317fc2abfc5cbb0a5a5a927cf Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683164.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683172.png b/en/application-dev/ui/figures/en-us_image_0000001231683172.png new file mode 100644 index 0000000000000000000000000000000000000000..5c1dc425e1a607a846d3884a9118387accb031a4 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683172.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843076.gif b/en/application-dev/ui/figures/en-us_image_0000001231843076.gif new file mode 100644 index 0000000000000000000000000000000000000000..b8e2940f1660157ba412beac4db6614b4714d599 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843076.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843084.png b/en/application-dev/ui/figures/en-us_image_0000001231843084.png new file mode 100644 index 0000000000000000000000000000000000000000..bd0b2b46d44aced7d075ba36196aa02c43b362c3 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843084.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843088.gif b/en/application-dev/ui/figures/en-us_image_0000001231843088.gif new file mode 100644 index 0000000000000000000000000000000000000000..f7f05ac39da2bd2f04a7257e1c36eb87ad811783 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843088.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843096.png b/en/application-dev/ui/figures/en-us_image_0000001231843096.png new file mode 100644 index 0000000000000000000000000000000000000000..b9d99e465fd01f8a427bd2c0b7758045241b8227 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843096.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843100.gif b/en/application-dev/ui/figures/en-us_image_0000001231843100.gif new file mode 100644 index 0000000000000000000000000000000000000000..88c62f08669f2ec3533db708d49d18a069501644 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843100.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843104.png b/en/application-dev/ui/figures/en-us_image_0000001231843104.png new file mode 100644 index 0000000000000000000000000000000000000000..0a5d725eba5254e9a489204bf2a7c06170aa3a2e Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843104.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843116.gif b/en/application-dev/ui/figures/en-us_image_0000001231843116.gif new file mode 100644 index 0000000000000000000000000000000000000000..d6a46140a41a112790210c58502fbc3df6e65f20 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843116.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843128.gif b/en/application-dev/ui/figures/en-us_image_0000001231843128.gif new file mode 100644 index 0000000000000000000000000000000000000000..f6469e9e80464270e28bc6c682ff3e9bf8420a5f Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843128.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843132.gif b/en/application-dev/ui/figures/en-us_image_0000001231843132.gif new file mode 100644 index 0000000000000000000000000000000000000000..aba5bd689955bb90c779ba3c231d698d9fb53eac Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843132.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232002968.png b/en/application-dev/ui/figures/en-us_image_0000001232002968.png new file mode 100644 index 0000000000000000000000000000000000000000..b9c766a3189861fae9fbcf07f5912bef0d8562c8 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232002968.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232002972.gif b/en/application-dev/ui/figures/en-us_image_0000001232002972.gif new file mode 100644 index 0000000000000000000000000000000000000000..8a6952f9e8398edabbe28e8daace7c6be172531a Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232002972.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232002988.gif b/en/application-dev/ui/figures/en-us_image_0000001232002988.gif new file mode 100644 index 0000000000000000000000000000000000000000..f62f884f93ef38a79a6a4653f8681b765cc87aa9 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232002988.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232003000.gif b/en/application-dev/ui/figures/en-us_image_0000001232003000.gif new file mode 100644 index 0000000000000000000000000000000000000000..9983db70e3477057acdcbbdaba56dea290f6a303 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232003000.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232003004.gif b/en/application-dev/ui/figures/en-us_image_0000001232003004.gif new file mode 100644 index 0000000000000000000000000000000000000000..6c67ff8bc8394cddb79b5ac4d1b2c130ae6a6bb8 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232003004.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232003008.gif b/en/application-dev/ui/figures/en-us_image_0000001232003008.gif new file mode 100644 index 0000000000000000000000000000000000000000..b5bce1b8e09e0c47231c11250c6d676806bcd53c Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232003008.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232003012.gif b/en/application-dev/ui/figures/en-us_image_0000001232003012.gif new file mode 100644 index 0000000000000000000000000000000000000000..260966e4fe59e4e6f80b501251f478bbb7126dce Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232003012.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232003020.gif b/en/application-dev/ui/figures/en-us_image_0000001232003020.gif new file mode 100644 index 0000000000000000000000000000000000000000..ba4c74a1f562b0abe65681e30f3228f54cb53a74 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232003020.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232003024.gif b/en/application-dev/ui/figures/en-us_image_0000001232003024.gif new file mode 100644 index 0000000000000000000000000000000000000000..491e4d141faffa0cf052d3adfb32eaa3fda61c8e Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232003024.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232003028.gif b/en/application-dev/ui/figures/en-us_image_0000001232003028.gif new file mode 100644 index 0000000000000000000000000000000000000000..7293aff8d5971a6b026c751570eefbca029bb06b Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232003028.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162284.gif b/en/application-dev/ui/figures/en-us_image_0000001232162284.gif new file mode 100644 index 0000000000000000000000000000000000000000..8b0e1d5a97c59fb1b0b1b243d5b0a30f1b8824e2 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162284.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162288.png b/en/application-dev/ui/figures/en-us_image_0000001232162288.png new file mode 100644 index 0000000000000000000000000000000000000000..d4d117430d11520fdcbe3cd1343182a7f169c7fe Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162288.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162292.gif b/en/application-dev/ui/figures/en-us_image_0000001232162292.gif new file mode 100644 index 0000000000000000000000000000000000000000..3b5681fe5f430af62ef6d94b37bf6cc5a2a2ee58 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162292.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162312.gif b/en/application-dev/ui/figures/en-us_image_0000001232162312.gif new file mode 100644 index 0000000000000000000000000000000000000000..91d6134b97b6e9073540ee7b06ecf6e31952c9b5 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162312.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162316.png b/en/application-dev/ui/figures/en-us_image_0000001232162316.png new file mode 100644 index 0000000000000000000000000000000000000000..03a4a72905b6e852a00cdbbe17918cdeda28e5bf Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162316.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162320.gif b/en/application-dev/ui/figures/en-us_image_0000001232162320.gif new file mode 100644 index 0000000000000000000000000000000000000000..d8f8221489fd409670bfa9b3d0694a54552d5cbd Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162320.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162324.png b/en/application-dev/ui/figures/en-us_image_0000001232162324.png new file mode 100644 index 0000000000000000000000000000000000000000..7b3260b58addc8949c1ed409fb183ac91f986ebf Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162324.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162328.gif b/en/application-dev/ui/figures/en-us_image_0000001232162328.gif new file mode 100644 index 0000000000000000000000000000000000000000..fae5d684f722d9f65d55fdfc6b249c4322185cfe Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162328.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162340.png b/en/application-dev/ui/figures/en-us_image_0000001232162340.png new file mode 100644 index 0000000000000000000000000000000000000000..86187142668379cc81fcc9f163e3218a078cc8cc Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162340.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001235146483.png b/en/application-dev/ui/figures/en-us_image_0000001235146483.png new file mode 100644 index 0000000000000000000000000000000000000000..0bebd24640b896d465c3f130dcf69f10abab3def Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001235146483.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001235626467.png b/en/application-dev/ui/figures/en-us_image_0000001235626467.png new file mode 100644 index 0000000000000000000000000000000000000000..189cc8a1e959a162f22d1b9b0dd9573614cb0673 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001235626467.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001260373911.png b/en/application-dev/ui/figures/en-us_image_0000001260373911.png new file mode 100644 index 0000000000000000000000000000000000000000..223fab73b7c40f7b1bdc5cc05d2d8a91589b88d4 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001260373911.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001260555857.png b/en/application-dev/ui/figures/en-us_image_0000001260555857.png new file mode 100644 index 0000000000000000000000000000000000000000..e63baa89d7b6f4c816ca6e4386851498d47eac36 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001260555857.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001261605867.png b/en/application-dev/ui/figures/en-us_image_0000001261605867.png new file mode 100644 index 0000000000000000000000000000000000000000..096d7f530cc2d82391be453a7a5dbe659ba15513 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001261605867.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001262748569.png b/en/application-dev/ui/figures/en-us_image_0000001262748569.png new file mode 100644 index 0000000000000000000000000000000000000000..7af6c8cc92db32d22b3f2022ab567ca9c8978b63 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001262748569.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001263019457.png b/en/application-dev/ui/figures/en-us_image_0000001263019457.png new file mode 100644 index 0000000000000000000000000000000000000000..dea13c34b80626c7fe1a0036afbe69d5f236910c Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263019457.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001263019461.png b/en/application-dev/ui/figures/en-us_image_0000001263019461.png new file mode 100644 index 0000000000000000000000000000000000000000..b79b7923adca0d6e2a211c29ef0d34b70bf02583 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263019461.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001263019463.png b/en/application-dev/ui/figures/en-us_image_0000001263019463.png new file mode 100644 index 0000000000000000000000000000000000000000..10a7a63c5c41b636fa5a61b5a13ad7ed97c3d1fb Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263019463.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001263074739.png b/en/application-dev/ui/figures/en-us_image_0000001263074739.png new file mode 100644 index 0000000000000000000000000000000000000000..e2f0ff5761d3c5a19a300f7c891a717e13c2374d Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263074739.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001263139409.png b/en/application-dev/ui/figures/en-us_image_0000001263139409.png new file mode 100644 index 0000000000000000000000000000000000000000..395631e2ed4572806bd93bcdb8ff86486e0b5bdf Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263139409.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001263139411.png b/en/application-dev/ui/figures/en-us_image_0000001263139411.png new file mode 100644 index 0000000000000000000000000000000000000000..3e481248c0e16f3311644a35fa3c71269a3e7877 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263139411.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001263259399.png b/en/application-dev/ui/figures/en-us_image_0000001263259399.png new file mode 100644 index 0000000000000000000000000000000000000000..dc4a266c02708116362da21577d5b1e582a011fd Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263259399.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001263259401.png b/en/application-dev/ui/figures/en-us_image_0000001263259401.png new file mode 100644 index 0000000000000000000000000000000000000000..b233260ab8bf15c918389226a7773541399311a4 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263259401.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001263339459.png b/en/application-dev/ui/figures/en-us_image_0000001263339459.png new file mode 100644 index 0000000000000000000000000000000000000000..99e18123d53b88779948b34c6c566005d989358b Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263339459.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001263339461.png b/en/application-dev/ui/figures/en-us_image_0000001263339461.png new file mode 100644 index 0000000000000000000000000000000000000000..183d9468ca3901183b3fa55facbc976418e7a5f1 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263339461.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803133.png b/en/application-dev/ui/figures/en-us_image_0000001275803133.png new file mode 100644 index 0000000000000000000000000000000000000000..ffe4b54ecb499aa26d5b48eea623434985646292 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803133.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803137.gif b/en/application-dev/ui/figures/en-us_image_0000001275803137.gif new file mode 100644 index 0000000000000000000000000000000000000000..c80d86b0508ad15cd944314d0a2b3b59dcd9bcd6 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803137.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803145.png b/en/application-dev/ui/figures/en-us_image_0000001275803145.png new file mode 100644 index 0000000000000000000000000000000000000000..45a96cb24680a3cf2cdd91d315314822701c4176 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803145.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803149.png b/en/application-dev/ui/figures/en-us_image_0000001275803149.png new file mode 100644 index 0000000000000000000000000000000000000000..5a0fa14321998b5fc33b0965dcc0ca0ae315dd09 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803149.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803153.gif b/en/application-dev/ui/figures/en-us_image_0000001275803153.gif new file mode 100644 index 0000000000000000000000000000000000000000..fec6caa122160183c3cc049e803710301fd63d9f Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803153.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803169.gif b/en/application-dev/ui/figures/en-us_image_0000001275803169.gif new file mode 100644 index 0000000000000000000000000000000000000000..439eea01e278280086248901e4ac51923d5e4979 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803169.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803173.gif b/en/application-dev/ui/figures/en-us_image_0000001275803173.gif new file mode 100644 index 0000000000000000000000000000000000000000..abec4486ad5f444b32aa20b88a3a6d1975254cd0 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803173.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803177.gif b/en/application-dev/ui/figures/en-us_image_0000001275803177.gif new file mode 100644 index 0000000000000000000000000000000000000000..c310e7cfd714246b95eab7f030c33490bef98d86 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803177.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803181.gif b/en/application-dev/ui/figures/en-us_image_0000001275803181.gif new file mode 100644 index 0000000000000000000000000000000000000000..9b0bdbf57b14db63cf4935e1a578e78da5380a8a Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803181.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803189.gif b/en/application-dev/ui/figures/en-us_image_0000001275803189.gif new file mode 100644 index 0000000000000000000000000000000000000000..ab6d5e3bde1e3218eaa1156137c7fd6ffc298882 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803189.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803193.png b/en/application-dev/ui/figures/en-us_image_0000001275803193.png new file mode 100644 index 0000000000000000000000000000000000000000..a5db8f42d350aa79613ac657db2630d0d60d3d3c Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803193.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275922965.gif b/en/application-dev/ui/figures/en-us_image_0000001275922965.gif new file mode 100644 index 0000000000000000000000000000000000000000..0c3c7fccb059ad03b084728307963082dc6f8365 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275922965.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275922969.gif b/en/application-dev/ui/figures/en-us_image_0000001275922969.gif new file mode 100644 index 0000000000000000000000000000000000000000..ea5aa768532ea01f6828bd6bf211c4c2fe1e0d22 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275922969.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275922977.gif b/en/application-dev/ui/figures/en-us_image_0000001275922977.gif new file mode 100644 index 0000000000000000000000000000000000000000..13c21f4cbd450e5670bfeaf1041826fe3cc07f06 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275922977.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275922997.gif b/en/application-dev/ui/figures/en-us_image_0000001275922997.gif new file mode 100644 index 0000000000000000000000000000000000000000..30dbdba7bf2036b51395507d4a1996b5adaf5436 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275922997.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275923005.gif b/en/application-dev/ui/figures/en-us_image_0000001275923005.gif new file mode 100644 index 0000000000000000000000000000000000000000..8bd5e2f2f7f60ad28107af3dc67ff5ee75af2b0d Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275923005.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275923017.png b/en/application-dev/ui/figures/en-us_image_0000001275923017.png new file mode 100644 index 0000000000000000000000000000000000000000..08f11bc53e9a0e6430b06ae77fde645585ee711b Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275923017.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275923021.gif b/en/application-dev/ui/figures/en-us_image_0000001275923021.gif new file mode 100644 index 0000000000000000000000000000000000000000..5813dfac315791a87d9bd9c70a9587e6b779614c Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275923021.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003481.gif b/en/application-dev/ui/figures/en-us_image_0000001276003481.gif new file mode 100644 index 0000000000000000000000000000000000000000..5198c5a81cf4427f1014489336d730d846e15f9d Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003481.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003485.gif b/en/application-dev/ui/figures/en-us_image_0000001276003485.gif new file mode 100644 index 0000000000000000000000000000000000000000..28b2a163673a71e95a40284d2b045005594623e6 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003485.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003489.gif b/en/application-dev/ui/figures/en-us_image_0000001276003489.gif new file mode 100644 index 0000000000000000000000000000000000000000..0554bd02b6ce8c1d835a3cde3bf2427d8dd15bda Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003489.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003501.gif b/en/application-dev/ui/figures/en-us_image_0000001276003501.gif new file mode 100644 index 0000000000000000000000000000000000000000..aa9bba2a489f516d80f7eed07bc67e549d1a25c3 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003501.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003505.gif b/en/application-dev/ui/figures/en-us_image_0000001276003505.gif new file mode 100644 index 0000000000000000000000000000000000000000..1b6a6d7cce2951696d624ea3cf645570231bc0d7 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003505.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003513.gif b/en/application-dev/ui/figures/en-us_image_0000001276003513.gif new file mode 100644 index 0000000000000000000000000000000000000000..d93306857a1ce4a304bc83a664ee270105f39017 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003513.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003517.gif b/en/application-dev/ui/figures/en-us_image_0000001276003517.gif new file mode 100644 index 0000000000000000000000000000000000000000..407541949a9a7d9308ca61be4dfc2ecf91709d49 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003517.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003525.gif b/en/application-dev/ui/figures/en-us_image_0000001276003525.gif new file mode 100644 index 0000000000000000000000000000000000000000..5d4ed8967a4f4d4d163c560536ee537feddef49a Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003525.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003537.png b/en/application-dev/ui/figures/en-us_image_0000001276003537.png new file mode 100644 index 0000000000000000000000000000000000000000..1898cb7e3d137e02211afb6425147bc4754600d5 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003537.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003541.gif b/en/application-dev/ui/figures/en-us_image_0000001276003541.gif new file mode 100644 index 0000000000000000000000000000000000000000..7d8da86f2f1cf71ca9bc5d6cb65564bb64ae5fd1 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003541.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276162713.gif b/en/application-dev/ui/figures/en-us_image_0000001276162713.gif new file mode 100644 index 0000000000000000000000000000000000000000..531e20ab79714795da80341f363a71f5c426f034 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276162713.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276162717.gif b/en/application-dev/ui/figures/en-us_image_0000001276162717.gif new file mode 100644 index 0000000000000000000000000000000000000000..1167fd1b33a3f955c037e59aff6b86275605bdfd Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276162717.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276162725.png b/en/application-dev/ui/figures/en-us_image_0000001276162725.png new file mode 100644 index 0000000000000000000000000000000000000000..a018ed2562de8d5f23c7422f451b763086a72390 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276162725.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276162745.gif b/en/application-dev/ui/figures/en-us_image_0000001276162745.gif new file mode 100644 index 0000000000000000000000000000000000000000..ac5857ad2e4888bfda20044fb84dbd100ed68d5b Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276162745.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276162773.gif b/en/application-dev/ui/figures/en-us_image_0000001276162773.gif new file mode 100644 index 0000000000000000000000000000000000000000..9e313e1e87059572aa036b06881381da7b070641 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276162773.gif differ diff --git a/en/application-dev/ui/js-framework-multiple-languages.md b/en/application-dev/ui/js-framework-multiple-languages.md index 0405f3f9a0a22cfb83c713356af6f11e4cd33580..00b7ba08682e9de4027872089dc5b5decb39ada0 100644 --- a/en/application-dev/ui/js-framework-multiple-languages.md +++ b/en/application-dev/ui/js-framework-multiple-languages.md @@ -20,19 +20,19 @@ language[-script-region].json The following table describes the requirements for the qualifiers of resource file names. - Table1 Requirements for qualifier values +Table 1 Requirements for qualifier values -| Qualifier Type | Description and Value Range | +| Qualifier Type | Description and Value Range | | -------- | -------- | -| Language | Indicates the language used by the device. The value consists of two or three lowercase letters, for example, zh indicates Chinese, en indicates English, and mai indicates Maithili.
For details about the value range, refer to ISO 639 (codes for the representation of names of languages). | -| Script | Indicates the script type used by the device. The value starts with one uppercase letter followed by three lowercase letters, for example, Hans indicates simplified Chinese and Hant indicates traditional Chinese.
For details about the value range, refer to ISO 15924 (codes for the representation of names of scripts). | -| Country/Region | Indicates the country or region where a user is located. The value consists of two or three uppercase letters or three digits, for example, CN indicates China and GB indicates the United Kingdom.
For details about the value range, refer to ISO 3166-1 (codes for the representation of names of countries and their subdivisions). | +| Language | Indicates the language used by the device. The value consists of two or three lowercase letters, for example, zh indicates Chinese, en indicates English, and mai indicates Maithili.
For details about the value range, refer to ISO 639 (codes for the representation of names of languages). | +| Script | Indicates the script type used by the device. The value starts with one uppercase letter followed by three lowercase letters, for example, Hans indicates simplified Chinese and Hant indicates traditional Chinese.
For details about the value range, refer to ISO 15924 (codes for the representation of names of scripts). | +| Country/Region | Indicates the country or region where a user is located. The value consists of two or three uppercase letters or three digits, for example, CN indicates China and GB indicates the United Kingdom.
For details about the value range, refer to ISO 3166-1 (codes for the representation of names of countries and their subdivisions). | If there is no resource file of the locale that matches the system language, content in the en-US.json file will be used by default. The format of the resource file content is as follows: - en-US.json +**en-US.json** ``` { @@ -55,8 +55,7 @@ Different languages have different matching rules for singular and plural forms. The following example takes en-US.json and ar-AE.json as examples: - -en-US.json +**en-US.json** ``` @@ -97,18 +96,18 @@ Multi-language syntax used on application development pages (including simple fo - Simple formatting Use the $t function to reference to resources of different locales. The $t function is available for both .hml and .js files. The system displays content based on a resource file path specified via $t and the specified resource file whose locale matches the current system language. - Table2 Simple formatting + Table 2 Simple formatting | Attribute | Type | Parameter | Mandatory | Description | | -------- | -------- | -------- | -------- | -------- | | $t | Function | See Table3 | Yes | Sets the parameters based on the system language, for example, this.$t('strings.hello'). | - Table3 $t function parameters + Table 3 $t function parameters - | Parameter | Type | Mandatory | Description | + | Parameter | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | path | string | Yes | Path of the language resource key | - | params | Array\|Object | No | Content used to replace placeholders during runtime. There are two types of placeholders available:
- Named placeholder, for example, {name}. The actual content must be of the object type, for example, $t('strings.object', { name: 'Hello world' }).
- Digit placeholder, for example, {0}. The actual content must be of the array type, for example, $t('strings.array', ['Hello world']. | + | path | string | Yes | Path of the language resource key | + | params | Array\|Object | No | Content used to replace placeholders during runtime. There are two types of placeholders available:
- Named placeholder, for example, {name}. The actual content must be of the object type, for example, \```$t('strings.object', {name:'Hello world'})```.
- Digit placeholder, for example, {0}. The actual content must be of the array type, for example, \```$t('strings.array', [Hello world']```. | - Example code for simple formatting @@ -156,18 +155,18 @@ Multi-language syntax used on application development pages (including simple fo ``` - Singular-plural formatting - Table4 Singular-plural formatting + Table 4 Singular-plural formatting | Attribute | Type | Parameter | Mandatory | Description | | -------- | -------- | -------- | -------- | -------- | - | $tc | Function | See Table 5. | Yes | Converts between the singular and plural forms based on the system language, for example, this.$tc('strings.people').
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> The resource content is distinguished by the following JSON keys: zero, one, two, few, many, and other. | + | $tc | Function | See Table 5. | Yes | Converts between the singular and plural forms based on the system language, for example, this.$tc('strings.people').
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> The resource content is distinguished by the following JSON keys: zero, one, two, few, many, and other. | - Table5 $tc function parameters + Table 5 $tc function parameters - | Parameter | Type | Mandatory | Description | + | Parameter | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | path | string | Yes | Path of the language resource key | - | count | number | Yes | Number | + | path | string | Yes | Path of the language resource key | + | count | number | Yes | Number | - Sample code for singular-plural formatting diff --git a/en/application-dev/ui/ui-js-building-ui-event.md b/en/application-dev/ui/ui-js-building-ui-event.md index 02b1d1a13b6358ce5cef34373bdbe971b345a3fb..f963c80bd2ae34db7d9c1878a823c89b8dd3a1c3 100644 --- a/en/application-dev/ui/ui-js-building-ui-event.md +++ b/en/application-dev/ui/ui-js-building-ui-event.md @@ -1,29 +1,24 @@ -# Defining Events +# Defining Gesture Events +A gesture represents a semantic action (for example, tap, drag, or longpress) that can trigger one or more events. A gesture lifecycle may consist of multiple events from the start to the end of the gesture. Supported events are as follows: -Events mainly include gesture events for touchscreen devices. +**Touch** +- **touchstart**: Triggered when the touch starts -## Gesture Events +- **touchmove**: Triggered when the touch moves -A gesture represents a semantic action (for example, tap, drag, or longpress) that can trigger one or more events. A gesture lifecycle may consist of multiple events from the start to the end of the gesture. Supported events: +- **touchcancel**: Triggered when the touch is interrupted, for example, by an incoming call notification or pop-up message - Touch -- touchstart: Triggered when the touch starts +- **touchend**: Triggered when the touch ends -- touchmove: Triggered when the touch moves +**Click** -- touchcancel: Triggered when the touch is interrupted, for example, by an incoming call notification or pop-up message +**click**: Triggered when a user taps the screen quickly. -- touchend: Triggered when the touch ends +**Longpress** -Click - -click: Triggered when a user taps the screen quickly. - -Longpress - -longpress: Triggered when a user keeps tapping the screen at the same position for a while. +**longpress**: Triggered when a user keeps tapping the screen at the same position for a while. The following is an example: diff --git a/en/application-dev/ui/ui-js-component-tabs.md b/en/application-dev/ui/ui-js-component-tabs.md index 0e20aaea35129a98b219d5eaac252dfda7e420d4..7986d52513a4e62c9f6a9018c9474174c13e7937 100644 --- a/en/application-dev/ui/ui-js-component-tabs.md +++ b/en/application-dev/ui/ui-js-component-tabs.md @@ -1,19 +1,19 @@ # <tabs> Development -The <tabs> component is a common UI component for navigation. It allows quick access to different functions of an app. For details, see [tabs](../reference/arkui-js/js-components-container-tabs.md). +The **<tabs>** component is a common UI component for navigation. It allows quick access to different functions of an app. For details, see [tabs](../reference/arkui-js/js-components-container-tabs.md). ## Creating Tabs -Create a <tabs> component in the .hml file under pages/index. +Create a **<tabs>** component in the .hml file under **pages/index**. ```
- + item1 item2 @@ -25,7 +25,7 @@ Create a <tabs> component in the .hml file under pages/index. content2
- + ``` @@ -51,13 +51,13 @@ Create a <tabs> component in the .hml file under pages/index. ## Setting the Tabs Orientation -By default, the active tab of a <tabs> component is the one with the specified index. To show the <tabs> vertically, set the vertical attribute to true. +By default, the active tab of a **<tabs>** component is the one with the specified **index**. To show the **<tabs>** vertically, set the **vertical** attribute to **true**. ```
- + item1 item2 @@ -76,7 +76,7 @@ By default, the active tab of a <tabs> component is the one with the speci ![en-us_image_0000001222967756](figures/en-us_image_0000001222967756.gif) -Set the mode attribute to enable the child components of the to be evenly distributed. Set the scrollable attribute to disable scrolling of the . +Set the **mode** attribute to enable the child components of the **<tab-bar>** to be evenly distributed. Set the **scrollable** attribute to disable scrolling of the **<tab-content>**. ``` @@ -102,9 +102,9 @@ Set the mode attribute to enable the child components of the to be eve ![en-us_image_0000001267647857](figures/en-us_image_0000001267647857.gif) -## Setting the Style +## Setting Styles - Set the background color, border, and tab-content layout of the <tabs> component. + Set the background color, border, and tab-content layout of the **<tabs>** component. ``` @@ -150,7 +150,8 @@ Set the mode attribute to enable the child components of the to be eve margin-top: 10px; height: 300px; color: blue; - justify-content: center; align-items: center; + justify-content: center; + align-items: center; } ``` @@ -159,13 +160,13 @@ Set the mode attribute to enable the child components of the to be eve ## Displaying the Tab Index -Add the change event for the <tabs> component to display the index of the current tab after tab switching. +Add the **change** event for the **<tabs>** component to display the index of the current tab after tab switching. ```
- + item1 item2 @@ -198,15 +199,15 @@ export default { ![en-us_image_0000001222807772](figures/en-us_image_0000001222807772.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> - A <tabs> can wrap at most one [](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [](../reference/arkui-js/js-components-container-tab-content.md). +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - A **<tabs>** can wrap at most one [**<tab-bar>**](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [**<tab-content>**](../reference/arkui-js/js-components-container-tab-content.md). ## Example Scenario In this example, you can switch between tabs and the active tab has the title text in red with an underline below. -Use the <tabs>, , and components to implement tab switching. Then define the arrays and attributes. Add the change event to change the attribute values in the arrays so that the active tab has a different font color and an underline. +Use the **<tabs>**, **<tab-bar>**, and **<tab-content>** components to implement tab switching. Then define the arrays and attributes. Add the **change** event to change the attribute values in the arrays so that the active tab has a different font color and an underline. ``` diff --git a/en/application-dev/ui/ui-js-components-button.md b/en/application-dev/ui/ui-js-components-button.md index 1507ce9c9843bb535efbb8cbd8ebafde66bd93e5..3911378bdee4244218295152478370c746ee87cc 100644 --- a/en/application-dev/ui/ui-js-components-button.md +++ b/en/application-dev/ui/ui-js-components-button.md @@ -1,12 +1,12 @@ # <button> Development -The<button>component can be used to set a capsule, circle, text, arc, or download button. For details, see [button](../reference/arkui-js/js-components-basic-button.md). +The **<button>** component can be used to set a capsule, circle, text, arc, or download button. For details, see [button](../reference/arkui-js/js-components-basic-button.md). -## Creating a <button> Component +## Creating a <button> Component -Create a <button> component in the .hml file under pages/index. +Create a **<button>** component in the .hml file under **pages/index**. ``` @@ -20,6 +20,8 @@ Create a <button> component in the .hml file under pages/index. ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -32,7 +34,9 @@ Create a <button> component in the .hml file under pages/index. ## Setting the Button Type -Set the type attribute of the <input> component to button, date, or any of the supported values. +Set the **type** attribute of the **<input>** component to **button**, **date**, or any of the supported values. + + ``` @@ -42,9 +46,13 @@ Set the type attribute of the <input> component to button, date, or any of
``` + + ``` /* xxx.css */ .container { + width: 100%; + height: 100%; background-color: #F1F3F5; flex-direction: column; align-items: center; @@ -70,17 +78,19 @@ Set the type attribute of the <input> component to button, date, or any of ![en-us_image_0000001222967744](figures/en-us_image_0000001222967744.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > - For capsule buttons, border-related styles are not supported. > > - For circle buttons, text-related styles are not supported. > -> - For text buttons, the text size is adaptive, and radius, width, and height cannot be set. The background-color style is not supported when the background is completely transparent. +> - For text buttons, the text size is adaptive, and **radius**, **width**, and **height** cannot be set. The **background-color** style is not supported when the background is completely transparent. > -> - If the icon used by the<button>component is from the cloud, you must declare the ohos.permission.INTERNET permission in the config.json file under the resources folder. +> - If the icon used by the **<button>** component is from the cloud, you must declare the **ohos.permission.INTERNET** permission in the **config.json** file under the **resources** folder. + + +Sample code for declaring the **ohos.permission.INTERNET** permission in the **config.json** file under the **resources** folder: -Sample code for declaring the ohos.permission.INTERNET permission in the config.json file under the resources folder: ``` @@ -94,7 +104,7 @@ Sample code for declaring the ohos.permission.INTERNET permission in the config. ## Showing the Download Progress -Add the progress method to the<button>component to display the download progress in real time. +Add the **progress** method to the **<button>** component to display the download progress in real time. ``` @@ -171,15 +181,16 @@ export default { ![en-us_image_0000001223287652](figures/en-us_image_0000001223287652.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> -> The setProgress method supports only buttons of the download type. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - The **setProgress** method supports only buttons of the download type. ## Example Scenario Switch between the button types for different types of text. + + ```
@@ -197,6 +208,8 @@ Switch between the button types for different types of text.
``` + + ``` /* xxx.css */ .container { @@ -243,6 +256,8 @@ Switch between the button types for different types of text. } ``` + + ``` // xxx.js export default { diff --git a/en/application-dev/ui/ui-js-components-calendar.md b/en/application-dev/ui/ui-js-components-calendar.md new file mode 100644 index 0000000000000000000000000000000000000000..0f1d7fb32e2723899ff8094f1da1921c2c2ce7d5 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-calendar.md @@ -0,0 +1,244 @@ +# <grid-container> Development + + +The **<grid-container>** component is the root container of the grid layout. Within the root container, you can use **<grid-row>** and **<grid-col>** for the grid layout. For details, see [grid-container](../reference/arkui-js/js-components-grid-container.md). + + +## Creating a <grid-container> Component + +Create a **<grid-container>** component in the .hml file under **pages/index** and add a [**<grid-row>**](../reference/arkui-js/js-components-grid-row.md) child component. + + +``` + +
+ + + + + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + width: 100%; + justify-content: center; + align-items: center; +} +``` + +![en-us_image_0000001276162725](figures/en-us_image_0000001276162725.png) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> **<grid-container>** supports only **<grid-row>** as a child component. + + +## Methods + +Click the **<grid-container>** component to call the **getColumns**, **getColumnWidth**, and **getGutterWidth** methods to return the number of columns in the grid container, and column width and gutter width of the grid container. Press and hold the component to call the **getSizeType** method to return the size-responsive type of the grid container (**xs**|**sm**|**md**|**lg**). + + +``` + +
+ + + + + + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + width: 100%; + justify-content: center; + align-items: center; +} +``` + + +``` +// index.js +import prompt from '@system.prompt'; +export default { + data:{ + gutterWidth:'', + columnWidth:'', + columns:'', + }, + getColumns(){ + this.$element('mygrid').getColumnWidth((result)=>{ + this.columnWidth = result; + }) + this.$element('mygrid').getGutterWidth((result)=>{ + this.gutterWidth = result; + }) + this.$element('mygrid').getColumns((result)=>{ + this.columns= result; + }) + setTimeout(()=>{ + prompt.showToast({duration:5000,message:'columnWidth:'+this.columnWidth+',gutterWidth:'+ + this.gutterWidth+',getColumns:'+this.columns}) + }) + }, + getSizeType(){ + this.$element('mygrid').getSizeType((result)=>{ + prompt.showToast({duration:2000,message:'get size type:'+result}) + }) + }, +} +``` + +![en-us_image_0000001231843088](figures/en-us_image_0000001231843088.gif) + + +## Adding <grid-col> + +After adding a **<grid-row>** child component to **<grid-container>**, add a **<grid-col>** child component to **<grid-row>** to form a layout. + + +``` + +
+ + + +
+ top +
+ + + + +
+ left +
+ + +
+ right +
+ + + + +
+ bottom +
+ + + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + width: 100%; + justify-content: center; + align-items: center; +} +text{ + color: white; + font-size: 40px; + +``` + +![en-us_image_0000001231683124](figures/en-us_image_0000001231683124.png) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> **<grid-row>** supports only **<grid-col>** as a child component. You can add content only to **<grid-col>**. + + +## Example Scenario + +In this example, the content in the list is output cyclically to create a grid layout. When the user pulls down the screen, the **refresh** method is triggered. In this case, a piece of data is added to the list and **setTimeout** is set to refresh the request data. + + +``` + +
+ + + + +
+ +
+ + +
+ image{{item.id}} +
+ + + + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + width: 100%; +} +text{ + color: #0a0aef; + font-size: 60px; +} +``` + + +``` +// index.js +import prompt from '@system.prompt'; +export default { + data:{ + list:[ + {src:'common/images/1.png',id:'1'}, + {src:'common/images/2.png',id:'2'}, + {src:'common/images/3.png',id:'3'} + ], + fresh:false + }, + refresh(e) { + prompt.showToast({ + message: 'refreshing' + }) + var that = this; + that.fresh = e.refreshing; + setTimeout(function () { + that.fresh = false; + that.list.unshift({src: 'common/images/4.png',id:'4'}); + prompt.showToast({ + message: 'succeed' + }) + }, 2000) + } +} +``` + + +![en-us_image_0000001276003501](figures/en-us_image_0000001276003501.gif) diff --git a/en/application-dev/ui/ui-js-components-canvas.md b/en/application-dev/ui/ui-js-components-canvas.md new file mode 100644 index 0000000000000000000000000000000000000000..87b813cca0bae6f27a417f43b81f03f098350a35 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-canvas.md @@ -0,0 +1,121 @@ +# <canvas> Development + + +The **<canvas>** component provides a canvas for drawing customized graphics. For details, see [canvas](../reference/arkui-js/js-components-canvas-canvas.md). + + +## Creating a <canvas> Component + +Create a **<canvas>** component in the .hml file under **pages/index**. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +canvas{ + background-color: #00ff73; +} +``` + +![en-us_image_0000001232162316](figures/en-us_image_0000001232162316.png) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - The default background color of the **<canvas>** component is the same as that of the parent component. +> +> - The default width and height of **<canvas>** are 300 px and 150 px, respectively. + + +## Adding Styles + +Set **width**, **height**, **background-color**, and **border** of the **<canvas>** component. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +canvas{ + width: 500px; + height: 500px; + background-color: #fdfdfd; + border: 5px solid red; +} +``` + +![en-us_image_0000001231843104](figures/en-us_image_0000001231843104.png) + + +## Adding Events + +Add the long press event to the **<canvas>** component. When the event is triggered, the value of **dataUrl** (image information returned by the **toDataURL** method) of the **<canvas>** component can be obtained and printed in the text area below. + + +``` + +
+ + dataURL + {{dataURL}} +
+``` + + +``` +/* xxx.css */.container{ flex-direction: column; justify-content: center; align-items: center; background-color: #F1F3F5;}canvas{ width: 500px; height: 500px; background-color: #fdfdfd; border: 5px solid red; + margin-bottom: 50px; +}.content{ border: 5px solid blue; padding: 10px; width: 90%; height: 400px; overflow: scroll;} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + dataURL:null, + antialia: false, + porc:'open', + }, + onShow(){ + let el = this.$refs.canvas1; + let ctx = el.getContext("2d"); + ctx.strokeRect(100,100,300,300); + }, + getUrl(){ + let el = this.$refs.canvas1; + let dataUrl = el.toDataURL(); + this.dataURL = dataUrl; + prompt.showToast({duration:2000,message:"long press,get dataURL"}); + } +} +``` + +![en-us_image_0000001276003513](figures/en-us_image_0000001276003513.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> The **<canvas>** component cannot be created in **onInit** or **onReady**. diff --git a/en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md b/en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md new file mode 100644 index 0000000000000000000000000000000000000000..67922ab27f55e9cc20b1e2447e605dc83ff18df4 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md @@ -0,0 +1,826 @@ +# CanvasRenderingContext2D + + +Use **CanvasRenderingContext2D** to draw objects such as graphics, texts, line segments, and images on the **<canvas>** component. For details, see [CanvasRenderingContext2D](../reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md). + + +## Drawing Line Segments + +Use **moveTo** and **lineTo** to draw a line segment. Use the **closePath** method to end current path, obtaining a closed path. Set **quadraticCurveTo** (quadratic bezier curve) or **bezierCurveTo** (cubic bezier curve) to draw a graphic. + + +``` + +
+ + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +canvas{ + width: 600px; + height: 500px; + background-color: #fdfdfd; + border: 5px solid red; +} +select{ + margin-top: 50px; + width: 250px; + height: 100px; + background-color: white; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + el: null, + ctx: null, + }, + onShow(){ + this.el = this.$refs.canvas1; + this.ctx = this.el.getContext("2d",{antialias: true}); + // Clear the contents on the canvas. + this.ctx.clearRect(0, 0, 600, 500); + // Create a drawing path. + this.ctx.beginPath(); + // Square off the endpoints of the line. + this.ctx.lineCap = 'butt'; + // Border width + this.ctx.lineWidth = 15; + // Create a drawing path. + this.ctx.beginPath(); + // Move a drawing path from the current point to a target position. + this.ctx.moveTo(200, 100); + // Connect the current point to a target position. + this.ctx.lineTo(400, 100); + // Stroke a path. + this.ctx.stroke(); + this.ctx.beginPath(); + // Round the endpoints of the line. + this.ctx.lineCap = 'round'; + this.ctx.moveTo(200, 200); + this.ctx.lineTo(400, 200); + this.ctx.stroke(); + // Square off the endpoints of the line. + this.ctx.beginPath(); + this.ctx.lineCap = 'square'; + this.ctx.moveTo(200, 300); + this.ctx.lineTo(400, 300); + this.ctx.stroke(); + }, + change(e){ + if(e.newValue == 'value1'){ + this.el = this.$refs.canvas1; + this.ctx = this.el.getContext("2d",{antialias: true}); + this.ctx.clearRect(0, 0, 600, 500); + // Top + this.ctx.beginPath(); + this.ctx.lineCap = 'butt'; + this.ctx.moveTo(200, 100); + this.ctx.lineTo(400, 100); + this.ctx.stroke(); + // Center + this.ctx.beginPath(); + this.ctx.lineCap = 'round'; + this.ctx.moveTo(200, 200); + this.ctx.lineTo(400, 200); + this.ctx.stroke(); + // Bottom + this.ctx.beginPath(); + this.ctx.lineCap = 'square'; + this.ctx.moveTo(200, 300); + this.ctx.lineTo(400, 300); + this.ctx.stroke(); + }else if(e.newValue == 'value2'){ + this.ctx.clearRect(0, 0, 600, 500); + // Top + this.ctx.beginPath(); + this.ctx.moveTo(100, 150); + // Path of the quadratic bezier curve + this.ctx.quadraticCurveTo(300, 50, 500, 150); + this.ctx.stroke(); + // Left + this.ctx.beginPath(); + this.ctx.moveTo(200, 150); + this.ctx.quadraticCurveTo(250, 250, 250, 400); + this.ctx.stroke(); + // Right + this.ctx.beginPath(); + this.ctx.moveTo(400, 150); + this.ctx.quadraticCurveTo(350, 250, 350, 400); + this.ctx.stroke(); + }else if(e.newValue == 'value3'){ + this.ctx.clearRect(0, 0, 600, 500); + // Bottom + this.ctx.beginPath(); + this.ctx.moveTo(100, 200); + // Path of the cubic bezier curve + this.ctx.bezierCurveTo(150, 100, 200, 100,250, 200); + this.ctx.stroke(); + // Left + this.ctx.beginPath(); + this.ctx.moveTo(350, 200); + this.ctx.bezierCurveTo(400, 100, 450, 100,500, 200); + this.ctx.stroke(); + // Right + this.ctx.beginPath(); + this.ctx.moveTo(200, 350); + this.ctx.bezierCurveTo(250, 500, 350, 500, 400, 350); + this.ctx.stroke(); + }else if(e.newValue == 'value4'){ + this.ctx.clearRect(0, 0, 600, 500); + this.ctx.beginPath(); + this.ctx.moveTo(100, 200); + // Arc + this.ctx.arcTo(150, 300, 350, 300, 150); + this.ctx.stroke(); + this.ctx.beginPath(); + // Ellipse + this.ctx.ellipse(400, 250, 50, 100, Math.PI * 0.25, Math.PI * 0.5 , Math.PI , 1); + this.ctx.stroke(); + }else if(e.newValue == 'value5'){ + this.ctx.clearRect(0, 0, 600, 500); + // Upper left + this.ctx.beginPath(); + // Draw a sector centered at the common endpoint of connected line segments. + this.ctx.lineJoin = 'round'; + this.ctx.moveTo(100, 100); + this.ctx.lineTo(200, 200); + this.ctx.lineTo(100, 250); + this.ctx.stroke(); + // lower left + this.ctx.beginPath(); + // Fill a triangular between the common endpoint of connected segments. + this.ctx.lineJoin = 'bevel'; + this.ctx.moveTo(100, 300); + this.ctx.lineTo(200, 400); + this.ctx.lineTo(100, 450); + this.ctx.stroke(); + // Top right + this.ctx.beginPath(); + // Distance between the internal angle and exterior angle at the intersection of lines + this.ctx.lineJoin = 'miter'; + this.ctx.miterLimit = 3; + this.ctx.moveTo(400, 100); + this.ctx.lineTo(450, 200); + this.ctx.lineTo(400, 250); + // Draw a closed path. + this.ctx.closePath(); + this.ctx.stroke(); + // Lower right + this.ctx.beginPath(); + this.ctx.lineJoin = 'miter'; + this.ctx.miterLimit = 10; + this.ctx.moveTo(400, 300); + this.ctx.lineTo(450, 400); + this.ctx.lineTo(400, 450); + this.ctx.closePath(); + this.ctx.stroke(); + } + }, +} +``` + +![en-us_image_0000001232162320](figures/en-us_image_0000001232162320.gif) + + +## Drawing Border + +Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle with the border width of 5 upon initialization. Change the border width (**lineWidth**), color (**strokeStyle**), and line dash level (**setLineDash**). Add the **change** event to the **<select>** component. The **change** event will be triggered upon selection and the changed image will be displayed. + + + +``` + +
+ + +
+``` + + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +canvas{ + width: 600px; + height: 500px; + background-color: #fdfdfd; + border: 5px solid red; +} +select{ + margin-top: 50px; + width: 250px; + height: 100px; + background-color: white; +} +``` + + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + el: null, + ctx: null, + }, + onShow(){ + this.el = this.$refs.canvas1; + this.ctx = this.el.getContext("2d",{antialias: true}); + this.ctx.lineWidth = 5; + this.ctx.strokeRect(200, 150, 200, 200); + }, + change(e){ + if(e.newValue == 'value1'){ + // Clear the contents on the canvas. + this.ctx.clearRect(0,0,600,500); + // Border width + this.ctx.lineWidth = 5; + // Border color + this.ctx.strokeStyle = '#110000'; + // Line dash level of the border + this.ctx.setLineDash([0,0]); + // Draw a stroked rectangle. + this.ctx.strokeRect(200, 150, 200, 200); + }else if(e.newValue == 'value2'){ + this.ctx.clearRect(0,0,600,500); + this.ctx.lineWidth = 30; + this.ctx.strokeStyle = '#0000ff'; + this.ctx.setLineDash([0,0]); + // Draw a circle. + this.ctx.arc(300, 250, 150,0,6.28); + // Draw borders. + this.ctx.stroke(); + }else if(e.newValue == 'value3'){ + this.ctx.clearRect(0,0,600,500); + this.ctx.lineWidth = 5; + this.ctx.setLineDash([5,5]); + this.ctx.strokeRect(200, 150, 200, 200); + }else if(e.newValue == 'value4'){ + this.ctx.clearRect(0,0,600,500); + // Draw and fill a rectangle. + this.ctx.fillStyle = '#0000ff'; + this.ctx.fillRect(200, 150, 200, 200); + } + }, +} +``` + + +![en-us_image_0000001232003004](figures/en-us_image_0000001232003004.gif) + + +## Setting Gradient Fill Colors + +Add the **createLinearGradient** and **createRadialGradient** attributes to create a gradient container, use the **addColorStop** method to add multiple color blocks to form a gradient color, and set **fillStyle** as **gradient** to apply the gradient color to a rectangle. Then set the shadow blur level by using **shadowBlur**, the shadow color by using **shadowColor**, and the shadow offset by using **shadowOffset**. + + +``` + +
+ + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +canvas{ + width: 600px; + height: 500px; + background-color: #fdfdfd; + border: 5px solid red; +} +select{ + margin-top: 50px; + width: 250px; + height: 100px; + background-color: white; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + el: null, + ctx: null, + }, + onShow(){ + this.el = this.$refs.canvas1; + this.ctx = this.el.getContext("2d",{antialias: true}); + // Create a linear gradient. + let gradient = this.ctx.createLinearGradient(100,100, 400,300); + // Add gradient colors. + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.7, 'white'); + gradient.addColorStop(1.0, 'green'); + // Apply the gradient. + this.ctx.fillStyle = gradient; + this.ctx.fillRect(100, 100, 400, 300); + }, + change(e){ + if(e.newValue == 'value1'){ + // Clear the contents on the canvas. + this.ctx.clearRect(0,0,600,500); + let gradient = this.ctx.createLinearGradient(100,100, 400,300); + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.7, 'white'); + gradient.addColorStop(1.0, 'green'); + this.ctx.fillStyle = gradient; + // Set the level of shadow blur. + this.ctx.shadowBlur = 0; + // Set the distance that shadows will be offset vertically. + this.ctx.shadowOffsetY = 0; + // Set the distance that shadows will be offset horizontally. + this.ctx.shadowOffsetX = 0; + this.ctx.fillRect(100, 100, 400, 300); + }else if(e.newValue == 'value2'){ + this.ctx.clearRect(0,0,600,500); + // Create a radial gradient. + let gradient = this.ctx.createRadialGradient(300,250,20,300,250,100); + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.7, 'white'); + gradient.addColorStop(1.0, 'green'); + this.ctx.shadowBlur = 0; + this.ctx.shadowOffsetY = 0; + this.ctx.shadowOffsetX = 0; + this.ctx.fillStyle = gradient; + this.ctx.fillRect(100, 100, 400, 300); + }else if(e.newValue == 'value3'){ + this.ctx.clearRect(0,0,600,500); + let gradient = this.ctx.createLinearGradient(100,100, 400,400); + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.5, 'white'); + gradient.addColorStop(1, '#17ea35'); + // Set the level of shadow blur. + this.ctx.shadowBlur = 30; + // Set the shadow color. + this.ctx.shadowColor = 'rgb(229, 16, 16)'; + this.ctx.fillStyle = gradient; + this.ctx.fillRect(100, 100, 400, 300); + }else if(e.newValue == 'value4'){ + this.ctx.clearRect(0,0,600,500); + this.ctx.clearRect(0,0,600,500); + let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200); + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.5, 'white'); + gradient.addColorStop(1, '#17ea35'); + // Set the level of shadow blur. + this.ctx.shadowBlur = 30; + this.ctx.shadowOffsetY = 30; + // Set the shadow color. + this.ctx.shadowColor = 'rgb(23, 1, 1)'; + this.ctx.fillStyle = gradient; + this.ctx.fillRect(100, 100, 400, 300); + } + }, +} +``` + +![en-us_image_0000001231683148](figures/en-us_image_0000001231683148.gif) + + +## Filling Texts + +Create a text and use the **fillText** method to write the text on the canvas. Use the **globalAlpha** attribute to change the baseline transparency to avoid the text being hidden by the baseline. Then set the **textAlign** and **textBaseline** attributes to determine the text position based on the baseline. + + +``` + +
+ + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +canvas{ + width: 600px; + height: 500px; + background-color: #fdfdfd; + border: 5px solid red; +} +select{ + margin-top: 50px; + width: 250px; + height: 100px; + background-color: white; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + el: null, + ctx: null, + }, + onShow(){ + this.el = this.$refs.canvas1; + this.ctx = this.el.getContext("2d",{antialias: true}); + // Create a text. + let text = "Hello World"; + // Set the font. + this.ctx.font = '30px'; + this.ctx.fillText("with:"+this.ctx.measureText(text).width, 200, 300); + // Set the fill text. + this.ctx.fillText(text, 200, 250); + }, + change(e){ + if(e.newValue == 'value1'){ + // Clear the contents on the canvas. + this.ctx.clearRect(0,0,600,500); + // Start a new path. + this.ctx.beginPath(); + // Initialize the textAlign value. + this.ctx.textAlign = 'left'; + // Initialize textBaseline. + this.ctx.textBaseline = 'alphabetic'; + // Set the font. + this.ctx.font = '30px'; + let text = "Hello World"; + // Obtain the font width. + this.ctx.fillText("with:"+this.ctx.measureText(text).width, 200, 300); + // Set the fill text. + this.ctx.fillText(text, 200, 250); + }else if(e.newValue == 'value2'){ + this.ctx.clearRect(0,0,600,500); + this.ctx.beginPath(); + // Set the Alpha value. + this.ctx.globalAlpha = 0.1; + // Set the line width. + this.ctx.lineWidth = 10; + // Set the line segment color. + this.ctx.strokeStyle = '#0000ff'; + // Move from the current point to a target position. + this.ctx.moveTo(0, 240); + // Connect the current point to a target position. + this.ctx.lineTo(600, 240); + this.ctx.stroke(); + this.ctx.font = '35px'; + this.ctx.globalAlpha = 1; + // Initialize the textAlign value. + this.ctx.textAlign = 'left'; + // Set textBaseline. + this.ctx.textBaseline = 'top'; + this.ctx.fillText('Top', 50, 240); + this.ctx.textBaseline = 'bottom'; + this.ctx.fillText('Bottom', 200, 240); + this.ctx.textBaseline = 'middle'; + this.ctx.fillText('Middle', 400, 240); + }else if(e.newValue == 'value3'){ + // Clear the contents on the canvas. + this.ctx.clearRect(0,0,600,500); + this.ctx.beginPath(); + this.ctx.globalAlpha = 0.1; + this.ctx.lineWidth = 10; + this.ctx.strokeStyle = '#0000ff'; + this.ctx.moveTo(300, 0); + this.ctx.lineTo(300, 500); + this.ctx.stroke(); + this.ctx.font = '35px'; + this.ctx.globalAlpha = 1; + // Initialize textBaseline. + this.ctx.textBaseline = 'alphabetic'; + // Set textAlign. + this.ctx.textAlign = 'left'; + this.ctx.fillText('textAlign=left',300, 100); + this.ctx.textAlign = 'center'; + this.ctx.fillText('textAlign=center',300, 250); + this.ctx.textAlign = 'right'; + this.ctx.fillText('textAlign=right',300, 400); + } + } +} +``` + +![en-us_image_0000001276162745](figures/en-us_image_0000001276162745.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**. + + +## Adding Images + +After creating an image object, use the **drawImage** attribute to draw the image and set animation styles such as scaling, translating, and rotating. + + +``` + +
+
+ + change + + rotate + + scale + + translate + + transform + + setTransform + +
+
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + align-items: center; +} +canvas{ + width: 600px; + height: 300px; + margin-bottom: 100px; + background-color: #fdfdfd; + border: 5px solid red; +} +.content{ + width: 80%; + margin-top: 50px; + margin-bottom: 50px; + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} +text{ + font-size: 35px; + width: 200px; + height: 80px; + color: white; + border-radius: 20px; + text-align: center; + background-color: #6060e7; + margin-bottom: 30px; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + compositeOperation: 'source-over' + }, + onShow(){ + let ctx = this.$refs.canvas0.getContext("2d"); + // Create an image object. + let img = new Image(); + // Set the image path. + img.src = 'common/images/2.png'; + // Set the image width. + img.width= 150; + // Set the image height. + img.height=150; + // Create an image tiling container. + var pat = ctx.createPattern(img, 'repeat'); + ctx.fillStyle = pat; + ctx.fillRect(0, 0, 600, 300); + }, + change(){ + // Obtain the brush after the canvas is created. + let ctx = this.$refs.canvas1.getContext("2d"); + ctx.clearRect(0,0,600,1000); + if(this.compositeOperation == "source-over"){ + this.compositeOperation = "destination-over"; + }else{ + this.compositeOperation = "source-over"; + } + ctx.globalCompositeOperation = this.compositeOperation; + let img = new Image(); + img.src = 'common/images/2.png'; + // Invoked when the image is successfully obtained. + img.onload = function() { + ctx.drawImage(img, 150, 20, 200, 200); + }; + let img1 = new Image(); + img1.src = 'common/images/3.png'; + img1.onload = function() { + // Draw an image. + ctx.drawImage(img1, 250, 80, 200, 200); + }; + // A method is triggered when the image fails to be obtained. + img1.onerror = function() { + prompt.showToast({message:"error",duration:2000}) + }; + }, + rotate(){ + let ctx = this.$refs.canvas2.getContext("2d"); + ctx.clearRect(0,0,600,300); + // Rotate the image. + ctx.rotate(10 * Math.PI / 180); + let img = new Image(); + img.src = 'common/images/2.png'; + img.onload = function() { + ctx.drawImage(img, 300, 0, 100, 100); + }; + }, + scale(){ + let ctx = this.$refs.canvas3.getContext("2d"); + ctx.clearRect(0,0,600,200); + // Scale the image. + ctx.scale(1.3,1.2); + let img = new Image(); + img.src = 'common/images/2.png'; + img.onload = function() { + ctx.drawImage(img, 0, 0, 50, 50); + }; + }, + translate(){ + let ctx = this.$refs.canvas4.getContext("2d"); + ctx.clearRect(0,0,600,300); + ctx.translate(10,0); + let img = new Image(); + img.src = 'common/images/2.png'; + img.onload = function() { + ctx.drawImage(img, 0, 50, 300, 200); + }; + }, + transform(){ + let ctx = this.$refs.canvas5.getContext("2d"); + ctx.clearRect(0,0,600,300); + ctx.transform(1.1, 0.1, 0.1, 1, 10, 0); + let img = new Image(); + img.src = 'common/images/2.png'; + img.onload = function() { + ctx.drawImage(img, 0, 50, 100, 100); + }; + }, + setTransform(){ + let ctx = this.$refs.canvas6.getContext("2d"); + ctx.clearRect(0,0,600,300); + ctx.setTransform(1.1, 0.1, 0.1, 1, 10, 0); + let img = new Image(); + img.src = 'common/images/2.png'; + img.onload = function() { + ctx.drawImage(img, 0, 50, 100, 100); + }; + }, +} +``` + +![en-us_image_0000001232003008](figures/en-us_image_0000001232003008.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - Unlike the **transform()** function, the **setTransform()** function resets the existing transformation matrix and creates a transformation matrix even if it uses the same parameters. +> +> - The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation. +> x' = scaleX \* x + skewY \* y + translateX +> +> y' = skewX \* x + scaleY \* y + translateY + + +## Adding Methods + +Use the **save** method to save the brush style, and use the **restore** method to restore the saved settings. In the following example, set the brush to red. After the brush setting is saved, clear the canvas and change the brush to blue. In this moment, directly using the brush will get a blue rectangle; using the brush after the restore operation will get a red rectangle. + + +``` + +
+
+ +
+
+ save + clear + restore +
+
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + align-items: center; +} +canvas{ + margin-top: 300px; + width: 600px; + height: 500px; + background-color: #fdfdfd; + border: 5px solid red; +} +.content{ + width: 80%; + margin-top: 50px; + margin-bottom: 50px; + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} +text{ + width: 150px; + height: 80px; + color: white; + border-radius: 20px; + text-align: center; + background-color: #6060e7; + margin-bottom: 30px; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + ctx: '', + }, + onShow(){ + this.ctx = this.$refs.canvas.getContext("2d"); + this.ctx.fillStyle = "red" + this.ctx.fillRect(200, 150, 200, 200); + }, + save(){ + // Save the brush setting. + this.ctx.save(); + prompt.showToast({message:"save succeed"}); + }, + clear(){ + this.ctx.clearRect(0,0,600,500); + // Change the brush color. + this.ctx.fillStyle = "#2133d2"; + }, + restore(){ + this.ctx.beginPath(); + // Restore the brush setting. + this.ctx.restore(); + this.ctx.fillRect(200, 150, 200, 200); + }, +} +``` + +![en-us_image_0000001231683144](figures/en-us_image_0000001231683144.gif) diff --git a/en/application-dev/ui/ui-js-components-chart.md b/en/application-dev/ui/ui-js-components-chart.md new file mode 100644 index 0000000000000000000000000000000000000000..b300b2a1cb977b7253dadad41adbad9a29a320bf --- /dev/null +++ b/en/application-dev/ui/ui-js-components-chart.md @@ -0,0 +1,620 @@ +# <chart> Development + + +The **<chart>** component displays line charts, gauge charts, and bar charts. For details, see [chart](../reference/arkui-js/js-components-basic-chart.md). + + +## Creating a <chart> Component + +Create a **<chart>** component in the .hml file under **pages/index**. + + + +``` + +
+ +
+``` + + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.chart-data { + width: 700px; + height: 600px; +} +``` + + + +``` +/* xxx.js */ +export default { + data: { + lineData: [ + { + data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716] + } + ], + lineOps: { + xAxis: { + min: 0, + max: 20, + display: false, + }, + yAxis: { + min: 0, + max: 1000, + display: false, + }, + series: { + lineStyle: { + width: 15, + }, + } + }, + } +} +``` + + +![en-us_image_0000001231683156](figures/en-us_image_0000001231683156.png) + + +## Setting the Chart Type + +Define the chart type using the **type** attribute, for example, setting a chart to a bar chart. + + +``` + +
+
+
+ + {{ title }} + +
+ + + + + Line chart + Bar chart + Gauge chart + + +
+ + +
+
+ + +
+
+ +
+ + + + +
+
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + background-color: #F1F3F5; +} +.chart-data { + width: 700px; + height: 600px; +} +.title{ + margin-left: 50px; + margin-top: 50px; + font-size: 50px; +} +.line-block{ + align-items: center; + justify-content: center; +} +.bar-block{ + align-items: center; + justify-content: center; +} +.chart-block{ + width: 90%; + margin-left: 30px; +} +``` + + +``` +/* xxx.js */ +export default { + data: { + title:"Type display", + barData: [ + { + fillColor: '#3848e8', + data: [763, 550, 551, 554, 731, 654, 525, 696, 595], + } + ], + lineData: [ + { + strokeColor: '#0081ff', + fillColor: '#cce5ff', + data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], + gradient: true, + } + ], + lineOps: { + xAxis: { + min: 0, + max: 20, + display: false, + }, + yAxis: { + min: 0, + max: 1000, + display: false, + }, + series:{ + lineStyle: { + width: "5px", + smooth: true, + }, + headPoint: { + shape:"circle", + size: 20, + strokeWidth: 5, + fillColor: '#ffffff', + strokeColor: '#007aff', + display: true, + }, + loop:{ + margin: 2, + gradient: true + } + }, + }, + barOps: { + xAxis: { + min: 0, + max: 20, + display: false, + axisTick: 10, + }, + yAxis: { + min: 0, + max: 1000, + }, + }, + }, +} +``` + +![en-us_image_0000001275803181](figures/en-us_image_0000001275803181.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> The **<chart>** component does not display the value of each point. + + +## Setting the Chart Attributes + +In the **options** attribute of the **<chart>** component, you can set the x-axis, y-axis, and data series parameters. In the **datasets** attribute, you can set the line color, fill color, gradient fill color, and drawing point set. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.chart-data { + width: 700px; + height: 600px; +} +``` + + +``` +/* xxx.js */ +export default { + data: { + // Line chart data + lineData: [ + { + strokeColor: '#0081ff', + fillColor: '#cce5ff', // Fill color + data: [463, 250, 251, 254, 431, 354, 225, 396, 295, 328, 491, 205, 313, 275, 475, 553, 491, 380, 357, 416], + gradient: true, + } + ], + lineOps: { + // X-axis parameters + xAxis: { + min: 0, + max: 20, + display: false, + }, + // Y-axis parameters + yAxis: { + min: 0, + max: 1000, + display: false, + }, + // Data series parameters + series: { + // Line style + lineStyle: { + width: "5px", + smooth: true, + }, + // Style and size of the white point at the start of the line + headPoint: { + shape: "circle", + size: 20, + strokeWidth: 5, + fillColor: '#ffffff', + strokeColor: '#007aff', + display: true, + }, + // Whether to start drawing again when the screen is looped. + loop: { + margin: 2, + gradient: true + } + } + }, + }, +} +``` + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - The **options** attribute supports the settings of bar charts and line charts but does not support those of gauge charts. +> +> - The **datasets** attribute supports the datasets for bar charts and line charts but does not support those of gauge charts. +> +> - Only line charts support **series**. + + +## Adding Data + +Use the **append** method of the **<chart>** component to dynamically add data. + + +``` + +
+ + + + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.chart-region { + height: 400px; + width: 700px; +} +.chart-data { + width: 700px; + height: 600px; +} +button { + width: 100%; + height: 50px; + background-color: #F4F2F1; + text-color: #0C81F3; + margin-top: 30px; +} +``` + + +``` +// xxx.js +export default { + data: { + lineData: [ + { + strokeColor: '#de0b6e', + fillColor: '#bb09a3', + data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], + gradient: true, + } + ], + lineOps: { + xAxis: { + min: 0, + max: 20, + display: false, + }, + yAxis: { + min: 0, + max: 1000, + display: false, + }, + series: { + lineStyle: { + width: "5px", + smooth: true, + }, + headPoint: { + shape: "circle", + size: 20, + strokeWidth: 5, + fillColor: '#ffffff', + strokeColor: '#f8145c', + display: true, + }, + loop: { + margin: 2, + gradient: true, + } + } + }, + }, + addData() { + this.$refs.linechart.append({ + serial: 0, + data: [Math.floor(Math.random() * 400) + 200] + }) + } +} +``` + +![en-us_image_0000001275803177](figures/en-us_image_0000001275803177.gif) + + +## Example Scenario + +Select the data display status using **<switch>**. When **<switch>** is set to **true**, the timer is used to dynamically display data. + + +``` + +
+
+
+ {{ title }} + + +
+ + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + + {{ $item.data }} + + + + + {{ $item.value }} + + +
+
+ + +
+
+``` + + +``` +/* xxx.css */ +.container{ + display:flex; + flex-direction:column; + background-color: #F1F3F5; +} +.line-class{ + display: flex; + flex-direction: column; +} +.title{ + font-size: 40px; + margin-left: 40px; +} +.switch-block { + margin-top: 30px; + width: 98%; + height: 80px; + display: flex; + justify-content: space-between; +} +.switch{ + font-size: 40px; +} +.bar-block { + margin-top: 80px; + margin-left: 40px; + position: relative; + width: 90%; + border-radius: 10px; + background-color: #25FAB27B; + height: 40%; + justify-content: center; +} +``` + + +``` +// xxx.js +export default { + data: { + interval: null, + title: "Data Display", + allowScale: true, + dataLength: 30, + barGroup: 3, + lineData: null, + lineOps: { + xAxis: { + min: 0, + max: 5 + }, + yAxis: { + min: 0, + max: 100 + }, + series: { + lineStyle: { + width: '1px', + }, + headPoint: { + shape: 'circle', + size: 10, + strokeWidth: 2, + fillColor: '#ffffff', + strokeColor: '#8477DF' + }, + loop: { + margin: 2 + } + } + }, + barData: [ + { + fillColor: '#97CF0A2C', + data: [20, 20,40, 56] + }, + { + fillColor: '#6D0A7ACF', + data: [52, 40, 2, 67] + }, + { + fillColor: '#6A0ACFA1', + data: [56, 2, 77, 40] + } + ], + barOps: { + xAxis: { + min: 0, + max: 20, + axisTick: 5 + }, + yAxis: { + min: 0, + max: 100 + } + } + }, + onInit() { + this.changeLine(); + }, + change(e) { + if (e.checked) { + this.interval = setInterval(() => { + this.changeLine(); + this.changeBar(); + }, 1000) + } else { + clearInterval(this.interval); + } + }, + changeLine() { + var dataArray = []; + for (var i = 0; i < this.dataLength; i++) { + var nowValue = Math.floor(Math.random() * 99 + 1); + var obj = { + "value": nowValue, + "description": nowValue + "", + "textLocation": "top", + "textColor": "#CDCACA", + "pointStyle": { + "shape": "circle", + "size": 5, + "fillColor": "#CF0A2C", + "strokeColor": "#CF0A2C" + } + }; + dataArray.push(obj); + } + this.lineData = [ + { + strokeColor: '#0081ff', + fillColor: '#FF07CDC4', + data: dataArray, + gradient: true, + } + ] + }, + changeBar() { + for (var i = 0;i < this.barGroup; i++) { + var dataArray = this.barData[i].data; + for (var j = 0;j < 4; j++) { + dataArray[j] = Math.floor(Math.random() * 99 + 1); + } + } + this.barData = this.barData.splice(0, this.barGroup + 1); + }, + changes(e) { + console.log("Tab index: " + e.index); + }, +} + +``` + +![en-us_image_0000001232162328](figures/en-us_image_0000001232162328.gif) diff --git a/en/application-dev/ui/ui-js-components-dialog.md b/en/application-dev/ui/ui-js-components-dialog.md index 0c5c1303dbaa51e7c2d3987788cded4d51be8906..4c7f982b9169be8d68220a471d9aa9ad393cfc7c 100644 --- a/en/application-dev/ui/ui-js-components-dialog.md +++ b/en/application-dev/ui/ui-js-components-dialog.md @@ -1,20 +1,21 @@ # <dialog> Development -The <dialog> component is custom pop-up container for showing critical information or calling for an action. For details, see [dialog](../reference/arkui-js/js-components-container-dialog.md). +The **<dialog>** component is custom pop-up container for showing critical information or calling for an action. For details, see [dialog](../reference/arkui-js/js-components-container-dialog.md). ## Creating a <dialog> Component - Create a <dialog> component in the .hml file under pages/index and add <button> components to trigger the <dialog>. The <dialog> component supports only the width, height, margin, margin-[left|top|right|bottom], and margin-[start|end] styles. + Create a **<dialog>** component in the .hml file under **pages/index** and add **<button>** components to trigger the **<dialog>**. The **<dialog>** component supports only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles. ```
-
+ +
this is a dialog
- +
``` @@ -23,6 +24,8 @@ The <dialog> component is custom pop-up container for showing critical inf ``` /* xxx.css */ .doc-page { + width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; @@ -67,7 +70,9 @@ export default { ## Setting Dialog Box Response -Add a cancel event that is triggered when a user touches a non-dialog area to cancel the pop-up dialog box. Add the show and close methods to display and close the dialog box, respectively. +Add a **cancel** event that is triggered when a user touches a non-dialog area to cancel the pop-up dialog box. Add the **show** and **close** methods to display and close the dialog box, respectively. + + ``` @@ -82,9 +87,13 @@ Add a cancel event that is triggered when a user touches a non-dialog area to ca
``` + + ``` /* xxx.css */ .doc-page { + width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; @@ -113,6 +122,8 @@ button{ } ``` + + ``` /* xxx.js */ import prompt from '@system.prompt'; @@ -133,18 +144,20 @@ export default { ![en-us_image_0000001223287720](figures/en-us_image_0000001223287720.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > - This component supports only one child component. > -> - Attributes and styles of a <dialog> component cannot be dynamically updated. +> - Attributes and styles of a **<dialog>** component cannot be dynamically updated. > -> - The <dialog> component does not support the focusable and click-effect attributes. +> - The **<dialog>** component does not support the **focusable** and **click-effect** attributes. ## Example Scenario -Use the <dialog> component to implement a schedule. When the dialog box is open, use the [<textarea>](../reference/arkui-js/js-components-basic-textarea.md) component to add an event and touch the OK button to obtain the current time and save the input text. The events in the calendar are displayed in a list. +Use the **<dialog>** component to implement a schedule. When the dialog box is open, use the [**<textarea>**](../reference/arkui-js/js-components-basic-textarea.md) component to add an event and touch the OK button to obtain the current time and save the input text. The events in the calendar are displayed in a list. + + ``` @@ -180,6 +193,8 @@ Use the <dialog> component to implement a schedule. When the dialog box is ``` + + ``` /* xxx.css */ .doc-page { @@ -248,6 +263,8 @@ Use the <dialog> component to implement a schedule. When the dialog box is } ``` + + ``` /* xxx.js */ var info = null; diff --git a/en/application-dev/ui/ui-js-components-form.md b/en/application-dev/ui/ui-js-components-form.md index 734d3dc510a597d08c5dda4d31e8c6d2b18436be..a4d3fa9c7015f240d57fdd2950a36530366d83c0 100644 --- a/en/application-dev/ui/ui-js-components-form.md +++ b/en/application-dev/ui/ui-js-components-form.md @@ -1,22 +1,22 @@ # <form> Development -The <form> component allows the content in [<input>](../reference/arkui-js/js-components-basic-input.md)components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md). +The <form> component allows the content in [<input>](../reference/arkui-js/js-components-basic-input.md) components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md). -> ![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 6. ## Creating a <form> Component - Create a <form> component in the .hml file under pages/index. + Create a **<form>** component in the .hml file under **pages/index**. ```
-
-
+
+
``` @@ -24,6 +24,8 @@ The <form> component allows the content in [<input>](../reference/ar ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -36,7 +38,7 @@ The <form> component allows the content in [<input>](../reference/ar ## Zooming In or Out on a Form - To implement the zoom effect after a form is clicked, add the click-effect attribute to the <form> component. For values of click-effect, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md). + To implement the zoom effect after a form is clicked, add the **click-effect** attribute to the **<form>** component. For values of **click-effect**, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md). ``` @@ -48,10 +50,23 @@ The <form> component allows the content in [<input>](../reference/ar ``` -## Setting the Form Style +## Setting Form Styles + + +Add the **background-color** and **border** attributes. + + + +``` + +
+
+ +
+
+``` -Add the background-color and border attributes. ``` /* xxx.css */ @@ -63,8 +78,7 @@ Add the background-color and border attributes. } .formClass{ width: 80%; - padding: 10px; - border: 1px solid #c3d3e7; + height: 20%; } ``` @@ -74,24 +88,24 @@ Add the background-color and border attributes. ## Adding Response Events - To submit or reset a form, add the submit and reset events. + To submit or reset a form, add the **submit** and **reset** events. ``` -
-
-
-
- - - - -
-
- - -
-
+
+ + +
+ + + + +
+
+ + +
+
``` @@ -122,7 +136,7 @@ export default{ Select an option and submit or reset the form data. -Create [<input>](../reference/arkui-js/js-components-basic-input.md) (en-us_topic_0000001173324647.xml) components, set their type attribute to checkbox and radio, and use the onsubmit and onreset events of the <form> component to submit and reset the form data. +Create [<input>](../reference/arkui-js/js-components-basic-input.md) components, set their **type** attribute to **checkbox** and **radio**, and use the **onsubmit** and **onreset** events of the **<form>** component to submit and reset the form data. ``` diff --git a/en/application-dev/ui/ui-js-components-image-animator.md b/en/application-dev/ui/ui-js-components-image-animator.md new file mode 100644 index 0000000000000000000000000000000000000000..8bfd56b70b3b23572eadf0bea1a2fbdc95f3ea55 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-image-animator.md @@ -0,0 +1,336 @@ +# <image-animator> Development + + +The **<image-animator>** component applies an animation to images. For details, see [image-animator](../reference/arkui-js/js-components-basic-image-animator.md). + + +## Creating an <image-animator> Component + +In the **pages/index** directory, create an **<image-animator>** component in the .hml file, define the component style in the .css file, and reference an image in the .js file. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.animator { + width: 500px; + height: 500px; +} +``` + + +``` +/* index.js */ +export default { + data: { + frames: [ + { + src: "/common/landscape1.jpg", + }, + { + src: "/common/landscape2.jpg", + } + ], + }, +}; +``` + +![en-us_image_0000001275922969](figures/en-us_image_0000001275922969.gif) + + +## Setting the <image-animator> Attributes + +Add the **iteration** (number of times the animation is played), **reverse** (whether the animation plays backward), **fixedsize** (whether the image size is fixed to the component size), **duration** (duration of the animation), and **fillmode** (style of the target when the animation is not playing) attributes. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; +} +.animator { + width: 500px; + height: 500px; +} +``` + + +``` +/* index.js */ +export default { + data: { + frames: [ + { + src: 'common/landscape1.jpg', + width: '250px', + height: '250px', + left: '150px', + top: '50px', + }, + { + src: 'common/landscape2.jpg', + width: '300px', + height: '300px', + left: '150px', + top: '100px', + }, + { + src: 'common/landscape1.jpg', + width: '350px', + height: '350px', + left: '150px', + top: '150px', + }, + { + src: 'common/landscape2.jpg', + width: '400px', + height: '400px', + left: '150px', + top: '200px', + }, + { + src: 'common/landscape3.jpg', + width: '450px', + height: '450px', + left: '150px', + top: '250px', + }, + { + src: 'common/landscape4.jpg', + width: '500px', + height: '500px', + left: '150px', + top: '300px', + }, + ], + }, +}; +``` + +![en-us_image_0000001276003481](figures/en-us_image_0000001276003481.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - If the **duration** attribute is set in the **images** attribute, the **duration** attribute set in the **<image-animator>** component is invalid. +> +> - If **fixedsize** is set to **true**, the **width**, **height**, **top**, and **left** settings in **images** will not take effect. +> +> - Setting **reverse** to **false** indicates that images are played from the first one to the last one. Setting **reverse** to **true** indicates that images are played from the last one to the first one. + + +## Binding Events + +Add the start, pause, stop, and resume events to the **<image-animator>** component. Specifically, the start event is triggered when the image animator starts playing; the pause event is triggered when the image animator is clicked; the resume event is triggered when the image animator is pressed and held; the stop event is triggered when the image animator stops playing. + + +``` + +
+ + +
+``` + + +``` +/* xxx.css */ +.doc-page { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +.img { + width: 600px; + height: 600px; + border: 3px solid orange; +} +``` + + +``` +/* index.js */ +import prompt from '@system.prompt'; +export default { + data: { + imginfo: [ + { + src: 'common/landscape1.jpg', + },{ + src: 'common/landscape2.jpg', + },{ + src: 'common/landscape3.jpg', + },{ + src: 'common/landscape4.jpg', + } + ], + }, + onInit() { + }, + setpause(e) { + this.$element('img').pause() + }, + setresume(e) { + this.$element('img').resume() + }, + popstart(e) { + prompt.showToast({ + message: 'Started.' + }) + }, + poppause(e) { + prompt.showToast({ + message: 'Paused.' + }) + }, + popstop(e) { + prompt.showToast({ + message: 'Stopped.' + }) + }, + popresume(e) { + prompt.showToast({ + message: 'Resumed.' + }) + } +} +``` + +![en-us_image_0000001231843076](figures/en-us_image_0000001231843076.gif) + + +## Example Scenario + +You can click the start or stop button to change the image animation status. + +Call the start, pause, stop, and resume methods to start, pause, stop, and resume the image animation, and call the **getState** method to check the image animation status. + + +``` + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+``` + + +``` +/* xxx.css */ +.doc-page { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +.img { + width: 600px; + height: 600px; + border: 3px solid orange; +} +button{ + width: 260px +} +.container { + width: 100%; + height: 120px; + align-items: center; + justify-content: space-around; +} +``` + + +``` +/* index.js */ +import prompt from '@system.prompt'; +export default { + data: { + rev:false, + imginfo: [ + { + src: 'common/landscape1.jpg', + },{ + src: 'common/landscape2.jpg', + },{ + src: 'common/landscape3.jpg', + },{ + src: 'common/landscape4.jpg', + } + ], + revVal:'Reverse' + }, + onInit() { + }, + startimg(e) { + this.$element('img').start() + }, + pauseimg(e) { + this.$element('img').pause() + }, + stopimg(e) { + this.$element('img').stop() + }, + resumeimg(e) { + this.$element('img').resume() + }, + getimgstate(e) { + prompt.showToast({ + message: 'Current state:' + this.$element('img').getState() + }) + }, + revimg(e) { + this.rev = !this.rev + if (this.rev) { + this.revVal ='Play Forward' + } else { + this.revVal ='Reverse' + } + } +} +``` + +![en-us_image_0000001276162717](figures/en-us_image_0000001276162717.gif) diff --git a/en/application-dev/ui/ui-js-components-images.md b/en/application-dev/ui/ui-js-components-images.md index 2efab79c2b112824278d8e2fda72fbbf5a847d85..cc817fc80044e4792ba74de79ccc24a4bd43bc2b 100644 --- a/en/application-dev/ui/ui-js-components-images.md +++ b/en/application-dev/ui/ui-js-components-images.md @@ -1,17 +1,17 @@ # <image> Development -The <image> component is used to render and display images. For details, see [image](../reference/arkui-js/js-components-basic-image.md). +The **<image>** component is used to render and display images. For details, see [image](../reference/arkui-js/js-components-basic-image.md). ## Creating an <image> Component - Create an <image> component in the .hml file under pages/index. + Create an **<image>** component in the .hml file under **pages/index**. ```
- +
``` @@ -19,6 +19,8 @@ The <image> component is used to render and display images. For details, s ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -31,7 +33,9 @@ The <image> component is used to render and display images. For details, s ## Setting the Image Style -Set the width, height, and object-fit attributes to define the width, height, and scale type of an image. +Set the **width**, **height**, and **object-fit** attributes to define the width, height, and scale type of an image. + + ``` @@ -40,31 +44,37 @@ Set the width, height, and object-fit attributes to define the width, height, an
``` + + ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; background-color:#F1F3F5; } image{ - width: 80%; height: 500px; + width: 80%; + height: 500px; border: 5px solid saddlebrown; border-radius: 20px; - object-fit: contain; + object-fit: contain; match-text-direction:true; } ``` + ![en-us_image_0000001222807796](figures/en-us_image_0000001222807796.png) ## Loading Images -When an image is successfully loaded, the complete event is triggered, and the loaded image is returned. If an exception occurs during image loading, the error event is triggered, and the image loading failure is printed. +When an image is successfully loaded, the **complete** event is triggered, and the loaded image is returned. If an exception occurs during image loading, the **error** event is triggered, and the image loading failure is printed. ``` @@ -83,6 +93,8 @@ When an image is successfully loaded, the complete event is triggered, and the l ``` /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-self: center; @@ -123,7 +135,7 @@ export default { ## Example Scenario - In this example you touch and hold an image to gradually hide it. After the image is completely hidden, it will show in its original setting. Set a setInterval timer to change the image opacity at a specified interval so that it is hidden gradually. When the opacity changes to 0, the timer is cleared and the opacity is set to 1. + In this example you touch and hold an image to gradually hide it. After the image is completely hidden, it will show in its original setting. Set a **setInterval** timer to change the image opacity at a specified interval so that it is hidden gradually. When the opacity changes to **0**, the timer is cleared and the opacity is set to **1**. ``` @@ -143,6 +155,8 @@ export default { ``` /* xxx.css */ .page-container { + width: 100%; + height: 100%; flex-direction:column; align-self: center; justify-content: center; diff --git a/en/application-dev/ui/ui-js-components-input.md b/en/application-dev/ui/ui-js-components-input.md index 559cca5401092490afd8ea1e841ae6d3b8809bba..854d40c6d26a2ad10ded8ca02cc9785079193bcf 100644 --- a/en/application-dev/ui/ui-js-components-input.md +++ b/en/application-dev/ui/ui-js-components-input.md @@ -1,18 +1,20 @@ -# Development +# <input> Development -The component provides an interactive way to receive user input of various types, including date, checkbox, and button. For details, see [input](../reference/arkui-js/js-components-basic-input.md). +The **<input>** component provides an interactive way to receive user input of various types, including **date**, **checkbox**, and **button**. For details, see [input](../reference/arkui-js/js-components-basic-input.md). -## Creating an Component +## Creating an <input> Component -Create an component in the .hml file under pages/index. +Create an **<input>** component in the .hml file under **pages/index**. ```
- Please enter the content + + Please enter the content +
``` @@ -20,6 +22,8 @@ Create an component in the .hml file under pages/index. ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -32,7 +36,7 @@ Create an component in the .hml file under pages/index. ## Setting the Input Type -Set the type attribute of the component to button, date, or any of the supported values. +Set the **type** attribute of the **<input>** component to **button**, **date**, or any of the supported values. ``` @@ -59,6 +63,8 @@ Set the type attribute of the component to button, date, or any of the s ``` /* xxx.css */ .container { + width: 100%; + height: 100%; align-items: center; flex-direction: column; justify-content: center; @@ -102,15 +108,15 @@ export default { ![en-us_image_0000001223287672](figures/en-us_image_0000001223287672.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> - For wearables, the input type can only be button, radio, or checkbox. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - For wearables, the input type can only be **button**, **radio**, or **checkbox**. > -> - The settings of checked take effect only when the input type is set to checkbox or radio. The default value of checked is false. +> - The settings of **checked** take effect only when the input type is set to **checkbox** or **radio**. The default value of **checked** is **false**. ## Event Binding - Add the search and translate events to the component. + Add the **search** and **translate** events to the **<input>** component. ``` @@ -128,6 +134,7 @@ export default { /* xxx.css */ .content { width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; @@ -170,7 +177,7 @@ export default { ## Setting the Input Error Message -Add the showError method to the component to display an error message in the event of incorrect input. +Add the **showError** method to the **<input>** component to display an error message in the event of incorrect input. ``` @@ -187,6 +194,7 @@ Add the showError method to the component to display an error message in /* xxx.css */ .content { width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; @@ -219,9 +227,13 @@ import prompt from '@system.prompt' }, buttonClick(e){ if(this.value.length > 6){ - this.$element("input").showError({ error: 'Up to 6 characters are allowed.' }); + this.$element("input").showError({ + error: 'Up to 6 characters are allowed.' + }); }else if(this.value.length == 0){ - this.$element("input").showError({ error:this.value + 'This field cannot be left empty.' }); + this.$element("input").showError({ + error:this.value + 'This field cannot be left empty.' + }); }else{ prompt.showToast({ message: "success " @@ -233,14 +245,14 @@ import prompt from '@system.prompt' ![en-us_image_0000001223127708](figures/en-us_image_0000001223127708.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> - This method is available when the input type is set to text, email, date, time, number, or password. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - This method is available when the input type is set to **text**, **email**, **date**, **time**, **number**, or **password**. ## Example Scenario -Enter information by using the component of the type that suits your needs. +Enter information by using the **<input>** component of the type that suits your needs. diff --git a/en/application-dev/ui/ui-js-components-list.md b/en/application-dev/ui/ui-js-components-list.md index c2a3150d366260d91dac7997690474f37cf3955e..147f117c0fca54b3004578396f0142cfdfcf8868 100644 --- a/en/application-dev/ui/ui-js-components-list.md +++ b/en/application-dev/ui/ui-js-components-list.md @@ -1,18 +1,18 @@ # <list> Development -The <list> component provides a list container that presents a series of list items arranged in a column with the same width. Lists can be used for presenting the same type of data in a multiple and coherent row style. For details, see [list](../reference/arkui-js/js-components-container-list.md). +The **<list>** component provides a list container that presents a series of list items arranged in a column with the same width. Lists can be used for presenting the same type of data in a multiple and coherent row style. For details, see [list](../reference/arkui-js/js-components-container-list.md). ## Creating a <list> Component -Create a <list> component in the .hml file under pages/index. +Create a **<list>** component in the .hml file under **pages/index**. ```
- + @@ -24,6 +24,8 @@ Create a <list> component in the .hml file under pages/index. ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; align-items: center; background-color: #F1F3F5; @@ -37,21 +39,21 @@ Create a <list> component in the .hml file under pages/index. ![en-us_image_0000001223287680](figures/en-us_image_0000001223287680.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> - <list-item-group> is a child component of the <list> component and is used to group items in a list. It can have a <list-item> nested inside, but not <list>. -> -> - <list-item> is a child component of the <list> component and is used to display items in a list. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - **<list-item-group>** is a child component of the **<list>** component and is used to group items in a list. It can have a **<list-item>** nested inside, but not **<list>**. +> +> - **<list-item>** is a child component of the **<list>** component and is used to display items in a list. ## Adding a Scrollbar -To display a scrollbar on the right side of the screen, set scrollbar to on. The side scrollbar can be used to scroll a long list or the screen up or down. +To display a scrollbar on the right side of the screen, set **scrollbar** to **on**. The side scrollbar can be used to scroll a long list or the screen up or down. ```
- + @@ -66,6 +68,8 @@ To display a scrollbar on the right side of the screen, set scrollbar to on. The ``` /* index.css */ .container { + width: 100%; + height: 100%; flex-direction: column; background-color: #F1F3F5; } @@ -86,7 +90,7 @@ To display a scrollbar on the right side of the screen, set scrollbar to on. The ## Adding a Side Index Bar -Set a custom indexer component to add an index bar at the right boundary of a list. By default, an alphabetical indexer is used. +Set a custom **indexer** component to add an index bar at the right boundary of a list. By default, an alphabetical indexer is used. ``` @@ -114,15 +118,15 @@ Set a custom indexer component to add an index bar at the right boundary of a li ![en-us_image_0000001223127716](figures/en-us_image_0000001223127716.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> - This indexer attribute is valid only when flex-direction is set to column and columns is set to 1. -> -> - You must include "\#" when using a customized indexer. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - This **indexer** attribute is valid only when **flex-direction** is set to **column** and **columns** is set to **1**. +> +> - You must include **"\#"** when using a customized indexer. ## Collapsing or Expanding a List -To allow a <list> component to collapse and expand, add groupcollapse and groupexpand events. +To allow a **<list>** component to collapse and expand, add **groupcollapse** and **groupexpand** events. ``` @@ -200,14 +204,16 @@ export default { ![en-us_image_0000001267887845](figures/en-us_image_0000001267887845.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> - The groupcollapse and groupexpand events can be used only by the list-item-group component. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - The **groupcollapse** and **groupexpand** events can be used only by the **list-item-group** component. ## Example Scenario Search for contacts by using an alphabetical indexer. + + ```
@@ -219,7 +225,7 @@ Search for contacts by using an alphabetical indexer.
{{$item.name}} - 18888888888 + 18888888888
@@ -232,6 +238,8 @@ Search for contacts by using an alphabetical indexer.
``` + + ``` /* index.css */ .doc-page { @@ -251,7 +259,7 @@ Search for contacts by using an alphabetical indexer. color: #000000; font-size: 39px; } -.number { +.phone { color: black; font-size: 25px; } @@ -265,6 +273,8 @@ Search for contacts by using an alphabetical indexer. } ``` + + ``` // xxx.js export default { diff --git a/en/application-dev/ui/ui-js-components-marquee.md b/en/application-dev/ui/ui-js-components-marquee.md new file mode 100644 index 0000000000000000000000000000000000000000..0df6b4a2a04adced403a8bc61e6427fe7f369b48 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-marquee.md @@ -0,0 +1,238 @@ +# <marquee> Development + + +The **<marquee>** component displays single-line scrolling text. For details, see [marquee](../reference/arkui-js/js-components-basic-marquee.md). + + +## Creating a <marquee> Component + +Create a **<marquee>** component in the .hml file under **pages/index**. + + +``` + +
+ This is a marquee. +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![en-us_image_0000001231683172](figures/en-us_image_0000001231683172.png) + + +## Setting Attributes and Styles + +Set the **color** and **font-weight** attributes to define the color, font weight, and border style of marquee text. + + +``` + +
+ It's a racing lamp. +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.customMarquee { + width: 100%; + height: 80px; + padding: 10px; + margin: 20px; + border: 4px solid #6712f1; + border-radius: 20px; + font-size: 40px; + color: #ffffff; + font-weight: bolder; + font-family: serif; + background-color: #1567f3; +} +``` + +![en-us_image_0000001275803193](figures/en-us_image_0000001275803193.png) + +Set the **scrollamount**, **loop**, and **direction** attributes to define the maximum scroll length, number of scrolling times, and text scrolling direction. + + +``` + +
+
+ + It's a racing lamp + +
+
+ + +
+
+``` + + +``` +/* xxx.css */ +.tutorial-page { + width: 750px; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +.marqueetext { + color: #ffffff; + font-family: serif; + font-size: 37px; +} +.mymarquee { + margin-top: 20px; + width:100%; + height: 100px; + margin-left: 50px; + margin-right: 50px; + border: 1px solid #6712f1; + background-color: #1567f3; + border-radius: 15px; + align-items: center; +} +button{ + width: 200px; + height: 80px; + margin-top: 100px; +} +``` + + +``` +// xxx.js +export default { + private: { + loopval: -1, + scroll: 10, + isleft: "left", + }, + onInit(){ + }, + setleft(e) { + this.isleft = "left" + }, + setright(e) { + this.isleft = "right" + }, + makestart(e) { + this.$element('testmarquee').start() + } +} +``` + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> When the value of **loop** is less than or equal to 0, the marquee scrolls continuously. If **loop** is not set, the default value **-1** is used. + +![en-us_image_0000001276162773](figures/en-us_image_0000001276162773.gif) + + +## Example Scenario + +In this example, you can control the scrolling of marquee text. + +Set **loop** to **1**. When scrolling ends, trigger a **finish** event to increase the number of scrolling times by 1 and change the font color to a random color. Then, call the **start** method to start scrolling again. + + +``` + +
+
+ + It's a racing lamp + +
+
+ + +
+
+``` + + +``` +/* xxx.css */ +.tutorial-page { + width: 750px; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; +} +.marqueetext { + font-size: 37px; +} +.mymarquee { + margin-top: 20px; + width:100%; + height: 100px; + margin-left: 50px; + margin-right: 50px; + border: 1px solid #dc0f27; + border-radius: 15px; + align-items: center; +} +button{ + width: 200px; + height: 80px; + margin-top: 100px; +} +``` + + +``` +// xxx.js +export default { + private: { + loopval: 1, + scroll: 8, + color1: 'red' + }, + onInit(){ + }, + setfinish(e) { + this.loopval= this.loopval + 1, + this.r = Math.floor(Math.random()*255), + this.g = Math.floor(Math.random()*255), + this.b = Math.floor(Math.random()*255), + this.color1 = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)', + this.$element('testmarquee').start(), + this.loopval= this.loopval - 1 + }, + makestart(e) { + this.$element('testmarquee').start() + }, + makestop(e) { + this.$element('testmarquee').stop() + } +} +``` + +![en-us_image_0000001276003541](figures/en-us_image_0000001276003541.gif) diff --git a/en/application-dev/ui/ui-js-components-menu.md b/en/application-dev/ui/ui-js-components-menu.md new file mode 100644 index 0000000000000000000000000000000000000000..63c3763ac01a2247d5acb7359520fdc11e060a63 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-menu.md @@ -0,0 +1,280 @@ +# <menu> Development + + +The <menu> component serves as a temporary pop-up window to display operations that users can perform. For details, see [menu](../reference/arkui-js/js-components-basic-menu.md). + + +## Creating a <menu> Component + +Create a **<menu>** component in the .hml file under **pages/index** and add the **target**, **type**, and **title** attributes. + + +``` + +
+ show menu + + + + + +
+``` + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +.title-text{ + font-size: 35px; +} +``` + +![en-us_image_0000001232162284](figures/en-us_image_0000001232162284.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - The **<menu>** component supports only the [option](../reference/arkui-js/js-components-basic-option.md) child component. +> +> - The **<menu>** component does not support the **focusable** and **disabled** attributes. + + +## Setting Styles + +Set the style for the **<menu>** component, such as the font color, size, and character spacing. + + +``` + +
+ show menu + + + + + +
+``` + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +.title-text{ + font-size: 35px; + background-color: #5a5aee; + color: white; + width: 70%; + text-align: center; + height: 85px; + border-radius: 12px; +} +menu{ + text-color: blue; + font-size: 35px; + letter-spacing: 2px; +} +option{ + color: #6a6aef; + font-size: 30px; +} +``` + +![en-us_image_0000001275803137](figures/en-us_image_0000001275803137.gif) + + +## Binding Events + +Bind the **<menu>** component with the **onselected** event (triggered when a value in the menu is selected) and the **oncancel** event (triggered when an operation is canceled). Click the **<text>** component to call the **show** method to set the coordinates of the **<menu>** component. + + +``` + +
+ show menu + + + + + +
+``` + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; + width: 100%; +} +.title-text{ + font-size: 35px; + background-color: #5a5aee; + color: white; + width: 70%; + text-align: center; + height: 85px; + border-radius: 12px; + margin-top: 500px; + margin-left: 15%; +} +menu{ + text-color: blue; + font-size: 35px; + letter-spacing: 2px; +} +option{ + color: #6a6aef; + font-size: 30px; +} +``` + + +``` +// index.js +import prompt from '@system.prompt'; +export default { + select(e) { + prompt.showToast({ + message: e.value + }) + }, + cancel(){ + prompt.showToast({ + message: "cancel" + }) + }, + textClick() { + this.$element("menuId").show({x:175,y:590}); + }, +} +``` + +![en-us_image_0000001276162713](figures/en-us_image_0000001276162713.gif) + + +## Example Scenario + +Click the **<toggle>** component to change the text color and select the **<menu>** component to change the size of the gradient color block. + + +``` + +
+
+ {{item.name}} +
+ width:{{width}},height:{{height}} +
+ change size + + + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + width: 100%; + justify-content: center; + align-items: center; +} +.contentToggle{ + width: 100%; + justify-content: space-around; +} +.toggle{ + padding: 10px; + height:80px; + font-size: 35px; + width: 200px; + height: 85px; +} +.size{ + width: 100%; + height: 200px; + text-align: center; + font-size: 40px; + text-align: center; +} +.text{ + width: 300px; + height: 80px; + background-color: #615def; + color: white; + font-size: 35px; + text-align: center; + margin-top: 100px; +} +menu{ + text-color: blue; + font-size: 35px; + letter-spacing: 2px; +} +option{ + color: #6a6aef; + font-size: 30px; +} +``` + + +``` +// index.js +import prompt from '@system.prompt'; +export default { + data:{ + fresh: false, + width: 200, + height: 200, + color: '', + optionList:[ + {text:'200 x 200',value:2}, + {text:'300 x 300',value:3}, + {text:'500 x 500',value:5}, + ], + togglesList:[ + {name:"red", checked:false}, + {name:"blue", checked:false}, + {name: "black", checked:false}, + ], + }, + toggleClick(index){ + for(let i=0;i +
+ + +
+``` + + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +canvas{ + width: 600px; + height: 500px; + background-color: #fdfdfd; + border: 5px solid red; +} +select{ + margin-top: 50px; + width: 250px; + height: 100px; + background-color: white; +} +``` + + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + el: null, + ctx: null, + offscreen: null, + offCanvas: null, + img: null, + }, + onShow(){ + this.ctx = this.$refs.canvas1.getContext("2d"); + this.offscreen = new OffscreenCanvas(600, 500); + this.offCanvas = this.offscreen.getContext("2d"); + this.img = new Image(); + this.img.src = 'common/images/2.png'; + // Invoked when the image is successfully obtained. + let _this = this; + this.img.onload = function() { + _this.offCanvas.drawImage(_this.img, 100, 100, 400, 300); + }; + this.img.onerror = function() { + prompt.showToast({message:"error",duration:2000}) + }; + var bitmap = this.offscreen.transferToImageBitmap(); + this.ctx.transferFromImageBitmap(bitmap); + }, + change(e){ + this.offCanvas.filter = e.newValue; + this.offCanvas.drawImage(this.img, 100, 100, 400, 300); + var bitmap = this.offscreen.transferToImageBitmap(); + this.ctx.transferFromImageBitmap(bitmap); + }, +} +``` + + +![en-us_image_0000001232162292](figures/en-us_image_0000001232162292.gif) + + +## Determining the Position + +Use **isPointInPath** and **isPointInStroke** to determine and show whether a coordinate is within the path area and whether a coordinate is on the edge of the path. + + +``` + +
+
+ Coordinate: {{X}}, {{Y}} + In path:{{textValue}} + In stroke:{{textValue1}} +
+ + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +canvas{ + width: 600px; + height: 500px; + background-color: #fdfdfd; + border: 5px solid red; +} +.content{ + flex-direction: column; + justify-content: center; + align-items: center; +} +text{ + font-size: 30px; + width: 300px; + height: 80px; + text-align: center; +} +button{ + width: 180px; + height: 75px; + margin-top: 50px; +} +``` + + +``` +// xxx.js +export default { + data: { + textValue: 0, + textValue1: 0, + X:0, + Y:250, + }, + onShow(){ + let canvas = this.$refs.canvas.getContext('2d'); + let offscreen = new OffscreenCanvas(500,500); + let offscreenCanvasCtx = offscreen.getContext("2d"); + let offscreenCanvasCtx1 = offscreen.getContext("2d"); + offscreenCanvasCtx1.arc(this.X, this.Y, 2, 0, 6.28); + offscreenCanvasCtx.lineWidth=20; + offscreenCanvasCtx.rect(200,150, 200, 200); + offscreenCanvasCtx.stroke(); + this.textValue1 = offscreenCanvasCtx.isPointInStroke(this.X, this.Y)?'true':'false'; + this.textValue = offscreenCanvasCtx.isPointInPath(this.X, this.Y)?'true':'false'; + let bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + }, + change(){ + if(this.X < 500){ + this.X = this.X+50; + }else{ + this.X = 0; + } + let canvas = this.$refs.canvas.getContext('2d'); + let offscreen = new OffscreenCanvas(500,500); + let offscreenCanvasCtx = offscreen.getContext("2d"); + let offscreenCanvasCtx1 = offscreen.getContext("2d"); + offscreenCanvasCtx1.arc(this.X, this.Y, 1, 0, 6.28) + offscreenCanvasCtx.lineWidth=20 + offscreenCanvasCtx.rect(200,150, 200, 200); + offscreenCanvasCtx.stroke(); + this.textValue1 = offscreenCanvasCtx.isPointInStroke(this.X, this.Y)?'true':'false'; + this.textValue = offscreenCanvasCtx.isPointInPath(this.X, this.Y)?'true':'false'; + let bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + } +} +``` + +![en-us_image_0000001276003489](figures/en-us_image_0000001276003489.gif) diff --git a/en/application-dev/ui/ui-js-components-path2d.md b/en/application-dev/ui/ui-js-components-path2d.md new file mode 100644 index 0000000000000000000000000000000000000000..d0ad0d06b482ed86376c10c53dff91c55a9901a3 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-path2d.md @@ -0,0 +1,194 @@ +# Path2D + +**<Path2D>** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**. For details, see [Path2D](../reference/arkui-js/js-components-canvas-path2d.md). + + +## Drawing Line Segments + +Create a **<Path2D>** object and use line segments to create different shapes. + + + +``` + +
+ +
+``` + + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +canvas{ + width: 600px; + height: 600px; + background-color: #fdfdfd; + border: 5px solid red; +} +``` + + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + onShow(){ + let ctx = this.$refs.canvas.getContext('2d',{antialias: true}); + let path = ctx.createPath2D(); + // Roof + path.moveTo(10, 300); + path.lineTo(210,100); + path.lineTo(410, 300); + // House + path.moveTo(10, 300); + path.lineTo(410, 300); + path.lineTo(410, 600); + path.lineTo(10, 600); + path.closePath(); + // Window + path.moveTo(50, 450); + path.bezierCurveTo(70, 350, 130, 350, 150, 450); + path.closePath(); + // Door + path.moveTo(250, 450); + path.rect(250, 450, 350, 600); + path.closePath(); + // Chimney + path.moveTo(365, 250); + path.ellipse(310, 215, 30, 130,0, Math.PI * 0.04, Math.PI * 1.1, 1); + // Tree + path.moveTo(485, 450); + path.quadraticCurveTo(510, 500, 485, 600); + path.moveTo(550, 450); + path.quadraticCurveTo(525, 500, 550, 600); + path.moveTo(600, 535); + path.arc(520, 450, 85, 0, 6); + ctx.stroke(path); + }, +} +``` + + +![en-us_image_0000001232002968](figures/en-us_image_0000001232002968.png) + + +## Drawing Graphs + +Use **createPath2D** to create a path object and draw only **path1** so that only **path1** is displayed on the canvas. Click the **<text>** component to trigger the **addPath** method. The **path2** object is passed to **path1** as a parameter. After the **stroke** operation is performed on the **path1** object, **path1** and **path2** are displayed on the canvas. Click **Change** to change the value of **setTransform** to** setTransform(2, 0.1, 0.1, 2, 0,0)**. The graph is enlarged and tilted to the left. + + +``` + +
+ +
+ {{ isAdd }} + {{textName}} +
+
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +canvas{ + width: 600px; + height: 600px; + background-color: #fdfdfd; + border: 5px solid red; +} +.content{ + width: 80%; + margin-top: 50px; + margin-bottom: 50px; + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} +text{ + width: 150px; + height: 80px; + color: white; + border-radius: 20px; + text-align: center; + background-color: #6060e7; + margin-bottom: 30px; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + ctx: null, + path1: null, + path2: null, + path3: null, + isAdd: "addPath2", + isChange: true, + textName: 'change' + }, + onShow(){ + this.ctx = this.$refs.canvas.getContext('2d',{antialias:true}); + this.path1 = this.ctx.createPath2D(); + this.path1.moveTo(200, 200); + this.path1.lineTo(400, 200); + this.path1.lineTo(400, 400); + this.path1.lineTo(200, 400); + this.path1.closePath(); + this.path2 = this.ctx.createPath2D(); + this.path2.arc(300, 300, 75, 0, 6.28) + this.ctx.stroke(this.path1); + }, + addPath(){ + if(this.isAdd == "addPath2"){ + this.ctx.clearRect(0,0,600,600) + this.ctx.beginPath(); + this.path2.addPath(this.path1) + this.ctx.stroke(this.path2); + this.isAdd = "clearPath2" + }else{ + this.ctx.clearRect(0,0,600,600) + this.ctx.stroke(this.path1); + this.isAdd = "addPath2" + } + }, + setTransform(){ + if(this.isChange){ + this.ctx.clearRect(0,0,600,600) + this.path3 = this.ctx.createPath2D(); + this.path3.arc(150, 150, 100, 0, 6.28) + this.path3.setTransform(2, 0.1, 0.1, 2, 0,0); + this.ctx.stroke(this.path3); + this.isChange = !this.isChange; + this.textName = "back" + }else{ + this.ctx.clearRect(0,0,600,600) + this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0,0); + this.ctx.stroke(this.path3); + this.isChange = !this.isChange; + this.textName = "change" + } + }, +} +``` + +![en-us_image_0000001231683112](figures/en-us_image_0000001231683112.gif) diff --git a/en/application-dev/ui/ui-js-components-picker.md b/en/application-dev/ui/ui-js-components-picker.md index a2e5ff4c52c17ce2d17b4638eebcebd68f9418bf..97c965d100a6a527855e1346dc94e69284795ead 100644 --- a/en/application-dev/ui/ui-js-components-picker.md +++ b/en/application-dev/ui/ui-js-components-picker.md @@ -1,18 +1,20 @@ # <picker> Development -The <picker> component supports common, date, time, data and time, and multi-column text selectors. For details, see [picker](../reference/arkui-js/js-components-basic-picker.md). +The **<picker>** component supports common, date, time, data and time, and multi-column text selectors. For details, see [picker](../reference/arkui-js/js-components-basic-picker.md). ## Creating a <picker> Component -Create a <picker> component in the .hml file under pages/index. +Create a **<picker>** component in the .hml file under **pages/index**. ```
- picker + + picker +
``` @@ -20,6 +22,8 @@ Create a <picker> component in the .hml file under pages/index. ``` /* index.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -32,7 +36,7 @@ Create a <picker> component in the .hml file under pages/index. ## Setting the Picker Type -Set the type attribute of the <picker> component. For example, set it to date. +Set the **type** attribute of the **<picker>** component. For example, set it to **date**. ``` @@ -47,6 +51,8 @@ Set the type attribute of the <picker> component. For example, set it to d ``` /* index.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -71,14 +77,15 @@ export default { ![en-us_image_0000001267647893](figures/en-us_image_0000001267647893.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> -> When setting the value range of a common selector, you must use the data binding mode. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - When setting the value range of a common selector, you must use the data binding mode. +> +> - The **lunarswitch** attribute of the date selector is only supported on phones and tablets. ## Setting the Time Format -Set the hours attribute to specify the time format used by the time selector. Available values include 12 and 24, indicating the 12-hour format and 24-hour format, respectively. +Set the **hours** attribute to specify the time format used by the time selector. Available values include **12** and **24**, indicating the 12-hour format and 24-hour format, respectively. ``` @@ -93,6 +100,8 @@ Set the hours attribute to specify the time format used by the time selector. Av ``` /* index.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -107,15 +116,15 @@ Set the hours attribute to specify the time format used by the time selector. Av ![en-us_image_0000001222807808](figures/en-us_image_0000001222807808.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> - When hours is set to 12, the time is displayed in 12-hour format and distinguished by a.m. and p.m. -> -> - When hours is set to 24, the time is displayed in 24-hour format. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - When **hours** is set to **12**, the time is displayed in 12-hour format and distinguished by a.m. and p.m. +> +> - When **hours** is set to **24**, the time is displayed in 24-hour format. ## Adding Response Events -To confirm and cancel selection, add change and cancel events. +To confirm and cancel selection, add **change** and **cancel** events. ``` @@ -130,6 +139,8 @@ To confirm and cancel selection, add change and cancel events. ``` /* index.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -170,7 +181,9 @@ export default { ## Example Scenario -Implement a health check-in application by using the <picker> component. +Implement a health check-in application by using the **<picker>** component. + + ``` @@ -202,6 +215,8 @@ Implement a health check-in application by using the <picker> component.
``` + + ``` /* index.css */ .doc-page { @@ -244,6 +259,8 @@ Implement a health check-in application by using the <picker> component. } ``` + + ``` // xxx.js import pmt from '@system.prompt' diff --git a/en/application-dev/ui/ui-js-components-qrcode.md b/en/application-dev/ui/ui-js-components-qrcode.md new file mode 100644 index 0000000000000000000000000000000000000000..e766c5843a32a0d3fe99e300d0d82a14b5818eb0 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-qrcode.md @@ -0,0 +1,170 @@ +# <qrcode> Development + + +The **<qrcode>** component is used to generate and display a QR code. For details, see [qrcode](../reference/arkui-js/js-components-basic-qrcode.md). + + +## Creating a <qrcode> Component + +Create a **<qrcode>** component in the .hml file under **pages/index**. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +``` + +![en-us_image_0000001275803133](figures/en-us_image_0000001275803133.png) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> The **value** parameter must be set. + + +## Setting the Component Type + +Set the **type** attribute to select the QR code type from rectangle and circle. + + +``` + +
+ + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +select{ + margin-top: 50px; + margin-bottom: 50px; +} +``` + + +``` +// index.js +export default { + data: { + qr_type: 'rect', + bcol_list: ['rect','circle'] + }, + settype(e) { + this.qr_type = e.newValue + }, +} +``` + +![en-us_image_0000001275922965](figures/en-us_image_0000001275922965.gif) + + +## Setting Styles + +Set the **color** and **background-color** attributes to set the color and background color of a QR code. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +qrcode{ + width: 300px; + height: 300px; + color: blue; + background-color: #ffffff; +} +``` + +![en-us_image_0000001231683116](figures/en-us_image_0000001231683116.png) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is center displayed. +> +> - If either **width** or **height** is set, the value is used as the length of the QR code. If neither of them is set, the default length of 200 px is used. +> + + +## Example Scenario + +In this example, you can bind a QR code to a text box, and change the QR code by replacing the content in the text box. + + +``` + +
+ + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +qrcode{ + width: 400px; + height: 400px; +} +``` + + +``` +// index.js +export default{ + data: { + textVal: '' + }, + change(e){ + this.textVal = e.value + } +} +``` + +![en-us_image_0000001232002972](figures/en-us_image_0000001232002972.gif) diff --git a/en/application-dev/ui/ui-js-components-rating.md b/en/application-dev/ui/ui-js-components-rating.md new file mode 100644 index 0000000000000000000000000000000000000000..3986fd268b2eaae9cce51269720c78ac957c4d4b --- /dev/null +++ b/en/application-dev/ui/ui-js-components-rating.md @@ -0,0 +1,257 @@ +# <rating> Development + + +The **<rating>** component provides a rating bar used for reviews and ratings. For details, see [rating](../reference/arkui-js/js-components-basic-rating.md). + + +## Creating a <rating> Component + +Create a **<rating>** component in the .hml file under **pages/index**. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +rating { + width: 80%; + height: 150px; +} +``` + +![en-us_image_0000001231843116](figures/en-us_image_0000001231843116.gif) + + +## Setting the Rating Level + +Use the **<rating>** component to set the number of stars in a rating bar and the current rating using the **numstars** and **rating** attributes, respectively. + + +``` + +
+ + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +rating { + width: 80%; + height: 150px; +} +``` + +![en-us_image_0000001232003012](figures/en-us_image_0000001232003012.gif) + + +## Setting the Rating Style + +Use the **<rating>** component to set the background images when a rating star is unselected, selected, and partially selected using the **star-background**, **star-foreground**, and **star-secondary** attributes, respectively. + + +``` + +
+
+ + +
+
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +``` + + +``` +/* index.js */ +export default { + data: { + backstar: 'common/love.png', + secstar: 'common/love.png', + forestar: 'common/love1.png', + ratewidth: '400px', + rateheight: '150px' + }, + onInit(){ + } +} +``` + +![en-us_image_0000001275803173](figures/en-us_image_0000001275803173.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - You must set **star-background**, **star-secondary**, and **star-foreground**. Otherwise, the grey rating star applies, indicating that the image source is incorrectly set. +> +> - The **star-background**, **star-secondary**, and **star-foreground** attributes support only PNG and JPG images in the local path. + + +## Binding Events + +Add the **change** event to the <rating> component to print the current rating. + + +``` + +
+ +
+``` + + +``` +.container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +rating { + width: 80%; + height: 150px; +} +``` + + +``` +import prompt from '@system.prompt'; +export default { + showrating(e) { + prompt.showToast({ + message:'Current Rating' + e.rating + }) + } +} +``` + +![en-us_image_0000001276003525](figures/en-us_image_0000001276003525.gif) + + +## Example Scenario + +Change the switch status to toggle between the star background images and drag the slider to adjust the rating values. + + +``` + +
+
+ +
+
+
+ Replacing a custom image + +
+
+ numstars {{stars}} + +
+
+ rating {{rate}} + +
+
+
+``` + + +``` +/* xxx.css */ +.myrating:active { + width: 500px; + height: 100px; +} +switch{ + font-size: 40px; +} +``` + + +``` +/* index.js */ +import prompt from '@system.prompt'; +export default { + data: { + backstar: '', + secstar: '', + forestar: '', + stars: 5, + ratewidth: '300px', + rateheight: '60px', + step: 0.5, + rate: 0 + }, + onInit(){ + }, + setstar(e) { + if (e.checked == true) { + this.backstar = 'common/love.png' + this.secstar = 'common/love.png' + this.forestar = 'common/love1.png' + } else { + this.backstar = '' + this.secstar = '' + this.forestar = '' + } + }, + setnumstars(e) { + this.stars = e.progress + this.ratewidth = 60 * parseInt(this.stars) + 'px' + }, + setstep(e) { + this.step = e.progress + }, + setrating(e){ + this.rate = e.progress + }, + showrating(e) { + prompt.showToast({ + message:'Current Rating' + e.rating + }) + } +} +``` + +![en-us_image_0000001275923005](figures/en-us_image_0000001275923005.gif) diff --git a/en/application-dev/ui/ui-js-components-search.md b/en/application-dev/ui/ui-js-components-search.md new file mode 100644 index 0000000000000000000000000000000000000000..853e692646d0dc45bfe69d3808ec95786b18ea7d --- /dev/null +++ b/en/application-dev/ui/ui-js-components-search.md @@ -0,0 +1,260 @@ +# <search> Development + + +The **<search>** component provides an input area for users to search. For details, see [search](../reference/arkui-js/js-components-basic-search.md). + + +## Creating a <search> Component + +Create a **<search>** component in the .hml file under **pages/index**. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +``` + +![en-us_image_0000001276003537](figures/en-us_image_0000001276003537.png) + + +## Setting Attributes + +Set the **hint**, **icon**, and **searchbutton** to define the hint text, icon, and search button at the end of the search box. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +``` + +![en-us_image_0000001275923017](figures/en-us_image_0000001275923017.png) + + +## Adding Styles + +Set **color**, **placeholder**, and **caret-color** to set the text color, hint text color, and cursor color of the search box. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +search{ + color: black; + placeholder-color: black; + caret-color: red; +} +``` + +![en-us_image_0000001232003020](figures/en-us_image_0000001232003020.gif) + + +## Binding Events + +Add the **change**, **search**, **submit**, **share**, and **translate** events to the **<search>** component to perform operations on the input information. + + +``` + +
+ + Enter text and then touch and hold what you've entered + + + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +text{ + width: 100%; + font-size: 25px; + text-align: center; + margin-bottom: 100px; +} +``` + + +``` +// index.js +import prompt from '@system.prompt' +export default { + search(e){ + prompt.showToast({ + message: e.value, + duration: 3000, + }); + }, + translate(e){ + prompt.showToast({ + message: e.value, + duration: 3000, + }); + }, + share(e){ + prompt.showToast({ + message: e.value, + duration: 3000, + }); + }, + change(e){ + prompt.showToast({ + message: e.value, + duration: 3000, + }); + }, + submit(e){ + prompt.showToast({ + message: 'submit', + duration: 3000, + }); + } +} +``` + +![en-us_image_0000001231683164](figures/en-us_image_0000001231683164.gif) + + +## Example Scenario + +In this example, you can select the **<search>**, **<textarea>**, or **<input>** component from the drop-down list box to implement the respective function. + + +``` + +
+ +
+ + +
+
+ + +
+
+ + +
+
+``` + + +``` +/* xxx.css */ +.field { + width: 80%; + color: mediumaquamarine; + font-weight: 600; + placeholder-color: orangered; +} +.slt1{ + font-size: 50px; + position: absolute; + left: 50px; + top: 50px; +} +``` + + +``` +// index.js +import prompt from '@system.prompt'; +export default { + data: { + showsearch: true, + showtextarea: false, + showinput: false, + showsec: true, + }, + setfield(e) { + this.field = e.newValue + if (e.newValue == 'search') { + this.showsearch = true + this.showtextarea = false + this.showinput = false + } else if (e.newValue == 'textarea') { + this.showsearch = false + this.showtextarea = true + this.showinput = false + } else { + this.showsearch = false + this.showtextarea = false + this.showinput = true + } + }, + submit(e) { + prompt.showToast({ + message: 'Search!', + duration: 2000 + }) + }, + change(e) { + prompt.showToast({ + message: 'Content:'+ e.text, + duration: 2000 + }) + } +} +``` + +![en-us_image_0000001232003024](figures/en-us_image_0000001232003024.gif) diff --git a/en/application-dev/ui/ui-js-components-slider.md b/en/application-dev/ui/ui-js-components-slider.md new file mode 100644 index 0000000000000000000000000000000000000000..fad51ad23f82100d7078c659733c9bb07abad22a --- /dev/null +++ b/en/application-dev/ui/ui-js-components-slider.md @@ -0,0 +1,215 @@ +# <slider> Development + + +The **<slider>** component is used to quickly adjust settings, such as the volume and brightness. For details, see [slider](../reference/arkui-js/js-components-basic-slider.md). + + +## Creating a <slider> Component + +Create a **<slider>** component in the .hml file under **pages/index**. + + + +``` + +
+ +
+``` + + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + background-color: #F1F3F5; + flex-direction: column; + justify-content: center; + align-items: center; +} +``` + + +![en-us_image_0000001232162312](figures/en-us_image_0000001232162312.gif) + + +## Setting Styles and Attributes + +Use the **<slider>** component to set the background color, selected color, and slider color using the **color**, **selected-color**, and **block-color** attributes, respectively. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.sli{ + color: #fcfcfc; + scrollbar-color: aqua; + background-color: #b7e3f3; +} +``` + +![en-us_image_0000001232003000](figures/en-us_image_0000001232003000.gif) + +Add the **mix**, **max**, **value**, **step**, and **mode** attributes to set the minimum value, maximum value, initial value, step, and style of the slider. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![en-us_image_0000001276003517](figures/en-us_image_0000001276003517.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> Set the **mode** attribute to specify the slider style, which takes effect only on mobile phones and tablets. It can be set to: +> +> - **outset**: The slider is on the sliding bar. +> +> - **inset**: The slider is inside the sliding bar. + + +## Binding Events + +Add the **change** event to the **<rating>** component and pass the ChangeEvent attribute when adding the event. + + +``` + +
+ slider start value is {{startValue}} + slider current value is {{currentValue}} + slider end value is {{endValue}} + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + + +``` +// xxx.js +export default { + data: { + value: 0, + startValue: 0, + currentValue: 0, + endValue: 0, + }, + setvalue(e) { + if (e.mode == "start") { + this.value = e.value; + this.startValue = e.value; + } else if (e.mode == "move") { + this.value = e.value; + this.currentValue = e.value; + } else if (e.mode == "end") { + this.value = e.value; + this.endValue = e.value; + } + } +} +``` + +![en-us_image_0000001275803169](figures/en-us_image_0000001275803169.gif) + + +## Example Scenario + +Adjust the value of the slider to change the image size and dynamically print the width and height of the current image. + + +``` + +
+ +
+ + The width of this picture is {{WidthVal}} + The height of this picture is {{HeightVal}} +
+
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.txt{ + flex-direction: column; + justify-content: center; + align-items: center; + position: fixed; + top: 65%; +} +text{ + margin-top: 30px; +} +``` + + +``` +// xxx.js +export default{ + data: { + value: 0, + WidthVal: 200, + HeightVal: 200 + }, + setvalue(e) { + this.WidthVal = 200 + e.value; + this.HeightVal = 200 + e.value + } +} +``` + +![en-us_image_0000001275922997](figures/en-us_image_0000001275922997.gif) diff --git a/en/application-dev/ui/ui-js-components-stepper.md b/en/application-dev/ui/ui-js-components-stepper.md index d9a13be87c74e1e602c5352f6f324cf5d08ed6ea..40fd14674c95de76bf063ff010264c6a19663e48 100644 --- a/en/application-dev/ui/ui-js-components-stepper.md +++ b/en/application-dev/ui/ui-js-components-stepper.md @@ -1,28 +1,28 @@ # <stepper> Development -When multiple steps are required to complete a task, you can use the <stepper> component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md). +When multiple steps are required to complete a task, you can use the **<stepper>** component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md). -> ![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 5. ## Creating a <stepper> Component -Create a <stepper> component in the .hml file under pages/index. +Create a **<stepper>** component in the .hml file under **pages/index**. ```
- + Step 1 Step 2 - +
``` @@ -30,6 +30,8 @@ Create a <stepper> component in the .hml file under pages/index. ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -47,7 +49,7 @@ text{ ## Setting the Index -Set index to the index value of the step that you want to display by default. +Set **index** to the index value of the step that you want to display by default. ``` @@ -71,6 +73,8 @@ Set index to the index value of the step that you want to display by default. ``` /* index.css */ .container { + width: 100%; + height: 100%; flex-direction: column; background-color:#F1F3F5; } @@ -83,7 +87,7 @@ text{ ![en-us_image_0000001267767837](figures/en-us_image_0000001267767837.gif) -Set the label attribute to customize the button text for the <stepper-item>. +Set the **label** attribute to customize the button text for the **<stepper-item>**. ``` @@ -110,6 +114,8 @@ Set the label attribute to customize the button text for the <stepper-item> ``` /* index.css */ .container { + width: 100%; + height: 100%; flex-direction: column; background-color:#F1F3F5; } @@ -125,7 +131,10 @@ text{ /* index.js */ export default { data: { - label_1:{ nextLabel: 'NEXT', status: 'normal' }, + label_1:{ + nextLabel: 'NEXT', + status: 'normal' + }, label_2:{ prevLabel: 'BACK', nextLabel: 'NEXT', @@ -143,9 +152,9 @@ export default { ![en-us_image_0000001267767841](figures/en-us_image_0000001267767841.gif) -## Setting the Style +## Setting Styles - By default, the <stepper> component fills entire space of its container. The sample code below shows how to set the border and background color using the border and background-color attributes. + By default, the **<stepper>** component fills entire space of its container. The sample code below shows how to set the border and background color using the **border** and **background-color** attributes. ``` @@ -164,6 +173,8 @@ export default { ``` /* index.css */ .container { + width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; @@ -174,7 +185,8 @@ export default { height: 300px; } .stepperClass{ - border:1px solid silver ; background-color: white; + border:1px solid silver; + background-color: white; } text{ width: 100%; @@ -188,12 +200,13 @@ text{ ## Adding Events -The <stepper> component supports the finish, change, next, back, and skip events. +The **<stepper>** component supports the **finish**, **change**, **next**, **back**, and **skip** events. -- When the change and next or back events exist at the same time, the next or back event is executed before the change event. +- When the **change** and **next** or **back** events exist at the same time, the **next** or **back** event is executed before the **change** event. -- Before resetting the index attribute, you must remove the current value. Otherwise, the value change cannot be detected. +- Before resetting the **index** attribute, you must remove the current value. Otherwise, the value change cannot be detected. + ```
@@ -219,6 +232,8 @@ The <stepper> component supports the finish, change, next, back, and skip ``` /* xxx.css */ .doc-page { + width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; @@ -339,6 +354,8 @@ Use the <stepper> component to navigate through the steps. Create a [<t ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; diff --git a/en/application-dev/ui/ui-js-components-svg-graphics.md b/en/application-dev/ui/ui-js-components-svg-graphics.md new file mode 100644 index 0000000000000000000000000000000000000000..c877843b9eae3428095c5f7ba4cf9eb370b3952e --- /dev/null +++ b/en/application-dev/ui/ui-js-components-svg-graphics.md @@ -0,0 +1,41 @@ +# Graph Drawing + + +The **<svg>** component can be used to draw simple shapes, such as rectangles, circles, and lines. For details about the supported shapes, see <svg>. + + +In this example, you can draw different shapes and stitch them to form a house graph. + + +``` + +
+ + // Rooftop + // Chimney + // Main body + + // Window + + // Window frame + // Window frame + // Door + // Doorknob + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![en-us_image_0000001232162288](figures/en-us_image_0000001232162288.png) diff --git a/en/application-dev/ui/ui-js-components-svg-overview.md b/en/application-dev/ui/ui-js-components-svg-overview.md new file mode 100644 index 0000000000000000000000000000000000000000..cfe1a30c7344b141945da065f14775cc04cb60e0 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-svg-overview.md @@ -0,0 +1,83 @@ +# Basics + + +The **<svg>** component is used as the root node of the SVG canvas and can be nested in the SVG. For details, see [svg](../reference/arkui-js/js-components-svg.md). + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - The APIs of this component are supported since API version 7. +> +> - The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn. + + +## Creating an <svg> Component + +Create a **<svg>** component in the .hml file under **pages/index**. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +svg{ + background-color: blue; +} +``` + +![en-us_image_0000001232162324](figures/en-us_image_0000001232162324.png) + + +## Setting Attributes + +Set the **width**, **height**, **x**, **y**, and **viewBox** attributes to define the width, height, X coordinate, Y coordinate, and SVG viewport of the **<svg>** component. + + +``` + +
+ + + + +
+``` + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +svg{ + background-color: yellow; +} +.rect{ + background-color: red; +} +``` + +![en-us_image_0000001231683152](figures/en-us_image_0000001231683152.png) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - If the **<svg>** component is the root node, the X-axis and Y-axis attributes are invalid. +> +> - If the width and height of **viewBox** are inconsistent with those of the **<svg>** component, the view box will be scaled in center-aligned mode. diff --git a/en/application-dev/ui/ui-js-components-svg-path.md b/en/application-dev/ui/ui-js-components-svg-path.md new file mode 100644 index 0000000000000000000000000000000000000000..646fd7215e9daf06225aeda9f0339a8edb0d6551 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-svg-path.md @@ -0,0 +1,57 @@ +# Path Drawing + + +The **<svg>** component uses instructions **M** (start point), **H** (horizontal line), and **a** (drawing an arc to a specified position) to control a path and sets the fill colors to create a pie chart. + + + +``` + +
+ + + + + + +
+``` + + + +``` +/* xxx.css */ +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1200px; + width: 600px; + background-color: #F1F3F5; +} +``` + + +![en-us_image_0000001232162340](figures/en-us_image_0000001232162340.png) + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - M/m = moveto The **x** and **y** parameters indicate the destination X and Y coordinates of a point. The **M** command only moves the brush, but does not draw a line between two points. Therefore, the **M** command is often used at the beginning of a path to indicate the start point. +> +> - L/l = lineto The **x** and **y** parameters indicate the X and Y coordinates of a point. The **L** command draws a line between the current position and the destination position (the previous point of the brush). +> +> - H/h = horizontal lineto Draws a horizontal line. +> +> - V/v = vertical lineto Draws a vertical line. +> +> - C/c = curveto Draws a cubic Bezier curve. Three groups of coordinate parameters are required: **x1 y1**, **x2 y2**, **x y**. +> +> - S/s = smooth curveto Draws a cubic Bezier curve. Two groups of coordinate parameters are required: **x2 y2**, **x y**. +> +> - Q/q = quadratic Belzier curve Draws a quadratic Bezier curve. Two groups of coordinate parameters are required: **x1 y1**, **x y**. +> +> - T/t = smooth quadratic Belzier curveto Draws a quadratic Bezier curve. One group of coordinate parameters are required: **x y**. +> +> - A/a = elliptical Arc Draw an arc. The following parameters are required: **rx ry x-axis-rotation** (rotation angle), **large-arc-flag** (angle), **sweep-flag** (arc direction), and **x y**. **large-arc-flag** determines whether the arc is less than 180 degrees. **0** indicates yes, and **1** indicates no. **sweep-flag** indicates the direction in which an arc is drawn. **0** indicates that the arc is drawn counterclockwise from the start point to the end point. **1** indicates that the arc is drawn clockwise from the start point to the end point. +> +> - Z/z = closepath Draws a straight line from the current point to the start point of the path. diff --git a/en/application-dev/ui/ui-js-components-svg-text.md b/en/application-dev/ui/ui-js-components-svg-text.md new file mode 100644 index 0000000000000000000000000000000000000000..782580e47ad75c0b28c1f233041fa95cdd8235c7 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-svg-text.md @@ -0,0 +1,54 @@ +# Text Drawing + + +The **<svg>** component can also be used to draw text. + + +## Text + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - The text content must be written in the **<text>** area. The **<tspan>** child element label can be nested. +> +> - **<text>** can be nested only by the parent element label **svg**. +> +> - Only the default font **sans-serif** is supported. + +Set the following attributes to define text styles: **x** (X coordinate), **y** (Y coordinate), **dx** (x-axis offset of the text), **dy** (y-axis offset of the text), **fill** (font fill color), **stroke** (text border color), and **stroke-width** (text border width). + + +``` + +
+ + Hello World + Hello World + + Hello World + + +
+``` + +![en-us_image_0000001275803145](figures/en-us_image_0000001275803145.png) + + +## Drawing Text Along the Path + +Set **textpath** to draw text along the path. + + +``` + +
+ + + + + This is textpath test. + + + +
+``` + +![en-us_image_0000001231843084](figures/en-us_image_0000001231843084.png) diff --git a/en/application-dev/ui/ui-js-components-swiper.md b/en/application-dev/ui/ui-js-components-swiper.md new file mode 100644 index 0000000000000000000000000000000000000000..64e34ada4fb38b19fb61471fcbfda22bce29451a --- /dev/null +++ b/en/application-dev/ui/ui-js-components-swiper.md @@ -0,0 +1,370 @@ +# <swiper> Development + + +The **<swiper>** component is a sliding container used to switch between child components. For details, see [swiper](../reference/arkui-js/js-components-container-swiper.md). + + +## Creating a <swiper> Component + +Create a **<swiper>** component in the .hml file under **pages/index**. + + + +``` + +
+ +
+ item1 +
+
+ item2 +
+
+ item3 +
+ +
+``` + + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +swiper{ + height: 30%; +} +.item{ + width: 100%; + height: 500px; +} +text{ + width: 100%; + height: 100%; + text-align: center; + font-size: 50px; + color: white; +} +``` + + +![en-us_image_0000001232003028](figures/en-us_image_0000001232003028.gif) + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> The **<swiper>** component supports child components except **<list>**. + + +## Adding Attributes + +When **loop** is set to **false**, the **autoplay** attribute is added to the **<swiper>** component and the autoplay interval (**interval**) is set. The component automatically switches between child components and stops at the last one. Add the **digital** attribute to enable the digital navigation point and set **scrolleffect** to **fade**. + + +``` + +
+ +
+ item1 +
+
+ item2 +
+
+ item3 +
+
+ item4 +
+ +
+``` + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +swiper{ + height: 30%; +} +.item{ + width: 100%; + height: 500px; +} +text{ + width: 100%; + height: 100%; + text-align: center; + font-size: 50px; + color: white; +} +``` + +![en-us_image_0000001275923021](figures/en-us_image_0000001275923021.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - The **digital** attribute takes effect only when the **indicator** attribute is set to **true**. +> +> - The **loop** attribute takes effect only when there are two or more than two child components of the **<swiper>** component. +> +> - The **scrolleffect** attribute takes effect only when the **loop** attribute value is set to **false**. + + +## Setting Styles + +Set the width and height of the **<swiper>** component, the indicator's size (**indicator-size**), color (**indicator-color**), relative position (**indicator-top**), and color when it is selected (**indicator-selected-color**). + + +``` + +
+ +
+ item1 +
+
+ item2 +
+
+ item3 +
+ +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +swiper{ + width: 500px; + height: 500px; + border-radius: 250px; + indicator-color: white; + indicator-selected-color: blue; + indicator-size: 40px; + indicator-top: 100px; + overflow: hidden ; +} +.item{ + width: 100%; + height: 500px; +} +text{ + width: 100%; + text-align: center; + margin-top: 150px; + font-size: 50px; + color: white; +} +``` + +![en-us_image_0000001275803189](figures/en-us_image_0000001275803189.gif) + + +## Binding Events + +Create two **<text>** components and bind click events. Clicking the component will call **showPrevious** to display the previous child component or **showNext** to display the next child component. Add a **<select>** component. A **change** event is triggered when a user selects a value from the drop-down list box and the **swipeTo** method is called to go to the specified page. Bind the **<swiper>** component with the **change** event (triggered when the index of the currently displayed component changes) and the **finish** event (triggered when the switchover animation ends). + + +``` + +
+ +
+ item1 +
+
+ item2 +
+
+ item3 +
+
+ item4 +
+ +
+ + + +
+
+``` + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +swiper{ + height: 30%; +} +.item{ + width: 100%; + height: 500px; +} +text{ + width: 100%; + height: 100%; + text-align: center; + font-size: 50px; + color: white; +} +select{ + background-color: white; + width: 250px; + height: 80px; +} +.content{ + margin-top: 100px; + justify-content: space-around; +} +.pnbtn{ + width: 200px; + height: 80px; + font-size: 30px; +} +``` + + +``` +import prompt from '@system.prompt'; +export default{ + change(e){ + prompt.showToast({duration:2000,message:"current index:"+e.index}); + }, + finish(){ + prompt.showToast({duration:2000,message:"The switchover ends"}); + }, + selectChange(e){ + this.$element('swiper').swipeTo({index: Number(e.newValue)}); + }, + previous(){ + this.$element('swiper').showPrevious(); + }, + next(){ + this.$element('swiper').showNext(); + } +} +``` + +![en-us_image_0000001231843128](figures/en-us_image_0000001231843128.gif) + + +## Example Scenario + +Use the **<swiper>** component to create an image carousel and a thumbnail module at the bottom of the carousel. After a thumbnail is clicked, the **swipeTo** method is called to switch to the corresponding image. + + +``` + +
+ +
+ +
+ +
+
+ +
+
+
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +swiper{ + width: 100%; + height: 500px; +} +.item{ + width: 100%; + height: 500px; +} +.content{ + margin-top: -120px; + width: 70%; + display: flex; + justify-content: space-around; + height: 100px; +} +.content_item{ + padding: 5px; + transform: scale(0.5); +} +.actived{ + transform: scale(1); + border: 1px solid #b20937ea; +} +``` + + +``` +// index.js +import prompt from '@system.prompt'; +export default { + data:{ + index: 0, + list:[ + {src: 'common/images/1.png'}, + {src: 'common/images/2.png'}, + {src: 'common/images/3.png'}, + {src: 'common/images/4.png'},] + }, + imageTo(index){ + this.index = index; + this.$element('swiper').swipeTo({index: index}); + }, + change(e){ + this.index = e.index; + } +} +``` + +![en-us_image_0000001231843132](figures/en-us_image_0000001231843132.gif) diff --git a/en/application-dev/ui/ui-js-components-switch.md b/en/application-dev/ui/ui-js-components-switch.md new file mode 100644 index 0000000000000000000000000000000000000000..4eeffd99b1bac376b5d8e6db2298ec9232003c70 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-switch.md @@ -0,0 +1,197 @@ +# <switch> Development + + +The **<switch>** component is used to switch between the on and off states. For details, see [switch](../reference/arkui-js/js-components-basic-switch.md). + + +## Creating a <switch> Component + +Create a **<switch>** component in the .hml file under **pages/index**. + + +``` +
+ +
+``` + + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![en-us_image_0000001231843096](figures/en-us_image_0000001231843096.png) + + +## Adding Attributes and Methods + + Use the **textoff** and **showtext** attributes to set the status when text is selected and unselected. Set the **checked** attribute to **true** (indicating that the component is on). Add the **change** event that is triggered when the component status changes. After the event is triggered, the **switchChange** function is executed to obtain the current component status (on or off). + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +switch{ + // Color of the selected text + texton-color: #002aff; + // Color of the unselected text +textoff-color: silver; + text-padding: 20px; + font-size: 50px; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + switchChange(e){ + if(e.checked){ + prompt.showToast({ + message: "open" + }); + }else{ + prompt.showToast({ + message: "close" + }); + } + } +} +``` + + +![en-us_image_0000001276003505](figures/en-us_image_0000001276003505.gif) + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> The text set by **texton** and **textoff** takes effect only when **showtext** is set to **true**. + + +## Example Scenario + +Turn on the switch and the default delivery address is used. When the switch is turned off, the address selection button is displayed on the page. Clicking the button can change the delivery address. + + Implementation method: Create a **<switch>** component, set the **checked** attribute to **true**, and change the delivery address through data binding. Set the **display** attribute (the default value is **none**). When the switch is turned off and the **display** attribute is set to **flex**, the address module is displayed and clicking the button can change the color. + +``` + +
+
+ Choose default address: + +
+
+ Shipping address:{{address}} +
+
+ Choose an address: + {{item}} +
+
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + background-color: #F1F3F5; + flex-direction: column; + padding: 50px; +} +.change{ + margin-top: 20%; + width: 100%; + justify-content: center; +} +switch{ + texton-color: #002aff; + textoff-color: silver; + text-padding: 20px; +} +.content{ + width: 70%; + text-align: center; + flex-direction: column; + border: 1px solid #002aff; + margin-left: 15%; + text-align: center; +} +.address{ + width: 100%; + height: 100px; + line-height: 100px; + text-align: center; + font-size: 28px; + margin-bottom: 50px; +} +.textSpan{ + color: #0aa9f1; +} +.myAddress{ + flex-direction: column; + margin-top: 50px; +} +.addressText{ + margin-left: 35%; + width: 30%; + height: 75px; + text-align: center; + color: white; + margin-bottom: 30px; + border-radius: 10px; + border: 1px solid #0fabe7; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + address: '', + addressDisplay: 'none', + addressList: ['family','company','commissary'], + }, + onInit(){ + // Initialize the default address to the first one in the address list. + this.address = this.addressList[0]; + }, + switchChange(e){ + if(e.checked){ + this.addressDisplay = "none"; + }else{ + this.addressDisplay = "flex"; + } + }, + changeAddress(i){ + this.address= this.addressList[i]; + } +} +``` + +![en-us_image_0000001231843100](figures/en-us_image_0000001231843100.gif) diff --git a/en/application-dev/ui/ui-js-components-text.md b/en/application-dev/ui/ui-js-components-text.md index 68fc3006a34b48456df5a99ebbbcf39fd338f5d4..803f74378334f49c13cb5ce431967f6dd3d05d23 100644 --- a/en/application-dev/ui/ui-js-components-text.md +++ b/en/application-dev/ui/ui-js-components-text.md @@ -1,18 +1,20 @@ # <text> Development -The <text> component is used to display a piece of textual information. For details, see [text](../reference/arkui-js/js-components-basic-text.md). +The **<text>** component is used to display a piece of textual information. For details, see [text](../reference/arkui-js/js-components-basic-text.md). ## Creating a <text> Component -Create a <text> component in the .hml file under pages/index. +Create a **<text>** component in the .hml file under **pages/index**. ```
- Hello World + + Hello World +
``` @@ -35,10 +37,9 @@ Create a <text> component in the .hml file under pages/index. ## Setting the Text Style and Attributes - Adding a text style + Set the color, font-size, allow-scale, word-spacing and text-align properties to add the color, size, zoom, text spacing, and vertical alignment of the text. - - Set the color, font-size, allow-scale, word-spacing, and text-valign attributes to apply the color, size, zoom, spacing, and vertical alignment styles to the text. - + ```
@@ -52,7 +53,6 @@ Create a <text> component in the .hml file under pages/index. ``` - ``` /* xxx.css */ .container { @@ -65,14 +65,13 @@ Create a <text> component in the .hml file under pages/index. } ``` + ![en-us_image_0000001222967764](figures/en-us_image_0000001222967764.png) - ![en-us_image_0000001222967764](figures/en-us_image_0000001222967764.png) - Adding a text modifier + Set the **text-decoration** and **text-decoration-color** attributes to add an underline, overline, line-through, or a combination of lines in the specified color to selected text. For values of **text-decoration**, see [Text Style](../reference/arkui-js/js-components-basic-text.md). - - Set the text-decoration attribute to add a line to selected text. Set the text-decoration-color attribute to apply specific color to the added line. For values of text-decoration, see [Text Style](../reference/arkui-js/js-components-basic-text.md). - + ```
@@ -85,6 +84,7 @@ Create a <text> component in the .hml file under pages/index.
``` + ``` /* xxx.css */ .container { @@ -99,14 +99,13 @@ Create a <text> component in the .hml file under pages/index. } ``` - ![en-us_image_0000001223287688](figures/en-us_image_0000001223287688.png) -- Hiding text content - - Set the text-overflow attribute to ellipsis so that overflowed text is displayed as an ellipsis. +- Hiding text content + Set the **text-overflow** attribute to **ellipsis** so that overflowed text is displayed as an ellipsis. + ```
@@ -116,6 +115,7 @@ Create a <text> component in the .hml file under pages/index.
``` + ``` /* xxx.css */ .container { @@ -129,25 +129,22 @@ Create a <text> component in the .hml file under pages/index. .text{ width: 200px; max-lines: 1; - text-overflow:ellipsis; + text-overflow:ellipsis; } ``` + > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** + > - **text-overflow** must be used together with **max-lines**. + > + > - **max-lines** indicates the maximum number of lines in the text. - > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: - > - text-overflow must be used together with max-lines. - > - > - max-lines indicates the maximum number of lines in the text. - - -![en-us_image_0000001267647865](figures/en-us_image_0000001267647865.png) + ![en-us_image_0000001267647865](figures/en-us_image_0000001267647865.png) - Setting the text line breaking mode + Set the **word-break** attribute to specify how to break lines of text. For values of **word-break**, see [Text Styles](../reference/arkui-js/js-components-basic-text.md). - - Set the word-break attribute to specify how to break lines of text. For values of word-break, see [Text Styles](../reference/arkui-js/js-components-basic-text.md). - + ```
@@ -162,6 +159,7 @@ Create a <text> component in the .hml file under pages/index.
``` + ``` /* xxx.css */ .container { @@ -188,66 +186,74 @@ Create a <text> component in the .hml file under pages/index. height: 200px; border:1px solid #0931e8; text-align: center; - word-break: break-all; + word-break: break-all; font-size: 40px; } ``` + ![en-us_image_0000001267767865](figures/en-us_image_0000001267767865.png) - ![en-us_image_0000001267767865](figures/en-us_image_0000001267767865.png) - -- Setting the [<span>](../reference/arkui-js/js-components-basic-span.md)child component -``` - -
- - This is a passage - - - This 1 is a 1 passage - -
-``` +- Setting the [<span>](../reference/arkui-js/js-components-basic-span.md) child component. + + ``` + +
+ + This is a passage + + + This + + 1 + + is a + + 1 + + passage + +
+ ``` + ![en-us_image_0000001223127720](figures/en-us_image_0000001223127720.png) -![en-us_image_0000001223127720](figures/en-us_image_0000001223127720.png) + > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** + > - When the **<span>** child component is used to form a text paragraph, incorrect **<span>** attribute settings (for example, setting of **font-weight** to **1000**) will result in abnormal display of the text paragraph. + > + > - When the **<span>** child component is being used, do not include any text you want to show in the **<text>** component, as such text will not be displayed if you do so. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> - When the <span> child component is used to form a text paragraph, incorrect <span> attribute settings (for example, setting of font-weight to 1000) will result in abnormal display of the text paragraph. -> -> - When the <span> child component is being used, do not include any text you want to show in the <text> component, as such text will not be displayed if you do so. +## Example Scenario +Use the **<text>** component to display text content through data binding. Use the **<span>** child component to hide or display text content by setting the **show** attribute. -## Example Scenario -Use the <text> component to display text content through data binding. Use the <span> child component to hide or display text content by setting the show attribute. - - - ``` - -
-
- - {{ content }} - - -
- - {{ content }} - - 1 - - Hide clip - -
- ``` +``` + +
+
+ + {{ content }} + + +
+ + {{ content }} + + 1 + + Hide clip + +
+``` ``` /* xxx.css */ .container { + width: 100%; + height: 100%; align-items: center; flex-direction: column; justify-content: center; @@ -266,7 +272,7 @@ Use the <text> component to display text content through data binding. Use // xxx.js export default { data: { - isShow:true, + isShow:true, content: 'Hello World' }, onInit(){ }, diff --git a/en/application-dev/ui/ui-js-components-toolbar.md b/en/application-dev/ui/ui-js-components-toolbar.md new file mode 100644 index 0000000000000000000000000000000000000000..90971232ef1cdbff23ff3517553649c3e49d652a --- /dev/null +++ b/en/application-dev/ui/ui-js-components-toolbar.md @@ -0,0 +1,229 @@ +# <toolbar> Development + + +The **<toolbar>** component shows actions available on the current screen and can be used for level-1 navigation. For details, see [toolbar](../reference/arkui-js/js-components-basic-toolbar.md). + + +## Creating a <toolbar> Component + +Create a **<toolbar>** component in the .hml file under **pages/index**. + + +``` + +
+ + + + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +toolbar-item{ + font-size: 35px; +} +``` + +![en-us_image_0000001275922977](figures/en-us_image_0000001275922977.gif) + + +## Add Child Components + + The **<toolbar>** component supports only the **<toolbar-item>** child component and can display a maximum of five **<toolbar-item>** child components on a page. If there are six or more **<toolbar-item>** child components, the first four child components are retained, and the rest are moved to the **More** option on the toolbar and can be displayed on a pop-up window by clicking **More**. Under **More**, the child components are displayed in the default style; the custom style settings do not take effect. + +``` + +
+ + + + + + + + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +toolbar-item{ + font-size: 35px; +} +``` + +![en-us_image_0000001232002988](figures/en-us_image_0000001232002988.gif) + + +## Setting Styles + +Set the **position** style for the **<toolbar>** component and set the font color, size, and background color of **<toolbar-item>** child components. + + + +``` + +
+ + + + + + +
+``` + + + +``` +/* xxx.css */ +.container { + background-color: #F1F3F5; + flex-direction: column; + width: 100%; + justify-content: center; + align-items: center; +} +toolbar-item{ + font-size: 35px; +} +.toolbarActive{ + color: red; + background-color: #daebef; +} +``` + + +![en-us_image_0000001275803149](figures/en-us_image_0000001275803149.png) + + +## Binding Events + +Bind the click event and long press event to the **<toolbar-item>** child components, so that the text of these components turns red upon click and turns blue upon long press. + + +``` + +
+ + + + + +
+``` + + +``` +/* xxx.css */ +.container { + background-color: #F1F3F5; + flex-direction: column; + width: 100%; + justify-content: center; + align-items: center; +} +toolbar-item{ + font-size: 35px; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + itemColor:'black' + }, + itemClick(){ + this.itemColor= "red"; + prompt.showToast({duration:2000,message:'item click'}); + }, + itemLongPress(){ + prompt.showToast({duration:2000,message:'item long press'}); + this.itemColor= "blue"; + }, +} +``` + +![en-us_image_0000001275803153](figures/en-us_image_0000001275803153.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> The **<toolbar>** component does not allow adding of events or methods, but its child components do. + + +## Example Scenario + +In this example, you'll implement a **<toolbar-item>** component, clicking which will trigger a change in the text color and the image corresponding to the component. + + Use the **for** loop to create a **<toolbar-item>** component and bind a click event to it, so that clicking the component will obtain and store an index value. When setting the text color, the system checks whether the current index value is the stored value. If yes, the system sets the color to red. If no, the system uses the default color. + +``` + +
+ + + + +
+``` + + +``` +/* xxx.css */ +.container { + background-color: #F1F3F5; + flex-direction: column; + width: 100%; + justify-content: center; + align-items: center; +} +toolbar-item{ + font-size: 35px; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + active: 0, + imgList:["common/images/1.png","common/images/2.png","common/images/3.png","common/images/4.png"], + itemList:[ + {option:'item1',icon:'common/images/1.png'}, + {option:'item2',icon:'common/images/2.png'}, + {option:'item3',icon:'common/images/3.png'}, + {option:'item4',icon:'common/images/4.png'}, + ] + }, + itemClick(id){ + this.active= id; + }, +} +``` + +![en-us_image_0000001231683128](figures/en-us_image_0000001231683128.gif) diff --git a/en/application-dev/ui/ui-ts-basic-components-button.md b/en/application-dev/ui/ui-ts-basic-components-button.md new file mode 100644 index 0000000000000000000000000000000000000000..8f13accaa19720e3fd8acff04ee2ccd2a30c3c84 --- /dev/null +++ b/en/application-dev/ui/ui-ts-basic-components-button.md @@ -0,0 +1,188 @@ +# Button + + +The **\