Notification.subscribe(subscriber,(err,data)=>{// This API uses an asynchronous callback to return the result.
Notification.subscribe(subscriber,(err)=>{// This API uses an asynchronous callback to return the result.
if(err.code){
console.error('===>failed to subscribe because '+JSON.stringify(err));
return;
...
...
@@ -133,19 +133,7 @@ var subscriber = {
##### Enabling Notification
Before publishing a notification, check whether the notification feature is enabled for your application. By default, the feature is disabled. The application calls **Notification.requestEnableNotification** to prompt the user to enable the feature.
console.error('===>requestEnableNotification failed because '+JSON.stringify(err));
});
```
##### Publishing Notifications
Before publishing a notification, check whether the notification feature is enabled for your application. By default, the feature is disabled. You can enabled it in notification settings.
To publish a notification, create a **NotificationRequest** object and set attributes such as the notification type, title, and content. In the following examples, a normal text notification and a notification containing a **WantAgent** are being published.
| duration | number | No | Duration that the toast will remain on the screen. The default value is 1500 ms. The value range is 1500 ms to 10000 ms. If a value less than 1500 ms is set, the default value is used. If the value greater than 10000 ms is set, the upper limit 10000 ms is used.|
| bottom | string\| number | No | Distance between the toast border and the bottom of the screen. |
| bottom | string\| number | No | Distance between the toast border and the bottom of the screen. |
| buttons | Array | No | Array of buttons in the dialog box. The array structure is **{text:'button', color: '\#666666'}**. Up to three buttons are supported. The first button is of the **positiveButton** type, the second is of the **negativeButton** type, and the third is of the **neutralButton** type.|
## ShowDialogSuccessResponse
...
...
@@ -170,7 +176,6 @@ Shows an action menu. This API uses a callback to return the result asynchronous
| callback | AsyncCallback<[ActionMenuSuccessResponse](#actionmenusuccessresponse)> | Yes | Callback used to return the action menu response result.|
| title | string| No | Title of the text to display. |
| buttons | Array<[Button](#button)> | Yes | Array of menu item buttons. The array structure is **{text:'button', color: '\#666666'}**. Up to six buttons are supported. If there are more than six buttons, extra buttons will not be displayed.|
| title | string| No | Title of the text to display. |
| buttons | Array<[Button](#button)>| Yes | Array of menu item buttons. The array structure is **{text:'button', color: '\#666666'}**. Up to six buttons are supported. If there are more than six buttons, extra buttons will not be displayed.|
## ActionMenuSuccessResponse
...
...
@@ -267,5 +276,5 @@ Describes the menu item button in the action menu.
| width | number | - | Width set for the component during playback of the animation. |
| height | number | - | Height set for the component during playback of the animation. |
| height | number | - | Height set for the component during playback of the animation. |
| backgroundColor | \<color> | none | Background color set for the component during playback of the animation. |
| opacity | number | 1 | Opacity set for the component. The value ranges from **0** to **1**. |
| opacity | number | 1 | Opacity set for the component. The value ranges from **0** to **1**. |
| backgroundPosition | string | - | The value format is **x y**, in percentage or pixels.<br>The first value indicates the horizontal position, and the second value indicates the vertical position.<br>If only one value is specified, the other value is **50%** by default. |
| transformOrigin | string | 'center center' | Origin position of the transformed element.<br>The first value indicates the x-axis position. The value can be **left**, **center**, **right**, a length, or a percentage.<br>The second value indicates the y-axis position. The value can be **top**, **center**, **bottom**, a length, or a percentage. |
| transform | [Transform](js-components-common-animation.md) | - | Transformation type set for a transformed element. |
| offset | number | - | The value of **offset** must be within (0.0,1.0] and sorted in ascending order if it is provided.<br>If there are only two frames, **offset** can be left empty.<br>If there are more than two frames, **offset** is mandatory. |
| duration | number | 0 | Duration for playing the animation, in milliseconds. |
| easing | string | linear | Time curve of the animation. For details about the supported types, see Available values of the easing attribute. |
| easing | string | linear | Time curve of the animation. For details about the supported types, see **Available values of the easing attribute**. |
| delay | number | 0 | Delay for the animation start. The default value indicates no delay. |
| iterations | number \| string | 1 | Number of times the animation will be played. **number** indicates a fixed number of playback operations, and **Infinity** indicates an unlimited number of playback operations. |
| iterations | number \| string | 1 | Number of times the animation will be played. **number** indicates a fixed number of playback operations, and **Infinity** indicates an unlimited number of playback operations. |
| direction<sup>6+</sup> | string | normal | Mode of playing the animation. <br>- **normal**: Plays the animation in forward loop mode. <br>- **reverse**: Plays the animation in reverse loop mode. <br>- **alternate**: Plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in backward direction. <br>- **alternate-reverse**: Plays the animation in reverse-alternating loop mode. When the animation is played for an odd number of times, the playback is in backward direction. When the animation is played for an even number of times, the playback is in forward direction. |
| fill | string | none | Start and end styles of the animation. <br>- **none**: No style is applied to the target before or after the animation is executed. <br>- **forwards**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed. <br>- **backwards**<sup>6+</sup>: The animation uses the value defined in the first key frame during the **animation-delay**. When **animation-direction** is set to **normal** or **alternate**, the value in the **from** key frame is used. When **animation-direction** is set to **reverse** or **alternate-reverse**, the value in the **to** key frame is used. <br>- **both**<sup>6+</sup>: The animation follows the **forwards** and **backwards** rules. |
| fill | string | none | Start and end styles of the animation. <br>- **none**: No style is applied to the target before or after the animation is executed. <br>- **forwards**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed. <br>- **backwards**<sup>6+</sup>: The animation uses the value defined in the first key frame during the **animation-delay**. When **animation-direction** is set to **normal** or **alternate**, the value in the **from** key frame is used. When **animation-direction** is set to **reverse** or **alternate-reverse**, the value in the **to** key frame is used. <br>- **both**<sup>6+</sup>: The animation follows the **forwards** and **backwards** rules. |
**Table 4** Available values of the easing attribute
| cubic-bezier(x1, y1, x2, y2) | You can customize an animation speed curve in the **cubic-bezier()** function. The x and y values of each input parameter must be between 0 and 1. |
| steps(number, step-position)<sup>6+</sup> | Step curve.<br>The **number** must be set and only an integer is supported.<br>**step-position** is optional. It can be set to **start** or **end**. The default value is **end**. |
| finished | boolean | Read-only attribute, which indicates whether the animation playback is complete. |
| pending | boolean | Read-only attribute, which indicates whether the animation is waiting for the completion of other asynchronous operations (for example, start an animation with a delay). |
| playState | string | Read-write attribute, which indicates the playback status of the animation: <br>- **idle**: The animation is not running (playback ended or not started). <br>- **running**: The animation is running. <br>- **paused**: The animation is paused. <br>- **finished**: Animation playback ends. |
| startTime | number | Read-write attribute, which indicates the animation start time. This attribute is similar to **delay** in the **options** attribute. |
| observe | callback: function | Subscribes to events of the observed object. The callback method is called when the value is greater than or less than the threshold. |
| unobserve | - | Unsubscribes from events of the observed object. |
> Universal attributes are supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
>
> Universal styles are supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
You can set component appearance in the **style** attribute or **.css** files.
You can set universal styles for components in the **style** attribute or **.css** files.
...
...
@@ -40,6 +41,7 @@ You can set component appearance in the **style** attribute or **.css** files.
| box-shadow<sup>5+</sup> | string | 0 | Shadow style of the current component. The value consists of 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. 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 | - | Radius of the blur area within the component layout. If the radius is not set, the default value **0** (no blur area) is used. Percentage values are not supported.Syntax: **filter: blur(px)**<br>Example:<br>- filter: blur(10px) |
| backdrop-filter<sup>5+</sup> | string | - | Radius of the background blur area within the component layout. If the radius is not set, the default value **0** (no background blur) is used. Percentage values are not supported.Syntax: **backdrop-filter: blur(px)**<br>Example:<br>- backdrop-filter: blur(10px) |
| window-filter<sup>5+</sup> | string | - | Syntax: window-filter: blur(percent), style<sup>5+</sup><br>Blur degree and style for windows within the component layout. If this style is not set, the default value **0%** (no blur area) is used. Different blur degrees and styles for multiple blur areas are not supported. Available values of **style** are as follows: small_light (default value), medium_light, large_light, xlarge_light, small_dark, medium_dark, large_dark, xlarge_dark<br>Example:<br>- window-filter: blur(50%)<br>- window-filter: blur(10%), large_light |
| opacity | number | 1 | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
| display | string | flex | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout.<br>- **none**: The element is hidden. |
| visibility | string | visible | Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the **display** attribute to **none**.) Available values are as follows:<br>- **visible**: The element is visible.<br>- **hidden**: The element is hidden but still takes up space.NOTE:If both **visibility** and **display** are set, only **display** takes effect. |
...
...
@@ -64,5 +66,7 @@ You can set component appearance in the **style** attribute or **.css** files.
| 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>Syntax reference:<'border-image-source'>\|\|<'border-image-slice'> [ <'border-image-width'><br>- Gradient color border.<br>Example:<br>border-image: linear-gradient(red, yellow) 10px |
> **NOTE:** The above-mentioned common styles are not mandatory.
> **NOTE**
>
> The aforementioned universal styles are not mandatory.
| strokeDashOffset | number \| string | Offset of the start point for drawing the stroke.<br>Default value: **0**|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the stroke.<br>Default value: **LineCapStyle.Butt**|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Join style of the stroke.<br>Default value: **LineJoinStyle.Miter**|
| strokeMiterLimit | number \| string | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.<br>Default value: **4**<br>**NOTE**<br>This attribute does not take effect for the **\<Circle>** component, because it does not have a miter join.|
| strokeOpacity | number \| string \|[Resource](ts-types.md#resource)| Stroke opacity.<br>Default value: **1**<br>**NOTE**<br>The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.|
| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke. |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke. |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke. |
| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.<br>**NOTE**<br>This attribute does not take effect for the **\<Circle>** component, because it does not have a miter join. |
| strokeOpacity | number \| string \|[Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used. |
| $def | Object | Object that is exposed in the app.js file and obtained by `this.$app.$def`.<br/>> **NOTE**<br/>> Application objects do not support data binding. Data update should be triggered on the UI. |
You can use child components in the <svg> component to animate attributes over time.
You can use child components in the **\<svg>** component to animate attributes over time.
#### Attribute Style Animation
## Attribute Style Animation
In the [animate](../reference/arkui-js/js-components-svg-animate.md) child component of the <svg> component, set attributeName to the attribute you want to animate, set from to the animation start value, and set to to the animation end value.
In the [animate](../reference/arkui-js/js-components-svg-animate.md) child component of the **\<svg>** component, set **attributeName** to the attribute you want to animate, set **from** to the animation start value, and set **to** to the animation end value.
```
```html
<!-- xxx.hml -->
<divclass="container">
<svg>
...
...
@@ -32,16 +33,18 @@ In the [animate](../reference/arkui-js/js-components-svg-animate.md) child compo
> When values is also set, the from and to settings do not take effect.
> **NOTE**
>
> When values is also set, the **from** and **to** settings do not take effect.
#### Motion Path Animation
## Motion Path Animation
In the [animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md) child component of the <svg> component, set path to define a shape for the animation.
In the [animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md) child component of the **\<svg>** component, set path to define a shape for the animation.
```
```html
<!-- xxx.hml -->
<divclass="container">
<svgfill="white"width="800"height="900">
...
...
@@ -55,13 +58,14 @@ In the [animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md)
In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransform.md) child component of the <svg> component, set attributeName to bind the corresponding attribute to the transform attribute, and set type to the animation type, from to the start value, and to to the end value.
```
```html
<!-- xxx.hml -->
<divclass="container"style="">
<svg>
...
...
@@ -86,7 +90,8 @@ In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransfo
</div>
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -97,4 +102,4 @@ In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransfo
@@ -6,10 +6,9 @@ Set the transform attribute for component rotation, scaling, translation, and sk
## Designing Static Animation
Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower part of the rhombus with a rectangle to form a roof. Set the translate attribute of the rectangle to the coordinate (150px, -150px) to form a door, use the position attribute to translate the horizontal and vertical axes to the specified coordinates of the parent component (square), set the scale attribute to scale up the parent and child components together to determine the window size, and use the skewX attribute to skew the component and set the coordinate translate(200px,-830px) to form a chimney.
Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower part of the rhombus with a rectangle to form a roof. Set the **translate** attribute of the rectangle to the coordinate (150px, -150px) to form a door, use the **position** attribute to translate the horizontal and vertical axes to the specified coordinates of the parent component (square), set the **scale** attribute to scale up the parent and child components together to determine the window size, and use the **skewX** attribute to skew the component and set the coordinate translate(200px,-830px) to form a chimney.
```
```html
<!-- xxx.hml -->
<divclass="container">
<divclass="top"></div>
...
...
@@ -24,8 +23,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
</div>
```
```
```css
/* xxx.css */
.container{
width:100%;
...
...
@@ -41,8 +39,8 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
height:428px;
background-color:#860303;
transform:rotate(45deg);
margin-top: 230px;
margin-left: 266px;
margin-top:284px;
margin-left:148px;
}
.content{
margin-top:500px;
...
...
@@ -55,7 +53,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
width:100px;
height:150px;
background-color:#1033d9;
transform: translate(150px,-150px);
transform:translate(150px,-137px);
}
.window{
z-index:1;
...
...
@@ -88,7 +86,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
height:100px;
border-radius:15px;
background-color:#9a7404;
transform: translate(200px,-830px) skewX(-5deg);
transform:translate(200px,-710px)skewX(-5deg);
}
```
...
...
@@ -99,8 +97,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
Decrease the y-coordinate over a time frame to make the ball bounce back. Gradually decrease the bounce height until it drops to 0. An animation where the ball falls is hereby created.
```
```html
<!-- xxx.hml -->
<divclass="container">
<divclass="circle"></div>
...
...
@@ -108,8 +105,7 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua
</div>
```
```
```css
/* xxx.css */
.container{
width:100%;
...
...
@@ -178,10 +174,9 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua
## Designing Rotation Animation
Set the rotation center around an element in different transform-origin positions. Of the rotate3d values, the first three values are the rotation vectors of the x-axis, y-axis, and z-axis, respectively; the fourth value is the rotation angle, which can be a negative value to indicate that the rotation is performed counterclockwise.
Set the rotation center around an element in different transform-origin positions. Of the **rotate3d** values, the first three values are the rotation vectors of the x-axis, y-axis, and z-axis, respectively; the fourth value is the rotation angle, which can be a negative value to indicate that the rotation is performed counterclockwise.
```
```html
<!-- xxx.hml -->
<divclass="container">
<divclass="rotate">
...
...
@@ -200,8 +195,7 @@ Set the rotation center around an element in different transform-origin position
</div>
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -259,13 +253,13 @@ Set the rotation center around an element in different transform-origin position
.rect4{
width:100px;
height:100px;
animation: rotate3d1 17ms infinite;
animation:rotate3d11000msinfinite;
background:linear-gradient(#e6c4ec,#be15d9)
}
.rect5{
width:100px;
height:100px;
animation: rotate3d1 17ms infinite;
animation:rotate3d11000msinfinite;
margin-left:100px;
background:linear-gradient(#e6c4ec,#be15d9)
}
...
...
@@ -275,7 +269,7 @@ Set the rotation center around an element in different transform-origin position
height:100px;
border-radius:50px;
border:1pxsolid#e70303;
animation: rotate3d2 17ms infinite;
animation:rotate3d21000msinfinite;
}
/* Eye animation */
@keyframesrotate3d1{
...
...
@@ -308,18 +302,18 @@ Set the rotation center around an element in different transform-origin position
> transform-origin specifies the origin of an element's transformation. If only one value is set, the other value is 50%. If both values are set, the first value indicates the position on the x-axis, and the second value indicates the position on the y-axis.
> **NOTE**
>
> **transform-origin** specifies the origin of an element's transformation. If only one value is set, the other value is 50%. If both values are set, the first value indicates the position on the x-axis, and the second value indicates the position on the y-axis.
## Designing Scaling Animation
This example implements a ripple animation with the scale attribute. Here is the overall procedure: First, use the positioning function to determine the coordinates of the element's position. Then, create multiple components to achieve the overlapping effect. After that, set the opacity attribute to hide or display the components. To scale and hide/display a component at the same time, set both the scale and opacity attributes. Finally, set different animation durations for different components to achieve the diffusion effect.
Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implement the animation.
Set the scaling values for the x-axis, y-axis, and z-axis in **scale3d** to implement the animation.
```
```html
<!-- xxx.hml -->
<divclass="container">
<divclass="circle">
...
...
@@ -334,8 +328,7 @@ Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implemen
> After the transform attributes are set, the child element changes with the parent element. Value changing of other attributes (such as height and width) of the parent element will not affect the child element.
> **NOTE**
>
> After the **transform** attributes are set, the child element changes with the parent element. Value changing of other attributes (such as height and width) of the parent element will not affect the child element.
## Setting matrix
The matrix attribute defines a transformation matrix with six input parameters: scaleX, skewY, skewX, scaleY, translateX, and translateY. In the following example, matrix is set to matrix(1,0,0,1,0,200) to skew and translate the component.
```
```html
<!-- xxx.hml -->
<divclass="container">
<divclass="rect"></div>
</div>
```
```
```css
/* xxx.css */
.container{
background-color:#F1F3F5;
...
...
@@ -474,10 +466,9 @@ The matrix attribute defines a transformation matrix with six input parameters:
## Integrating transform Attributes
You can set multiple transform attributes at the same time to apply different transformations to a component. The following example applies the scale, translate, and rotate attributes simultaneously.
You can set multiple **transform** attributes at the same time to apply different transformations to a component. The following example applies the **scale**, **translate**, and **rotate** attributes simultaneously.
```
```html
<!-- xxx.hml -->
<divclass="container">
<divclass="rect1"></div>
...
...
@@ -488,8 +479,7 @@ You can set multiple transform attributes at the same time to apply different tr
</div>
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -581,9 +571,10 @@ You can set multiple transform attributes at the same time to apply different tr
> - When multiple transform attributes are set, the later one overwrites the previous one. To apply multiple transform styles at the same time, use the shorthand notation; that is, write multiple style values in one transform, for example, transform: scale(1) rotate(0) translate(0,0).
>
> - When using the shorthand notion, note that the animation effect varies according to the sequence of the style values.
>
> - The style values in the transform attribute used when the animation starts and ends must be in one-to-one mapping. Only the styles that have value mappings are played.
\ No newline at end of file
> **NOTE**
>
> - When multiple **transform** attributes are set, the later one overwrites the previous one. To apply multiple transform styles at the same time, use the shorthand notation; that is, write multiple style values in one transform, for example, transform: scale(1) rotate(0) translate(0,0).
>
> - When using the shorthand notation, note that the animation effect varies according to the sequence of the style values.
>
> - The style values in the **transform** attribute used when the animation starts and ends must be in one-to-one mapping. Only the styles that have value mappings are played.
@@ -8,7 +8,7 @@ The **<tabs>** component is a common UI component for navigation. It allow
Create a **<tabs>** component in the .hml file under **pages/index**.
```
```html
<!-- xxx.hml -->
<divclass="container">
<tabs>
...
...
@@ -16,7 +16,7 @@ Create a **<tabs>** component in the .hml file under **pages/index**.
<text>item1</text>
<text>item2</text>
</tab-bar>
<tab-content>
<tab-contentclass="tabContent">
<divclass="text">
<text>content1</text>
</div>
...
...
@@ -28,7 +28,7 @@ Create a **<tabs>** component in the .hml file under **pages/index**.
</div>
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -36,6 +36,10 @@ Create a **<tabs>** component in the .hml file under **pages/index**.
align-items:center;
background-color:#F1F3F5;
}
.tabContent{
width:100%;
height:100%;
}
.text{
width:100%;
height:100%;
...
...
@@ -51,7 +55,7 @@ Create a **<tabs>** component in the .hml file under **pages/index**.
By default, the active tab of a **<tabs>** component is the one with the specified **index**. To show the **<tabs>** vertically, set the **vertical** attribute to **true**.
@@ -75,7 +79,7 @@ By default, the active tab of a **<tabs>** component is the one with the s
Set the **mode** attribute to enable the child components of the **<tab-bar>** to be evenly distributed. Set the **scrollable** attribute to disable scrolling of the **<tab-content>**.
@@ -177,7 +180,7 @@ Add the **change** event for the **<tabs>** component to display the index
</div>
```
```
```js
/* index.js */
importpromptfrom'@system.prompt';
exportdefault{
...
...
@@ -203,7 +206,7 @@ In this example, you can switch between tabs and the active tab has the title te
Use the **<tabs>**, **<tab-bar>**, and **<tab-content>** components to implement tab switching. Then define the arrays and attributes. Add the **change** event to change the attribute values in the arrays so that the active tab has a different font color and an underline.
```
```html
<!-- index.hml -->
<divclass="container">
<tabsonchange="changeTabactive">
...
...
@@ -231,7 +234,7 @@ Use the **<tabs>**, **<tab-bar>**, and **<tab-content>** compo
@@ -9,7 +9,7 @@ Use **CanvasRenderingContext2D** to draw objects such as graphics, texts, line s
Use **moveTo** and **lineTo** to draw a line segment. Use the **closePath** method to end current path, obtaining a closed path. Set **quadraticCurveTo** (quadratic bezier curve) or **bezierCurveTo** (cubic bezier curve) to draw a graphic.
```
```html
<!-- xxx.hml -->
<divclass="container">
<canvasref="canvas1"></canvas>
...
...
@@ -24,9 +24,11 @@ Use **moveTo** and **lineTo** to draw a line segment. Use the **closePath** meth
```
```
```css
/* xxx.css */
.container{
width:100%;
height:100%;
flex-direction:column;
justify-content:center;
align-items:center;
...
...
@@ -47,7 +49,7 @@ select{
```
```
```js
// xxx.js
importpromptfrom'@system.prompt';
exportdefault{
...
...
@@ -209,7 +211,7 @@ Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle
```
```html
<!-- xxx.hml -->
<divclass="container">
<canvasref="canvas1"></canvas>
...
...
@@ -222,11 +224,11 @@ Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle
</div>
```
```
```css
/* xxx.css */
.container{
width:100%;
height:100%;
flex-direction:column;
justify-content:center;
align-items:center;
...
...
@@ -246,9 +248,7 @@ select{
}
```
```
```js
// xxx.js
importpromptfrom'@system.prompt';
exportdefault{
...
...
@@ -274,7 +274,7 @@ export default {
this.ctx.setLineDash([0,0]);
// Draw a stroked rectangle.
this.ctx.strokeRect(200,150,200,200);
}else if(e.newValue == 'value2'){
}elseif(e.newValue=='value2'){
this.ctx.clearRect(0,0,600,500);
this.ctx.lineWidth=30;
this.ctx.strokeStyle='#0000ff';
...
...
@@ -283,12 +283,12 @@ export default {
this.ctx.arc(300,250,150,0,6.28);
// Draw borders.
this.ctx.stroke();
}else if(e.newValue == 'value3'){
}elseif(e.newValue=='value3'){
this.ctx.clearRect(0,0,600,500);
this.ctx.lineWidth=5;
this.ctx.setLineDash([5,5]);
this.ctx.strokeRect(200,150,200,200);
}else if(e.newValue == 'value4'){
}elseif(e.newValue=='value4'){
this.ctx.clearRect(0,0,600,500);
// Draw and fill a rectangle.
this.ctx.fillStyle='#0000ff';
...
...
@@ -307,7 +307,7 @@ export default {
Add the **createLinearGradient** and **createRadialGradient** attributes to create a gradient container, use the **addColorStop** method to add multiple color blocks to form a gradient color, and set **fillStyle** as **gradient** to apply the gradient color to a rectangle. Then set the shadow blur level by using **shadowBlur**, the shadow color by using **shadowColor**, and the shadow offset by using **shadowOffset**.
```
```html
<!-- xxx.hml -->
<divclass="container">
<canvasref="canvas1"></canvas>
...
...
@@ -321,7 +321,7 @@ Add the **createLinearGradient** and **createRadialGradient** attributes to crea
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -344,7 +344,7 @@ select{
```
```
```js
// xxx.js
importpromptfrom'@system.prompt';
exportdefault{
...
...
@@ -395,9 +395,9 @@ export default {
this.ctx.fillRect(100,100,400,300);
}elseif(e.newValue=='value3'){
this.ctx.clearRect(0,0,600,500);
let gradient = this.ctx.createLinearGradient(100,100, 400,400);
Create a text and use the **fillText** method to write the text on the canvas. Use the **globalAlpha** attribute to change the baseline transparency to avoid the text being hidden by the baseline. Then set the **textAlign** and **textBaseline** attributes to determine the text position based on the baseline.
```
```html
<!-- xxx.hml -->
<divclass="container">
<canvasref="canvas1"></canvas>
...
...
@@ -445,7 +445,7 @@ Create a text and use the **fillText** method to write the text on the canvas. U
> - Unlike the **transform()** function, the **setTransform()** function resets the existing transformation matrix and creates a transformation matrix even if it uses the same parameters.
>
> - The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
...
...
@@ -743,7 +743,7 @@ export default {
Use the **save** method to save the brush style, and use the **restore** method to restore the saved settings. In the following example, set the brush to red. After the brush setting is saved, clear the canvas and change the brush to blue. In this moment, directly using the brush will get a blue rectangle; using the brush after the restore operation will get a red rectangle.
```
```html
<!-- xxx.hml -->
<divclass="container">
<divclass="content">
...
...
@@ -758,9 +758,11 @@ Use the **save** method to save the brush style, and use the **restore** method
The <form> component allows the content in [<input>](../reference/arkui-js/js-components-basic-input.md) components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md).
The **<form>** component allows the content in [<input>](../reference/arkui-js/js-components-basic-input.md) components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md).
> This component is supported since API version 6.
...
...
@@ -13,7 +13,7 @@ The <form> component allows the content in [<input>](../reference/ar
Create a **<form>** component in the .hml file under **pages/index**.
```
```html
<!-- xxx.hml -->
<divclass="container">
<formstyle="width: 100%; height: 20%">
...
...
@@ -22,8 +22,7 @@ Create a **<form>** component in the .hml file under **pages/index**.
</div>
```
```
```css
/* xxx.css */
.container{
width:100%;
...
...
@@ -42,7 +41,7 @@ Create a **<form>** component in the .hml file under **pages/index**.
To implement the zoom effect after a form is clicked, add the **click-effect** attribute to the **<form>** component. For values of **click-effect**, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
@@ -125,7 +122,7 @@ To submit or reset a form, add the **submit** and **reset** events.
}
```
```
```js
/* xxx.js */
importpromptfrom'@system.prompt';
exportdefault{
...
...
@@ -152,8 +149,7 @@ Select an option and submit or reset the form data.
Create [<input>](../reference/arkui-js/js-components-basic-input.md) components, set their **type** attribute to **checkbox** and **radio**, and use the **onsubmit** and **onreset** events of the **<form>** component to submit and reset the form data.
**<Path2D>** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**. For details, see [Path2D](../reference/arkui-js/js-components-canvas-path2d.md).
**\<Path2D>** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**. For details, see [Path2D](../reference/arkui-js/js-components-canvas-path2d.md).
## Drawing Line Segments
Create a **<Path2D>** object and use line segments to create different shapes.
## Drawing Line Segments
Create a **\<Path2D>** object and use line segments to create different shapes.
```
```html
<!-- xxx.hml -->
<divclass="container">
<canvasref="canvas"></canvas>
</div>
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -26,6 +23,7 @@ Create a **<Path2D>** object and use line segments to create different sha
align-items:center;
justify-content:center;
width:100%;
height:100%;
}
canvas{
width:600px;
...
...
@@ -35,9 +33,7 @@ canvas{
}
```
```
```js
// xxx.js
importpromptfrom'@system.prompt';
exportdefault{
...
...
@@ -73,7 +69,7 @@ export default {
path.moveTo(600,535);
path.arc(520,450,85,0,6);
ctx.stroke(path);
},
}
}
```
...
...
@@ -83,10 +79,10 @@ export default {
## Drawing Graphs
Use **createPath2D** to create a path object and draw only **path1** so that only **path1** is displayed on the canvas. Click the **<text>** component to trigger the **addPath** method. The **path2** object is passed to **path1** as a parameter. After the **stroke** operation is performed on the **path1** object, **path1** and **path2** are displayed on the canvas. Click **Change** to change the value of **setTransform** to** setTransform(2, 0.1, 0.1, 2, 0,0)**. The graph is enlarged and tilted to the left.
Use **createPath2D** to create a path object and draw only **path1** so that only **path1** is displayed on the canvas. Click the **\<text>** component to trigger the **addPath** method. The **path2** object is passed to **path1** as a parameter. After the **stroke** operation is performed on the **path1** object, **path1** and **path2** are displayed on the canvas. Click **Change** to change the value of **setTransform** to** setTransform(2, 0.1, 0.1, 2, 0,0)**. The graph is enlarged and tilted to the left.
```
```html
<!-- xxx.hml -->
<divclass="container">
<canvasref="canvas"></canvas>
...
...
@@ -98,7 +94,7 @@ Use **createPath2D** to create a path object and draw only **path1** so that onl
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -106,6 +102,7 @@ Use **createPath2D** to create a path object and draw only **path1** so that onl
