@@ -8,12 +8,13 @@ The system executes Work Scheduler tasks at an appropriate time, subject to the
...
@@ -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 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.
> - 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
## Modules to Import
```js
```js
importworkSchedulerfrom'@ohos.workScheduler'
importworkSchedulerfrom'@ohos.workScheduler';
```
```
## workScheduler.startWork
## workScheduler.startWork
...
@@ -53,7 +54,7 @@ Instructs the **WorkSchedulerService** to add the specified task to the executio
...
@@ -53,7 +54,7 @@ Instructs the **WorkSchedulerService** to add the specified task to the executio
}
}
}
}
varres=workScheduler.startWork(workInfo);
varres=workScheduler.startWork(workInfo);
console.info("workschedulerLog res:"+res);
console.info(`workschedulerLog res: ${res}`);
```
```
## workScheduler.stopWork
## workScheduler.stopWork
...
@@ -94,7 +95,7 @@ Instructs the **WorkSchedulerService** to stop the specified task.
...
@@ -94,7 +95,7 @@ Instructs the **WorkSchedulerService** to stop the specified task.
}
}
}
}
varres=workScheduler.stopWork(workInfo,false);
varres=workScheduler.stopWork(workInfo,false);
console.info("workschedulerLog res:"+res);
console.info(`workschedulerLog res: ${res}`);
```
```
## workScheduler.getWorkStatus
## workScheduler.getWorkStatus
...
@@ -116,10 +117,10 @@ Obtains the latest task status. This API uses an asynchronous callback to return
...
@@ -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.|
| 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**. |
| 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**. |
| 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.|
| 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**.|
| 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.|
| 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.|
| 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.|
| 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. |
| 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. |
| 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**.|
| 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. |
| selectedstart<sup>6+</sup> | number | -1 | No | Start position for text selection. |
| selectedend<sup>6+</sup> | number | -1 | No | End 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. |
| 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**. |
| 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>
**Table 1** MenuOption<sup>5+</sup>
...
@@ -50,14 +50,14 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
...
@@ -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.
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory| Description |
| Name | Type | Default Value | Mandatory | Description |
| color | <color> | \#e6000000 | No | Font color of the single-line text box or button. |
| 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. |
| 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.|
| 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**.|
| 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>** component](../arkui-js/js-components-basic-text.md).|
| 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 input cursor. |
| caret-color<sup>6+</sup> | <color> | - | No | Color of the caret. |
## Events
## Events
...
@@ -65,30 +65,32 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
...
@@ -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.
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.
- 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.|
| 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.|
| 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.|
| 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.|
| 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.|
| 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.|
| 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. |
| 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.
- 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.|
| 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 attribute is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**.|
| 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 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.|
| 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. |
| 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.|
</th>
| options<sup>6+</sup> | ContextAttrOptions | No | Whether to enable anti-aliasing. By default, anti-aliasing is disabled. |
<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>
| [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="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>
<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.|
| [fillStyle](#fillstyle) | \<color> \|[CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md)\| CanvasPattern | - | Style to fill an area.<br>- When the type is **\<color>**, this parameter indicates the color of the filling area.<br>- When the type is **CanvasGradient**, this parameter indicates a gradient object, which is created using the **createLinearGradient()** method.<br>- When the type is **CanvasPattern**, this parameter indicates a canvas pattern, which is created using the **createPattern()** method. |
| [fillStyle](#fillstyle)| <color>\|[CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md)\| CanvasPattern | Style to fill an area.<br>- When the type is **\<color>**, this parameter indicates the color of the filling area.<br>- When the type is **CanvasGradient**, this parameter indicates a gradient object, which is created using the **createLinearGradient()** method.<br>- When the type is **CanvasPattern**, this parameter indicates a canvas pattern, which is created using the **createPattern()** method.|
| [lineWidth](#linewidth) | number | - | Line width. |
| [lineWidth](#linewidth) | number | Line width. |
| [strokeStyle](#strokestyle) | \<color> \|[CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md)\| CanvasPattern | - | Stroke style.<br>- When the type is **\<color>**, this parameter indicates the stroke color.<br>- When the type is **CanvasGradient**, this parameter indicates a gradient object, which is created using the **createLinearGradient()** method.<br>- When the type is **CanvasPattern**, this parameter indicates a canvas pattern, which is created using the **createPattern()** method. |
| [strokeStyle](#strokestyle)| <color>\|[CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md)\| CanvasPattern | Stroke style.<br>- When the type is **\<color>**, this parameter indicates the stroke color.<br>- When the type is **CanvasGradient**, this parameter indicates a gradient object, which is created using the **createLinearGradient()** method.<br>- When the type is **CanvasPattern**, this parameter indicates a canvas pattern, which is created using the **createPattern()** method.|
| [lineCap](#linecap) | string | butt | Style of the specified line endpoint. The options are as follows:<br>- **butt**: The endpoints of the line are squared off.<br>- **round**: The endpoints of the line are rounded.<br>- **square**: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.|
| [lineCap](#linecap) | string | Style of the specified line endpoint. The options are as follows:<br>- **butt**: The endpoints of the line are squared off.<br>- **round**: The endpoints of the line are rounded.<br>- **square**: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.<br>Default value: **butt**|
| [lineJoin](#linejoin) | string | miter | Style of the intersection point between line segments. The options are as follows:<br>- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.<br>- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.<br>- **miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.|
| [lineJoin](#linejoin) | string | Style of the intersection point between line segments. The options are as follows:<br>- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.<br>- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.<br>- **miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>Default value: **miter**|
| [miterLimit](#miterlimit) | number | 10 | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. |
| [miterLimit](#miterlimit) | number | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>Default value: **10** |
| [font](#font) | string | "normal normal 14px sans-serif" | Font style.<br>Syntax: ctx.font="font-style font-weight font-size font-family"<sup>5+</sup><br>- (Optional) **font-style**: font style. Available values are **normal** and **italic**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**. |
| [font](#font)| string | Font style.<br>Syntax: ctx.font="font-style font-weight font-size font-family"<sup>5+</sup><br>- (Optional) **font-style**: font style. Available values are **normal** and **italic**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.<br>Default value: **"normal normal 14px sans-serif"**|
| [textAlign](#textalign) | string | left | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **right**: The text is right-aligned.<br>- **center**: The text is center-aligned.<br>- **start**: The text is aligned with the start bound.<br>- **end**: The text is aligned with the end bound.<br>In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**.|
| [textAlign](#textalign) | string | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **right**: The text is right-aligned.<br>- **center**: The text is center-aligned.<br>- **start**: The text is aligned with the start bound.<br>- **end**: The text is aligned with the end bound.<br>In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**.<br>Default value: **left**|
| [textBaseline](#textbaseline) | string | alphabetic | Horizontal alignment mode of text. Available values are as follows:<br>- **alphabetic**: The text baseline is the normal alphabetic baseline.<br>- **top**: The text baseline is on the top of the text bounding box.<br>- **hanging**: The text baseline is a hanging baseline over the text.<br>- **middle**: The text baseline is in the middle of the text bounding box.<br>- **ideographic**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excessive character.<br>- **bottom**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.|
| [textBaseline](#textbaseline) | string | Horizontal alignment mode of text. Available values are as follows:<br>- **alphabetic**: The text baseline is the normal alphabetic baseline.<br>- **top**: The text baseline is on the top of the text bounding box.<br>- **hanging**: The text baseline is a hanging baseline over the text.<br>- **middle**: The text baseline is in the middle of the text bounding box.<br>- **ideographic**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excessive character.<br>- **bottom**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.<br>Default value: **alphabetic**|
| [globalAlpha](#globalalpha)| number | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque. |
| [lineDashOffset](#linedashoffset) | number | 0.0 | Offset of the dashed line. The precision is float. |
| [lineDashOffset](#linedashoffset) | number | Offset of the dashed line. The precision is float.<br>Default value: **0.0** |
| [globalCompositeOperation](#globalcompositeoperation) | string | source-over | Composition operation type. Available values are as follows: **source-over**, **source-atop**, **source-in**, **source-out**, **destination-over**, **destination-atop**, **destination-in**, **destination-out**, **lighter**, copy, and **xor**. For details, see [Operation types](#globalcompositeoperation).|
| [globalCompositeOperation](#globalcompositeoperation) | string | Composition operation type. Available values are as follows: **source-over**, **source-atop**, **source-in**, **source-out**, **destination-over**, **destination-atop**, **destination-in**, **destination-out**, **lighter**, copy, and **xor**. For details, see [Operation types](#globalcompositeoperation).<br>Default value: **ource-over**|
| [shadowBlur](#shadowblur) | number | 0.0 | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float. |
| [shadowBlur](#shadowblur) | number | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.<br>Default value: **0.0**|
| [shadowOffsetX](#shadowoffsetx) | number | - | X-axis shadow offset relative to the original object. |
| [shadowOffsetX](#shadowoffsetx) | number | X-axis shadow offset relative to the original object. |
| [shadowOffsetY](#shadowoffsety) | number | - | Y-axis shadow offset relative to the original object. |
| [shadowOffsetY](#shadowoffsety) | number | Y-axis shadow offset relative to the original object. |
| [imageSmoothingEnabled](#imagesmoothingenabled6)<sup>6+</sup> | boolean | true | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. |
| [imageSmoothingEnabled](#imagesmoothingenabled6)<sup>6+</sup> | boolean | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.<br>Default value: **true**|
### fillStyle
### fillStyle
...
@@ -380,7 +380,8 @@ export default {
...
@@ -380,7 +380,8 @@ export default {
### globalCompositeOperation
### globalCompositeOperation
Operation types
Enumerates the operation types.
| Value | Description |
| Value | Description |
| ---------------- | ------------------------ |
| ---------------- | ------------------------ |
| source-over | Displays the new drawing above the existing drawing. This attribute is used by default. |
| source-over | Displays the new drawing above the existing drawing. This attribute is used by default. |
| image | Image \| PixelMap<sup>9+</sup> | Image resource. For details, see [Image](../arkui-js/js-components-canvas-image.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7).|
| image | Image \| PixelMap<sup>9+</sup> | Image resource. For details, see [Image](../arkui-js/js-components-canvas-image.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7).|
Creates a linear gradient and returns a **CanvasGradient** object. For details, see [CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md).
Creates a linear gradient and returns a **CanvasGradient** object. For details, see [CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md).
**Parameters**
**Parameters**
| Name | Type | Description |
| Name | Type | Description |
| ---- | ------ | -------- |
| ---- | ------ | -------- |
| x0 | number | X-coordinate of the start point.|
| x0 | number | X-coordinate of the start point.|
...
@@ -1634,6 +1659,7 @@ Creates a linear gradient and returns a **CanvasGradient** object. For details,
...
@@ -1634,6 +1659,7 @@ Creates a linear gradient and returns a **CanvasGradient** object. For details,
<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>
| contextId | string | Yes | Context ID. The value can only be **"2d"**. |
</tbody>
| 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**. |
<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\):
Generates a URL containing image display information.
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. |
| path | Object | Path to be added to this path. |
**Example**
**Example**
```html
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -60,6 +61,7 @@ Sets the path transformation matrix.
...
@@ -60,6 +61,7 @@ Sets the path transformation matrix.
| translateY | number | Translation distance of the y-axis. |
| translateY | number | Translation distance of the y-axis. |
**Example**
**Example**
```html
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -130,6 +132,7 @@ Moves the current coordinate point of the path to the target point, without draw
...
@@ -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. |
| y | number | Y-coordinate of the target point. |
**Example**
**Example**
```html
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -216,6 +219,7 @@ Draws a cubic bezier curve on the canvas.
...
@@ -216,6 +219,7 @@ Draws a cubic bezier curve on the canvas.
| y | number | Y-coordinate of the end point on the bezier curve. |
| y | number | Y-coordinate of the end point on the bezier curve. |
**Example**
**Example**
```html
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -256,6 +260,7 @@ Draws a quadratic curve on the canvas.
...
@@ -256,6 +260,7 @@ Draws a quadratic curve on the canvas.
| y | number | Y-coordinate of the end point on the bezier curve. |
| y | number | Y-coordinate of the end point on the bezier curve. |
**Example**
**Example**
```html
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -298,6 +303,7 @@ Draws an arc on the canvas.
...
@@ -298,6 +303,7 @@ Draws an arc on the canvas.
| anticlockwise | boolean | Whether to draw the arc counterclockwise. |
| anticlockwise | boolean | Whether to draw the arc counterclockwise. |
**Example**
**Example**
```html
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -338,6 +344,7 @@ Draws an arc based on the radius and points on the arc.
...
@@ -338,6 +344,7 @@ Draws an arc based on the radius and points on the arc.
| radius | number | Radius of the arc. |
| radius | number | Radius of the arc. |
**Example**
**Example**
```html
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -381,6 +388,7 @@ Draws an ellipse in the specified rectangular region.
...
@@ -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**. |
| 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> |
| 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> |
| 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> |
| 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> |
| 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> |
| 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. |
| 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.|
| 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.<br/>For details about **SwipeEvent**, see Table 4. | No<br>Bubbling is supported since API version 9.|
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| drag<sup>7+</sup> | DragEvent | Triggered when dragging is in progress. | No | No |
| dragend<sup>7+</sup> | DragEvent | Triggered when dragging is ended. | 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 |
| 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 |
| 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 |
| 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 |
| drop<sup>7+</sup> | DragEvent | Triggered when the dragged component is dropped on a drop target. | No | No |
> **NOTE**<br>
> **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.
> 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
**Table 1** BaseEvent
...
@@ -133,12 +135,13 @@ Sets the data associated with the specified key. If there is no data associated
...
@@ -133,12 +135,13 @@ Sets the data associated with the specified key. If there is no data associated
**Parameters**
**Parameters**
| Name | Type | Mandatory | Name |
| Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ------- |
| ----- | ------ | ---- | ------- |
| key | string | Yes | Data key. |
| key | string | Yes | Data key. |
| value | object | Yes | Data to be stored.|
| value | object | Yes | Data to be stored.|
**Return value**
**Return value**
| Type | Description |
| Type | Description |
| ------- | ------------------------ |
| ------- | ------------------------ |
| boolean | Operation result. The value **true** means that the operation is successful, and **false** means otherwise.|
| 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
...
@@ -166,11 +169,12 @@ Obtains the data associated with the specified key. If no data is associated wit
**Parameters**
**Parameters**
| Name | Type | Mandatory | Name |
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ----- |
| ---- | ------ | ---- | ----- |
| key | string | Yes | Data key.|
| key | string | Yes | Data key.|
**Return value**
**Return value**
| Type | Description |
| Type | Description |
| ------ | ------ |
| ------ | ------ |
| object | Obtained data.|
| object | Obtained data.|
...
@@ -197,11 +201,12 @@ If the key is null, all data will be deleted.
...
@@ -197,11 +201,12 @@ If the key is null, all data will be deleted.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Name |
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ----- |
| ---- | ------ | ---- | ----- |
| key | string | No | Data key.|
| key | string | No | Data key.|
**Return value**
**Return value**
| Type | Description |
| Type | Description |
| ------- | ------------------------ |
| ------- | ------------------------ |
| boolean | Operation result. The value **true** means that the operation is successful, and **false** means otherwise.|
| 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.
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.
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 */
| width | \<length> \|\<percentage> | - | Component width.<br>If this attribute is not set, the width required for the element content is used.<br> |
| width | <length>\|<percentage> | - | Component width.<br>If this attribute is not set, the width required for the element content is used.<br> |
| height | \<length> \|\<percentage> | - | Component height.<br>If this attribute is not set, the height required for the element content is used.<br> |
| height | <length>\|<percentage> | - | Component height.<br>If this attribute is not set, the height required for the element content is used.<br> |
| max-width<sup>5+</sup> | \<length> \|\<percentage><sup>6+</sup> | - | Maximum component width, which has no restriction by default. |
| max-width<sup>5+</sup> | <length>\|<percentage><sup>6+</sup> | - | Maximum component width, which has no restriction by default. |
| max-height<sup>5+</sup> | \<length> \|\<percentage><sup>6+</sup> | - | Maximum component height, which has no restriction by default. |
| max-height<sup>5+</sup> | <length>\|<percentage><sup>6+</sup> | - | Maximum component height, which has no restriction by default. |
| padding | \<length> \|\<percentage><sup>5+</sup> | 0 | Shorthand attribute to set the padding for all sides in a declaration.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| padding | <length>\|<percentage><sup>5+</sup> | 0 | Shorthand attribute to set the padding for all sides in a declaration.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| padding-[left\| top \| right \| bottom] | <length>\|<percentage><sup>5+</sup> | 0 | Left, top, right, and bottom padding. |
| padding-[start\|end] | \<length> \|\<percentage><sup>5+</sup> | 0 | Start and end padding. |
| padding-[start\| end] | <length>\|<percentage><sup>5+</sup> | 0 | Start and end padding. |
| margin | \<length> \|\<percentage><sup>5+</sup> | 0 | Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| margin | <length>\|<percentage><sup>5+</sup> | 0 | Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| margin-[left\| top \| right \| bottom] | <length>\|<percentage><sup>5+</sup> | 0 | Left, top, right, and bottom margins. |
| margin-[start\|end] | \<length> \|\<percentage><sup>5+</sup> | 0 | Start and end margins. |
| margin-[start\| end] | <length>\|<percentage><sup>5+</sup> | 0 | Start and end margins. |
| border | - | 0 | Shorthand attribute to set all borders. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.|
| border | - | 0 | Shorthand attribute to set all borders. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.|
| border-style | string | solid | Shorthand attribute to set the style for all borders. Available values are as follows:<br>- **dotted**: dotted border. The radius of a dot is half of **border-width**.<br>- **dashed**: dashed border.<br>- **solid**: solid border.|
| border-style | string | solid | Shorthand attribute to set the style for all borders. Available values are as follows:<br>- **dotted**: dotted border. The radius of a dot is half of **border-width**.<br>- **dashed**: dashed border.<br>- **solid**: solid border.|
| border-[left\|top\|right\|bottom]-style | string | solid | Styles of the left, top, right, and bottom borders. The available values are **dotted**, **dashed**, and **solid**.|
| border-[left\|top\|right\|bottom]-style | string | solid | Styles of the left, top, right, and bottom borders. The available values are **dotted**, **dashed**, and **solid**.|
| border-[left\|top\|right\|bottom] | - | - | Shorthand attribute to set the borders for every side respectively. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.|
| border-[left\| top \| right \| bottom] | - | - | Shorthand attribute to set the borders for every side respectively. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.|
| border-width | \<length> | 0 | Shorthand attribute to set the width for all borders, or separately set the width for each border. |
| border-width | <length> | 0 | Shorthand attribute to set the width for all borders, or separately set the width for each border. |
| border-[left\|top\|right\|bottom]-width | \<length> | 0 | Attribute to set widths of left, top, right, and bottom borders. |
| border-[left\| top \| right \| bottom]-width | <length> | 0 | Attribute to set widths of left, top, right, and bottom borders. |
| border-color | \<color> | black | Shorthand attribute to set the color for all borders, or separately set the color for each border. |
| border-color | <color> | black | Shorthand attribute to set the color for all borders, or separately set the color for each border. |
| border-[left\|top\|right\|bottom]-color | \<color> | black | Attribute to set colors for left, top, right, and bottom borders. |
| border-[left\| top \| right \| bottom]-color | <color> | black | Attribute to set colors for left, top, right, and bottom borders. |
| border-radius | \<length> | - | Attribute to set the radius for round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set **border-width**, **border-color**, or **border-style** for all the borders at the same time.<br>In the four-value syntax, the values apply to lower-left corner, lower-right corner, upper-left corner, and upper-right corner, respectively.|
| border-radius | <length> | - | Attribute to set the radius for round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set **border-width**, **border-color**, or **border-style** for all the borders at the same time.|
| border-[top\|bottom]-[left\|right]-radius | \<length> | - | Attribute to respectively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners |
| border-[top\| bottom]-[left \| right]-radius | <length> | - | Attribute to respectively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners |
| background | \<linear-gradient> | - | Background. This attribute supports [gradient styles](../arkui-js/js-components-common-gradient.md) only and is not compatible with **background-color** or **background-image**.|
| background | <linear-gradient> | - | Background. This attribute supports [gradient styles](../arkui-js/js-components-common-gradient.md) only and is not compatible with **background-color** or **background-image**.|
| background-image | string | - | Background image. Both online and local image resources are supported. Currently, this attribute is not compatible with **background-color** or **background**.<br>Example:<br>- background-image: url("/common/background.png")<br>The SVG format is not supported.|
| background-image | string | - | Background image. Both online and local image resources are supported. Currently, this attribute is not compatible with **background-color** or **background**.<br>Example:<br>- background-image: url("/common/background.png")<br>The SVG format is not supported.|
| background-size | - string<br>- \<length> \<length><br>- \<percentage> \<percentage> | auto | Background image size.<br>- The **string** values are as follows:<br> - **contain**: Expands the image to the maximum size so that its height and width are fully applicable to the content area.<br> - **cover**: Extends the background image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.<br> - **auto**: Retains the original aspect ratio of the image.<br>- The two **<length>** values are as follows:<br> Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.<br>- The two **<percentage>** values are as follows:<br> Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.|
| background-size | - string<br>- <length><length><br>- <percentage><percentage> | auto | Background image size.<br>- The **string** values are as follows:<br> - **contain**: Expands the image to the maximum size so that its height and width are fully applicable to the content area.<br> - **cover**: Extends the background image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.<br> - **auto**: Retains the original aspect ratio of the image.<br>- The two **<length>** values are as follows:<br> Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.<br>- The two **<percentage>** values are as follows:<br> Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.|
| background-repeat | string | repeat | How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.<br>- **repeat**: The image is repeated along the x-axis and y-axis at the same time.<br>- **repeat-x**: The image is repeated along the x-axis.<br>- **repeat-y**: The image is repeated along the y-axis.<br>- **no-repeat**: The image is not repeated.|
| background-repeat | string | repeat | How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.<br>- **repeat**: The image is repeated along the x-axis and y-axis at the same time.<br>- **repeat-x**: The image is repeated along the x-axis.<br>- **repeat-y**: The image is repeated along the y-axis.<br>- **no-repeat**: The image is not repeated.|
| background-position | - string string<br>- \<length> \<length><br>- \<percentage> \<percentage> | 0px 0px | - Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.<br> - **left**: leftmost in the horizontal direction.<br> - **right**: rightmost in the horizontal direction.<br> - **top**: top in the vertical direction.<br> - **bottom**: bottom in the vertical direction.<br> - **center**: center position.<br>- Using **<length>**: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0 0**. The unit is pixel. If only one value is specified, the other one is **50%**.<br>- Using **\<percentage>**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.<br>- Using both **\<percentage>** and **\<length>**. |
| background-position | - string string<br>- <length><length><br>- <percentage><percentage> | 0px 0px | - Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.<br> - **left**: leftmost in the horizontal direction.<br> - **right**: rightmost in the horizontal direction.<br> - **top**: top in the vertical direction.<br> - **bottom**: bottom in the vertical direction.<br> - **center**: center position.<br>- Using **\<length>**: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0 0**. The unit is pixel. If only one value is specified, the other one is **50%**.<br>- Using **\<percentage>**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.<br>- Using both **\<percentage>** and **\<length>**. |
| box-shadow<sup>5+</sup> | string | 0 | Syntax: **box-shadow: h-shadow v-shadow blur spread color**<br>Shadow style of the current component. The value includes the horizontal position (mandatory), vertical position (mandatory), fuzzy radius (optional, default value: **0**), extension distance (optional, default value: **0**), and color (optional, default value: **black**) of the shadow.<br>Example:<br>- box-shadow :10px 20px 5px 10px \#888888<br>- box-shadow :100px 100px 30px red<br>- box-shadow :-100px -100px 0px 40px |
| box-shadow<sup>5+</sup> | string | 0 | Syntax: **box-shadow: h-shadow v-shadow blur spread color**<br>Shadow style of the current component. The value includes the horizontal position (mandatory), vertical position (mandatory), fuzzy radius (optional, default value: **0**), extension distance (optional, default value: **0**), and color (optional, default value: **black**) of the shadow.<br>Example:<br>- box-shadow :10px 20px 5px 10px \#888888<br>- box-shadow :100px 100px 30px red<br>- box-shadow :-100px -100px 0px 40px |
| filter<sup>5+</sup> | string | - | Syntax: **filter: blur(px)**<br>Radius of the blur area within the component layout. If this style is not set, the default value **0** (no blur) is used. Percentage values are not supported.<br>Example:<br>- filter: blur(10px) |
| filter<sup>5+</sup> | string | - | Syntax: **filter: blur(px)**<br>Radius of the blur area within the component layout. If this style is not set, the default value **0** (no blur) is used. Percentage values are not supported.<br>Example:<br>- filter: blur(10px) |
| backdrop-filter<sup>5+</sup> | string | - | Syntax: **backdrop-filter: blur(px)**<br>Radius of the background blur area within the component layout. If this style is not set, the default value **0** (no blur) is used. Percentage values are not supported.<br>Example:<br>- backdrop-filter: blur(10px) |
| backdrop-filter<sup>5+</sup> | string | - | Syntax: **backdrop-filter: blur(px)**<br>Radius of the background blur area within the component layout. If this style is not set, the default value **0** (no blur) is used. Percentage values are not supported.<br>Example:<br>- backdrop-filter: blur(10px) |
...
@@ -47,22 +47,22 @@ You can set universal styles for components in the **style** attribute or **.css
...
@@ -47,22 +47,22 @@ You can set universal styles for components in the **style** attribute or **.css
| flex | number \| string | - | How to divide available space of the parent component for each child component.<br>You can set one, two<sup>5+</sup>, or three<sup>5+</sup> values for this style.<br>Set one value in either of the following ways:<br>- A unitless number to set **flex-grow**.<br>- A valid width value<sup>5+</sup> to set **flex-basis**.<br>Set two values<sup>5+</sup> in the following ways:<br>The first value must be a unitless number used to set **flex-grow**. The second value must be either of the following:<br>- A unitless number to set **flex-shrink**.<br>- A valid width value to set **flex-basis**.<br>Set three values<sup>5+</sup> in the following ways:<br>The first value must be a unitless number used to set **flex-grow**. The second value must be a unitless number used to set **flex-shrink**. The third value must be a valid width value used to set **flex-basis**.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
| flex | number \| string | - | How to divide available space of the parent component for each child component.<br>You can set one, two<sup>5+</sup>, or three<sup>5+</sup> values for this style.<br>Set one value in either of the following ways:<br>- A unitless number to set **flex-grow**.<br>- A valid width value<sup>5+</sup> to set **flex-basis**.<br>Set two values<sup>5+</sup> in the following ways:<br>The first value must be a unitless number used to set **flex-grow**. The second value must be either of the following:<br>- A unitless number to set **flex-shrink**.<br>- A valid width value to set **flex-basis**.<br>Set three values<sup>5+</sup> in the following ways:<br>The first value must be a unitless number used to set **flex-grow**. The second value must be a unitless number used to set **flex-shrink**. The third value must be a valid width value used to set **flex-basis**.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
| flex-grow | number | 0 | How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value **0** indicates that the child component does not grow.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
| flex-grow | number | 0 | How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value **0** indicates that the child component does not grow.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
| flex-shrink | number | 1 | How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value **0** indicates that the child component does not shrink.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
| flex-shrink | number | 1 | How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value **0** indicates that the child component does not shrink.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
| flex-basis | \<length> | - | Initial length of the flex item on the main axis.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
| flex-basis | <length> | - | Initial length of the flex item on the main axis.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
| align-self<sup>6+</sup> | string | - | Alignment mode on the cross axis of the parent element. This style overwrites the align-items style of the parent element. The align-items style is used only in the div and list styles of the parent container. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction.<br>- **flex-start**: Items are aligned to the start of the cross axis.<br>- **flex-end**: Items are aligned to the end of the cross axis.<br>- **center**: Items are aligned in the center of the cross axis.<br>- **baseline**: Items are aligned on the peracross axis.|
| align-self<sup>6+</sup> | string | - | Alignment mode on the cross axis of the parent element. This style overwrites the align-items style of the parent element. The align-items style is used only in the div and list styles of the parent container. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction.<br>- **flex-start**: Items are aligned to the start of the cross axis.<br>- **flex-end**: Items are aligned to the end of the cross axis.<br>- **center**: Items are aligned in the center of the cross axis.<br>- **baseline**: Items are aligned on the peracross axis.|
| position | string | relative | Positioning type of an element. Dynamic changes are not supported.<br>- **fixed**: The element is positioned related to the browser window.<br>- **absolute**: The element is positioned absolutely to its parent element. The setting takes effect only when the parent component is **\<div>** or **\<stack>**.<br>- **relative**: The element is positioned relative to its normal position.|
| position | string | relative | Positioning type of an element. Dynamic changes are not supported.<br>- **fixed**: The element is positioned related to the browser window.<br>- **absolute**: The element is positioned absolutely to its parent element. The setting takes effect only when the parent component is **\<div>** or **\<stack>**.<br>- **relative**: The element is positioned relative to its normal position.|
| [left\|top\|right\|bottom] | \<length> \|\<percentage><sup>6+</sup> | - | **left | top | right | bottom** must be used together with **position** to determine the offset of an element.<br/>- The **left** attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br/>- The **top** attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.<br/>- The **right** attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.<br/>- The **bottom** attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element. |
| [left\| top \| right \| bottom] | <length>\|<percentage><sup>6+</sup> | - | **left | top | right | bottom** must be used together with **position** to determine the offset of an element.<br/>- The **left** attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br/>- The **top** attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.<br/>- The **right** attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.<br/>- The **bottom** attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element. |
| [start \| end]<sup>6+</sup> | \<length> \|\<percentage> | - | **start | end** must be used together with **position** to determine the offset of an element.<br/>- The **start** attribute specifies the start edge position of the element. This attribute defines the offset between the start edge of a positioned element and that of a block included in the element.<br/>- The **end** attribute specifies the end edge position of the element. This attribute defines the offset between the end edge of a positioned element and that of a block included in the element. |
| [start \| end]<sup>6+</sup> | <length>\|<percentage> | - | **start | end** must be used together with **position** to determine the offset of an element.<br/>- The **start** attribute specifies the start edge position of the element. This attribute defines the offset between the start edge of a positioned element and that of a block included in the element.<br/>- The **end** attribute specifies the end edge position of the element. This attribute defines the offset between the end edge of a positioned element and that of a block included in the element. |
| z-index<sup>6+</sup> | number | - | Rendering sequence of child nodes under the same parent node. A child node with a larger value will be rendered later.<br>z-index does not support auto, and other styles such as opacity do not affect the rendering sequence of z-index.|
| z-index<sup>6+</sup> | number | - | Rendering sequence of child nodes under the same parent node. A child node with a larger value will be rendered later.<br>z-index does not support auto, and other styles such as opacity do not affect the rendering sequence of z-index.|
| image-fill<sup>6+</sup> | \<color> | - | Fill color for SVG images. The following components are supported: **button** (icon attribute), **piece** (icon attribute), **search** (icon attribute), **input** (headericon attribute), **textarea** (headericon attribute), **image** (src attribute), and **toolbar-item** (icon attribute)<br>The **fill** color value in the SVG image file is replaced with the value of **image-fill** during rendering, and is valid only for the fill attribute that is declared in the SVG image.|
| image-fill<sup>6+</sup> | <color> | - | Fill color for SVG images. The following components are supported: **button** (icon attribute), **piece** (icon attribute), **search** (icon attribute), **input** (headericon attribute), **textarea** (headericon attribute), **image** (src attribute), and **toolbar-item** (icon attribute)<br>The **fill** color value in the SVG image file is replaced with the value of **image-fill** during rendering, and is valid only for the fill attribute that is declared in the SVG image.|
| clip-path<sup>6+</sup> | [ \<geometry-box> \|\|\<basic-shape> ] \| none | - | Clip area of a component. Only the content within this area is displayed.<br>**\<geometry-box>**: applicable scope of the clip area's width and height. The default value is **border-box**. Available values are as follows:<br>- **margin-box**: The width and height includes the margin.<br>- **border-box**: The width and height includes the border.<br>- **padding-box**: The width and height includes the padding.<br>- **content-box**: The width and height does not include any margin, border, or padding.<br>- **\<basic-shape>**: shape of the clip area. Available values include:<br>- **inset**, in the format of inset( \<percentage>{1,4} [ round \<'border-radius'> ]? ).<br>- **circle**, in the format of circle( [ \<percentage> ]? [ at \<percentage> \<percentage> ]? ).<br>- **ellipse**, in the format of ellipse( [ \<percentage>{2} ]? [ at \<percentage> \<percentage> ]? ).<br>- **polygon**, in the format of polygon( [ \<percentage> \<percentage> ]\# ).<br>- **path**, in the format of path( \<string> ).|
| clip-path<sup>6+</sup> | [ <geometry-box>\|<basic-shape> ] \| none | - | Clip area of a component. Only the content within this area is displayed.<br>**<geometry-box>**: applicable scope of the clip area's width and height. The default value is **border-box**. Available values are as follows:<br>- **margin-box**: The width and height includes the margin.<br>- **border-box**: The width and height includes the border.<br>- **padding-box**: The width and height includes the padding.<br>- **content-box**: The width and height does not include any margin, border, or padding.<br>**<basic-shape>**: shape of the clip area. Available values include:<br>- **inset**, in the format of inset( \<percentage>{1,4} [ round \<'border-radius'> ]? ).<br>- **circle**, in the format of circle( [ \<percentage> ]? [ at <percentage><percentage> ]? ).<br>- **ellipse**, in the format of ellipse( [ \<percentage>{2} ]? [ at <percentage><percentage> ]? ).<br>- **polygon**, in the format of polygon( [ \<percentage> \<percentage> ]\# ).<br>- **path**, in the format of path( \<string> ).|
| mask-image<sup>6+</sup> | - \<linear-gradient><br>- string | - | Image used for the mask of a component:<br>Gradient color mask, for example:<br>linear-gradient(to left, black, white)<br>Solid color mask, for example:<br>linear-gradient(to right, grey , grey)<br>Mask filled by a local SVG image, for example, **url(common/mask.svg)**|
| mask-image<sup>6+</sup> | - <linear-gradient><br>- string | - | Image used for the mask of a component:<br>Gradient color mask, for example:<br>linear-gradient(to left, black, white)<br>Solid color mask, for example:<br>linear-gradient(to right, grey , grey)<br>Mask filled by a local SVG image, for example, **url(common/mask.svg)**|
| mask-size<sup>6+</sup> | - string<br>- \<length>\<length><br>- \<percentage> \<percentage> | auto | Display size of the mask image. The setting is valid only when **mask-image** is set to an image source.<br>The **string** values are as follows:<br>- **contain**: Expands the image to the maximum size so that its height and width are fully applicable to the content area.<br>- **cover**: Extends the image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.<br>- **auto**: Retains the original aspect ratio of the image.<br>The two **<length>** values are as follows: The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.<br>The two **<percentage>** values indicate the image size in relative to the original image size. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.|
| mask-size<sup>6+</sup> | - string<br>- <length><length><br>- <percentage><percentage> | auto | Display size of the mask image. The setting is valid only when **mask-image** is set to an image source.<br>The **string** values are as follows:<br>- **contain**: Expands the image to the maximum size so that its height and width are fully applicable to the content area.<br>- **cover**: Extends the image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.<br>- **auto**: Retains the original aspect ratio of the image.<br>The two **\<length>** values are as follows: The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.<br>The two **\<percentage>** values indicate the image size in relative to the original image size. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default. |
| mask-position<sup>6+</sup> | - string string<br>- \<length> \<length><br>- \<percentage> \<percentage> | 0px 0px | Display position of the mask image. The setting is valid only when **mask-image** is set to an image source. Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.<br>The **string** values are as follows:<br>- **left**: leftmost in the horizontal direction.<br>- **right**: rightmost in the horizontal direction.<br>- **top**: top in the vertical direction.<br>- **bottom**: bottom in the vertical direction.<br>- **center**: center position.<br>Using **\<length>**: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0 0**. The unit is pixel. If only one value is specified, the other one is **50%**.<br>Using **\<percentage>**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.<br>Using both **\<percentage>** and **\<length>**.|
| mask-position<sup>6+</sup> | - string string<br>- <length><length><br>- <percentage><percentage> | 0px 0px | Display position of the mask image. The setting is valid only when **mask-image** is set to an image source. Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.<br>The **string** values are as follows:<br>- **left**: leftmost in the horizontal direction.<br>- **right**: rightmost in the horizontal direction.<br>- **top**: top in the vertical direction.<br>- **bottom**: bottom in the vertical direction.<br>- **center**: center position.<br>Using **\<length>**: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0 0**. The unit is pixel. If only one value is specified, the other one is **50%**.<br>Using **\<percentage>**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.<br>Using both **\<percentage>** and **\<length>**. |
| border-image-source<sup>7+</sup> | string | - | Border image of the specified element.<br>Example:<br>border-image-source: url("/common/images/border.png") |
| border-image-source<sup>7+</sup> | string | - | Border image of the specified element.<br>Example:<br>border-image-source: url("/common/images/border.png") |
| border-image-slice<sup>7+</sup> | \<length> \|\<percentage> | 0 | Padding of the image.<br>The attribute can have one to four values:<br>If you set only one value, it specifies the padding for four sides.<br>If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| border-image-slice<sup>7+</sup> | <length>\|<percentage> | 0 | Padding of the image.<br>The attribute can have one to four values:<br>If you set only one value, it specifies the padding for four sides.<br>If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| border-image-width<sup>7+</sup> | \<length> \|\<percentage> | 0 | Width of the border image.<br>If you set only one value, it specifies the width for four sides.<br>If you set two values, the first value specifies the top and bottom width, and the second value specifies the left and right width.<br>If you set three values, the first value specifies the top width, the second value specifies the left and right width, and the third value specifies the bottom width.<br>If you set four values, they respectively specify the width for top, right, bottom, and left sides (in clockwise order).|
| border-image-width<sup>7+</sup> | <length>\|<percentage> | 0 | Width of the border image.<br>If you set only one value, it specifies the width for four sides.<br>If you set two values, the first value specifies the top and bottom width, and the second value specifies the left and right width.<br>If you set three values, the first value specifies the top width, the second value specifies the left and right width, and the third value specifies the bottom width.<br>If you set four values, they respectively specify the width for top, right, bottom, and left sides (in clockwise order).|
| border-image-outset<sup>7+</sup> | \<length> \|\<percentage> | 0 | How far the border image can extend beyond the border box.<br>If you set only one value, it specifies the distance of the boarder image beyond the border on four sides.<br>If you set two values, the first value specifies the distance of the boarder image's top and bottom sides beyond the boarder, and the second value specifies the distance of the boarder image's left and right sides beyond the boarder.<br>If you set three values, the first value specifies the distance of the boarder image's top side beyond the boarder, the second value specifies the distance of the boarder image's left and right sides beyond the boarder, and the third value specifies the distance of the boarder image's bottom side beyond the boarder.<br>If you set four values, they respectively specify the distance of the boarder image's top, right, bottom, and left sides beyond the boarder (in clockwise order).|
| border-image-outset<sup>7+</sup> | <length>\|<percentage> | 0 | How far the border image can extend beyond the border box.<br>If you set only one value, it specifies the distance of the boarder image beyond the border on four sides.<br>If you set two values, the first value specifies the distance of the boarder image's top and bottom sides beyond the boarder, and the second value specifies the distance of the boarder image's left and right sides beyond the boarder.<br>If you set three values, the first value specifies the distance of the boarder image's top side beyond the boarder, the second value specifies the distance of the boarder image's left and right sides beyond the boarder, and the third value specifies the distance of the boarder image's bottom side beyond the boarder.<br>If you set four values, they respectively specify the distance of the boarder image's top, right, bottom, and left sides beyond the boarder (in clockwise order).|
| border-image-repeat<sup>7+</sup> | string | stretch | How the border image fills the border box.<br>**stretch**: stretches the image to fill the border box.<br>**repeat**: tiles the image to fill the border box.<br>**round**: tiles the image to fill the border box. When the image cannot be tiled for an integer number of times, it can be scaled based on the site requirements.<br>|
| border-image-repeat<sup>7+</sup> | string | stretch | How the border image fills the border box.<br>**stretch**: stretches the image to fill the border box.<br>**repeat**: tiles the image to fill the border box.<br>**round**: tiles the image to fill the border box. When the image cannot be tiled for an integer number of times, it can be scaled based on the site requirements.|
| border-image<sup>7+</sup> | string | - | Shorthand attribute. The options are as follows:<br>- Attributes of the image border. The parameters include **border-image-source**, **border-image-slice**, **border-image-width**, **border-image-outset**, and **border-image-repeat**, respectively meaning the padding, width of the border image, how far the border image can extend beyond the border box, and how the border image fills the border box. The default values are used if the parameters are not set.<br>- Gradient color border.<br> Example:<br> border-image: linear-gradient(red, yellow) 10px |
| border-image<sup>7+</sup> | string | - | Shorthand attribute. The options are as follows:<br>- Attributes of the image border. The parameters include **border-image-source**, **border-image-slice**, **border-image-width**, **border-image-outset**, and **border-image-repeat**, respectively meaning the padding, width of the border image, how far the border image can extend beyond the border box, and how the border image fills the border box. The default values are used if the parameters are not set.<br>- Gradient color border.<br> Example:<br> border-image: linear-gradient(red, yellow) 10px |
| box-sizing<sup>9+</sup> | string | border-box | Border type of the component.<br>**content-box**: standard box. Its width and height contain only the width and height of the content, and does not include the border and padding.<br>**border-box**: The width and height include the content, border, and padding, that is, the actual width of the component content area = width - (border + padding).|
| box-sizing<sup>9+</sup> | string | border-box | Border type of the component.<br>**content-box**: standard box. Its width and height contain only the width and height of the content, and does not include the border and padding.<br>**border-box**: The width and height include the content, border, and padding, that is, the actual width of the component content area = width - (border + padding).|
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
## Available APIs
...
@@ -20,46 +20,46 @@ import WorkSchedulerExtensionAbility from '@ohos.WorkSchedulerExtensionAbility';
...
@@ -20,46 +20,46 @@ import WorkSchedulerExtensionAbility from '@ohos.WorkSchedulerExtensionAbility';
startWork(work: WorkInfo): boolean; | Starts a Work Scheduler task.
startWork(work: WorkInfo): boolean | Starts a Work Scheduler task.
stopWork(work: WorkInfo, needCancel?: boolean): boolean; | Stops 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, 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.
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(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.
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.
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, 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): 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
**Table 2** WorkInfo parameters
> **NOTE**
> **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).
