@@ -8,12 +8,13 @@ The system executes Work Scheduler tasks at an appropriate time, subject to the
>
> - The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> - The APIs of this module can be used only in the stage model.
> - For details about the constraints on the Work Scheduler usage, see [Work Scheduler Overview](../../task-management/work-scheduler-overview.md).
## Modules to Import
```js
importworkSchedulerfrom'@ohos.workScheduler'
importworkSchedulerfrom'@ohos.workScheduler';
```
## workScheduler.startWork
...
...
@@ -53,7 +54,7 @@ Instructs the **WorkSchedulerService** to add the specified task to the executio
}
}
varres=workScheduler.startWork(workInfo);
console.info("workschedulerLog res:"+res);
console.info(`workschedulerLog res: ${res}`);
```
## workScheduler.stopWork
...
...
@@ -94,7 +95,7 @@ Instructs the **WorkSchedulerService** to stop the specified task.
}
}
varres=workScheduler.stopWork(workInfo,false);
console.info("workschedulerLog res:"+res);
console.info(`workschedulerLog res: ${res}`);
```
## workScheduler.getWorkStatus
...
...
@@ -116,10 +117,10 @@ Obtains the latest task status. This API uses an asynchronous callback to return
| type | string | text<br>| No | Type of the input component. Available values include **text**, **email**, **date**, **time**, **number**, **password**, **button**, **checkbox**, and **radio**.<br>The **text**, **email**, **date**, **time**, **number**, and **password** types can be dynamically switched and modified.<br>The **button**, **checkbox**, and **radio** types cannot be dynamically modified. <br>- **button**: a button that can be clicked.<br>- **checkbox**: a check box.<br>- **radio**: a radio button that allows users to select one from multiple others with the same name.<br>- **text**: a single-line text field.<br>- **email**: a field used for an email address.<br>- **date**: date component, including the year, month, and day, but excluding time.<br>- **time**: time component, without the time zone.<br>- **number**: field for entering digits.<br>- **password**: password field, in which characters will be shielded.|
| checked | boolean | false | No | Whether the **\<input>** component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**. |
| name | string | - | No | Name of the **\<input>** component.<br>This attribute is mandatory when **type** is set to **radio**. |
| value | string | - | No | Value of the **\<input>** component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name.|
| placeholder | string | - | No | Content of the hint text. This attribute is available only when the component type is set to **text**, **email**, **date**, **time**, **number**, or **password**.|
| maxlength | number | - | No | Maximum number of characters that can be entered in the input box. The empty value indicates no limit.|
| enterkeytype | string | default | No | Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.<br>Available values include:<br>- default<br>- next<br>- go<br>- done<br>- send<br>- search<br>Except for the **next** type, clicking the Enter key hides the soft keyboard.|
| headericon | string | - | No | Icon resource path before text input. This icon does not support click events and is unavailable for **button**, **checkbox**, and **radio** types. The supported icon image formats are JPG, PNG, and SVG.|
| showcounter<sup>5+</sup> | boolean | false | No | Whether to display the character counter for an input box. This attribute takes effect only when **maxlength** is set. |
| menuoptions<sup>5+</sup> | Array<MeunOption> | - | No | Menu options displayed after users click the **More** button. |
| autofocus<sup>6+</sup> | boolean | false | No | Whether to automatically obtain focus.<br>This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the **focus** method call (for about 100–500 ms) in **onActive**.|
| selectedstart<sup>6+</sup> | number | -1 | No | Start position for text selection. |
| selectedend<sup>6+</sup> | number | -1 | No | End position for text selection. |
| softkeyboardenabled<sup>6+</sup> | boolean | true | No | Whether to display the soft keyboard during editing. |
| showpasswordicon<sup>6+</sup> | boolean | true | No | Whether to display the icon at the end of the password text box. This attribute is available only when **type** is set to **password**. |
| Name | Type | Default Value | Mandatory | Description |
| type | string | text<br>| No | Type of the input component. Available values include **text**, **email**, **date**, **time**, **number**, **password**, **button**, **checkbox**, and **radio**.<br>The **text**, **email**, **date**, **time**, **number**, and **password** types can be dynamically switched and modified.<br>The **button**, **checkbox**, and **radio** types cannot be dynamically modified. <br>- **button**: a button that can be clicked.<br>- **checkbox**: a check box.<br>- **radio**: a radio button that allows users to select one from multiple others with the same name.<br>- **text**: a single-line text field.<br>- **email**: a field used for an email address.<br>- **date**: date component, including the year, month, and day, but excluding time.<br>- **time**: time component, without the time zone.<br>- **number**: field for entering digits.<br>- **password**: password field, in which characters will be shielded.|
| checked | boolean | false | No | Whether the **\<input>** component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**. |
| name | string | - | No | Name of the **\<input>** component.<br>This attribute is mandatory when **type** is set to **radio**. |
| value | string | - | No | Value of the **\<input>** component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name.|
| placeholder | string | - | No | Content of the hint text. This attribute is available only when the component type is set to **text**\|email\|date\|time\|number\|**password**.|
| maxlength | number | - | No | Maximum number of characters that can be entered in the input box. The empty value indicates no limit. |
| enterkeytype | string | default | No | Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.<br>Available values include:<br>- default<br>- next<br>- go<br>- done<br>- send<br>- search<br>Except for the **next** type, clicking the Enter key hides the soft keyboard.|
| headericon | string | - | No | Icon resource path before text input. This icon does not support click events and is unavailable for **button**, **checkbox**, and **radio** types. The supported icon image formats are JPG, PNG, and SVG.|
| showcounter<sup>5+</sup> | boolean | false | No | Whether to display the character counter for an input box. This attribute takes effect only when **maxlength** is set. |
| menuoptions<sup>5+</sup> | Array<MeunOption> | - | No | Menu options displayed after users click the **More** button. |
| autofocus<sup>6+</sup> | boolean | false | No | Whether to automatically obtain focus.<br>This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the **focus** method call (for about 100–500 ms) in **onActive**.|
| selectedstart<sup>6+</sup> | number | -1 | No | Start position for text selection. |
| selectedend<sup>6+</sup> | number | -1 | No | End position for text selection. |
| softkeyboardenabled<sup>6+</sup> | boolean | true | No | Whether to display the soft keyboard during editing. |
| showpasswordicon<sup>6+</sup> | boolean | true | No | Whether to display the icon at the end of the password text box. This attribute is available only when **type** is set to **password**. |
**Table 1** MenuOption<sup>5+</sup>
...
...
@@ -50,14 +50,14 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory| Description |
| color | <color> | \#e6000000 | No | Font color of the single-line text box or button. |
| font-size | <length> | 16px | No | Font size of the single-line text box or button. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| placeholder-color | <color> | \#99000000 | No | Color of the hint text in the single-line text box. This attribute is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**.|
| font-weight | number \| string | normal | No | Font weight of the single-line text box or button. For details, see **font-weight** of the [**\<text>** component](../arkui-js/js-components-basic-text.md).|
| caret-color<sup>6+</sup> | <color> | - | No | Color of the input cursor. |
| Name | Type | Default Value | Mandatory | Description |
| color | <color> | \#e6000000 | No | Font color of the single-line text box or button. |
| font-size | <length> | 16px | No | Font size of the single-line text box or button. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| placeholder-color | <color> | \#99000000 | No | Color of the hint text in the single-line text box. This attribute is available only when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**. |
| font-weight | number\| string | normal | No | Font weight of the single-line text box or button. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md) component. |
| caret-color<sup>6+</sup> | <color> | - | No | Color of the caret. |
## Events
...
...
@@ -65,30 +65,32 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
- When **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**, the following events are supported.
| change | {<br> value: inputValue<br> } | Triggered when the content entered in the input box changes. The most recent content entered by the user is returned.<br>If you change the **value** attribute directly, this event will not be triggered.|
| enterkeyclick | {<br> value: enterKey<br> } | Triggered when the **Enter** key on the soft keyboard is clicked. The type of the **Enter** key is returned, which is of the number type. Available values are as follows:<br>- **2**: returned if **enterkeytype** is **go**.<br>- **3**: returned if **enterkeytype** is **search**.<br>- **4**: returned if **enterkeytype** is **send**.<br>- **5**: returned if **enterkeytype** is **next**.<br>- **6**: returned if **enterkeytype** is **default**, **done**, or is not set.|
| translate<sup>5+</sup> | {<br> value: selectedText<br> } | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.|
| share<sup>5+</sup> | {<br> value: selectedText<br> } | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.|
| search<sup>5+</sup> | {<br> value: selectedText<br> } | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.|
| optionselect<sup>5+</sup> | {<br> index: optionIndex,<br> value: selectedText<br> } | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.|
| selectchange<sup>6+</sup> | {<br>start: number,<br>end: number<br> } | Triggered when the text selection changes. |
| change | {<br> value: inputValue<br>} | Triggered when the content entered in the input box changes. The most recent content entered by the user is returned.<br>If you change the **value** attribute directly, this event will not be triggered.|
| enterkeyclick | {<br> value: enterKey<br>} | Triggered when the **Enter** key on the soft keyboard is clicked. The type of the **Enter** key is returned, which is of the number type. Available values are as follows:<br>- **2**: returned if **enterkeytype** is **go**.<br>- **3**: returned if **enterkeytype** is **search**.<br>- **4**: returned if **enterkeytype** is **send**.<br>- **5**: returned if **enterkeytype** is **next**.<br>- **6**: returned if **enterkeytype** is **default**, **done**, or is not set.|
| translate<sup>5+</sup> | {<br> value: selectedText<br>} | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.|
| share<sup>5+</sup> | {<br> value: selectedText<br>} | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.|
| search<sup>5+</sup> | {<br> value: selectedText<br>} | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.|
| optionselect<sup>5+</sup> | {<br> index: optionIndex,<br> value: selectedText<br>} | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.|
| selectchange<sup>6+</sup> | {<br>start: number,<br>end: number<br>} | Triggered when the text selection changes. |
- When **type** is set to **checkbox** or **radio**, the following events are supported.
| focus | {<br> focus: true\|false<br> }:<br>If **focus** is not passed, the default value **true** is used.| Obtains or loses focus. When **type** is set to **text**, **email**, **date**, **time**, **number**, or password, the input method can be displayed or hidden.|
| showError | {<br> error: string <br>} | Displays the error message. This attribute is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**.|
| delete<sup>6+</sup> | - | Deletes the text content based on the current cursor position when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**; deletes the last character and displays the cursor if the current input component does not have a cursor.|
| focus | {<br> focus: true\|false<br> }:<br>If **focus** is not passed, the default value **true** is used.| Obtains or loses focus. When **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**, the input method can be displayed or collapsed. |
| showError | {<br> error: string <br>} | Displays the error message. This method is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**. |
| delete<sup>6+</sup> | - | Deletes text based on the current caret position when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**; deletes the last character and displays the caret if the current input component does not have a caret. |
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p94820268342"><a name="p94820268342"></a><a name="p94820268342"></a>The value is set to <strong id="b11562042143418"><a name="b11562042143418"></a><a name="b11562042143418"></a>'2d'</strong>, indicating that a 2D drawing object is returned. This object can be used to draw rectangles, texts, and images on the canvas component.</p>
<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="p5277099182"><a name="p5277099182"></a><a name="p5277099182"></a>Whether to enable anti-aliasing. The default value is <strong id="b0624355174210"><a name="b0624355174210"></a><a name="b0624355174210"></a>false</strong>.</p>
<td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="p1537310444489"><a name="p1537310444489"></a><a name="p1537310444489"></a>2D drawing object, which can be used to draw rectangles<span id="ph12120164516264"><a name="ph12120164516264"></a><a name="ph12120164516264"></a>, images,</span> and texts on the canvas component.</p>
| type | string | Yes | Object type. The value is set to **'2d'**, indicating that a 2D drawing object is returned. This object can be used to draw rectangles, texts, and images on the canvas component.|
| options<sup>6+</sup> | ContextAttrOptions | No | Whether to enable anti-aliasing. By default, anti-aliasing is disabled. |
**Table 1** ContextAttrOptions
| Name | Type | Description |
| --------- | ------- | ------------------- |
| antialias | boolean | Whether to enable anti-aliasing. The default value is **false**.|
| [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts, on the canvas component. |
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p154271418165118"><a name="p154271418165118"></a><a name="p154271418165118"></a>Image quality, which ranges from 0 to 1, when the image format is <strong id="b15931192220406"><a name="b15931192220406"></a><a name="b15931192220406"></a>image/jpeg</strong> or <strong id="b693117224406"><a name="b693117224406"></a><a name="b693117224406"></a>image/webp</strong>. If the set value is beyond the value range, the default value <strong id="b167851581370"><a name="b167851581370"></a><a name="b167851581370"></a>0.92</strong> is used.</p>
| type | string | No | Image format. The default value is **image/png**. |
| quality | number | No | Image quality, which ranges from 0 to 1, when the image format is **image/jpeg** or **image/webp**. If the set value is beyond the value range, the default value **0.92** is used.|
<tdclass="cellrowborder"valign="top"width="47.774777477747776%"headers="mcps1.1.4.1.3 "><pid="p1785711281405"><aname="p1785711281405"></a><aname="p1785711281405"></a>Width of the <strongid="b1293921991"><aname="b1293921991"></a><aname="b1293921991"></a>OffscreenCanvas</strong> object.</p>
<tdclass="cellrowborder"valign="top"width="47.774777477747776%"headers="mcps1.1.4.1.3 "><pid="p3857192844012"><aname="p3857192844012"></a><aname="p3857192844012"></a>Height of the <strongid="b38911358914"><aname="b38911358914"></a><aname="b38911358914"></a>OffscreenCanvas</strong> object.</p>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p5592518104911"><a name="p5592518104911"></a><a name="p5592518104911"></a>The value can only be <strong id="b195311126134218"><a name="b195311126134218"></a><a name="b195311126134218"></a>"2d"</strong>.</p>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p4507539135910"><a name="p4507539135910"></a><a name="p4507539135910"></a>2D drawing object, which can be used to draw rectangles<span id="ph9658615131215"><a name="ph9658615131215"></a><a name="ph9658615131215"></a>, images,</span> and texts, on the <strong id="b233535603219"><a name="b233535603219"></a><a name="b233535603219"></a>OffscreenCanvas</strong>.</p>
<td class="cellrowborder" valign="top" width="69.87%" headers="mcps1.1.3.1.2 "><p id="p122361757181118"><a name="p122361757181118"></a><a name="p122361757181118"></a>2D drawing object, which can be used to draw rectangles<span id="ph12120164516264"><a name="ph12120164516264"></a><a name="ph12120164516264"></a>, images,</span> and texts, on the <strong id="b14803183913269"><a name="b14803183913269"></a><a name="b14803183913269"></a>OffscreenCanvas</strong>.</p>
</td>
</tr>
</tbody>
</table>
### toDataURL<a name="section16338154813483"></a>
toDataURL\(type?: string, quality?:number\):
# OffscreenCanvas
> **NOTE**
>
> The APIs of this component are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
**OffscreenCanvas** defines a canvas object that can be rendered off the screen.
## Attributes
| Name | Type | Description |
| ------ | ------ | --------------------------- |
| width | number | Width of the **OffscreenCanvas** object.|
| height | number | Height of the **OffscreenCanvas** object.|
| contextId | string | Yes | Context ID. The value can only be **"2d"**. |
| options | [CanvasRenderingContext2DSettings](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | No | 2D drawing object, which can be used to draw rectangles, images, and texts, on the **OffscreenCanvas**. |
| [OffscreenCanvasRenderingContext2D](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts, on the **OffscreenCanvas**. |
### toDataURL
toDataURL(type?: string, quality?:number):
Generates a URL containing image display information.
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p154271418165118"><a name="p154271418165118"></a><a name="p154271418165118"></a>Image quality, which ranges from 0 to 1, when the image format is <strong id="b18400112703618"><a name="b18400112703618"></a><a name="b18400112703618"></a>image/jpeg</strong> or <strong id="b15400112719363"><a name="b15400112719363"></a><a name="b15400112719363"></a>image/webp</strong>. If the set value is beyond the value range, the default value <strong id="b1498145413366"><a name="b1498145413366"></a><a name="b1498145413366"></a>0.92</strong> is used.</p>
| type | string | No | Image format. The default value is **image/png**. |
| quality | number | No | Image quality, which ranges from 0 to 1, when the image format is **image/jpeg** or **image/webp**. If the set value is beyond the value range, the default value **0.92** is used.|
**Return value**
| Type | Description |
| ------ | --------- |
| string | Image URL.|
### transferToImageBitmap
transferToImageBitmap(): ImageBitmap
Creates an **ImageBitmap** object on the most recently rendered image of the **OffscreenCanvas**.
| path | Object | Path to be added to this path. |
**Example**
```html
<!-- xxx.hml -->
<div>
...
...
@@ -60,6 +61,7 @@ Sets the path transformation matrix.
| translateY | number | Translation distance of the y-axis. |
**Example**
```html
<!-- xxx.hml -->
<div>
...
...
@@ -130,6 +132,7 @@ Moves the current coordinate point of the path to the target point, without draw
| y | number | Y-coordinate of the target point. |
**Example**
```html
<!-- xxx.hml -->
<div>
...
...
@@ -216,6 +219,7 @@ Draws a cubic bezier curve on the canvas.
| y | number | Y-coordinate of the end point on the bezier curve. |
**Example**
```html
<!-- xxx.hml -->
<div>
...
...
@@ -256,6 +260,7 @@ Draws a quadratic curve on the canvas.
| y | number | Y-coordinate of the end point on the bezier curve. |
**Example**
```html
<!-- xxx.hml -->
<div>
...
...
@@ -298,6 +303,7 @@ Draws an arc on the canvas.
| anticlockwise | boolean | Whether to draw the arc counterclockwise. |
**Example**
```html
<!-- xxx.hml -->
<div>
...
...
@@ -338,6 +344,7 @@ Draws an arc based on the radius and points on the arc.
| radius | number | Radius of the arc. |
**Example**
```html
<!-- xxx.hml -->
<div>
...
...
@@ -381,6 +388,7 @@ Draws an ellipse in the specified rectangular region.
| anticlockwise | number | Whether to draw the ellipse in the anticlockwise direction. The value **0** indicates clockwise and the value **1** indicates anticlockwise. This parameter is optional. The default value is **0**. |
| touchstart | TouchEvent | Triggered when the tapping starts. For details about **TouchEvent**, see Table 2. | Yes<sup>5+</sup> |
| touchmove | TouchEvent | Triggered when the tapping moves. | Yes<sup>5+</sup> |
| touchcancel | TouchEvent | Triggered when the tapping is interrupted. | Yes<sup>5+</sup> |
| touchend | TouchEvent | Triggered when the tapping ends. | Yes<sup>5+</sup> |
| click | - | Triggered when a component is clicked. | Yes<sup>6+</sup> |
| doubleclick<sup>7+</sup> | - | Triggered when a component is double-clicked. | No<br>Bubbling is supported since API version 9. |
| longpress | - | Triggered when a component is long pressed. | No<br>Bubbling is supported since API version 9.|
| swipe<sup>5+</sup> | SwipeEvent | Triggered when a user quickly swipes on a component.<br/>For details about **SwipeEvent**, see Table 4. | No<br>Bubbling is supported since API version 9.|
| attached<sup>6+</sup> | - | Triggered after the current component node is mounted to the render tree. | No |
| detached<sup>6+</sup> | - | Triggered when the current component node is removed from the render tree. | No |
| pinchstart<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is started.<br>For details about **PinchEvent**, see Table 5.| No |
| pinchupdate<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is in progress. | No |
| pinchend<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is ended. | No |
| pinchcancel<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is interrupted. | No |
| dragstart<sup>7+</sup> | DragEvent | Triggered when dragging starts.<br>For details about **DragEvent**, see Table 6. | No |
| drag<sup>7+</sup> | DragEvent | Triggered when dragging is in progress. | No |
| dragend<sup>7+</sup> | DragEvent | Triggered when dragging is ended. | No |
| dragenter<sup>7+</sup> | DragEvent | Triggered when the dragged component enters a drop target. | No |
| dragover<sup>7+</sup> | DragEvent | Triggered when the dragged component is being dragged over a drop target. | No |
| dragleave<sup>7+</sup> | DragEvent | Triggered when the dragged component leaves a drop target. | No |
| drop<sup>7+</sup> | DragEvent | Triggered when the dragged component is dropped on a drop target. | No |
| touchstart | TouchEvent | Triggered when the tapping starts. For details about **TouchEvent**, see Table 2. | Yes<sup>5+</sup> | Yes<sup>5+</sup>|
| touchmove | TouchEvent | Triggered when the tapping moves. | Yes<sup>5+</sup> | Yes<sup>5+</sup>|
| touchcancel | TouchEvent | Triggered when the tapping is interrupted. | Yes<sup>5+</sup> | Yes<sup>5+</sup>|
| touchend | TouchEvent | Triggered when the tapping ends. | Yes<sup>5+</sup> | Yes<sup>5+</sup>|
| click | - | Triggered when a component is clicked. | Yes<sup>6+</sup> | No |
| doubleclick<sup>7+</sup> | - | Triggered when a component is double-clicked. | No<br>Bubbling is supported since API version 9. | No |
| longpress | - | Triggered when a component is long pressed. | No<br>Bubbling is supported since API version 9. | No |
| swipe<sup>5+</sup> | SwipeEvent | Triggered when a user quickly swipes on a component. For details about **SwipeEvent**, see Table 4. | No<br>Bubbling is supported since API version 9. | No |
| attached<sup>6+</sup> | - | Triggered after the current component node is mounted to the render tree. | No | No |
| detached<sup>6+</sup> | - | Triggered when the current component node is removed from the render tree. | No | No |
| pinchstart<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is started.<br>For details about **PinchEvent**, see Table 5.| No | No |
| pinchupdate<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is in progress. | No | No |
| pinchend<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is ended. | No | No |
| pinchcancel<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is interrupted. | No | No |
| dragstart<sup>7+</sup> | DragEvent | Triggered when dragging starts.<br>For details about **DragEvent**, see Table 6. | No | No |
| drag<sup>7+</sup> | DragEvent | Triggered when dragging is in progress. | No | No |
| dragend<sup>7+</sup> | DragEvent | Triggered when dragging is ended. | No | No |
| dragenter<sup>7+</sup> | DragEvent | Triggered when the dragged component enters a drop target. | No | No |
| dragover<sup>7+</sup> | DragEvent | Triggered when the dragged component is being dragged over a drop target. | No | No |
| dragleave<sup>7+</sup> | DragEvent | Triggered when the dragged component leaves a drop target. | No | No |
| drop<sup>7+</sup> | DragEvent | Triggered when the dragged component is dropped on a drop target. | No | No |
> **NOTE**
>
> Events not listed in the preceding table do not support bubbling, such as the [change event](../arkui-js/js-components-basic-input.md#events) of the **<input\>** component. For details, see the description of the specific component.
**Table 1** BaseEvent
...
...
@@ -133,12 +135,13 @@ Sets the data associated with the specified key. If there is no data associated
**Parameters**
| Name | Type | Mandatory | Name |
| Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ------- |
| key | string | Yes | Data key. |
| value | object | Yes | Data to be stored.|
**Return value**
| Type | Description |
| ------- | ------------------------ |
| boolean | Operation result. The value **true** means that the operation is successful, and **false** means otherwise.|
...
...
@@ -166,11 +169,12 @@ Obtains the data associated with the specified key. If no data is associated wit
**Parameters**
| Name | Type | Mandatory | Name |
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ----- |
| key | string | Yes | Data key.|
**Return value**
| Type | Description |
| ------ | ------ |
| object | Obtained data.|
...
...
@@ -197,11 +201,12 @@ If the key is null, all data will be deleted.
**Parameters**
| Name | Type | Mandatory | Name |
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ----- |
| key | string | No | Data key.|
**Return value**
| Type | Description |
| ------- | ------------------------ |
| boolean | Operation result. The value **true** means that the operation is successful, and **false** means otherwise.|
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
Gradient styles are commonly supported and can be set in the **style** attribute or a **.css** file. Gradients enable smooth transition between two or more specified colors.
Gradient styles are commonly supported and can be set in the **style** attribute or a **.css** file. Gradients enable smooth transition between two or more specified colors.
This framework supports two gradient styles: linear gradient and repeating linear gradient.
## Linear Gradient/Repeating Linear Gradient<a name="s9fb0b2412d2843e4b06e05acc39dc394"></a>
## Linear Gradient/Repeating Linear Gradient
To use the gradient style, you need to specify the transition direction and transition color.
<td class="cellrowborder" valign="top" width="14.14141414141414%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001127284866_a52342ab36286439b89baabf1b7a0096f"><a name="en-us_topic_0000001127284866_a52342ab36286439b89baabf1b7a0096f"></a><a name="en-us_topic_0000001127284866_a52342ab36286439b89baabf1b7a0096f"></a>to bottom (gradient from top to bottom)</p>
<td class="cellrowborder" valign="top" width="34.34343434343434%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001127284866_a1351d071b6d54f7084bdc7e4f15c7e72"><a name="en-us_topic_0000001127284866_a1351d071b6d54f7084bdc7e4f15c7e72"></a><a name="en-us_topic_0000001127284866_a1351d071b6d54f7084bdc7e4f15c7e72"></a>Transition direction. For example, <strong id="b9784809451"><a name="b9784809451"></a><a name="b9784809451"></a>to right</strong> (gradient from left to right) or</p>
<p id="en-us_topic_0000001127284866_a8146911b819748f0890e86cdf0fecc20"><a name="en-us_topic_0000001127284866_a8146911b819748f0890e86cdf0fecc20"></a><a name="en-us_topic_0000001127284866_a8146911b819748f0890e86cdf0fecc20"></a><strong id="b144311914164519"><a name="b144311914164519"></a><a name="b144311914164519"></a>to bottom right</strong> (from the top left to the bottom right).</p>
<td class="cellrowborder" valign="top" width="34.34343434343434%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001127284866_a88b591f082704070b5b802aa11442816"><a name="en-us_topic_0000001127284866_a88b591f082704070b5b802aa11442816"></a><a name="en-us_topic_0000001127284866_a88b591f082704070b5b802aa11442816"></a>Transition direction. Angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.</p>
<td class="cellrowborder" valign="top" width="34.34343434343434%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001127284866_a36325f0de58d4db6bf1c35678a0d8e70"><a name="en-us_topic_0000001127284866_a36325f0de58d4db6bf1c35678a0d8e70"></a><a name="en-us_topic_0000001127284866_a36325f0de58d4db6bf1c35678a0d8e70"></a>Colors among which smooth transitions are rendered.</p>
</td>
</tr>
</tbody>
</table>
- Example
1. Gradient from top to bottom \(default\)
```
#gradient {
height: 300px;
width: 600px;
/* Gradient starts from red at the top to green at the bottom. */
background: linear-gradient(red, #00ff00);
}
```
2. Gradient at an angle of 45°
```
/* Gradient at an angle of 45°, changing from red to green */
The color can be specified in any of the following formats: \#ff0000, \#ffff0000, rgb (255, 0, 0), and rgba (255, 0, 0, 1). At least two colors must be specified.
**Parameters**
| Style | Type | Default Value | Mandatory | Description |
| direction | to <side-or-corner><side-or-corner> = [left \| right] \| [top \| bottom] | to bottom (gradient from top to bottom)| No | Transition direction, for example, **to left** (gradient from right to left) or<br>**to bottom right** (gradient from the top left to the bottom right).|
| angle | <deg> | 180deg | No | Transition direction, which is the angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.|
| color | <color> [<length>\|<percentage>] | - | Yes | Colors among which smooth transitions are rendered. |
**Example**
1. Gradient from top to bottom (default)
```css
#gradient{
height:300px;
width:600px;
/* Gradient starts from red at the top to green at the bottom. */
background:linear-gradient(red,#00ff00);
}
```
2. Gradient at an angle of 45°
```css
/* Gradient at an angle of 45°, changing from red to green */
If your application needs to execute a non-real-time task, for example, data learning, you can harness the Work Scheduler mechanism, which will schedule the task based on the storage space, power consumption, temperature, and more when the preset conditions are met.
If your application needs to execute a non-real-time task, for example, data learning, you can harness the Work Scheduler mechanism, which will schedule the task based on the storage space, power consumption, temperature, and more when the preset conditions are met. For details about the constraints on the Work Scheduler usage, see [Work Scheduler Overview](./work-scheduler-overview.md).
## Available APIs
...
...
@@ -20,46 +20,46 @@ import WorkSchedulerExtensionAbility from '@ohos.WorkSchedulerExtensionAbility';
startWork(work: WorkInfo): boolean; | Starts a Work Scheduler task.
stopWork(work: WorkInfo, needCancel?: boolean): boolean; | Stops a Work Scheduler task.
getWorkStatus(workId: number, callback: AsyncCallback\<WorkInfo>): void; | Obtains the status of a Work Scheduler task. This API uses an asynchronous callback to return the result.
getWorkStatus(workId: number): Promise\<WorkInfo>; | Obtains the status of a Work Scheduler task. This API uses a promise to return the result.
obtainAllWorks(callback: AsyncCallback\<void>): Array\<WorkInfo>; | Obtains Work Scheduler tasks. This API uses an asynchronous callback to return the result.
obtainAllWorks(): Promise<Array\<WorkInfo>>; | Obtains Work Scheduler tasks. This API uses a promise to return the result.
startWork(work: WorkInfo): boolean | Starts a Work Scheduler task.
stopWork(work: WorkInfo, needCancel?: boolean): boolean | Stops a Work Scheduler task.
getWorkStatus(workId: number, callback: AsyncCallback\<WorkInfo>): void | Obtains the status of a Work Scheduler task. This API uses an asynchronous callback to return the result.
getWorkStatus(workId: number): Promise\<WorkInfo> | Obtains the status of a Work Scheduler task. This API uses a promise to return the result.
obtainAllWorks(callback: AsyncCallback\<void>): Array\<WorkInfo> | Obtains Work Scheduler tasks. This API uses an asynchronous callback to return the result.
obtainAllWorks(): Promise<Array\<WorkInfo>> | Obtains Work Scheduler tasks. This API uses a promise to return the result.
stopAndClearWorks(): boolean; | Stops and clears Work Scheduler tasks.
isLastWorkTimeOut(workId: number, callback: AsyncCallback\<void>): boolean; | Checks whether the last execution of the specified task has timed out. This API uses an asynchronous callback to return the result. It is applicable to repeated tasks.
isLastWorkTimeOut(workId: number): Promise\<boolean>; | Checks whether the last execution of the specified task has timed out. This API uses a promise to return the result. It is applicable to repeated tasks.
isLastWorkTimeOut(workId: number, callback: AsyncCallback\<void>): boolean | Checks whether the last execution of the specified task has timed out. This API uses an asynchronous callback to return the result. It is applicable to repeated tasks.
isLastWorkTimeOut(workId: number): Promise\<boolean> | Checks whether the last execution of the specified task has timed out. This API uses a promise to return the result. It is applicable to repeated tasks.
**Table 2** WorkInfo parameters
> **NOTE**
>
> For details about the constraints on configuring WorkInfo, see [Work Scheduler Overview](./work-scheduler-overview.md).
> For details about the constraints on configuring **WorkInfo**, see [Work Scheduler Overview](./work-scheduler-overview.md).
