| label | Label | - | No | Button text at the bottom of the customized step navigator. Dynamic modification is not supported. If this attribute is not set, **BACK** and **NEXT** will be used by default as button text in case the system language is not Chinese. For the first step, there is no previous button. For the last step, the text on the next button is **START** for non-Chinese languages by default. |
**Table 1** Label parameters
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| label | Label | No| Button text at the bottom of the customized step navigator. Dynamic modification is not supported. If this attribute is not set, **BACK** and **NEXT** will be used by default as button text in case the system language is not Chinese. For the first step, there is no previous button. For the last step, the text on the next button is **START** for non-Chinese languages by default.|
**Table 1** label
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| prevLabel | string | - | Text content of the previous button at the bottom of the step navigator.|
| nextLabel | string | - | Text content of the next button at the bottom of the step navigator.|
| status | string | normal | Initial status of the current step in the step navigator. Available values are as follows:<br>- **normal**: The right button is clickable and can navigate users to the next step when it is clicked.<br>- **disabled**: The right button is grayed out and unavailable.<br>- **waiting**: The right button is not displayed, and a progress bar is displayed instead.|
| prevLabel | string | - | Text content of the previous button at the bottom of the step navigator. |
| nextLabel | string | - | Text content of the next button at the bottom of the step navigator. |
| status | string | normal | Initial status of the current step in the step navigator. Available values are as follows: <br>- **normal**: The right button is clickable and can navigate users to the next step when it is clicked. <br>- **disabled**: The right button is grayed out and unavailable. <br>- **waiting**: The right button is not displayed, and a progress bar is displayed instead. |
## Styles
## Styles
In addition to the styles in [Universal Styles](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.
| font-size | <length> | - | No| Text size.|
| allow-scale | boolean | true | No| Whether the font size changes with the system's font size settings.|
| font-style | string | normal | No| Text font style. Available values are as follows:<br>- **normal**: standard font style<br>- **italic**: italic font style|
| font-weight | number\|string | normal | No| Text font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is 400. A larger value indicates a bigger weight. Available values of the string type are **lighter**, **normal**, **bold**, or **bolder**.|
| text-decoration | string | none | No| Text decoration. Available values are as follows:<br>- **underline**: An underline is used.<br>- **line-through**: A strikethrough is used.<br>- **none**: The standard text is used.|
| font-family | string | sans-serif | No| Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| Name | Type | Default Value | Mandatory | Triggered when |
| allow-scale | boolean | true | No | Whether the text size changes with the system's font size settings. |
| font-style | string | normal | No | Text font style. Available values are as follows: <br>- **normal**: standard font style <br>- **italic**: italic font style |
| font-weight | number\|string | normal | No | Text font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is 400. A larger value indicates a bigger weight. Available values of the string type are **lighter**, **normal**, **bold**, or **bolder**. |
| text-decoration | string | none | No | Text decoration. Available values are as follows: <br>- **underline**: An underline is used. <br>- **line-through**: A strikethrough is used. <br>- **none**: The standard text is used. |
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) is used for the text. |
> - Height and width styles are not supported. The width of each item is the same as that of its container. The height of each item is the difference between the container height and the bottom button height.
> - Height and width styles are not supported. The width of each item is the same as that of its container. The height of each item is the difference between the container height and the bottom button height.
>
> - The **posit** style is not supported.
> - The **posit** style is not supported.
## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| appear | - | Triggered when this step is displayed.|
| disappear | - | Triggered when this step disappears.|
**\<tab-content>** is a child component of [\<tabs>](js-components-container-tabs.md) and is used to provide the area for displaying the tab content. By default, its height is such that all the remaining space of the **\<tabs>** component is filled. The child components are arranged horizontally. When **\<tab-content>** is used as a child element in a container, the length on the main axis direction must be specified. Otherwise, the child element cannot be displayed.
**<tab-content\>** is a child component of **[<tabs\>](js-components-container-tabs.md)** and is used to provide the area for displaying the tab content. By default, its height is such that all the remaining space of the **<tabs\>** component is filled. The child components are arranged horizontally. When **<tab-content\>** is used as a child element in a container, its length along the main axis must be specified. Otherwise, it cannot be displayed.
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
## Required Permissions
None
None
## Child Components
## Child Components
Supported
Supported
## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type| Default Value | Mandatory| Description|
| scrollable | boolean | true | No| Whether the tabs can be switched by swiping left or right. The default value is **true**. If this attribute is set to **false**, tab switching is implemented only through the association with **tab-bar**.|
| Name | Type | Default Value | Mandatory | Description |
| scrollable | boolean | true | No | Whether the tabs can be switched by swiping left or right. The default value is **true**. If this attribute is set to **false**, tab switching is implemented only through the association with **tab-bar**. |
## Styles
## Styles
Styles in [Universal Styles](js-components-common-styles.md) are supported.
The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
## Events
## Events
Events in [Universal Events](js-components-common-events.md) are supported.
The [universal events](../arkui-js/js-components-common-events.md) are supported.
## Example
## Example
For details, see the [tabs example code](js-components-container-tabs.md).
For details, see **Example** in [tabs](../arkui-js/js-components-container-tabs.md#example).
>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
## Required Permissions
None
None
## Child Components
## Child Components
**animate**, **animateMotion**, and **animateTransform** are supported.
The following are supported: [\<animate>](js-components-svg-animate.md), [\<animateMotion>](js-components-svg-animatemotion.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes
## Attributes
The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported.
The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported.
| Name | Type | Default Value | Mandatory | Description |
| fill | \<color> | black | No | Fill color of an element using the shorthand attribute. Attribute animations are supported. |
| fill-opacity | number | 1 | No | Opacity of a fill color. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported. |
| opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported. |
| stroke | \<color> | - | No | Color of the stroke. Attribute animations are supported. |
| stroke-dasharray | \<string> | - | No | Length of the dashes and notches. The format is [length length length length]. The length values of dashes and notches are separated by a space and appear in pairs. |
| stroke-dashoffset | \<length> | 0 | No | Offset for rendering the associated dash line array. Attribute animations are supported. |
| stroke-linejoin | [bevel \| miter \| round] | miter | No | The shape used at the corner of a path when stroked.<br/>- **bevel**: connects paths with bevel corners.<br/>- **miter**: connects paths with mitered corners.<br/>- **round**: connects paths with rounded corners. |
| stroke-linecap | [butt \| round \| square] | butt | No | The shape used at the end of paths when stroked.<br/>- **butt**: The stroke for each path does not extend beyond its two endpoints.<br/>- **round**: At the end of each path the stroke is extended by a half circle with a diameter equal to the stroke width.<br/>- **square**: At the end of each path the stroke is extended by a half circle, with the width being equal to half of the stroke width, and the height being equal to the stroke width. |
| stroke-miterlimit | number | 4 | No | Limit value when the sharp angle is drawn as a miter. Attribute animations are supported. |
| stroke-opacity | number | 1 | No | Opacity of the stroke. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported. |
| stroke-width | \<length> | 1px | No | Stroke width. Attribute animations are supported. |
| transform | \<string> | - | No | Coordinate transformation parameters of the component and its child components.The following formats are supported:<br/>- **translate(\<x>[\<y>])**: translates along the x[y]-axis.<br/>- **scale(\<x>[\<y>])**: scales along the x[y]-axis.<br/>- **rotate(\<a>[\<x> \<y>])**: rotates at an angle of **a** with (x,y) as the center.<br/>- **skewX(\<a>)**: skews at an angle of **a** along the x-axis.<br/>- **skewY(\<a>)**: skews at an angle of **a** along the y-axis. |
| fill | <color> | black | No| Fill color of an element using the shorthand attribute. Attribute animations are supported.|
| fill-opacity | number | 1 | No| Opacity of a fill color. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.|
| opacity | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.|
| stroke | <color> | - | No| Color of the stroke. Attribute animations are supported.|
| stroke-dasharray | <string> | - | No| Length of the dashes and notches. The format is [length length length length]. The length values of dashes and notches are separated by a space and appear in pairs.|
| stroke-dashoffset | <length> | 0 | No| Offset for rendering the associated dash line array. Attribute animations are supported.|
| stroke-linejoin | [bevel \| miter \| round] | miter | No| The shape used at the corner of a path when stroked.<br>**bevel**: connects paths with bevel corners.<br>**miter**: connects paths with mitered corners.<br>**round**: connects paths with rounded corners.|
| stroke-linecap | [butt \| round \| square] | butt | No| The shape used at the end of paths when stroked.<br>**butt**: The stroke for each path does not extend beyond its two endpoints.<br>**round**: At the end of each path the stroke is extended by a half circle with a diameter equal to the stroke width.<br>**square**: At the end of each path the stroke is extended by a half circle, with the width being equal to half of the stroke width, and the height being equal to the stroke width.|
| stroke-miterlimit | number | 4 | No| Limit value when the sharp angle is drawn as a miter. Attribute animations are supported.|
| stroke-opacity | number | 1 | No| Opacity of the stroke. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.|
| transform | <string> | - | No| Coordinate transformation parameters of the component and its child components.<br>The following formats are supported:<br>**translate(\<x> [\<y>])**: translates along the x[y]-axis.<br>**scale(\<x> [\<y>])**: scales along the x[y]-axis.<br>**rotate(\<a> [\<x> \<y>])**: rotates at an angle of **a** with point (x,y) as the center.<br>**skewX(\<a>)**: skews at an angle of **a** along the x-axis.<br>**skewY(\<a>)**: skews at an angle of **a** along the y-axis. |
>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
## Required Permissions
None
None
## Child Components
## Child Components
**animate**, **animateMotion**, and **animateTransform** are supported.
The following are supported: [\<animate>](js-components-svg-animate.md), [\<animateMotion>](js-components-svg-animatemotion.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes
## Attributes
The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported.
The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported.
| Name | Type | Default Value | Mandatory | Description |
>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
## Required Permissions
None
None
## Child Components
## Child Components
**animate**, **animateMotion**, and **animateTransform** are supported.
The following are supported: [\<animate>](js-components-svg-animate.md), [\<animateMotion>](js-components-svg-animatemotion.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes
## Attributes
The universal attributes as well as the attributes listed below are supported.
The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported.
| Name | Type | Default Value | Mandatory | Description |
// square: At the end of each path the stroke is extended by a half circle, with the width being equal to half of the stroke width, and the height being equal to the stroke width.
>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
## Required Permissions
None
None
## Child Components
## Child Components
**animate**, **animateMotion**, and **animateTransform** are supported.
The following are supported: [\<animate>](js-components-svg-animate.md), [\<animateMotion>](js-components-svg-animatemotion.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes
## Attributes
The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components.
The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components.
| Name | Type | Default Value | Mandatory | Description |
| id | string | - | No | Unique ID of the component. |
| id | string | - | No| Unique ID of the component.|
| d | string | - | No | Shape of the path. The value contains a group of character instructions. Uppercase letters are absolute paths, and lowercase letters are relative paths.<br/>The meanings of the letters are as follows:<br/>- M/m = moveto<br/>- L/l = lineto<br/>- H/h = horizontal lineto<br/>- V/v = vertical lineto<br/>- C/c = curveto<br/>- S/s = smooth curveto<br/>- Q/q = quadratic Belzier curve<br/>- T/t = smooth quadratic Belzier curveto<br/>- A/a = elliptical Arc<br/>- Z/z = closepath |
| d | string | - | No| Shape of the path. The value contains a group of character instructions. Uppercase letters are absolute paths, and lowercase letters are relative paths.<br>The meanings of the letters are as follows:<br>- M/m = moveto<br>- L/l = lineto<br>- H/h = horizontal lineto<br>- V/v = vertical lineto<br>- C/c = curveto<br>- S/s = smooth curveto<br>- Q/q = quadratic Belzier curve<br>- T/t = smooth quadratic Belzier curveto<br>- A/a = elliptical Arc<br>- Z/z = closepath |
## Example
## Example
```
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<divclass="container">
<divclass="container">
<svgwidth="400"height="400">
<svgwidth="400"height="400">
...
@@ -36,5 +39,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
...
@@ -36,5 +39,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
## Required Permissions
None
None
## Child Components
## Child Components
**animate**, **animateMotion**, and **animateTransform** are supported.
The following are supported: [\<animate>](js-components-svg-animate.md), [\<animateMotion>](js-components-svg-animatemotion.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes
## Attributes
The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported.
The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported.
| Name | Type | Default Value | Mandatory | Description |
| id | string | - | No | Unique ID of the component. |
| id | string | - | No| Unique ID of the component.|
| points | string | - | No | Multiple coordinates of the polygon.<br/>The format is [x1,y1 x2,y2 x3,y3].<br/>Attribute animations are supported. If the number of coordinates of the animation change value set in the attribute animation is different from the format of the original points, the attribute animation is invalid. |
| points | string | - | No| Multiple coordinates of the polygon.<br>The format is [x1,y1 x2,y2 x3,y3].<br>Attribute animations are supported. If the number of coordinates of the animation change value set in the attribute animation is different from the format of the original points, the attribute animation is invalid.|
>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
## Required Permissions
None
None
## Child Components
## Child Components
**animate**, **animateMotion**, and **animateTransform** are supported.
The following are supported: [\<animate>](js-components-svg-animate.md), [\<animateMotion>](js-components-svg-animatemotion.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes
## Attributes
The universal attributes as well as the attributes listed below are supported.
The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported.
| Name | Type | Default Value | Mandatory | Description |
| id | string | - | No | Unique ID of the component. |
| id | string | - | No| Unique ID of the component.|
| points | string | - | No | Multiple coordinates of the polyline.<br/>The format is [x1,y1 x2,y2 x3,y3].<br/>Attribute animations are supported. If the number of coordinates of the animation change value set in the attribute animation is different from the format of the original points, the attribute animation is invalid. |
| points | string | - | No| Multiple coordinates of the polyline.<br>The format is [x1,y1 x2,y2 x3,y3].<br>Attribute animations are supported. If the number of coordinates of the animation change value set in the attribute animation is different from the format of the original points, the attribute animation is invalid.|
>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
## Required Permissions
None
None
## Child Components
## Child Components
**animate**, **animateMotion**, and **animateTransform** are supported.
The following are supported: [\<animate>](js-components-svg-animate.md), [\<animateMotion>](js-components-svg-animatemotion.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes
## Attributes
The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported.
The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported.
| Name | Type | Default Value | Mandatory | Description |
| id | string | - | No | Unique ID of the component. |
| id | string | - | No| Unique ID of the component.|
| width | \<length>\|\<percentage> | 0 | No | Width of a rectangle. Attribute animations are supported. |
| width | <length>\|<percentage> | 0 | No| Width of the rectangle. Attribute animations are supported.|
| height | \<length>\|\<percentage> | 0 | No | Height of a rectangle. Attribute animations are supported. |
| height | <length>\|<percentage> | 0 | No| Height of the rectangle. Attribute animations are supported.|
| x | \<length>\|\<percentage> | 0 | No | X-coordinate of the upper left corner of the rectangle. Attribute animations are supported. |
| x | <length>\|<percentage> | 0 | No| X-coordinate of the upper left corner of the rectangle. Attribute animations are supported.|
| y | \<length>\|\<percentage> | 0 | No | Y-coordinate of the upper left corner of the rectangle. Attribute animations are supported. |
| y | <length>\|<percentage> | 0 | No| Y-coordinate of the upper left corner of the rectangle. Attribute animations are supported.|
| rx | \<length>\|\<percentage> | 0 | No | Radius of the rectangle rounded corner in the x-axis direction. Attribute animations are supported. |
| rx | <length>\|<percentage> | 0 | No| Radius of the rectangle rounded corner in the x-axis direction. Attribute animations are supported.|
| ry | \<length>\|\<percentage> | 0 | No | Radius of the rectangle rounded corner in the y-axis direction. Attribute animations are supported. |
| ry | <length>\|<percentage> | 0 | No| Radius of the rectangle rounded corner in the y-axis direction. Attribute animations are supported.|
## Example
## Example
```
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<divclass="container">
<divclass="container">
<svgfill="white"width="400"height="400">
<svgfill="white"width="400"height="400">
...
@@ -43,5 +47,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
...
@@ -43,5 +47,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
The **<text\>** component is used to display a piece of textual information.
The **\<text>** component is used to display a piece of textual information.
> **NOTE**
> **NOTE**
>
>
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
> - The text content must be written in the content area. The **tspan** sub-element label can be nested to segment the text content. The **textPath** sub-element label can be nested to draw the text content based on the specified path.
> - The text content must be written in the content area. The **tspan** sub-element label can be nested to segment the text content. The **textPath** sub-element label can be nested to draw the text content based on the specified path.
> - **<text\>** can be nested only by the parent element label **svg**.
>
> - **\<text>** can be nested only by the parent element label **svg**.
>
> - Only the default font **sans-serif** is supported.
> - Only the default font **sans-serif** is supported.
## Required Permissions
## Required Permissions
None
None
## Child Components
## Child Components
**\<tspan>**, **\<textpath>**, **\<animate>**, and **\<animateTransform>** are supported.
The following are supported: [\<tspan>](js-components-svg-tspan.md), [\<textpath>](js-components-svg-textpath.md), [\<animate>](js-components-svg-animate.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes
## Attributes
The attributes in the following table are supported.
The attributes in the following table are supported.
| Name | Type | Default Value | Mandatory | Description |
| Name | Type | Default Value | Mandatory | Description |
| id | string | - | No | Unique ID of the component. |
| id | string | - | No | Unique ID of the component. |
| x | \<length>\|\<percentage> | 0 | No | X-coordinate of the upper left corner of the component. |
| x | <length>\|<percentage> | 0 | No | X-coordinate of the upper left corner of the component. |
| y | \<length>\|\<percentage> | 0 | No | Y-coordinate of the upper left corner of the component. |
| y | <length>\|<percentage> | 0 | No | Y-coordinate of the upper left corner of the component. |
| dx | \<length>\|\<percentage> | 0 | No | Offset of the text on the x-axis. |
| dx | <length>\|<percentage> | 0 | No | Offset of the text on the x-axis. |
| dy | \<length>\|\<percentage> | 0 | No | Offset of the text on the y-axis. |
| dy | <length>\|<percentage> | 0 | No | Offset of the text on the y-axis. |
| rotate | number | 0 | No | Rotates the lower left corner of the font based on the circle center. A positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation. |
| rotate | number | 0 | No | Rotation of the text around its lower left corner. A positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation. |
| font-size | \<length> | 30px | No | Font size. |
| font-size | <length> | 30px | No | Font size. |
| fill | \<color> | black | No | Font fill color. |
| fill | <color> | black | No | Fill color of the text. |
| fill-opacity | number | 1.0 | No | Font fill opacity. |
| fill-opacity | number | 1.0 | No | Fill opacity of the text. |
| opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported. |
| opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.|
| stroke | \<color> | black | No | Stroke and stroke color. |
| stroke | <color> | black | No | Stroke color. |
| stroke-width | number | 1px | No | Stroke width. |
| stroke-width | number | 1px | No | Stroke width. |
| stroke-opacity | number | 1.0 | No | Stroke opacity. |
| stroke-opacity | number | 1.0 | No | Stroke opacity. |
...
@@ -61,7 +67,7 @@ The attributes in the following table are supported.
...
@@ -61,7 +67,7 @@ The attributes in the following table are supported.
| path | string | 0 | Yes | Shape of the path.<br/>The meanings of the letters are as follows:<br/>- M = moveto<br/>- L = lineto<br/>- H = horizontal lineto<br/>- V = vertical lineto<br/>- C = curveto<br/>- S = smooth curveto<br/>- Q = quadratic Belzier curve<br/>- T = smooth quadratic Belzier curveto<br/>- A = elliptical Arc<br/>- Z = closepath |
| id | string | No | Unique ID of the component. |
| startOffset | \<length>\|\<percentage> | 0 | No | Start offset of the text drawing along the path. |
| path | string | Yes | Shape of the path.<br>The meanings of the letters are as follows:<br>- M = moveto<br>- L = lineto<br>- H = horizontal lineto<br>- V = vertical lineto<br>- C = curveto<br>- S = smooth curveto<br>- Q = quadratic Belzier curve<br>- T = smooth quadratic Belzier curveto<br>- A = elliptical Arc<br>- Z = closepath<br>Default value: **0**|
| font-size | \<length> | 30px | No | Font size. |
| startOffset | <length>\|<percentage> | No | Offset of the text start point relative to the path start point.<br>Default value: **0** |
| fill | \<color> | black | No | Font fill color. |
| font-size | <length> | No | Font size.<br>Default value: **30px** |
| by | number | - | No | Attribute offset relative to the specified animation. The default value of **from** is the original attribute value. |
| fill | <color> | No | Font fill color.<br>Default value: **black** |
| opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported. |
| by | number | No | Attribute offset relative to the specified animation. By default, **from** is the original attribute value. |
| fill-opacity | number | 1.0 | No | Font fill opacity. |
| opacity | number | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.<br>Default value: **0**|
| stroke | \<color> | black | No | Stroke and stroke color. |
| fill-opacity | number | No | Font fill opacity.<br>Default value: **1.0** |
| stroke-width | number | 1px | No | Stroke width. |
| stroke-opacity | number | 1.0 | No | Stroke opacity. |
| stroke-width | number | No | Stroke width.<br>Default value: **1px** |
| stroke-opacity | number | No | Stroke opacity.<br>Default value: **1.0** |
## Example
## Example
The following is an example of the **textspan** attribute. The **textpath** text is drawn along the path specified by the **path** attribute, and the start point is offset by 20% of the **path** length. \(The drawn element **<path\>** curve is for reference only.\)
The following is an example of the **\<textspan>** attributes, where text is drawn along the path specified by **path**, and the start point is offset by 20% of the **path** length. (The drawn **\<path>** curve is for reference only.)
```
```html
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1200px;
width: 600px;
}
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<divclass="container">
<divclass="container">
<svgfill="#00FF00"x="50">
<svgfill="#00FF00"x="50">
...
@@ -63,11 +59,23 @@ The following is an example of the **textspan** attribute. The **textpath**
...
@@ -63,11 +59,23 @@ The following is an example of the **textspan** attribute. The **textpath**
</div>
</div>
```
```
```css
/* xxx.css */
.container{
flex-direction:row;
justify-content:flex-start;
align-items:flex-start;
height:1200px;
width:600px;
}
```
Combination of **textpath** and **tspan**
```
Combination of **\<textpath>** and **\<tspan>**
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<divclass="container">
<divclass="container">
<svgfill="#00FF00"x="50">
<svgfill="#00FF00"x="50">
...
@@ -83,9 +91,9 @@ Combination of **textpath** and **tspan**
...
@@ -83,9 +91,9 @@ Combination of **textpath** and **tspan**
</div>
</div>
```
```
```
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<divclass="container">
<divclass="container">
<svgfill="#00FF00"x="50">
<svgfill="#00FF00"x="50">
...
@@ -103,9 +111,9 @@ Combination of **textpath** and **tspan**
...
@@ -103,9 +111,9 @@ Combination of **textpath** and **tspan**
</div>
</div>
```
```
```
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<divclass="container">
<divclass="container">
<svgfill="#00FF00"x="50">
<svgfill="#00FF00"x="50">
...
@@ -124,11 +132,11 @@ Combination of **textpath** and **tspan**
...
@@ -124,11 +132,11 @@ Combination of **textpath** and **tspan**
</div>
</div>
```
```
The following is an example of the **startOffset** animation. When the text is drawn, the start offset is moved from 10% to 40%, and the text whose length exceeds the path length range is not drawn.
The following is an example of the **startOffset** animation, where the value of **startOffset** changes from 10% to 40%, and the text is not drawn when its length exceeds the path length range.
```
```css
/* xxx.css */
/* xxx.css */
.container{
.container{
flex-direction:row;
flex-direction:row;
...
@@ -139,7 +147,7 @@ The following is an example of the **startOffset** animation. When the text is
...
@@ -139,7 +147,7 @@ The following is an example of the **startOffset** animation. When the text is
}
}
```
```
```
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<divclass="container">
<divclass="container">
<svgfill="#00FF00">
<svgfill="#00FF00">
...
@@ -156,11 +164,11 @@ The following is an example of the **startOffset** animation. When the text is
...
@@ -156,11 +164,11 @@ The following is an example of the **startOffset** animation. When the text is
\(1\) "tspan attribute x|rotate" indicates that the text drawing start point moves from 50 px to 100 px and rotates clockwise by 0 degrees to 360 degrees.
(1) **"tspan attribute x|rotate"**: The beginning of the text is offset from 50 px to 100 px, and the text rotates clockwise by 0 degrees to 360 degrees.
\(2\) "tspan attribute dx|opacity" is drawn after the "tspan static." drawing is complete. The offset moves from 0% to 30%, and the opacity changes from shallow to deep.
(2) **"tspan attribute dx|opacity"**: The text is drawn after the "tspan static." drawing is complete. The horizontal offset moves from 0% to 30%, and the opacity changes from shallow to deep.
\(3\)**tspan move**: After the previous **tspan** is drawn, the next tspan is drawn with an offset of 5% to show the effect of following the previous **tspan**.
(3) **tspan move**: After the previous **\<tspan>** is drawn, the next **\<tspan>** is drawn with an offset of 5%, creating the effect of following the previous **\<tspan>**.
Animation and effect of the combination of **textpath** and **tspan**
Attribute animation of the **\<textPath>** and **\<tspan>** in combination
```
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<divclass="container">
<divclass="container">
<svgfill="#00FF00">
<svgfill="#00FF00">
...
@@ -223,19 +231,19 @@ Animation and effect of the combination of **textpath** and **tspan**
...
@@ -223,19 +231,19 @@ Animation and effect of the combination of **textpath** and **tspan**
\(1\)**This is TextPath**.: Draw the first paragraph of text on the path without offset. The size is 30px, and the color is "\#D2691E".
(1) **"This is TextPath."**: The first segment of text, in the size of 30px and color of \#D2691E is drawn on the path without offset.
\(2\) The value of **tspan attribute fill|fill-opacity** is 20px offset from the end of the previous text segment. The color is from blue to red, and the opacity is from light to deep.
(2) **"tspan attribute fill|fill-opacity"**: The new segment of text is 20px offset from the end of the previous text segment. The text color changes from blue to red, and the opacity changes from light to deep.
\(3\)**tspan attribute font-size**: The drawing start point is 20px offset from the end of the previous segment. The start point is static, and the font size ranges from 10px to 50px. The overall length is continuously prolonged.
(3) **"tspan attribute font-size"**: The new segment of text is 20px offset from the end of the previous text segment. While the start point of the text is static, the font size shifts from 10px to 50px and the overall length is continuously prolonged.
\(4\)**Single tspan**: Draw a horizontal line at the end of the previous segment to follow the previous segment.
(4) **"Single tspan"**: A horizontal line is drawn at the end of the previous segment, creating the effect of following the previous segment.
Animation and effect of the combination of **textpath** and **tspan**
Attribute animation of the **\<textPath>** and **\<tspan>** in combination
```
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<divclass="container">
<divclass="container">
<svgfill="#00FF00">
<svgfill="#00FF00">
...
@@ -260,9 +268,8 @@ Animation and effect of the combination of **textpath** and **tspan**
...
@@ -260,9 +268,8 @@ Animation and effect of the combination of **textpath** and **tspan**
| id | string | - | No | Unique ID of the component. |
| id | string | - | No | Unique ID of the component. |
| x | \<length>\|\<percentage> | 0 | No | X-coordinate of the upper left corner of the component. |
| x | <length>\|<percentage> | 0 | No | X-coordinate of the upper left corner of the component. |
| y | \<length>\|\<percentage> | 0 | No | Y-coordinate of the upper left corner of the component. This parameter is invalid for the **textpath** child component. |
| y | <length>\|<percentage> | 0 | No | Y-coordinate of the upper left corner of the component. This attribute is invalid when the component is a child component of the **\<textpath>**. |
| dx | \<length>\|\<percentage> | 0 | No | Offset of the text on the x-axis. |
| dx | <length>\|<percentage> | 0 | No | Offset of the text on the x-axis. |
| dy | \<length>\|\<percentage> | 0 | No | Offset of the text on the y-axis. This parameter is invalid for the **textpath** child component. |
| dy | <length>\|<percentage> | 0 | No | Offset of the text on the y-axis. This attribute is invalid when the component is a child component of the **\<textpath>**. |
| rotate | number | 0 | No | Rotates the lower left corner of the font based on the circle center. A positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation. |
| rotate | number | 0 | No | Rotation of the text around its lower left corner. A positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation. |
| font-size | \<length> | 30px | No | Font size. |
| font-size | <length> | 30px | No | Font size. |
| fill | \<color> | black | No | Font fill color. |
| fill | <color> | black | No | Fill color of the text. |
| opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported. |
| opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.|
| fill-opacity | number | 1.0 | No | Font fill opacity. |
| fill-opacity | number | 1.0 | No | Fill opacity of the text. |
| stroke | \<color> | black | No | Stroke and stroke color. |
| stroke | <color> | black | No | Stroke color. |
| stroke-width | number | 1px | No | Stroke width. |
| stroke-width | number | 1px | No | Stroke width. |
| stroke-opacity | number | 1.0 | No | Stroke opacity. |
| stroke-opacity | number | 1.0 | No | Stroke opacity. |
## Example
## Example
```
```html
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1000px;
width: 1080px;
}
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<divclass="container">
<divclass="container">
<svg>
<svg>
...
@@ -65,22 +63,22 @@ The attributes in the following table are supported.
...
@@ -65,22 +63,22 @@ The attributes in the following table are supported.
The **<svg\>** component is a basic container. It can be used as the root node of an SVG document or be used to nest an SVG fragment into an SVG document.
The **\<svg>** component is a basic container. It can be used as the root node of an SVG document or be used to nest an SVG fragment into an SVG document.
>- This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> **NOTE**
>- The width and height must be defined for the **<svg\>** parent component or **<svg\>** component. Otherwise, the component is not drawn.
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
> - The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn.
## Required Permissions
## Required Permissions
None
None
## Child Components
## Child Components
**svg**, **rect**, **circle**, **ellipse**, **path**, **line**, **polygon**, **polyline**, **text**, **animate**, and **animateTransform** are supported.
The following are supported: [\<svg>](js-components-svg.md), [\<rect>](js-components-svg-rect.md), [\<circle>](js-components-svg-circle.md), [\<ellipse>](../arkui-js/js-components-svg-ellipse.md), [\<path>](js-components-svg-path.md), [\<line](../arkui-js/js-components-svg-line.md), [\<polygon>](../arkui-js/js-components-svg-polygon.md), [\<polyline>](js-components-svg-polyline.md), [\<text>](js-components-svg-text.md), [\<animate>](js-components-svg-animate.md), and [\<animateTransform>](js-components-svg-animateTransform.md).
## Attributes
## Attributes
The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components.
The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components.
| Name | Type | Default Value | Mandatory | Description |
| x | \<length>\|\<percentage> | - | No | X-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
| x | <length>\|<percentage> | - | No| X-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
| y | \<length>\|\<percentage> | | No | Y-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
| y | <length>\|<percentage> | | No| Y-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
| viewBox | string | - | No | View box of the current **\<svg>** component. The supported format is **\<number number number number>**. The four parameters indicate the **min-x**, **min-y**, **width**, and **height**. The width and height of the view box are different from those of the **\<svg>** component. The view box is scaled in center-aligned mode. |
| viewBox | string | - | No| View box of the current **\<svg>** component. The supported format is \<number number number number>. The four parameters indicate **min-x**, **min-y**, **width**, and **height**, respectively. The width and height of the view box are different from those of the **\<svg>** component. The view box is scaled in center-aligned mode. |
## Example
## Example
```
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<divclass="container">
<divclass="container">
<svgwidth="400"height="400">
<svgwidth="400"height="400">
...
@@ -48,5 +52,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
...
@@ -48,5 +52,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | No | Triggered when the component area changes. For details about the **Area** type, see **Area** attributes. |
| onAreaChange(event: (oldValue: [Area](ts-types.md#area8), newValue: [Area](ts-types.md#area8)) => void) | No | Triggered when the component area changes.|
## Example
## Example
```ts
```ts
// xxx.ets
// xxx.ets
@Entry
@Entry
@Component
@Component
structAreaExample{
structAreaExample{
@Statevalue:string='Text'
@Statevalue:string='Text'
@Statesize1:string=''
@StatesizeValue:string=''
build(){
build(){
Column(){
Column(){
...
@@ -38,9 +33,9 @@ struct AreaExample {
...
@@ -38,9 +33,9 @@ struct AreaExample {
})
})
.onAreaChange((oldValue:Area,newValue:Area)=>{
.onAreaChange((oldValue:Area,newValue:Area)=>{
console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
this.size1=JSON.stringify(newValue)
this.sizeValue=JSON.stringify(newValue)
})
})
Text('new area is: \n'+this.size).margin({right:30,left:30})
Text('new area is: \n'+this.sizeValue).margin({right:30,left:30})
@@ -21,7 +21,7 @@ ArkUI is a UI development framework that provides what you'll need to develop ap
...
@@ -21,7 +21,7 @@ ArkUI is a UI development framework that provides what you'll need to develop ap
- Drawing: ArkUI offers advanced drawing capabilities that allow you to draw custom shapes with a range of editors, from images to fill colors and texts.
- Drawing: ArkUI offers advanced drawing capabilities that allow you to draw custom shapes with a range of editors, from images to fill colors and texts.
- Interaction: ArkUI allows users to interact with your application UI properly, regardless of the system platform and input device. By default, the UI accepts input from touch gestures, remote controls, and mouse devices, with support for the event notification capability.
- Interaction: ArkUI allows users to interact with your application UI properly, regardless of the system platform and input device. By default, the UI accepts input from touch gestures, remote controls, and mouse devices, with support for the event notification capability.
- Platform API channel: ArkUI provides an API extension mechanism through which platform capabilities are encapsulated to produce JavaScript APIs in a unified style.
- Platform API channel: ArkUI provides an API extension mechanism through which platform capabilities are encapsulated to produce JavaScript APIs in a unified style.
- Two development paradigms: ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
- Two development paradigms: ArkUI comes with two development paradigms: eTS-based declarative development paradigm (declarative development paradigm for short) and JavaScript-compatible web-like development paradigm (web-like development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
| Development Paradigm | Description | Applicable To | Intended Audience |
| Development Paradigm | Description | Applicable To | Intended Audience |
The application code files can be accessed in the following ways:
The application code files can be accessed in the following ways:
- Use a relative path to reference the code file. For example, if the upper-level directory is ../common/utils/utils.ets, use ./common/utils/utils.ets for the current directory.
- Use a relative path to reference the code file. Specifically, use **../** to refer to the upper-level directory and **./** to refer to the current directory.
- Use the root path of the current module to reference the code file, for example, common/utils/utils.ets.
- Store common code files in the common directory.
- Use the root path of the current module to reference the code file, for example, **common/utils/utils**.
## Example
## Example
```
```
import { FoodData, FoodList } from "../common/utils/utils.ets";
import { FoodData, FoodList } from "../common/utils/utils";
@@ -8,11 +8,11 @@ The **<tabs>** component is a common UI component for navigation. It allow
...
@@ -8,11 +8,11 @@ The **<tabs>** component is a common UI component for navigation. It allow
Create a **<tabs>** component in the .hml file under **pages/index**.
Create a **<tabs>** component in the .hml file under **pages/index**.
```
```
<!-- index.hml -->
<!-- xxx.hml -->
<div class="container" >
<div class="container">
<tabs> <tab-bar>
<tabs>
<tab-bar>
<text>item1</text>
<text>item1</text>
<text>item2</text>
<text>item2</text>
</tab-bar>
</tab-bar>
...
@@ -28,7 +28,6 @@ Create a **<tabs>** component in the .hml file under **pages/index**.
...
@@ -28,7 +28,6 @@ Create a **<tabs>** component in the .hml file under **pages/index**.
</div>
</div>
```
```
```
```
/* xxx.css */
/* xxx.css */
.container {
.container {
...
@@ -52,7 +51,6 @@ Create a **<tabs>** component in the .hml file under **pages/index**.
...
@@ -52,7 +51,6 @@ 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**.
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**.
@@ -77,7 +75,6 @@ By default, the active tab of a **<tabs>** component is the one with the s
...
@@ -77,7 +75,6 @@ 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>**.
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>**.
> A **<tabs>** can wrap at most one [**<tab-bar>**](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [**<tab-content>**](../reference/arkui-js/js-components-container-tab-content.md).
> A **<tabs>** can wrap at most one [**<tab-bar>**](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [**<tab-content>**](../reference/arkui-js/js-components-container-tab-content.md).
...
@@ -209,7 +203,6 @@ In this example, you can switch between tabs and the active tab has the title te
...
@@ -209,7 +203,6 @@ 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.
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.
```
```
<!-- index.hml -->
<!-- index.hml -->
<div class="container">
<div class="container">
...
@@ -238,7 +231,6 @@ Use the **<tabs>**, **<tab-bar>**, and **<tab-content>** compo
...
@@ -238,7 +231,6 @@ Use the **<tabs>**, **<tab-bar>**, and **<tab-content>** compo
The web-like development paradigm uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. It could be helpful if you are developing small- and medium-sized applications with simple UIs.
The JavaScript-compatible web-like development paradigm uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. It could be helpful if you are developing small- and medium-sized applications with simple UIs.
For details about the components, see [Component Reference (JavaScript-based Web-like Development Paradigm)](../reference/arkui-js/js-components-common-attributes.md).
For details about the components, see [Component Reference (JavaScript-compatible Web-like Development Paradigm)](../reference/arkui-js/js-components-common-attributes.md).
## Overall Architecture
## Overall Architecture
ArkUI with the JavaScript-based web-like development paradigm consists of the following layers: application layer, frontend framework layer, engine layer, and porting layer.
ArkUI with the JavaScript-compatible web-like development paradigm consists of the following layers: application layer, frontend framework layer, engine layer, and porting layer.
