Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
You need to sign in or sign up before continuing.
未验证 提交 2b6e23ce 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!18825 翻译完成 17922+18135+18117：格式问题修改 

Merge pull request !18825 from ester.zhou/TR-17922
上级 fe0ef1d6 223de3ce
隐藏空白更改
内联 并排
Showing with 838 addition and 534 deletion
en/application-dev/reference/arkui-js-lite/js-common-styles.md
浏览文件 @ 2b6e23ce
...@@ -4,21 +4,21 @@ ...@@ -4,21 +4,21 @@
You can set universal styles for components in the **style** attribute or **.css** files. You can set universal styles for components in the **style** attribute or **.css** files.
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | ---------------------------------- | ---------------------------------------- | ----- | ---- | ---------------------------------------- |
| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.| | width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No | Component width.<br><br>If this attribute is not set, the default value **0** is used. |
| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br><br>If this attribute is not set, the default value **0** is used.| | height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No | Component height.<br><br>If this attribute is not set, the default value **0** is used. |
| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides in a declaration.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| | padding | &lt;length&gt; | 0 | No | Shorthand attribute to set the padding for all sides in a declaration.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.| | padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No | Left, top, right, and bottom padding. |
| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| | margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No | Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.| | margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No | Left, top, right, and bottom margins. |
| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.| | border-width | &lt;length&gt; | 0 | No | Shorthand attribute to set the margin for all sides. |
| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.| | border-color | &lt;color&gt; | black | No | Shorthand attribute to set the color for all borders. |
| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders. | | border-radius | &lt;length&gt; | - | No | Radius of round-corner borders. |
| background-color | &lt;color&gt; | - | No| Background color.| | background-color | &lt;color&gt; | - | No | Background color. |
| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.| | opacity<sup>5+</sup> | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
| display | string | flex | No| Type of the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered| | display | string | flex | No | Type of the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. | | [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No | Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
> **NOTE** > **NOTE**
...@@ -37,152 +37,152 @@ You can set universal styles for components in the **style** attribute or **.css ...@@ -37,152 +37,152 @@ You can set universal styles for components in the **style** attribute or **.css
**Table 1** Color enums **Table 1** Color enums
| Name| Hexadecimal Code| Color| | Name | Hexadecimal Code | Color |
| -------- | -------- | -------- | | -------------------- | -------- | ---------------------------------------- |
| aliceblue | \#f0f8ff | ![aliceblue](figures/aliceblue.png) | | aliceblue | \#f0f8ff | ![aliceblue](figures/aliceblue.png) |
| antiquewhite | \#faebd7 | ![antiquewhite](figures/antiquewhite.png) | | antiquewhite | \#faebd7 | ![antiquewhite](figures/antiquewhite.png) |
| aqua | \#00ffff | ![aqua](figures/aqua.png) | | aqua | \#00ffff | ![aqua](figures/aqua.png) |
| aquamarine | \#7fffd4 | ![aquamarine](figures/aquamarine.png) | | aquamarine | \#7fffd4 | ![aquamarine](figures/aquamarine.png) |
| azure | \#f0ffff | ![azure](figures/azure.png) | | azure | \#f0ffff | ![azure](figures/azure.png) |
| beige | \#f5f5dc | ![beige](figures/beige.png) | | beige | \#f5f5dc | ![beige](figures/beige.png) |
| bisque | \#ffe4c4 | ![bisque](figures/bisque.png) | | bisque | \#ffe4c4 | ![bisque](figures/bisque.png) |
| black | \#000000 | ![#000000](figures/#000000.png) | | black | \#000000 | ![000000](figures/000000.png) |
| blanchedalmond | \#ffebcd | ![blanchedalmond](figures/blanchedalmond.png) | | blanchedalmond | \#ffebcd | ![blanchedalmond](figures/blanchedalmond.png) |
| blue | \#0000ff | ![blue](figures/blue.png) | | blue | \#0000ff | ![blue](figures/blue.png) |
| blueviolet | \#8a2be2 | ![blueviolet](figures/blueviolet.png) | | blueviolet | \#8a2be2 | ![blueviolet](figures/blueviolet.png) |
| brown | \#a52a2a | ![brown](figures/brown.png) | | brown | \#a52a2a | ![brown](figures/brown.png) |
| burlywood | \#deB887 | ![burlywood](figures/burlywood.png) | | burlywood | \#deB887 | ![burlywood](figures/burlywood.png) |
| cadetblue | \#5f9ea0 | ![cadetblue](figures/cadetblue.png) | | cadetblue | \#5f9ea0 | ![cadetblue](figures/cadetblue.png) |
| chartreuse | \#7fff00 | ![chartreuse](figures/chartreuse.png) | | chartreuse | \#7fff00 | ![chartreuse](figures/chartreuse.png) |
| chocolate | \#d2691e | ![chocolate](figures/chocolate.png) | | chocolate | \#d2691e | ![chocolate](figures/chocolate.png) |
| coral | \#ff7f50 | ![coral](figures/coral.png) | | coral | \#ff7f50 | ![coral](figures/coral.png) |
| cornflowerblue | \#6495ed | ![cornflowerblue](figures/cornflowerblue.png) | | cornflowerblue | \#6495ed | ![cornflowerblue](figures/cornflowerblue.png) |
| cornsilk | \#fff8dc | ![cornsilk](figures/cornsilk.png) | | cornsilk | \#fff8dc | ![cornsilk](figures/cornsilk.png) |
| crimson | \#dc143c | ![crimson](figures/crimson.png) | | crimson | \#dc143c | ![crimson](figures/crimson.png) |
| cyan | \#00ffff | ![cyan](figures/cyan.png) | | cyan | \#00ffff | ![cyan](figures/cyan.png) |
| darkblue | \#00008b | ![darkblue](figures/darkblue.png) | | darkblue | \#00008b | ![darkblue](figures/darkblue.png) |
| darkcyan | \#008b8b | ![darkcyan](figures/darkcyan.png) | | darkcyan | \#008b8b | ![darkcyan](figures/darkcyan.png) |
| darkgoldenrod | \#b8860b | ![darkgoldenrod](figures/darkgoldenrod.png) | | darkgoldenrod | \#b8860b | ![darkgoldenrod](figures/darkgoldenrod.png) |
| darkgray | \#a9a9a9 | ![darkgray](figures/darkgray.png) | | darkgray | \#a9a9a9 | ![darkgray](figures/darkgray.png) |
| darkgreen | \#006400 | ![darkgreen](figures/darkgreen.png) | | darkgreen | \#006400 | ![darkgreen](figures/darkgreen.png) |
| darkgrey | \#a9a9a9 | ![darkgrey](figures/darkgrey.png) | | darkgrey | \#a9a9a9 | ![darkgrey](figures/darkgrey.png) |
| darkkhaki | \#bdb76b | ![darkkhaki](figures/darkkhaki.png) | | darkkhaki | \#bdb76b | ![darkkhaki](figures/darkkhaki.png) |
| darkmagenta | \#8b008b | ![darkmagenta](figures/darkmagenta.png) | | darkmagenta | \#8b008b | ![darkmagenta](figures/darkmagenta.png) |
| darkolivegreen | \#556b2f | ![darkolivegreen](figures/darkolivegreen.png) | | darkolivegreen | \#556b2f | ![darkolivegreen](figures/darkolivegreen.png) |
| darkorange | \#ff8c00 | ![darkorange](figures/darkorange.png) | | darkorange | \#ff8c00 | ![darkorange](figures/darkorange.png) |
| darkorchid | \#9932cc | ![darkorchid](figures/darkorchid.png) | | darkorchid | \#9932cc | ![darkorchid](figures/darkorchid.png) |
| darkred | \#8b0000 | ![darkred](figures/darkred.png) | | darkred | \#8b0000 | ![darkred](figures/darkred.png) |
| darksalmon | \#e9967a | ![darksalmon](figures/darksalmon.png) | | darksalmon | \#e9967a | ![darksalmon](figures/darksalmon.png) |
| darkseagreen | \#8fbc8f | ![darkseagreen](figures/darkseagreen.png) | | darkseagreen | \#8fbc8f | ![darkseagreen](figures/darkseagreen.png) |
| darkslateblue | \#483d8b | ![darkslateblue](figures/darkslateblue.png) | | darkslateblue | \#483d8b | ![darkslateblue](figures/darkslateblue.png) |
| darkslategray | \#2f4f4f | ![darkslategray](figures/darkslategray.png) | | darkslategray | \#2f4f4f | ![darkslategray](figures/darkslategray.png) |
| darkslategrey | \#2f4f4f | ![darkslategrey](figures/darkslategrey.png) | | darkslategrey | \#2f4f4f | ![darkslategrey](figures/darkslategrey.png) |
| darkturquoise | \#00ced1 | ![darkturquoise](figures/darkturquoise.png) | | darkturquoise | \#00ced1 | ![darkturquoise](figures/darkturquoise.png) |
| darkviolet | \#9400d3 | ![darkviolet](figures/darkviolet.png) | | darkviolet | \#9400d3 | ![darkviolet](figures/darkviolet.png) |
| deeppink | \#ff1493 | ![deeppink](figures/deeppink.png) | | deeppink | \#ff1493 | ![deeppink](figures/deeppink.png) |
| deepskyblue | \#00bfff | ![deepskyblue](figures/deepskyblue.png) | | deepskyblue | \#00bfff | ![deepskyblue](figures/deepskyblue.png) |
| dimgray | \#696969 | ![dimgray](figures/dimgray.png) | | dimgray | \#696969 | ![dimgray](figures/dimgray.png) |
| dimgrey | \#696969 | ![dimgrey](figures/dimgrey.png) | | dimgrey | \#696969 | ![dimgrey](figures/dimgrey.png) |
| dodgerblue | \#1e90ff | ![dodgerblue](figures/dodgerblue.png) | | dodgerblue | \#1e90ff | ![dodgerblue](figures/dodgerblue.png) |
| firebrick | \#b22222 | ![firebrick](figures/firebrick.png) | | firebrick | \#b22222 | ![firebrick](figures/firebrick.png) |
| floralwhite | \#fffaf0 | ![floralwhite](figures/floralwhite.png) | | floralwhite | \#fffaf0 | ![floralwhite](figures/floralwhite.png) |
| forestgreen | \#228b22 | ![forestgreen](figures/forestgreen.png) | | forestgreen | \#228b22 | ![forestgreen](figures/forestgreen.png) |
| fuchsia | \#ff00ff | ![fuchsia](figures/fuchsia.png) | | fuchsia | \#ff00ff | ![fuchsia](figures/fuchsia.png) |
| gainsboro | \#dcdcdc | ![gainsboro](figures/gainsboro.png) | | gainsboro | \#dcdcdc | ![gainsboro](figures/gainsboro.png) |
| ghostwhite | \#f8f8ff | ![ghostwhite](figures/ghostwhite.png) | | ghostwhite | \#f8f8ff | ![ghostwhite](figures/ghostwhite.png) |
| gold | \#ffd700 | ![gold](figures/gold.png) | | gold | \#ffd700 | ![gold](figures/gold.png) |
| goldenrod | \#daa520 | ![goldenrod](figures/goldenrod.png) | | goldenrod | \#daa520 | ![goldenrod](figures/goldenrod.png) |
| gray | \#808080 | ![gray](figures/gray.png) | | gray | \#808080 | ![gray](figures/gray.png) |
| green | \#008000 | ![green](figures/green.png) | | green | \#008000 | ![green](figures/green.png) |
| greenyellow | \#adff2f | ![greenyellow](figures/greenyellow.png) | | greenyellow | \#adff2f | ![greenyellow](figures/greenyellow.png) |
| grey | \#808080 | ![grey](figures/grey.png) | | grey | \#808080 | ![grey](figures/grey.png) |
| honeydew | \#f0fff0 | ![honeydew](figures/honeydew.png) | | honeydew | \#f0fff0 | ![honeydew](figures/honeydew.png) |
| hotpink | \#ff69b4 | ![hotpink](figures/hotpink.png) | | hotpink | \#ff69b4 | ![hotpink](figures/hotpink.png) |
| indianred | \#cd5c5c | ![indianred](figures/indianred.png) | | indianred | \#cd5c5c | ![indianred](figures/indianred.png) |
| indigo | \#4b0082 | ![indigo](figures/indigo.png) | | indigo | \#4b0082 | ![indigo](figures/indigo.png) |
| ivory | \#fffff0 | ![ivory](figures/ivory.png) | | ivory | \#fffff0 | ![ivory](figures/ivory.png) |
| khaki | \#f0e68c | ![khaki](figures/khaki.png) | | khaki | \#f0e68c | ![khaki](figures/khaki.png) |
| lavender | \#e6e6fa | ![lavender](figures/lavender.png) | | lavender | \#e6e6fa | ![lavender](figures/lavender.png) |
| lavenderblush | \#fff0f5 | ![lavenderblush](figures/lavenderblush.png) | | lavenderblush | \#fff0f5 | ![lavenderblush](figures/lavenderblush.png) |
| lawngreen | \#7cfc00 | ![lawngreen](figures/lawngreen.png) | | lawngreen | \#7cfc00 | ![lawngreen](figures/lawngreen.png) |
| lemonchiffon | \#fffacd | ![lemonchiffon](figures/lemonchiffon.png) | | lemonchiffon | \#fffacd | ![lemonchiffon](figures/lemonchiffon.png) |
| lightblue | \#add8e6 | ![lightblue](figures/lightblue.png) | | lightblue | \#add8e6 | ![lightblue](figures/lightblue.png) |
| lightcoral | \#f08080 | ![lightcoral](figures/lightcoral.png) | | lightcoral | \#f08080 | ![lightcoral](figures/lightcoral.png) |
| lightcyan | \#e0ffff | ![lightcyan](figures/lightcyan.png) | | lightcyan | \#e0ffff | ![lightcyan](figures/lightcyan.png) |
| lightgoldenrodyellow | \#fafad2 | ![lightgoldenrodyellow](figures/lightgoldenrodyellow.png) | | lightgoldenrodyellow | \#fafad2 | ![lightgoldenrodyellow](figures/lightgoldenrodyellow.png) |
| lightgray | \#d3d3d3 | ![lightgray](figures/lightgray.png) | | lightgray | \#d3d3d3 | ![lightgray](figures/lightgray.png) |
| lightgreen | \#90ee90 | ![lightgreen](figures/lightgreen.png) | | lightgreen | \#90ee90 | ![lightgreen](figures/lightgreen.png) |
| lightpink | \#ffb6c1 | ![lightpink](figures/lightpink.png) | | lightpink | \#ffb6c1 | ![lightpink](figures/lightpink.png) |
| lightsalmon | \#ffa07a | ![lightsalmon](figures/lightsalmon.png) | | lightsalmon | \#ffa07a | ![lightsalmon](figures/lightsalmon.png) |
| lightseagreen | \#20b2aa | ![lightseagreen](figures/lightseagreen.png) | | lightseagreen | \#20b2aa | ![lightseagreen](figures/lightseagreen.png) |
| lightskyblue | \#87cefa | ![lightskyblue](figures/lightskyblue.png) | | lightskyblue | \#87cefa | ![lightskyblue](figures/lightskyblue.png) |
| lightslategray | \#778899 | ![lightslategray](figures/lightslategray.png) | | lightslategray | \#778899 | ![lightslategray](figures/lightslategray.png) |
| lightslategrey | \#778899 | ![lightslategrey](figures/lightslategrey.png) | | lightslategrey | \#778899 | ![lightslategrey](figures/lightslategrey.png) |
| lightsteelblue | \#b0c4de | ![lightsteelblue](figures/lightsteelblue.png) | | lightsteelblue | \#b0c4de | ![lightsteelblue](figures/lightsteelblue.png) |
| lightyellow | \#ffffe0 | ![lightyellow](figures/lightyellow.png) | | lightyellow | \#ffffe0 | ![lightyellow](figures/lightyellow.png) |
| lime | \#00ff00 | ![lime](figures/lime.png) | | lime | \#00ff00 | ![lime](figures/lime.png) |
| limegreen | \#32cd32 | ![limegreen](figures/limegreen.png) | | limegreen | \#32cd32 | ![limegreen](figures/limegreen.png) |
| linen | \#faf0e6 | ![linen](figures/linen.png) | | linen | \#faf0e6 | ![linen](figures/linen.png) |
| magenta | \#ff00ff | ![magenta](figures/magenta.png) | | magenta | \#ff00ff | ![magenta](figures/magenta.png) |
| maroon | \#800000 | ![maroon](figures/maroon.png) | | maroon | \#800000 | ![maroon](figures/maroon.png) |
| mediumaquamarine | \#66cdaa | ![mediumaquamarine](figures/mediumaquamarine.png) | | mediumaquamarine | \#66cdaa | ![mediumaquamarine](figures/mediumaquamarine.png) |
| mediumblue | \#0000cd | ![mediumblue](figures/mediumblue.png) | | mediumblue | \#0000cd | ![mediumblue](figures/mediumblue.png) |
| mediumorchid | \#ba55d3 | ![mediumorchid](figures/mediumorchid.png) | | mediumorchid | \#ba55d3 | ![mediumorchid](figures/mediumorchid.png) |
| mediumpurple | \#9370db | ![mediumpurple](figures/mediumpurple.png) | | mediumpurple | \#9370db | ![mediumpurple](figures/mediumpurple.png) |
| mediumseagreen | \#3cb371 | ![mediumseagreen](figures/mediumseagreen.png) | | mediumseagreen | \#3cb371 | ![mediumseagreen](figures/mediumseagreen.png) |
| mediumslateblue | \#7b68ee | ![mediumslateblue](figures/mediumslateblue.png) | | mediumslateblue | \#7b68ee | ![mediumslateblue](figures/mediumslateblue.png) |
| mediumspringgreen | \#00fa9a | ![mediumspringgreen](figures/mediumspringgreen.png) | | mediumspringgreen | \#00fa9a | ![mediumspringgreen](figures/mediumspringgreen.png) |
| mediumturquoise | \#48d1cc | ![mediumturquoise](figures/mediumturquoise.png) | | mediumturquoise | \#48d1cc | ![mediumturquoise](figures/mediumturquoise.png) |
| mediumvioletred | \#c71585 | ![mediumvioletred](figures/mediumvioletred.png) | | mediumvioletred | \#c71585 | ![mediumvioletred](figures/mediumvioletred.png) |
| midnightblue | \#191970 | ![midnightblue](figures/midnightblue.png) | | midnightblue | \#191970 | ![midnightblue](figures/midnightblue.png) |
| mintcream | \#f5fffa | ![mintcream](figures/mintcream.png) | | mintcream | \#f5fffa | ![mintcream](figures/mintcream.png) |
| mistyrose | \#ffe4e1 | ![mistyrose](figures/mistyrose.png) | | mistyrose | \#ffe4e1 | ![mistyrose](figures/mistyrose.png) |
| moccasin | \#ffe4b5 | ![moccasin](figures/moccasin.png) | | moccasin | \#ffe4b5 | ![moccasin](figures/moccasin.png) |
| navajowhite | \#ffdead | ![navajowhite](figures/navajowhite.png) | | navajowhite | \#ffdead | ![navajowhite](figures/navajowhite.png) |
| navy | \#000080 | ![navy](figures/navy.png) | | navy | \#000080 | ![navy](figures/navy.png) |
| oldlace | \#fdf5e6 | ![oldlace](figures/oldlace.png) | | oldlace | \#fdf5e6 | ![oldlace](figures/oldlace.png) |
| olive | \#808000 | ![olive](figures/olive.png) | | olive | \#808000 | ![olive](figures/olive.png) |
| olivedrab | \#6b8e23 | ![olivedrab](figures/olivedrab.png) | | olivedrab | \#6b8e23 | ![olivedrab](figures/olivedrab.png) |
| orange | \#ffa500 | ![orange](figures/orange.png) | | orange | \#ffa500 | ![orange](figures/orange.png) |
| orangered | \#ff4500 | ![orangered](figures/orangered.png) | | orangered | \#ff4500 | ![orangered](figures/orangered.png) |
| orchid | \#da70d6 | ![orchid](figures/orchid.png) | | orchid | \#da70d6 | ![orchid](figures/orchid.png) |
| palegoldenrod | \#eee8aa | ![palegoldenrod](figures/palegoldenrod.png) | | palegoldenrod | \#eee8aa | ![palegoldenrod](figures/palegoldenrod.png) |
| palegreen | \#98fb98 | ![palegreen](figures/palegreen.png) | | palegreen | \#98fb98 | ![palegreen](figures/palegreen.png) |
| paleturquoise | \#afeeee | ![paleturquoise](figures/paleturquoise.png) | | paleturquoise | \#afeeee | ![paleturquoise](figures/paleturquoise.png) |
| palevioletred | \#db7093 | ![palevioletred](figures/palevioletred.png) | | palevioletred | \#db7093 | ![palevioletred](figures/palevioletred.png) |
| papayawhip | \#ffefd5 | ![papayawhip](figures/papayawhip.png) | | papayawhip | \#ffefd5 | ![papayawhip](figures/papayawhip.png) |
| peachpuff | \#ffdab9 | ![peachpuff](figures/peachpuff.png) | | peachpuff | \#ffdab9 | ![peachpuff](figures/peachpuff.png) |
| peru | \#cd853f | ![peru](figures/peru.png) | | peru | \#cd853f | ![peru](figures/peru.png) |
| pink | \#ffc0cb | ![pink](figures/pink.png) | | pink | \#ffc0cb | ![pink](figures/pink.png) |
| plum | \#dda0dd | ![plum](figures/plum.png) | | plum | \#dda0dd | ![plum](figures/plum.png) |
| powderblue | \#b0e0e6 | ![powderblue](figures/powderblue.png) | | powderblue | \#b0e0e6 | ![powderblue](figures/powderblue.png) |
| purple | \#800080 | ![purple](figures/purple.png) | | purple | \#800080 | ![purple](figures/purple.png) |
| rebeccapurple | \#663399 | ![rebeccapurple](figures/rebeccapurple.png) | | rebeccapurple | \#663399 | ![rebeccapurple](figures/rebeccapurple.png) |
| red | \#ff0000 | ![red](figures/red.png) | | red | \#ff0000 | ![red](figures/red.png) |
| rosybrown | \#bc8f8f | ![rosybrown](figures/rosybrown.png) | | rosybrown | \#bc8f8f | ![rosybrown](figures/rosybrown.png) |
| royalblue | \#4169e1 | ![royalblue](figures/royalblue.png) | | royalblue | \#4169e1 | ![royalblue](figures/royalblue.png) |
| saddlebrown | \#8b4513 | ![saddlebrown](figures/saddlebrown.png) | | saddlebrown | \#8b4513 | ![saddlebrown](figures/saddlebrown.png) |
| salmon | \#fa8072 | ![salmon](figures/salmon.png) | | salmon | \#fa8072 | ![salmon](figures/salmon.png) |
| sandybrown | \#f4a460 | ![sandybrown](figures/sandybrown.png) | | sandybrown | \#f4a460 | ![sandybrown](figures/sandybrown.png) |
| seagreen | \#2e8b57 | ![seagreen](figures/seagreen.png) | | seagreen | \#2e8b57 | ![seagreen](figures/seagreen.png) |
| seashell | \#fff5ee | ![seashell](figures/seashell.png) | | seashell | \#fff5ee | ![seashell](figures/seashell.png) |
| sienna | \#a0522d | ![sienna](figures/sienna.png) | | sienna | \#a0522d | ![sienna](figures/sienna.png) |
| silver | \#c0c0c0 | ![silver](figures/silver.png) | | silver | \#c0c0c0 | ![silver](figures/silver.png) |
| skyblue | \#87ceeb | ![skyblue](figures/skyblue.png) | | skyblue | \#87ceeb | ![skyblue](figures/skyblue.png) |
| slateblue | \#6a5acd | ![slateblue](figures/slateblue.png) | | slateblue | \#6a5acd | ![slateblue](figures/slateblue.png) |
| slategray | \#708090 | ![slategray](figures/slategray.png) | | slategray | \#708090 | ![slategray](figures/slategray.png) |
| slategrey | \#708090 | ![slategray](figures/slategray.png) | | slategrey | \#708090 | ![slategray](figures/slategray.png) |
| snow | \#fffafa | ![snow](figures/snow.png) | | snow | \#fffafa | ![snow](figures/snow.png) |
| springgreen | \#00ff7f | ![springgreen](figures/springgreen.png) | | springgreen | \#00ff7f | ![springgreen](figures/springgreen.png) |
| steelblue | \#4682b4 | ![steelblue](figures/steelblue.png) | | steelblue | \#4682b4 | ![steelblue](figures/steelblue.png) |
| tan | \#d2b48c | ![tan](figures/tan.png) | | tan | \#d2b48c | ![tan](figures/tan.png) |
| teal | \#008080 | ![teal](figures/teal.png) | | teal | \#008080 | ![teal](figures/teal.png) |
| thistle | \#d8Bfd8 | ![thistle](figures/thistle.png) | | thistle | \#d8Bfd8 | ![thistle](figures/thistle.png) |
| tomato | \#ff6347 | ![tomato](figures/tomato.png) | | tomato | \#ff6347 | ![tomato](figures/tomato.png) |
| turquoise | \#40e0d0 | ![turquoise](figures/turquoise.png) | | turquoise | \#40e0d0 | ![turquoise](figures/turquoise.png) |
| violet | \#ee82ee | ![violet](figures/violet.png) | | violet | \#ee82ee | ![violet](figures/violet.png) |
| wheat | \#f5deb3 | ![wheat](figures/wheat.png) | | wheat | \#f5deb3 | ![wheat](figures/wheat.png) |
| white | \#ffffff | ![white](figures/white.png) | | white | \#ffffff | ![white](figures/white.png) |
| whitesmoke | \#f5f5f5 | ![whitesmoke](figures/whitesmoke.png) | | whitesmoke | \#f5f5f5 | ![whitesmoke](figures/whitesmoke.png) |
| yellow | \#ffff00 | ![yellow](figures/yellow.png) | | yellow | \#ffff00 | ![yellow](figures/yellow.png) |
| yellowgreen | \#9acd32 | ![yellowgreen](figures/yellowgreen.png) | | yellowgreen | \#9acd32 | ![yellowgreen](figures/yellowgreen.png) |
en/application-dev/reference/arkui-js-lite/js-components-basic-chart.md
浏览文件 @ 2b6e23ce
...@@ -14,118 +14,118 @@ Not supported ...@@ -14,118 +14,118 @@ Not supported
## Attributes ## Attributes
| Name| Type| Mandatory| Description| | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | ------------------------- | ---- | ---------------------------------------- |
| type | string | No| Chart type. Dynamic modification is not supported. Available values include:<br>- **bar**: bar chart<br>- **line**: line chart<br>Default value: **line**| | type | string | No | Chart type. Dynamic modification is not supported. Available values include:<br>- **bar**: bar chart<br>- **line**: line chart<br>Default value: **line**|
| options | ChartOptions | Yes| Chart parameters. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported.| | options | ChartOptions | Yes | Chart parameters. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported.|
| datasets | Array&lt;ChartDataset&gt; | Yes| Data sets. You can set multiple datasets and their background colors.| | datasets | Array&lt;ChartDataset&gt; | Yes | Data sets. You can set multiple datasets and their background colors. |
| id | string | No| Unique ID of the component.| | id | string | No | Unique ID of the component. |
| style | string | No| Style declaration of the component.| | style | string | No | Style declaration of the component. |
| class | string | No| Style class of the component, which is used to refer to a style table.| | class | string | No | Style class of the component, which is used to refer to a style table. |
| ref | string | No| Reference information of child elements, which is registered with the parent component on **$refs**.| | ref | string | No | Reference information of child elements, which is registered with the parent component on **$refs**.|
**Table 1** ChartOptions **Table 1** ChartOptions
| Name| Type| Mandatory| Description| | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ------ | ----------- | ---- | ---------------------------------------- |
| xAxis | ChartAxis | Yes| X-axis parameters. You can set the minimum value, maximum value, and scale of the x-axis, and whether to display the x-axis.| | xAxis | ChartAxis | Yes | X-axis parameters. You can set the minimum value, maximum value, and scale of the x-axis, and whether to display the x-axis. |
| yAxis | ChartAxis | Yes| Y-axis parameters. You can set the minimum value, maximum value, and scale of the y-axis, and whether to display the y-axis.| | yAxis | ChartAxis | Yes | Y-axis parameters. You can set the minimum value, maximum value, and scale of the y-axis, and whether to display the y-axis. |
| series | ChartSeries | No| Data series parameters which cover the following:<br>- Line style, such as the line width and whether the line is smooth.<br>- Style and size of the white point at the start of the line.<br>**NOTE**<br>Only line charts support this attribute. | | series | ChartSeries | No | Data series parameters which cover the following:<br>- Line style, such as the line width and whether the line is smooth.<br>- Style and size of the white point at the start of the line.<br>**NOTE**<br>Only line charts support this attribute.|
**Table 2** ChartDataset **Table 2** ChartDataset
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | --------------------------- | ------------------- | -------- | ---- | -------------------- |
| backgroundColor(deprecated) | &lt;color&gt; | \#ff6384 | No| Color of a line or bar. This attribute is not recommended.| | backgroundColor(deprecated) | &lt;color&gt; | \#ff6384 | No | Color of a line or bar. This attribute is not recommended. |
| strokeColor | &lt;color&gt; | \#ff6384 | No| Line color. Only line charts support this attribute.| | strokeColor | &lt;color&gt; | \#ff6384 | No | Line color. Only line charts support this attribute. |
| fillColor | &lt;color&gt; | \#ff6384 | No| Fill color. For line charts, the value indicates the gradient color to fill.| | fillColor | &lt;color&gt; | \#ff6384 | No | Fill color. For line charts, the value indicates the gradient color to fill. |
| data | Array&lt;number&gt; | - | Yes| Data of the drawn line or bar.| | data | Array&lt;number&gt; | - | Yes | Data of the drawn line or bar. |
| gradient | boolean | false | No| Whether to display the gradient color. Only line charts support this attribute.| | gradient | boolean | false | No | Whether to display the gradient color. Only line charts support this attribute.|
**Table 3** ChartAxis **Table 3** ChartAxis
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | ------------- | -------- | ---- | ---------------------------------------- |
| min | number | 0 | No| Minimum value of the axis.<br>Negative numbers are not supported. Only line charts support this attribute.| | min | number | 0 | No | Minimum value of the axis.<br>Negative numbers are not supported. Only line charts support this attribute. |
| max | number | 100 | No| Maximum value of the axis.<br>Negative numbers are not supported. Only line charts support this attribute.| | max | number | 100 | No | Maximum value of the axis.<br>Negative numbers are not supported. Only line charts support this attribute. |
| axisTick | number | 10 | No| Number of scales displayed on the axis.<br>**NOTE**<br>The value ranges from 1 to 20. The display effect depends on the calculation result of Number of pixels occupied by the image width/(**max**-**min**).<br>Lite wearables support integer calculation, and an error may occur in the case of inexhaustible division. Specifically, a segment of space may be left at the end of the x-axis.<br>In the bar chart, the number of bars in each group of data is the same as the number of scales, and the bars are displayed at the scales.| | axisTick | number | 10 | No | Number of scales displayed on the axis.<br>**NOTE**<br>The value ranges from 1 to 20. The display effect depends on the calculation result of Number of pixels occupied by the image width/(**max**-**min**).<br>Lite wearables support integer calculation, and an error may occur in the case of inexhaustible division. Specifically, a segment of space may be left at the end of the x-axis.<br>In the bar chart, the number of bars in each group of data is the same as the number of scales, and the bars are displayed at the scales.|
| display | boolean | false | No| Whether to display the axis.| | display | boolean | false | No | Whether to display the axis. |
| color | &lt;color&gt; | \#c0c0c0 | No| Axis color.| | color | &lt;color&gt; | \#c0c0c0 | No | Axis color. |
**Table 4** ChartSeries **Table 4** ChartSeries
| Name| Type| Mandatory| Description| | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ----------- | -------------- | ---- | -------------------- |
| lineStyle | ChartLineStyle | No| Line style, such as the line width and whether the line is smooth.| | lineStyle | ChartLineStyle | No | Line style, such as the line width and whether the line is smooth. |
| headPoint | PointStyle | No| Style and size of the white point at the start of the line.| | headPoint | PointStyle | No | Style and size of the white point at the start of the line. |
| topPoint | PointStyle | No| Style and size of the top point.| | topPoint | PointStyle | No | Style and size of the top point. |
| bottomPoint | PointStyle | No| Style and size of the bottom point.| | bottomPoint | PointStyle | No | Style and size of the bottom point. |
| loop | ChartLoop | No| Whether to start drawing again when the screen is looped.| | loop | ChartLoop | No | Whether to start drawing again when the screen is looped.|
**Table 5** ChartLineStyle **Table 5** ChartLineStyle
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | ------ | -------------- | ----- | ---- | ----- |
| width | &lt;length&gt; | 1px | No| Line width.| | width | &lt;length&gt; | 1px | No | Line width.|
| smooth | boolean | false | No| Whether the line is smooth.| | smooth | boolean | false | No | Whether the line is smooth.|
**Table 6** PointStyle **Table 6** PointStyle
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | ----------- | -------------- | -------- | ---- | ---------------------------------- |
| shape | string | circle | No| Shape of the highlight point. Available values are as follows:<br>- circle| | shape | string | circle | No | Shape of the highlight point. Available values are as follows:<br>- circle|
| size | &lt;length&gt; | 5px | No| Size of the highlight point.| | size | &lt;length&gt; | 5px | No | Size of the highlight point. |
| strokeWidth | &lt;length&gt; | 1px | No| Stroke width.| | strokeWidth | &lt;length&gt; | 1px | No | Stroke width. |
| strokeColor | &lt;color&gt; | \#ff0000 | No| Stroke color.| | strokeColor | &lt;color&gt; | \#ff0000 | No | Stroke color. |
| fillColor | &lt;color&gt; | \#ff0000 | No| Fill color.| | fillColor | &lt;color&gt; | \#ff0000 | No | Fill color. |
| display | boolean | true | No| Whether to display the highlight spot.| | display | boolean | true | No | Whether to display the highlight spot. |
**Table 7** ChartLoop **Table 7** ChartLoop
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | ------ | -------------- | ---- | ---- | ---------------------------------------- |
| margin | &lt;length&gt; | 1 | No| Number of erased points (horizontal distance between the latest drawn point and the earliest point). You are not advised to use **margin** together with **topPoint**, **bottomPoint**, or **headPoint** for mini-, small- and standard-system devices. If you do so, there is a possibility that the point is in the erase area and invisible.| | margin | &lt;length&gt; | 1 | No | Number of erased points (horizontal distance between the latest drawn point and the earliest point). You are not advised to use **margin** together with **topPoint**, **bottomPoint**, or **headPoint** for mini-, small- and standard-system devices. If you do so, there is a possibility that the point is in the erase area and invisible.|
## Methods ## Methods
| Methods| Parameter| Description| | Methods | Parameter | Description |
| -------- | -------- | -------- | | ------ | ---------------------------------------- | ---------------------------------------- |
| append | {<br>serial: number, // Set the data subscript of the line chart to be updated.<br>data: Array&lt;number&gt;, // Set the new data.<br>} | Dynamically add data to an existing data series. The target series is specified based on **serial**, which is the subscript of the datasets array and starts from 0. **datasets[index].data** is not updated. Only line charts support this attribute. The value is incremented by 1 based on the horizontal coordinate and is related to the **xAxis min/max** setting.| | append | {<br>serial: number, // Set the data subscript of the line chart to be updated.<br>data: Array&lt;number&gt;, // Set the new data.<br>} | Dynamically add data to an existing data series. The target series is specified based on **serial**, which is the subscript of the datasets array and starts from 0. **datasets[index].data** is not updated. Only line charts support this attribute. The value is incremented by 1 based on the horizontal coordinate and is related to the **xAxis min/max** setting.|
## Events ## Events
| Name| Parameter| Description| | Name | Parameter | Description |
| -------- | -------- | -------- | | ------------------ | --------------------------------- | ----------- |
| click | - | Triggered when the component is clicked. | | click | - | Triggered when the component is clicked. |
| longpress | - | Triggered when the component is long pressed. | | longpress | - | Triggered when the component is long pressed. |
| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. | | swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
## Styles ## Styles
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | ---------------------------------- | ---------------------------------------- | ----- | ---- | ---------------------------------------- |
| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. | | width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No | Component width.<br><br>If this attribute is not set, the default value **0** is used. |
| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. | | height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No | Component height.<br><br>If this attribute is not set, the default value **0** is used. |
| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| | padding | &lt;length&gt; | 0 | No | Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.| | padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No | Left, top, right, and bottom padding. |
| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| | margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No | Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.| | margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No | Left, top, right, and bottom margins. |
| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.| | border-width | &lt;length&gt; | 0 | No | Shorthand attribute to set the margin for all sides. |
| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.| | border-color | &lt;color&gt; | black | No | Shorthand attribute to set the color for all borders. |
| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders. | | border-radius | &lt;length&gt; | - | No | Radius of round-corner borders. |
| background-color | &lt;color&gt; | - | No| Background color.| | background-color | &lt;color&gt; | - | No | Background color. |
| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered| | display | string | flex | No | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. | | [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No | Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
## Example ## Example
1. Line chart 1. Line chart
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
...@@ -134,7 +134,7 @@ Not supported ...@@ -134,7 +134,7 @@ Not supported
</div> </div>
``` ```
```css ```css
/* xxx.css */ /* xxx.css */
.container { .container {
...@@ -155,7 +155,7 @@ Not supported ...@@ -155,7 +155,7 @@ Not supported
} }
``` ```
```js ```js
// xxx.js // xxx.js
export default { export default {
...@@ -211,7 +211,7 @@ Not supported ...@@ -211,7 +211,7 @@ Not supported
![lite_line](figures/lite_line.PNG) ![lite_line](figures/lite_line.PNG)
2. Bar chart 2. Bar chart
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
...@@ -219,7 +219,7 @@ Not supported ...@@ -219,7 +219,7 @@ Not supported
</div> </div>
``` ```
```css ```css
/* xxx.css */ /* xxx.css */
.container { .container {
...@@ -236,7 +236,7 @@ Not supported ...@@ -236,7 +236,7 @@ Not supported
} }
``` ```
```js ```js
// xxx.js // xxx.js
export default { export default {
......
en/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md
浏览文件 @ 2b6e23ce
...@@ -14,68 +14,68 @@ Not supported ...@@ -14,68 +14,68 @@ Not supported
## Attributes ## Attributes
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | --------------------- | -------------------------- | -------- | ---- | ---------------------------------------- |
| images | Array&lt;ImageFrame&gt; | - | Yes| Image frame information. The frame information includes the image path, size, and location. The supported image formats include PNG, JPG, and BMP. For details about **ImageFrame**, see Table 1.<br>**NOTE**<br>Use data binding, for example, **images = {{images}}**, to specify the image. Declare the corresponding variable in the JavaScript: **images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]**. | | images | Array&lt;ImageFrame&gt; | - | Yes | Image frame information. The frame information includes the image path, size, and location. The supported image formats include PNG, JPG, and BMP. For details about **ImageFrame**, see Table 1.<br>**NOTE**<br>Use data binding, for example, **images = {{images}}**, to specify the image. Declare the corresponding variable in the JavaScript: **images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]**.|
| iteration | number \| string | infinite | No| Number of times that the frame animation is played. **number** indicates a fixed number of playback operations, and **infinite** indicates an unlimited number of playback operations.| | iteration | number \| string | infinite | No | Number of times that the frame animation is played. **number** indicates a fixed number of playback operations, and **infinite** indicates an unlimited number of playback operations.|
| reverse | boolean | false | No| Playback sequence.<br/>- **true**: Images are played from the last one to the first one.<br/>- **false**: Images are played from the first one to the last one. | | reverse | boolean | false | No | Playback sequence.<br/>- **true**: Images are played from the last one to the first one.<br/>- **false**: Images are played from the first one to the last one.|
| fixedsize | boolean | true | No| Whether the image size is the same as the component size.<br>- **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br>- **false**: The image size is different from the component size. In this case, the width, height, top, and left attributes of each image must be set separately. | | fixedsize | boolean | true | No | Whether the image size is the same as the component size.<br>- **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br>- **false**: The image size is different from the component size. In this case, the width, height, top, and left attributes of each image must be set separately.|
| duration | string | - | Yes| Single video playback duration, in seconds (s) or milliseconds (ms). The default unit is ms. If the value is **0**, no image is played. The value change takes effect only at the start of the next cycle. | | duration | string | - | Yes | Single video playback duration, in seconds (s) or milliseconds (ms). The default unit is ms. If the value is **0**, no image is played. The value change takes effect only at the start of the next cycle.|
| fillmode<sup>5+</sup> | string | forwards | No| Status of the frame animation after its playback is complete. Available values are as follows:<br>- **none**: restores to the initial status.<br>- **forwards**: retains the ending status defined for the last key frame.| | fillmode<sup>5+</sup> | string | forwards | No | Status of the frame animation after its playback is complete. Available values are as follows:<br>- **none**: restores to the initial status.<br>- **forwards**: retains the ending status defined for the last key frame.|
| id | string | - | No| Unique ID of the component.| | id | string | - | No | Unique ID of the component. |
| style | string | - | No| Style declaration of the component.| | style | string | - | No | Style declaration of the component. |
| class | string | - | No| Style class of the component, which is used to refer to a style table.| | class | string | - | No | Style class of the component, which is used to refer to a style table. |
| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.| | ref | string | - | No | Reference information of child elements, which is registered with the parent component on **$refs**.|
**Table 1** ImageFrame **Table 1** ImageFrame
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | ------ | -------------- | ---- | ---- | ---------------- |
| src | &lt;uri&gt; | - | Yes| Image path.| | src | &lt;uri&gt; | - | Yes | Image path. |
| width | &lt;length&gt; | 0 | No| Image width.| | width | &lt;length&gt; | 0 | No | Image width. |
| height | &lt;length&gt; | 0 | No| Image height.| | height | &lt;length&gt; | 0 | No | Image height. |
| top | &lt;length&gt; | 0 | No| Vertical coordinate of the image relative to the upper left corner of the component.| | top | &lt;length&gt; | 0 | No | Vertical coordinate of the image relative to the upper left corner of the component.|
| left | &lt;length&gt; | 0 | No| Horizontal coordinate of the image relative to the upper left corner of the component.| | left | &lt;length&gt; | 0 | No | Horizontal coordinate of the image relative to the upper left corner of the component.|
## Events ## Events
| Name| Parameter| Description| | Name | Parameter | Description |
| -------- | -------- | -------- | | ------------------ | --------------------------------- | ----------- |
| stop | - | Triggered when the frame animation stops| | stop | - | Triggered when the frame animation stops |
| click | - | Triggered when the component is clicked. | | click | - | Triggered when the component is clicked. |
| longpress | - | Triggered when the component is long pressed. | | longpress | - | Triggered when the component is long pressed. |
| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. | | swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
## Styles ## Styles
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | ---------------------------------- | ---------------------------------------- | ----- | ---- | ---------------------------------------- |
| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.| | width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No | Component width.<br><br>If this attribute is not set, the default value **0** is used. |
| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br><br>If this attribute is not set, the default value **0** is used.| | height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No | Component height.<br><br>If this attribute is not set, the default value **0** is used. |
| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| | padding | &lt;length&gt; | 0 | No | Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.| | padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No | Left, top, right, and bottom padding. |
| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| | margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No | Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.| | margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No | Left, top, right, and bottom margins. |
| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.| | border-width | &lt;length&gt; | 0 | No | Shorthand attribute to set the margin for all sides. |
| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.| | border-color | &lt;color&gt; | black | No | Shorthand attribute to set the color for all borders. |
| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.| | border-radius | &lt;length&gt; | - | No | Radius of round-corner borders. |
| background-color | &lt;color&gt; | - | No| Background color.| | background-color | &lt;color&gt; | - | No | Background color. |
| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.| | opacity<sup>5+</sup> | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered| | display | string | flex | No | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| left\|Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.| | [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No | left\|Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
## Methods ## Methods
| Name| Parameter| Description| | Name | Parameter | Description |
| -------- | -------- | -------- | | -------- | ---- | ---------------------------------------- |
| start | - | Starts to play the frame animation of an image. If this method is called again, the playback starts from the first frame.| | start | - | Starts to play the frame animation of an image. If this method is called again, the playback starts from the first frame. |
| pause | - | Pauses the frame animation playback of an image.| | pause | - | Pauses the frame animation playback of an image. |
| stop | - | Stops the frame animation playback of an image.| | stop | - | Stops the frame animation playback of an image. |
| resume | - | Resumes the frame animation playback of an image.| | resume | - | Resumes the frame animation playback of an image. |
| getState | - | Obtains the playback state. Available values are as follows:<br>- playing<br>- paused<br>- stopped| | getState | - | Obtains the playback state. Available values are as follows:<br>- playing<br>- paused<br>- stopped|
## Example ## Example
......
en/application-dev/reference/arkui-js-lite/js-components-basic-slider.md
浏览文件 @ 2b6e23ce
...@@ -14,52 +14,52 @@ Not supported ...@@ -14,52 +14,52 @@ Not supported
## Attributes ## Attributes
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | ----- | ------ | ---- | ---- | ---------------------------------------- |
| min | number | 0 | No| Minimum value of the slider.| | min | number | 0 | No | Minimum value of the slider. |
| max | number | 100 | No| Maximum value of the slider.| | max | number | 100 | No | Maximum value of the slider. |
| value | number | 0 | No| Initial value of the slider.| | value | number | 0 | No | Initial value of the slider. |
| id | string | - | No| Unique ID of the component.| | id | string | - | No | Unique ID of the component. |
| style | string | - | No| Style declaration of the component.| | style | string | - | No | Style declaration of the component. |
| class | string | - | No| Style class of the component, which is used to refer to a style table.| | class | string | - | No | Style class of the component, which is used to refer to a style table. |
| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.| | ref | string | - | No | Reference information of child elements, which is registered with the parent component on **$refs**.|
## Events ## Events
| Name| Parameter| Description| | Name | Parameter | Description |
| -------- | -------- | -------- | | ------------------ | --------------------------------- | -------------- |
| change | ChangeEvent | Triggered when the value changes.| | change | ChangeEvent | Triggered when the value changes.|
| click | - | Triggered when the component is clicked. | | click | - | Triggered when the component is clicked. |
| longpress | - | Triggered when the component is long pressed. | | longpress | - | Triggered when the component is long pressed. |
| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. | | swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
**Table 2** ChangeEvent **Table 1** ChangeEvent
| Attribute| Type| Description| | Attribute | Type | Description |
| -------- | -------- | -------- | | ---------------------------------------- | ------ | ------------- |
| progress<sup>(deprecated<sup>5+</sup>)</sup> | string | Current value of the slider.| | progress<sup>(deprecated<sup>5+</sup>)</sup> | string | Current value of the slider.|
| value<sup>5+</sup> | number | Current value of the slider.| | value<sup>5+</sup> | number | Current value of the slider.|
## Styles ## Styles
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | ---------------------------------- | ---------------------------------------- | -------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#000000 | No| Background color of the slider.| | color | &lt;color&gt; | \#000000 | No | Background color of the slider. |
| selected-color | &lt;color&gt; | \#ffffff | No| Selected color of the slider.| | selected-color | &lt;color&gt; | \#ffffff | No | Selected color of the slider. |
| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. | | width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No | Component width.<br>If this attribute is not set, the default value **0** is used. |
| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. | | height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No | Component height.<br>If this attribute is not set, the default value **0** is used. |
| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| | padding | &lt;length&gt; | 0 | No | Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.| | padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No | Left, top, right, and bottom padding. |
| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| | margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No | Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.| | margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No | Left, top, right, and bottom margins. |
| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.| | border-width | &lt;length&gt; | 0 | No | Shorthand attribute to set the margin for all sides. |
| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.| | border-color | &lt;color&gt; | black | No | Shorthand attribute to set the color for all borders. |
| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.| | border-radius | &lt;length&gt; | - | No | Radius of round-corner borders. |
| background-color | &lt;color&gt; | - | No| Background color.| | background-color | &lt;color&gt; | - | No | Background color. |
| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered| | display | string | flex | No | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. | | [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No | Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
## Example ## Example
......
en/application-dev/reference/arkui-js-lite/js-components-common-animation.md
浏览文件 @ 2b6e23ce
...@@ -4,44 +4,44 @@ ...@@ -4,44 +4,44 @@
Components support dynamic rotation, translation, and scaling effects. These effects can be set in the **style** attribute or **.css** files. Components support dynamic rotation, translation, and scaling effects. These effects can be set in the **style** attribute or **.css** files.
| Name| Type| Default Value| Description| | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | ------------------------- | ---------------------------------- | ----------- | ---------------------------------------- |
| transform | string | - | Translation, rotation, and scaling attributes. For details, see Table 1. | | transform | string | - | Translation, rotation, and scaling attributes. For details, see Table 1. |
| animation-name | string | - | @keyframes rule. For details, see Table 2. | | animation-name | string | - | \@keyframes rule. For details, see Table 2. |
| animation-delay | &lt;time&gt; | 0 | Delay for playing the animation, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms. | | animation-delay | &lt;time&gt; | 0 | Delay for playing the animation, in ms or s, for example, **1000 ms** or **1s**. \|The default unit is ms.|
| animation-duration | &lt;time&gt; | 0 | Animation duration, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms.<br>**NOTE**<br>**animation-duration** must be specified. Otherwise, the duration is **0**, which means the animation will not be played. | | animation-duration | &lt;time&gt; | 0 | Animation duration, in ms or s, for example, **1000 ms** or **1s**. \|The default unit is ms.<br>**NOTE**<br>**animation-duration** must be specified. Otherwise, the duration is **0**, which means the animation will not be played.|
| animation-iteration-count | number \| infinite | 1 | Number of times that an animation is played. The animation is played once by default. You can set the value to **infinite** to play the animation infinitely.| | animation-iteration-count | number \| infinite | 1 | Number of times that an animation is played. The animation is played once by default. You can set the value to **infinite** to play the animation infinitely. |
| animation-timing-function | string | <br>linear | Speed curve of an animation, which makes the animation more fluent.<br>- **linear**: The animation speed keeps unchanged.<br>- **ease-in**: The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used<br>- **ease-out**: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.<br>- **ease-in-out**: The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used. | | animation-timing-function | string | <br>linear | Speed curve of an animation, which makes the animation more fluent.<br>Available values are as follows:<br>- **linear**: The animation speed keeps unchanged.<br>- **ease-in**: The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used<br>- **ease-out**: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.<br>- **ease-in-out**: The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.|
| animation-fill-mode | 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.| | animation-fill-mode | 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.|
**Table 1** transform **Table 1** transform
| Name| Type| Description| | Name | Type | Description |
| -------- | -------- | -------- | | ---------- | ------------------------------------ | ---------- |
| translateX | &lt;length&gt; | Moves an element along the x-axis.| | translateX | &lt;length&gt; | Moves an element along the x-axis.|
| translateY | &lt;length&gt; | Moves an element along the y-axis.| | translateY | &lt;length&gt; | Moves an element along the y-axis.|
| rotate | &lt;deg&gt; \| &lt;rad&gt; | Rotates an element.| | rotate | &lt;deg&gt; \| &lt;rad&gt; | Rotates an element. |
> **NOTE** > **NOTE**
> >
> Only images of the original size can be rotated on lite wearables. > Only images of the original size can be rotated on lite wearables.
**Table 2** @keyframes **Table 2** \@keyframes
| Name| Type| Default Value| Description| | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | ---------------- | -------------- | ---- | ------------------ |
| background-color | &lt;color&gt; | - | Background color applied to the component after the animation is played.| | background-color | &lt;color&gt; | - | Background color applied to the component after the animation is played. |
| width | &lt;length&gt; | - | Width value applied to the component after the animation is played.| | width | &lt;length&gt; | - | Width value applied to the component after the animation is played. |
| height | &lt;length&gt; | - | Height value applied to the component after the animation is played.| | height | &lt;length&gt; | - | Height value applied to the component after the animation is played. |
| transform | string | - | Transformation type applied to a component. For details, see Table 1.| | transform | string | - | Transformation type applied to a component. For details, see Table 1.|
If there is no default value for when an animation will start or end, use **from** and **to** to specify the start and end of the display. The following is an example: If there is no default value for when an animation will start or end, use **from** and **to** to specify the start and end of the display. The following is an example:
``` ```css
@keyframes Go @keyframes Go
{ {
from { from {
......
en/application-dev/reference/arkui-js-lite/js-components-common-mediaquery.md
浏览文件 @ 2b6e23ce
...@@ -45,8 +45,8 @@ You can use media logical operators to implement complex media query. The follow ...@@ -45,8 +45,8 @@ You can use media logical operators to implement complex media query. The follow
**Table 1** Media logical operators **Table 1** Media logical operators
| Type | Description | | Type | Description |
| --------------- | ------------------------------------------------------------ | | --------------- | ---------------------------------------- |
| and | The **and** operator is used to combine multiple media features into one media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.<br>For example, **screen and (device-type: liteWearable) and (max-height: 454)** evaluates to **true** when the device type is wearable and the maximum height of the application is 454 pixel units.| | and | The **and** operator is used to combine multiple media features into one media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.<br>For example, **screen and (device-type: liteWearable) and (max-height: 454)** evaluates to **true** when the device type is wearable and the maximum height of the application is 454 pixel units.|
| or<sup>9+</sup> | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.<br>For example, **screen and (max-height: 454) or (round-screen: true)** evaluates to **true** when the maximum height of the application is 454 pixel units or the device screen is round.| | or<sup>9+</sup> | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.<br>For example, **screen and (max-height: 454) or (round-screen: true)** evaluates to **true** when the maximum height of the application is 454 pixel units or the device screen is round.|
...@@ -55,18 +55,18 @@ You can use media logical operators to implement complex media query. The follow ...@@ -55,18 +55,18 @@ You can use media logical operators to implement complex media query. The follow
## Media Features ## Media Features
| Type | Description | | Type | Description |
| ---------------- | ------------------------------------------------------------ | | ---------------- | ---------------------------------------- |
| height | Height of the display area on the application page. | | height | Height of the display area on the application page. |
| min-height | Minimum height of the display area on the application page. | | min-height | Minimum height of the display area on the application page. |
| max-height | Maximum height of the display area on the application page. | | max-height | Maximum height of the display area on the application page. |
| width | Width of the display area on the application page. | | width | Width of the display area on the application page. |
| min-width | Minimum width of the display area on the application page. | | min-width | Minimum width of the display area on the application page. |
| max-width | Maximum width of the display area on the application page. | | max-width | Maximum width of the display area on the application page. |
| aspect-ratio | Ratio of the width to the height of the display area on the application page.<br>Example: **aspect-ratio: 1/2**| | aspect-ratio | Ratio of the width to the height of the display area on the application page.<br>Example: **aspect-ratio: 1/2**|
| min-aspect-ratio | Minimum ratio of the width to the height of the display area on the application page. | | min-aspect-ratio | Minimum ratio of the width to the height of the display area on the application page. |
| max-aspect-ratio | Maximum ratio of the width to the height of the display area on the application page. | | max-aspect-ratio | Maximum ratio of the width to the height of the display area on the application page. |
| round-screen | Screen type. The value **true** means that the screen is round, and **false** means the opposite. | | round-screen | Screen type. The value **true** means that the screen is round, and **false** means the opposite.|
## Sample Code for the Common Media Feature ## Sample Code for the Common Media Feature
......
en/application-dev/reference/arkui-js-lite/js-components-container-stack.md
浏览文件 @ 2b6e23ce
...@@ -9,47 +9,47 @@ The **\<stack>** component provides a stack container where child components are ...@@ -9,47 +9,47 @@ The **\<stack>** component provides a stack container where child components are
## Child Components ## Child Components
Supported Supported.
## Attributes ## Attributes
| 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. |
| style | string | - | No| Style declaration of the component.| | style | string | - | No | Style declaration of the component. |
| class | string | - | No| Style class of the component, which is used to refer to a style table.| | class | string | - | No | Style class of the component, which is used to refer to a style table. |
| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.| | ref | string | - | No | Reference information of child elements, which is registered with the parent component on **$refs**.|
## Events ## Events
| Name| Parameter| Description| | Name | Parameter | Description |
| -------- | -------- | -------- | | ------------------ | --------------------------------- | ----------- |
| click | - | Triggered when the component is clicked.| | click | - | Triggered when the component is clicked. |
| longpress | - | Triggered when the component is long pressed.| | longpress | - | Triggered when the component is long pressed. |
| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.| | swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
## Styles ## Styles
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | ---------------------------------- | ---------------------------------------- | ----- | ---- | ---------------------------------------- |
| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. | | width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No | Component width.<br><br>If this attribute is not set, the default value **0** is used. |
| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. | | height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No | Component height.<br><br>If this attribute is not set, the default value **0** is used. |
| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| | padding | &lt;length&gt; | 0 | No | Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.| | padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No | Left, top, right, and bottom padding. |
| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| | margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No | Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.| | margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No | Left, top, right, and bottom margins. |
| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.| | border-width | &lt;length&gt; | 0 | No | Shorthand attribute to set the margin for all sides. |
| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.| | border-color | &lt;color&gt; | black | No | Shorthand attribute to set the color for all borders. |
| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.| | border-radius | &lt;length&gt; | - | No | Radius of round-corner borders. |
| background-color | &lt;color&gt; | - | No| Background color.| | background-color | &lt;color&gt; | - | No | Background color. |
| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.| | opacity<sup>5+</sup> | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered| | display | string | flex | No | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. | | [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No | Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
> **NOTE** > **NOTE**
> >
> The absolute positioning does not support a percentage. Therefore, **margin** cannot be set for the child components of the **\<stack>** component. > The absolute positioning does not support a percentage. Therefore, **margin** cannot be set for the child components of the **\<stack>** component.
......
en/application-dev/reference/arkui-js-lite/js-framework-file.md
浏览文件 @ 2b6e23ce
...@@ -50,7 +50,7 @@ Application resources can be accessed via an absolute or relative path. In this ...@@ -50,7 +50,7 @@ Application resources can be accessed via an absolute or relative path. In this
> >
> - If code files A and B are in the same directory, you can use either a relative or absolute path in code file B to reference resource files. > - If code files A and B are in the same directory, you can use either a relative or absolute path in code file B to reference resource files.
> >
> - If code files A and B are in different directories, you must use an absolute path in code file B to reference resource files. The reason is that the directory of code file B changes during Webpack packaging. > - If code files A and B are in different directories, you must use an absolute path in code file B to reference resource files, because the directory of code file B changes during Webpack packaging.
> >
......
en/application-dev/reference/arkui-js-lite/js-framework-js-tag.md
浏览文件 @ 2b6e23ce
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
The "js" tag contains the instance name and page route information. The "js" tag contains the instance name and page route information.
| Tag| Type| Default Value| Mandatory| Description| | Tag | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | ----- | ------ | ------- | ---- | ----------------------------- |
| name | string | default | Yes| Name of the JavaScript instance.| | name | string | default | Yes | Name of the JavaScript instance. |
| pages | Array | - | Yes| Route information. For details, see ["pages"](#pages).| | pages | Array | - | Yes | Route information. For details, see ["pages"](#pages).|
> **NOTE** > **NOTE**
...@@ -34,10 +34,10 @@ The **"pages"** defines the route information of each page. Each page consists o ...@@ -34,10 +34,10 @@ The **"pages"** defines the route information of each page. Each page consists o
> **NOTE** > **NOTE**
> >
> >
> - The application home page is fixed to **pages/index/index**. > - The application home page is fixed to **pages/index/index**.
> >
> - The page name should not be a component name, for example, **text.hml** or **button.hml**. > - The page name should not be a component name, for example, **text.hml** or **button.hml**.
## Example ## Example
......
en/application-dev/reference/arkui-js-lite/js-framework-syntax-css.md
浏览文件 @ 2b6e23ce
...@@ -14,16 +14,16 @@ CSS files can be imported using the **\@import** statement. This facilitates mod ...@@ -14,16 +14,16 @@ CSS files can be imported using the **\@import** statement. This facilitates mod
The **.css** file with the same name as the **.hml** file in each page directory describes the styles of components on the HML page, determining how the components will be displayed. The **.css** file with the same name as the **.hml** file in each page directory describes the styles of components on the HML page, determining how the components will be displayed.
1. Internal style: The **style** and **class** attributes can be used to specify the component style. Sample code: 1. Internal style: The **style** and **class** attributes can be used to specify the component style. Sample code:
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<text style="color: red">Hello World</text> <text style="color: red">Hello World</text>
</div> </div>
``` ```
``` ```css
/* index.css */ /* index.css */
.container { .container {
justify-content: center; justify-content: center;
...@@ -31,16 +31,16 @@ The **.css** file with the same name as the **.hml** file in each page directory ...@@ -31,16 +31,16 @@ The **.css** file with the same name as the **.hml** file in each page directory
``` ```
2. External style files: You need to import the files. For example, create a **style.css** file in the **common** directory and import the file at the beginning of **index.css**. 2. External style files: You need to import the files. For example, create a **style.css** file in the **common** directory and import the file at the beginning of **index.css**.
``` ```css
/* style.css */ /* style.css */
.title { .title {
font-size: 50px; font-size: 50px;
} }
``` ```
``` ```css
/* index.css */ /* index.css */
@import '../../common/style.css'; @import '../../common/style.css';
.container { .container {
...@@ -53,16 +53,16 @@ The **.css** file with the same name as the **.hml** file in each page directory ...@@ -53,16 +53,16 @@ The **.css** file with the same name as the **.hml** file in each page directory
A CSS selector is used to select elements for which styles need to be added to. The following table lists the supported selectors. A CSS selector is used to select elements for which styles need to be added to. The following table lists the supported selectors.
| Selector| Example| Description| | Selector | Example | Description |
| -------- | -------- | -------- | | ------ | --------------------- | ------------------------------------- |
| .class | .container | Selects all components whose **class** is **container**.| | .class | .container | Selects all components whose **class** is **container**. |
| \#id | \#titleId | Selects all components whose **id** is **titleId**.| | \#id | \#titleId | Selects all components whose **id** is **titleId**. |
| , | .title, .content | Selects all components whose **class** is **title** or **content**.| | , | .title, .content | Selects all components whose **class** is **title** or **content**.|
Example: Example:
``` ```html
<!-- Pagelayoutexample.hml --> <!-- Pagelayoutexample.hml -->
<div id="containerId" class="container"> <div id="containerId" class="container">
<text id="titleId" class="title">Title</text> <text id="titleId" class="title">Title</text>
...@@ -73,7 +73,7 @@ Example: ...@@ -73,7 +73,7 @@ Example:
``` ```
``` ```css
/* Page style xxx.css */ /* Page style xxx.css */
/* Set the style for the components whose class is title. */ /* Set the style for the components whose class is title. */
.title { .title {
...@@ -95,15 +95,17 @@ Example: ...@@ -95,15 +95,17 @@ Example:
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected elements. A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected elements.
| Name| Available Components| Description|
| -------- | -------- | -------- |
| :active | <br>input[type="button"] | Selects the element activated by a user, for example, a pressed button. Only the **background-color** and **background-image** attributes can be set for the pseudo-class selector on lite wearables.| | Name | Available Components | Description |
| -------- | ----------------------------------- | ---------------------------------------- |
| :active | <br>input[type="button"] | Selects the element activated by a user, for example, a pressed button. Only the **background-color** and **background-image** attributes can be set for the pseudo-class selector on lite wearables.|
| :checked | input[type="checkbox", type="radio"]| Selects the element whose **checked** attribute is **true**. Only the **background-color** and **background-image** attributes can be set for the pseudo-class selector on lite wearables.| | :checked | input[type="checkbox", type="radio"]| Selects the element whose **checked** attribute is **true**. Only the **background-color** and **background-image** attributes can be set for the pseudo-class selector on lite wearables.|
The following is an example for you to use the **:active** pseudo-class to control the style when a user presses the button. The following is an example for you to use the **:active** pseudo-class to control the style when a user presses the button.
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<input type="button" class="button" value="Button"></input> <input type="button" class="button" value="Button"></input>
...@@ -111,7 +113,7 @@ The following is an example for you to use the **:active** pseudo-class to contr ...@@ -111,7 +113,7 @@ The following is an example for you to use the **:active** pseudo-class to contr
``` ```
``` ```css
/* index.css */ /* index.css */
.button:active { .button:active {
background-color: #888888;/* After the button is activated, the background color is changed to #888888. */ background-color: #888888;/* After the button is activated, the background color is changed to #888888. */
...@@ -124,8 +126,8 @@ The following is an example for you to use the **:active** pseudo-class to contr ...@@ -124,8 +126,8 @@ The following is an example for you to use the **:active** pseudo-class to contr
Precompilation is a program that uses specific syntax to generate CSS files. It provides variables and calculation, helping you define component styles more conveniently. Currently, Less, Sass, and Scss are supported. To use precompiled styles, change the suffix of the original **.css** file. For example, change **index.css** to **index.less**, **index.sass**, or **index.scss**. Precompilation is a program that uses specific syntax to generate CSS files. It provides variables and calculation, helping you define component styles more conveniently. Currently, Less, Sass, and Scss are supported. To use precompiled styles, change the suffix of the original **.css** file. For example, change **index.css** to **index.less**, **index.sass**, or **index.scss**.
- The following **index.less** file is changed from **index.css**. - The following **index.less** file is changed from **index.css**.
``` ```css
/* index.less */ /* index.less */
/* Define a variable. */ /* Define a variable. */
@colorBackground: #000000; @colorBackground: #000000;
...@@ -135,8 +137,8 @@ Precompilation is a program that uses specific syntax to generate CSS files. It ...@@ -135,8 +137,8 @@ Precompilation is a program that uses specific syntax to generate CSS files. It
``` ```
- Reference a precompiled style file. For example, if the **style.scss** file is located in the **common** directory, change the original **index.css** file to **index.scss** and import **style.scss**. - Reference a precompiled style file. For example, if the **style.scss** file is located in the **common** directory, change the original **index.css** file to **index.scss** and import **style.scss**.
``` ```css
/* style.scss */ /* style.scss */
/* Define a variable. */ /* Define a variable. */
$colorBackground: #000000; $colorBackground: #000000;
...@@ -144,8 +146,8 @@ Precompilation is a program that uses specific syntax to generate CSS files. It ...@@ -144,8 +146,8 @@ Precompilation is a program that uses specific syntax to generate CSS files. It
Reference the precompiled style file in **index.scss**: Reference the precompiled style file in **index.scss**:
``` ```css
/* index.scss */ /* index.scss */
/* Import style.scss. */ /* Import style.scss. */
@import '../../common/style.scss'; @import '../../common/style.scss';
...@@ -154,7 +156,7 @@ Precompilation is a program that uses specific syntax to generate CSS files. It ...@@ -154,7 +156,7 @@ Precompilation is a program that uses specific syntax to generate CSS files. It
} }
``` ```
> **NOTE** > **NOTE**
> >
> Place precompiled style files in the **common** directory. > Place precompiled style files in the **common** directory.
en/application-dev/reference/arkui-js-lite/js-framework-syntax-hml.md
浏览文件 @ 2b6e23ce
...@@ -7,7 +7,7 @@ The OpenHarmony Markup Language (HML) is an HTML-like language that allows you t ...@@ -7,7 +7,7 @@ The OpenHarmony Markup Language (HML) is an HTML-like language that allows you t
## HML Page Structure ## HML Page Structure
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="item-container"> <div class="item-container">
<text class="item-title">Image Show</text> <text class="item-title">Image Show</text>
...@@ -21,7 +21,7 @@ The OpenHarmony Markup Language (HML) is an HTML-like language that allows you t ...@@ -21,7 +21,7 @@ The OpenHarmony Markup Language (HML) is an HTML-like language that allows you t
## Data Binding ## Data Binding
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div onclick="changeText"> <div onclick="changeText">
<text> {{content[1]}} </text> <text> {{content[1]}} </text>
...@@ -29,7 +29,7 @@ The OpenHarmony Markup Language (HML) is an HTML-like language that allows you t ...@@ -29,7 +29,7 @@ The OpenHarmony Markup Language (HML) is an HTML-like language that allows you t
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -42,9 +42,9 @@ export default { ...@@ -42,9 +42,9 @@ export default {
``` ```
> **NOTE** > **NOTE**
> - To make the array data modification take effect, use the **splice** method to change array items. > - To make the array data modification take effect, use the **splice** method to change array items.
> >
> - ECMAScript 6.0 syntax is not supported in HML. > - ECMAScript 6.0 syntax is not supported in HML.
## Event Binding ## Event Binding
...@@ -52,7 +52,7 @@ export default { ...@@ -52,7 +52,7 @@ export default {
The callback bound to an event receives an event object parameter, which can be used to obtain the event information. The callback bound to an event receives an event object parameter, which can be used to obtain the event information.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<!-- Bind an event using @. --> <!-- Bind an event using @. -->
...@@ -73,7 +73,7 @@ The callback bound to an event receives an event object parameter, which can be ...@@ -73,7 +73,7 @@ The callback bound to an event receives an event object parameter, which can be
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -88,11 +88,11 @@ export default { ...@@ -88,11 +88,11 @@ export default {
> **NOTE** > **NOTE**
> >
> Event bubbling is supported since API version 5. After you upgrade the SDK and run an existing JavaScript application, events bound using a traditional statement (such as **onclick**) will not bubble. However, if you use the new SDK to repack the JavaScript application, such events will bubble. To avoid service logic errors, replace the traditional statement with one supported by the new SDK. For example, replace **onclick** with **grab:click**. > Event bubbling is supported since API version 5. After you upgrade the SDK and run an existing JavaScript application, events bound using a traditional statement (such as **onclick**) will not bubble. However, if you use the new SDK to repack the JavaScript application, such events will bubble. To avoid service logic errors, replace the traditional statement with one supported by the new SDK. For example, replace **onclick** with **grab:click**.
**Example:** **Example:**
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="title">{{count}}</text> <text class="title">{{count}}</text>
...@@ -108,8 +108,8 @@ export default { ...@@ -108,8 +108,8 @@ export default {
``` ```
``` ```js
/* xxx.js */ // xxx.js
export default { export default {
data: { data: {
count: 0 count: 0
...@@ -127,7 +127,7 @@ export default { ...@@ -127,7 +127,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
display: flex; display: flex;
...@@ -164,7 +164,7 @@ export default { ...@@ -164,7 +164,7 @@ export default {
## Loop Rendering ## Loop Rendering
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="array-container"> <div class="array-container">
<!-- div loop rendering --> <!-- div loop rendering -->
...@@ -184,7 +184,7 @@ export default { ...@@ -184,7 +184,7 @@ export default {
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -211,11 +211,12 @@ The **tid** attribute accelerates the **for** loop and improves the re-rendering ...@@ -211,11 +211,12 @@ The **tid** attribute accelerates the **for** loop and improves the re-rendering
- for="(i, v) in array": **i** indicates the element index, and **v** indicates the element variable. All elements of the array object will be looped through. - for="(i, v) in array": **i** indicates the element index, and **v** indicates the element variable. All elements of the array object will be looped through.
> **NOTE** > **NOTE**
>
> - Each element in the array must have the data attribute specified by **tid**. Otherwise, an exception may occur. > - Each element in the array must have the data attribute specified by **tid**. Otherwise, an exception may occur.
> >
> - The attribute specified by **tid** in the array must be unique. Otherwise, performance loss occurs. In the above example, only **id** and **name** can be used as **tid** because they are unique fields. > - The attribute specified by **tid** in the array must be unique. Otherwise, performance loss occurs. In the above example, only **id** and **name** can be used as **tid** because they are unique fields.
> >
> - The **tid** field does not support expressions. > - The **tid** field does not support expressions.
...@@ -224,7 +225,7 @@ The **tid** attribute accelerates the **for** loop and improves the re-rendering ...@@ -224,7 +225,7 @@ The **tid** attribute accelerates the **for** loop and improves the re-rendering
There are two ways to implement conditional rendering: **if-elif-else** or **show**. In **if-elif-else**, when the **if** statement evaluates to **false**, the component is not built in the VDOM and is not rendered. For **show**, when show is **false**, the component is not rendered but is built in the VDOM. In addition, the **if-elif-else** statements must be used in sibling nodes. Otherwise, the compilation fails. The following example uses both ways to implement conditional rendering: There are two ways to implement conditional rendering: **if-elif-else** or **show**. In **if-elif-else**, when the **if** statement evaluates to **false**, the component is not built in the VDOM and is not rendered. For **show**, when show is **false**, the component is not rendered but is built in the VDOM. In addition, the **if-elif-else** statements must be used in sibling nodes. Otherwise, the compilation fails. The following example uses both ways to implement conditional rendering:
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button> <button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button>
...@@ -236,8 +237,8 @@ There are two ways to implement conditional rendering: **if-elif-else** or **sho ...@@ -236,8 +237,8 @@ There are two ways to implement conditional rendering: **if-elif-else** or **sho
``` ```
``` ```css
// xxx.css /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
...@@ -250,7 +251,7 @@ There are two ways to implement conditional rendering: **if-elif-else** or **sho ...@@ -250,7 +251,7 @@ There are two ways to implement conditional rendering: **if-elif-else** or **sho
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -269,7 +270,7 @@ export default { ...@@ -269,7 +270,7 @@ export default {
In the optimized rendering (**show**), if **show** is **true**, the node is rendered properly; if it is **false**, the display style will be **none**. In the optimized rendering (**show**), if **show** is **true**, the node is rendered properly; if it is **false**, the display style will be **none**.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<button class="btn" type="capsule" value="toggle" onclick="toggle"></button> <button class="btn" type="capsule" value="toggle" onclick="toggle"></button>
...@@ -278,8 +279,8 @@ In the optimized rendering (**show**), if **show** is **true**, the node is rend ...@@ -278,8 +279,8 @@ In the optimized rendering (**show**), if **show** is **true**, the node is rend
``` ```
``` ```css
// xxx.css /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
...@@ -292,7 +293,7 @@ In the optimized rendering (**show**), if **show** is **true**, the node is rend ...@@ -292,7 +293,7 @@ In the optimized rendering (**show**), if **show** is **true**, the node is rend
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -305,4 +306,5 @@ export default { ...@@ -305,4 +306,5 @@ export default {
``` ```
> **NOTE** > **NOTE**
> Do not use **for** and **if** attributes at the same time in an element. >
> Do not use **for** and **if** attributes at the same time in an element.
en/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md
浏览文件 @ 2b6e23ce
...@@ -31,7 +31,7 @@ The ECMAScript 6.0 syntax is supported. Lite wearables only support the followin ...@@ -31,7 +31,7 @@ The ECMAScript 6.0 syntax is supported. Lite wearables only support the followin
- Module declaration - Module declaration
Import functionality modules. Import functionality modules.
``` ```
import router from '@system.router'; import router from '@system.router';
``` ```
...@@ -39,7 +39,7 @@ The ECMAScript 6.0 syntax is supported. Lite wearables only support the followin ...@@ -39,7 +39,7 @@ The ECMAScript 6.0 syntax is supported. Lite wearables only support the followin
- Code reference - Code reference
Import JavaScript code. Import JavaScript code.
``` ```
import utils from '../../common/utils.js'; import utils from '../../common/utils.js';
``` ```
...@@ -48,17 +48,17 @@ The ECMAScript 6.0 syntax is supported. Lite wearables only support the followin ...@@ -48,17 +48,17 @@ The ECMAScript 6.0 syntax is supported. Lite wearables only support the followin
## Objects ## Objects
- Page objects - Page objects
| Attribute| Type| Description| | Attribute | Type | Description |
| -------- | -------- | -------- | | ----- | --------------- | ---------------------------------------- |
| data | Object/Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (**for**, **if**, **show**, and **tid**). | | data | Object/Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (**for**, **if**, **show**, and **tid**).<br>|
| $refs | Object | DOM elements or child component instances that have registered the **ref** attribute. For an example, see [Obtaining a DOM Element](#obtaining-a-dom-element).| | $refs | Object | DOM elements or child component instances that have registered the **ref** attribute. For an example, see [Obtaining a DOM Element](#obtaining-a-dom-element). |
## Obtaining a DOM Element ## Obtaining a DOM Element
Use **$refs** to obtain a DOM element. Use **$refs** to obtain a DOM element.
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator> <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
...@@ -66,57 +66,57 @@ Use **$refs** to obtain a DOM element. ...@@ -66,57 +66,57 @@ Use **$refs** to obtain a DOM element.
``` ```
``` ```js
// index.js // index.js
export default { export default {
data: { data: {
images: [ images: [
{ src: '/common/frame1.png' }, { src: '/common/frame1.png' },
{ src: '/common/frame2.png' }, { src: '/common/frame2.png' },
{ src: '/common/frame3.png' }, { src: '/common/frame3.png' },
], ],
}, },
handleClick() { handleClick() {
const animator = this.$refs.animator; // Obtain the DOM element whose $refs attribute is animator. const animator = this.$refs.animator; // Obtain the DOM element whose $refs attribute is animator.
const state = animator.getState(); const state = animator.getState();
if (state === 'paused') { if (state === 'paused') {
animator.resume(); animator.resume();
} else if (state === 'stopped') { } else if (state === 'stopped') {
animator.start(); animator.start();
} else { } else {
animator.pause(); animator.pause();
} }
}, },
}; };
``` ```
## Lifecycle APIs ## Lifecycle APIs
- Page lifecycle APIs - Page lifecycle APIs
| Name | Type| Parameter| Return Value| Description| Triggered When| | Name | Type | Parameter | Return Value | Description | Triggered When |
| -------- | -------- | -------- | -------- | -------- | -------- | | --------- | -------- | ---- | ---- | ------ | ------------------- |
| onInit | Function | N/A| N/A| Listens for page initialization.| Page initialization is complete. This API is called only once in the page lifecycle.| | onInit | Function | N/A | N/A | Listens for page initialization. | Page initialization is complete. This API is called only once in the page lifecycle.|
| onReady | Function | N/A| N/A| Listens for page creation.| A page is created. This API is called only once in the page lifecycle.| | onReady | Function | N/A | N/A | Listens for page creation.| A page is created. This API is called only once in the page lifecycle. |
| onShow | Function | N/A| N/A| Listens for page display. | The page is displayed.| | onShow | Function | N/A | N/A | Listens for page display. | The page is displayed. |
| onHide | Function | N/A| N/A| Listens for page disappearance.| The page disappears.| | onHide | Function | N/A | N/A | Listens for page disappearance. | The page disappears. |
| onDestroy | Function | N/A| N/A| Listens for page destruction.| The page is destroyed.| | onDestroy | Function | N/A | N/A | Listens for page destruction. | The page is destroyed. |
The lifecycle APIs of page A are called in the following sequence: The lifecycle APIs of page A are called in the following sequence:
- Open page A: onInit() -> onReady() -> onShow() - Open page A: onInit() -> onReady() -> onShow()
- Open page B on page A: onHide() -> onDestroy() - Open page B on page A: onHide() -> onDestroy()
- Go back to page A from page B: onInit() -> onReady() -> onShow() - Go back to page A from page B: onInit() -> onReady() -> onShow()
- Exit page A: onHide() -> onDestroy() - Exit page A: onHide() -> onDestroy()
- Hide page A: onHide() - Hide page A: onHide()
- Show background page A on the foreground: onShow() - Show background page A on the foreground: onShow()
- Application lifecycle APIs - Application lifecycle APIs
| Name | Type| Parameter| Return Value| Description| Triggered When| | Name | Type | Parameter | Return Value | Description | Triggered When |
| -------- | -------- | -------- | -------- | -------- | -------- | | --------- | -------- | ---- | ---- | ---- | --------- |
| onCreate | Function | N/A| N/A| Listens for application creation.| The application is created.| | onCreate | Function | N/A | N/A | Listens for application creation.| The application is created.|
| onDestroy | Function | N/A| N/A| Listens for application exit.| The application exits.| | onDestroy | Function | N/A | N/A | Listens for application exit.| The application exits.|
en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ 2b6e23ce
...@@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | --------- | ---------------------------- | | ------ | ------ | ---- | --------- | ---------------------------- |
| offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.| | offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
| color | string | Yes | '#ffffff' | Gradient color to set. | | color | string | Yes | '#ffffff' | Gradient color to set. For details about the color notation, see the description of the string type in [ResourceColor](ts-types.md#resourcecolor). |
**Example** **Example**
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
浏览文件 @ 2b6e23ce
...@@ -12,9 +12,9 @@ Create a more gorgeous look for a component by applying a gradient color effect ...@@ -12,9 +12,9 @@ Create a more gorgeous look for a component by applying a gradient color effect
| Name | Type | Description | | Name | Type | Description |
| -------------- | -------------------------------------------- | ----------------------------------- | | -------------- | -------------------------------------------- | ----------------------------------- |
| linearGradient | {<br>angle?: number \| string,<br>direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Linear gradient.<br>- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).<br> Default value: **180**<br>- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br> Default value: **GradientDirection.Bottom**<br>- **colors**: colors of the linear gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.| | linearGradient | {<br>angle?: number \| string,<br>direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Linear gradient.<br>- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).<br> Default value: **180**<br>- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br> Default value: **GradientDirection.Bottom**<br>- **colors**: colors of the linear gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
| sweepGradient | {<br>center: Point,<br>start?: number \| string,<br>end?: number \| string,<br>rotation?: number\|string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Sweep gradient, which can sweep around the specified center point in the 0–360 degree range. If the rotation angle exceeds the range, a monochrome color instead of a gradient will be drawn.<br>- **center**: center point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **start**: start point of the sweep gradient.<br> Default value: **0**<br>- **end**: end point of the sweep gradient.<br> Default value: **0**<br>- **rotation**: rotation angle of the sweep gradient.<br> Default value: **0**<br>- **colors**: colors of the sweep gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 360 evaluates to the value **1**.<br>When the data type of **start**, **end**, and **rotation** is string, the value **"90"** or **"90%"** is equivalent to **90**. | | sweepGradient | {<br>center: [Point](./ts-drawing-components-polygon.md#point),<br>start?: number \| string,<br>end?: number \| string,<br>rotation?: number\|string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Sweep gradient, which can sweep around the specified center point in the 0–360 degree range. If the rotation angle exceeds the range, a monochrome color instead of a gradient will be drawn.<br>- **center**: center point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **start**: start point of the sweep gradient.<br> Default value: **0**<br>- **end**: end point of the sweep gradient.<br> Default value: **0**<br>- **rotation**: rotation angle of the sweep gradient.<br> Default value: **0**<br>- **colors**: colors of the sweep gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 360 evaluates to the value **1**.<br>When the data type of **start**, **end**, and **rotation** is string, the value **"90"** or **"90%"** is equivalent to **90**.|
| radialGradient | {<br>center: Point,<br> radius: number \| string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Radial gradient.<br>- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **radius**: radius of the radial gradient.<br> Value range: [0, +∞)<br> **NOTE**<br>A value less than 0 evaluates to the value **0**.<br>- **colors**: colors of the radial gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets. | | radialGradient | {<br>center: [Point](./ts-drawing-components-polygon.md#point),<br> radius: number \| string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Radial gradient.<br>- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **radius**: radius of the radial gradient.<br> Value range: [0, +∞)<br> **NOTE**<br>A value less than 0 evaluates to the value **0**.<br>- **colors**: colors of the radial gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md
浏览文件 @ 2b6e23ce
...@@ -33,54 +33,52 @@ background: repeating-linear-gradient(direction/angle, color, color, ...); ...@@ -33,54 +33,52 @@ background: repeating-linear-gradient(direction/angle, color, color, ...);
The color can be specified in any of the following formats: \#ff0000, \#ffff0000, rgb(255, 0, 0), and rgba(255, 0, 0, 1). At least two colors must be specified. The color can be specified in any of the following formats: \#ff0000, \#ffff0000, rgb(255, 0, 0), and rgba(255, 0, 0, 1). At least two colors must be specified.
- Parameters **Parameters**
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory | Description |
| --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- | | --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- |
| direction | to &lt;side-or-corner&gt; &lt;side-or-corner&gt; = [left \| right] \|\| [top \| bottom] | to bottom (gradient from top to bottom)| No | Transition direction. For example, **to left** (gradient from right to left) or **to bottom right** (gradient from upper left corner to lower right corner).| | direction | to &lt;side-or-corner&gt; &lt;side-or-corner&gt; = [left \| right] \|\| [top \| bottom] | to bottom (gradient from top to bottom)| No | Transition direction. For example, **to left** (gradient from right to left) or **to bottom right** (gradient from upper left corner to lower right corner).|
| angle | &lt;deg&gt; | 180deg | No | Transition direction, which is the angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.| | angle | &lt;deg&gt; | 180deg | No | Transition direction, which is the angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.|
| color | &lt;color&gt; [&lt;length&gt;\|&lt;percentage&gt;] | - | Yes | Colors among which smooth transitions are rendered. | | color | &lt;color&gt; [&lt;length&gt;\|&lt;percentage&gt;] | - | Yes | Colors among which smooth transitions are rendered. |
- Example **Example**
1. Gradient from top to bottom (default) 1. Gradient from top to bottom (default)
```css ```css
#gradient { #gradient {
height: 300px; height: 300px;
width: 600px; width: 600px;
/* Gradient starts from red at the top to green at the bottom. */ /* Gradient starts from red at the top to green at the bottom. */
background: linear-gradient(red, #00ff00); background: linear-gradient(red, #00ff00);
} }
``` ```
![111](figures/111.PNG) ![111](figures/111.PNG)
2. Gradient at an angle of 45° 2. Gradient at an angle of 45°
```css
/* Gradient at an angle of 45°, changing from red to green */
background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0));
```
```css ![222](figures/222.PNG)
/* Gradient at an angle of 45°, changing from red to green */
background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0));
```
![222](figures/222.PNG) 3. Gradient from left to right
3. Gradient from left to right ```css
/* Gradient from left to right, which is available in the 270 px width between the left 90 px and the left 360 px (600*0.6) */
background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%);
```
```css ![333](figures/333.PNG)
/* Gradient from left to right, which is available in the 270 px width between the left 90 px and the left 360 px (600*0.6) */
background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%);
```
4. Repeating gradient
![333](figures/333.PNG) ```css
/* Repeating gradient from left to right, the area of which is 30 px (60 – 30) and the opacity is 0.5 */
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30vp,rgba(0, 0, 255, .5) 60vp);
```
4. Repeating gradient ![444](figures/444.PNG)
```css
/* Repeating gradient from left to right, the area of which is 30 px (60 – 30) and the opacity is 0.5 */
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30vp,rgba(0, 0, 255, .5) 60vp);
```
![444](figures/444.PNG)
en/application-dev/ui/arkts-common-components-xcomponent.md 0 → 100644
浏览文件 @ 2b6e23ce
# XComponent
As a drawing component, the \<[XComponent](../reference/arkui-ts/ts-basic-components-xcomponent.md)> is usually used to meet relatively complex drawing customization requirements, for example, display of a camera preview stream and drawing of a game image.
You can specify the **type** parameter to implement different features. Two options are mainly available for this parameter: **surface** and **component**.
With the **\<XComponent>** of the **surface** type, you can pass data to the surface independently owned by it to render the image.
With the **\<XComponent>** of the **component** type, you can dynamically load the displayed content.
## surface Type
When the **\<XComponent>** is set to the **surface** type, you can write EGL/OpenGL ES and media data and display it on the **\<XComponent>**.
You can also have the **\<XComponent>** laid out and rendered together with other components.
The **\<XComponent>** has an independent surface, which provides a native window for you to create the EGL/OpenGL ES environment on the native (C/C++) side and use the standard OpenGL ES for development.
In addition, media-related applications (such as videos and cameras) can write data to the surface provided by the **\<XComponent>** to present the corresponding image.
## Using EGL/OpenGL ES for Rendering
### Key Points of Native Code Development
OpenHarmony applications use native APIs to implement interactions between JS and C/C++ code. This is also the case with the **\<XComponent>**. For details, see [Using N-APIs in Application Projects](../napi/napi-guidelines.md).
The type of the file for processing the JS logic on the native side is .so.
- Each module has a .so file.
- The .so file is named in the format of lib{moduleName}.so.
In the scenario where the **\<XComponent>** is used for standard OpenGL ES development, the content of the **CMAKELists.txt** file is as follows:
```
cmake_minimum_required(VERSION 3.4.1)
project(XComponent) # Project name
set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR})
# Path for searching for header files
include_directories(${NATIVERENDER_ROOT_PATH}
${NATIVERENDER_ROOT_PATH}/include
)
# Compile the target .so file. SHARED indicates the dynamic library.
add_library(nativerender SHARED
xxx.cpp
)
# Search for related libraries (including OpenGL ES libraries and NDK APIs provided by the <XComponent>).
find_library( EGL-lib
EGL )
find_library( GLES-lib
GLESv3 )
find_library( libace-lib
ace_ndk.z )
# Dependencies required for compiling .so files
target_link_libraries(nativerender PUBLIC ${EGL-lib} ${GLES-lib} ${libace-lib} libace_napi.z.so libc++.a)
```
### Registering the N-API Module
```c++
static napi_value Init(napi_env env, napi_value exports)
{
// Define the API exposed on the module.
napi_property_descriptor desc[] ={
DECLARE_NAPI_FUNCTION("changeColor", PluginRender::NapiChangeColor),
};
// You can mount the native method (PluginRender::NapiChangeColor) to exports through this API. exports is bound to a JS object at the JS layer through the JS engine.
NAPI_CALL(env, napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc));
return exports;
}
static napi_module nativerenderModule = {
.nm_version = 1,
.nm_flags = 0,
.nm_filename = nullptr,
.nm_register_func = Init, // Specify the callback for when the corresponding module is loaded.
.nm_modname = "nativerender", // Specify the module name. For <XComponent>-related development, the name must be the same as the value of libraryname in the <XComponent> on ArkTS.
.nm_priv = ((void*)0),
.reserved = { 0 },
};
extern "C" __attribute__((constructor)) void RegisterModule(void)
{
// Register the SO module.
napi_module_register(&nativerenderModule);c
}
```
### Parsing the NativeXComponent Instance
**NativeXComponent** provides an instance at the native layer for the **\<XComponent>**, which can be used as a bridge for binding with the **\<XComponent>** at the JS layer. The NDK APIs provided by the **\<XComponent>** depend on this instance. For details about the NDK APIs, see [Native XComponent](../reference/native-apis/_o_h___native_x_component.md).
The **NativeXComponent** instance can be obtained by parsing the callback (that is, the **Init** function in [NAPI module registration](#registering-the-n-api-module)) when the module is loaded.
```c++
{
// ...
napi_status status;
napi_value exportInstance = nullptr;
OH_NativeXComponent *nativeXComponent = nullptr;
// Parse the attribute of the wrapped NativeXComponent pointer.
status = napi_get_named_property(env, exports, OH_NATIVE_XCOMPONENT_OBJ, &exportInstance);
if (status != napi_ok) {
return false;
}
// Use the napi_unwrap API to parse the NativeXComponent instance pointer.
status = napi_unwrap(env, exportInstance, reinterpret_cast<void**>(&nativeXComponent));
// ...
}
```
### Registering XComponent Callback
Based on the NativeXComponent pointer obtained by [parsing the NativeXComponent instance](#parsing-the-nativexcomponent-instance), perform callback registration through the **OH_NativeXComponent_RegisterCallback** API.
```c++
{
...
OH_NativeXComponent *nativeXComponent = nullptr;
// Parse the NativeXComponent instance.
OH_NativeXComponent_Callback callback;
callback->OnSurfaceCreated = OnSurfaceCreatedCB; // Invoked when a surface is successfully created. You can obtain the handle to the native window from this event.
callback->OnSurfaceChanged = OnSurfaceChangedCB; // Invoked when the surface changes. You can obtain the native window handle and XComponent change information from this event.
callback->OnSurfaceDestroyed = OnSurfaceDestroyedCB; // Invoked when the surface is destroyed. You can release resources in this event.
callback->DispatchTouchEvent = DispatchTouchEventCB; // Invoked when a touch event occurs. You can obtain the touch event information from this event.
OH_NativeXComponent_RegisterCallback(nativeXComponent, callback);
...
}
```
### Creating the EGL/OpenGL ES Environment
In the registered **OnSurfaceCreated** callback, you can obtain the handle to the native window (which is essentially the surface independently owned by the **\<XComponent>**). Therefore, you can create the EGL/OpenGL ES environment for your application to start the development of the rendering logic.
```c++
EGLCore* eglCore_; // EGLCore is a class that encapsulates OpenGL-related APIs.
uint64_t width_;
uint64_t height_;
void OnSurfaceCreatedCB(OH_NativeXComponent* component, void* window)
{
int32_t ret = OH_NativeXComponent_GetXComponentSize(component, window, &width_, &height_);
if (ret === OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
eglCore_->GLContextInit(window, width_, height_); // Initialize the OpenGL environment.
}
}
```
### ArkTS Syntax
You can use the **\<XComponent>** to develop EGL/OpenGL ES rendering by using the following code on the ArkTS side:
```ts
XComponent({ id: 'xcomponentId1', type: 'surface', libraryname: 'nativerender' })
.onLoad((context) => {})
.onDestroy(() => {})
```
- **id**: corresponds to an **\<XComponent>** and must be unique. Generally, you can use the **OH_NativeXComponent_GetXComponentId** API on the native side to obtain the corresponding ID and bind the corresponding **\<XComponent>**.
- **libraryname**: name of the loaded module, which must be the same as the value of **nm_modname** used when the Napi module is registered on the native side.
> **NOTE**
>
> An application loads modules to implement cross-language invoking in either of the following modes:
>
> 1. Use the **import** mode of the NAPI.
>
> ```ts
> import nativerender from "libnativerender.so"
> ```
>
> 2. Use the **\<XComponent>**.
>
> While this mode also uses the NAPI mechanism as the **import** mode, it enables you to use the NDK APIs of the **\<XComponent>**, by having the **NativeXComponent** instance of the **\<XComponent>** exposed to the native layer of the application when the dynamic library is loaded.
- **onLoad** event
- Trigger time: when the surface of the **\<XComponent>** is prepared.
- **context** parameter: where the native API exposed on the module is mounted. Its usage is similar to the usage of the **context2** instance obtained after the module is directly loaded using **import context2 from "libnativerender.so"**.
- Time sequence: When the **onLoad** event is subject to the surface. The following figure shows the time sequence of the **onLoad** event and the **OnSurfaceCreated** event on the native side.
![onLoad](figures/onLoad.png)
- **onDestroy** event
Trigger time: when the **\<XComponent>** is destroyed, in the same manner as that when an ArkUI component is destroyed. The following figure shows the time sequence of the **onDestroy** event and the **OnSurfaceDestroyed** event on the native side.
![onDestroy](figures/onDestroy.png)
### Writing Media Data
The surface held by the **\<XComponent>** complies with the producer-consumer model.
In OpenHarmony, components that comply with the producer design, such as the camera and video player, can write data to the surface held by the **\<XComponent>** and display the data through the **\<XComponent>**.
![picture-1](figures/picture-1.png)
You can bind the **\<XComponent>** to the **XComponentController** to obtain the surface ID (**surfaceId**, which uniquely identifies a surface) and send it to the corresponding component API.
```ts
@State surfaceId:string = "";
mXComponentController: XComponentController = new XComponentController();
XComponent({ id: '', type: 'surface', controller: this.mXComponentController })
.onLoad(() => {
this.surfaceId = this.mXComponentController.getXComponentSurfaceId()
})
```
For details about component APIs, see [AVPlayer](../reference/apis/js-apis-media.md#avplayer9) and [Camera](../reference/apis/js-apis-camera.md).
### component Type
When the **\<XComponent>** is set to the **component** type, you can execute non-UI logic to dynamically load the displayed content.
>**NOTE**
>
> When **type** is set to **component**, the **\<XComponent>** functions as a container, where child components are laid out vertically.
>
> - Vertical alignment: [FlexAlign](../reference/arkui-ts/ts-appendix-enums.md#flexalign).Start
>
> - Horizontal alignment: [FlexAlign](../reference/arkui-ts/ts-appendix-enums.md#flexalign).Center
>
> The component does not respond to any events.
>
> Layout changes and event responses can be set by mounting child components.
>
> The non-UI logic written internally needs to be encapsulated in one or more functions.
### Example Scenario
```ts
@Builder
function addText(label: string): void {
Text(label)
.fontSize(40)
}
@Entry
@Component
struct Index {
@State message: string = 'Hello XComponent'
@State messageCommon: string = 'Hello World'
build() {
Row() {
Column() {
XComponent({ id: 'xcomponentId-container', type: 'component' }) {
addText(this.message)
Divider()
.margin(4)
.strokeWidth(2)
.color('#F1F3F5')
.width("80%")
Column() {
Text(this.messageCommon)
.fontSize(30)
}
}
}
.width('100%')
}
.height('100%')
}
}
```
![en-us_image_0000001511900428](figures/en-us_image_0000001511900428.png)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或