Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
“d9f2057692998686e77a83f128506e6e78397100”上不存在“...paddle/v2/git@gitcode.net:s920243400/PaddleDetection.git”
提交 cdb6cf82 编写于 作者: H HelloCrease
浏览文件
操作

geshi 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 8994549b
隐藏空白更改
内联 并排
Showing with 3119 addition and 3123 deletion
zh-cn/application-dev/reference/arkui-js/js-appendix-types.md
浏览文件 @ cdb6cf82
......@@ -2,166 +2,166 @@
## 长度类型
| 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- |
| length | string&nbsp;\|&nbsp;number | 用于描述尺寸单位，输入为number类型时，使用px单位；输入为string类型时，需要显式指定像素单位，当前支持的像素单位有：<br/>-&nbsp;px：逻辑尺寸单位。<br/>-&nbsp;fp<sup>6+</sup>：字体尺寸单位，会随系统字体大小设置发生变化，仅支持文本类组件设置相应的字体大小。 |
| percentage | string | 百分比尺寸单位，如“50%”。 |
| 名称 | 类型定义 | 描述 |
| ---------- | -------------------------- | ---------------------------------------- |
| length | string&nbsp;\|&nbsp;number | 用于描述尺寸单位，输入为number类型时，使用px单位；输入为string类型时，需要显式指定像素单位，当前支持的像素单位有：<br/>-&nbsp;px：逻辑尺寸单位。<br/>-&nbsp;fp<sup>6+</sup>：字体尺寸单位，会随系统字体大小设置发生变化，仅支持文本类组件设置相应的字体大小。 |
| percentage | string | 百分比尺寸单位，如“50%”。 |
## 颜色类型
| 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- |
| color | string&nbsp;\|颜色枚举字符串 | 用于描述颜色信息。<br/>字符串格式如下：<br/>-&nbsp;'rgb(255,&nbsp;255,&nbsp;255)'<br/>-&nbsp;'rgba(255,&nbsp;255,&nbsp;255,&nbsp;1.0)'<br/>-&nbsp;HEX格式：'\#rrggbb'，'\#aarrggbb'<br/>-&nbsp;枚举格式：'black'，'white'。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;JS脚本中不支持颜色枚举格式。 |
| 名称 | 类型定义 | 描述 |
| ----- | --------------------- | ---------------------------------------- |
| color | string&nbsp;\|颜色枚举字符串 | 用于描述颜色信息，JS脚本中不支持颜色枚举格式。<br/>字符串格式如下：<br/>-&nbsp;'rgb(255,&nbsp;255,&nbsp;255)'<br/>-&nbsp;'rgba(255,&nbsp;255,&nbsp;255,&nbsp;1.0)'<br/>-&nbsp;HEX格式：'\#rrggbb'，'\#aarrggbb'<br/>-&nbsp;枚举格式：'black'，'white'。 |
**表1** 当前支持的颜色枚举
| 枚举名称 | 对应颜色 | 颜色 |
| -------- | -------- | -------- |
| aliceblue | \#f0f8ff | ![zh-cn_image_0000001173324803](figures/zh-cn_image_0000001173324803.png) |
| antiquewhite | \#faebd7 | ![zh-cn_image_0000001127285014](figures/zh-cn_image_0000001127285014.png) |
| aqua | \#00ffff | ![zh-cn_image_0000001127285050](figures/zh-cn_image_0000001127285050.png) |
| aquamarine | \#7fffd4 | ![zh-cn_image_0000001173324729](figures/zh-cn_image_0000001173324729.png) |
| azure | \#f0ffff | ![zh-cn_image_0000001127285040](figures/zh-cn_image_0000001127285040.png) |
| beige | \#f5f5dc | ![zh-cn_image_0000001173324773](figures/zh-cn_image_0000001173324773.png) |
| bisque | \#ffe4c4 | ![zh-cn_image_0000001173164895](figures/zh-cn_image_0000001173164895.png) |
| black | \#000000 | ![zh-cn_image_0000001173324735](figures/zh-cn_image_0000001173324735.png) |
| blanchedalmond | \#ffebcd | ![zh-cn_image_0000001173164889](figures/zh-cn_image_0000001173164889.png) |
| blue | \#0000ff | ![zh-cn_image_0000001127125194](figures/zh-cn_image_0000001127125194.png) |
| blueviolet | \#8a2be2 | ![zh-cn_image_0000001127285046](figures/zh-cn_image_0000001127285046.png) |
| brown | \#a52a2a | ![zh-cn_image_0000001173324833](figures/zh-cn_image_0000001173324833.png) |
| burlywood | \#deB887 | ![zh-cn_image_0000001127285026](figures/zh-cn_image_0000001127285026.png) |
| cadetblue | \#5f9ea0 | ![zh-cn_image_0000001127125210](figures/zh-cn_image_0000001127125210.png) |
| chartreuse | \#7fff00 | ![zh-cn_image_0000001173324811](figures/zh-cn_image_0000001173324811.png) |
| chocolate | \#d2691e | ![zh-cn_image_0000001127125256](figures/zh-cn_image_0000001127125256.png) |
| coral | \#ff7f50 | ![zh-cn_image_0000001173164877](figures/zh-cn_image_0000001173164877.png) |
| cornflowerblue | \#6495ed | ![zh-cn_image_0000001173324781](figures/zh-cn_image_0000001173324781.png) |
| cornsilk | \#fff8dc | ![zh-cn_image_0000001127285048](figures/zh-cn_image_0000001127285048.png) |
| crimson | \#dc143c | ![zh-cn_image_0000001127285066](figures/zh-cn_image_0000001127285066.png) |
| cyan | \#00ffff | ![zh-cn_image_0000001173324789](figures/zh-cn_image_0000001173324789.png) |
| darkblue | \#00008b | ![zh-cn_image_0000001173164841](figures/zh-cn_image_0000001173164841.png) |
| darkcyan | \#008b8b | ![zh-cn_image_0000001173324745](figures/zh-cn_image_0000001173324745.png) |
| darkgoldenrod | \#b8860b | ![zh-cn_image_0000001173324835](figures/zh-cn_image_0000001173324835.png) |
| darkgray | \#a9a9a9 | ![zh-cn_image_0000001127285028](figures/zh-cn_image_0000001127285028.png) |
| darkgreen | \#006400 | ![zh-cn_image_0000001127284990](figures/zh-cn_image_0000001127284990.png) |
| darkgrey | \#a9a9a9 | ![zh-cn_image_0000001127125174](figures/zh-cn_image_0000001127125174.png) |
| darkkhaki | \#bdb76b | ![zh-cn_image_0000001127285070](figures/zh-cn_image_0000001127285070.png) |
| darkmagenta | \#8b008b | ![zh-cn_image_0000001173164875](figures/zh-cn_image_0000001173164875.png) |
| darkolivegreen | \#556b2f | ![zh-cn_image_0000001173164835](figures/zh-cn_image_0000001173164835.png) |
| darkorange | \#ff8c00 | ![zh-cn_image_0000001127125178](figures/zh-cn_image_0000001127125178.png) |
| darkorchid | \#9932cc | ![zh-cn_image_0000001173324829](figures/zh-cn_image_0000001173324829.png) |
| darkred | \#8b0000 | ![zh-cn_image_0000001173164851](figures/zh-cn_image_0000001173164851.png) |
| darksalmon | \#e9967a | ![zh-cn_image_0000001127284998](figures/zh-cn_image_0000001127284998.png) |
| darkseagreen | \#8fbc8f | ![zh-cn_image_0000001173324755](figures/zh-cn_image_0000001173324755.png) |
| darkslateblue | \#483d8b | ![zh-cn_image_0000001127125246](figures/zh-cn_image_0000001127125246.png) |
| darkslategray | \#2f4f4f | ![zh-cn_image_0000001127125190](figures/zh-cn_image_0000001127125190.png) |
| darkslategrey | \#2f4f4f | ![zh-cn_image_0000001173324759](figures/zh-cn_image_0000001173324759.png) |
| darkturquoise | \#00ced1 | ![zh-cn_image_0000001127284980](figures/zh-cn_image_0000001127284980.png) |
| darkviolet | \#9400d3 | ![zh-cn_image_0000001127285058](figures/zh-cn_image_0000001127285058.png) |
| deeppink | \#ff1493 | ![zh-cn_image_0000001173324767](figures/zh-cn_image_0000001173324767.png) |
| deepskyblue | \#00bfff | ![zh-cn_image_0000001173164897](figures/zh-cn_image_0000001173164897.png) |
| dimgray | \#696969 | ![zh-cn_image_0000001127285022](figures/zh-cn_image_0000001127285022.png) |
| dimgrey | \#696969 | ![zh-cn_image_0000001173164911](figures/zh-cn_image_0000001173164911.png) |
| dodgerblue | \#1e90ff | ![zh-cn_image_0000001173164855](figures/zh-cn_image_0000001173164855.png) |
| firebrick | \#b22222 | ![zh-cn_image_0000001127125234](figures/zh-cn_image_0000001127125234.png) |
| floralwhite | \#fffaf0 | ![zh-cn_image_0000001173324771](figures/zh-cn_image_0000001173324771.png) |
| forestgreen | \#228b22 | ![zh-cn_image_0000001173324825](figures/zh-cn_image_0000001173324825.png) |
| fuchsia | \#ff00ff | ![zh-cn_image_0000001127285052](figures/zh-cn_image_0000001127285052.png) |
| gainsboro | \#dcdcdc | ![zh-cn_image_0000001173164901](figures/zh-cn_image_0000001173164901.png) |
| ghostwhite | \#f8f8ff | ![zh-cn_image_0000001127285012](figures/zh-cn_image_0000001127285012.png) |
| gold | \#ffd700 | ![zh-cn_image_0000001173324761](figures/zh-cn_image_0000001173324761.png) |
| goldenrod | \#daa520 | ![zh-cn_image_0000001173324817](figures/zh-cn_image_0000001173324817.png) |
| gray | \#808080 | ![zh-cn_image_0000001127125238](figures/zh-cn_image_0000001127125238.png) |
| green | \#008000 | ![zh-cn_image_0000001173164865](figures/zh-cn_image_0000001173164865.png) |
| greenyellow | \#adff2f | ![zh-cn_image_0000001127285000](figures/zh-cn_image_0000001127285000.png) |
| grey | \#808080 | ![zh-cn_image_0000001127285054](figures/zh-cn_image_0000001127285054.png) |
| honeydew | \#f0fff0 | ![zh-cn_image_0000001173324813](figures/zh-cn_image_0000001173324813.png) |
| hotpink | \#ff69b4 | ![zh-cn_image_0000001127285016](figures/zh-cn_image_0000001127285016.png) |
| indianred | \#cd5c5c | ![zh-cn_image_0000001173164849](figures/zh-cn_image_0000001173164849.png) |
| indigo | \#4b0082 | ![zh-cn_image_0000001173324821](figures/zh-cn_image_0000001173324821.png) |
| ivory | \#fffff0 | ![zh-cn_image_0000001173164887](figures/zh-cn_image_0000001173164887.png) |
| khaki | \#f0e68c | ![zh-cn_image_0000001173324801](figures/zh-cn_image_0000001173324801.png) |
| lavender | \#e6e6fa | ![zh-cn_image_0000001127125188](figures/zh-cn_image_0000001127125188.png) |
| lavenderblush | \#fff0f5 | ![zh-cn_image_0000001173324809](figures/zh-cn_image_0000001173324809.png) |
| lawngreen | \#7cfc00 | ![zh-cn_image_0000001127125224](figures/zh-cn_image_0000001127125224.png) |
| lemonchiffon | \#fffacd | ![zh-cn_image_0000001173164879](figures/zh-cn_image_0000001173164879.png) |
| lightblue | \#add8e6 | ![zh-cn_image_0000001127125180](figures/zh-cn_image_0000001127125180.png) |
| lightcoral | \#f08080 | ![zh-cn_image_0000001127125228](figures/zh-cn_image_0000001127125228.png) |
| lightcyan | \#e0ffff | ![zh-cn_image_0000001173324799](figures/zh-cn_image_0000001173324799.png) |
| 枚举名称 | 对应颜色 | 颜色 |
| -------------------- | -------- | ---------------------------------------- |
| aliceblue | \#f0f8ff | ![zh-cn_image_0000001173324803](figures/zh-cn_image_0000001173324803.png) |
| antiquewhite | \#faebd7 | ![zh-cn_image_0000001127285014](figures/zh-cn_image_0000001127285014.png) |
| aqua | \#00ffff | ![zh-cn_image_0000001127285050](figures/zh-cn_image_0000001127285050.png) |
| aquamarine | \#7fffd4 | ![zh-cn_image_0000001173324729](figures/zh-cn_image_0000001173324729.png) |
| azure | \#f0ffff | ![zh-cn_image_0000001127285040](figures/zh-cn_image_0000001127285040.png) |
| beige | \#f5f5dc | ![zh-cn_image_0000001173324773](figures/zh-cn_image_0000001173324773.png) |
| bisque | \#ffe4c4 | ![zh-cn_image_0000001173164895](figures/zh-cn_image_0000001173164895.png) |
| black | \#000000 | ![zh-cn_image_0000001173324735](figures/zh-cn_image_0000001173324735.png) |
| blanchedalmond | \#ffebcd | ![zh-cn_image_0000001173164889](figures/zh-cn_image_0000001173164889.png) |
| blue | \#0000ff | ![zh-cn_image_0000001127125194](figures/zh-cn_image_0000001127125194.png) |
| blueviolet | \#8a2be2 | ![zh-cn_image_0000001127285046](figures/zh-cn_image_0000001127285046.png) |
| brown | \#a52a2a | ![zh-cn_image_0000001173324833](figures/zh-cn_image_0000001173324833.png) |
| burlywood | \#deB887 | ![zh-cn_image_0000001127285026](figures/zh-cn_image_0000001127285026.png) |
| cadetblue | \#5f9ea0 | ![zh-cn_image_0000001127125210](figures/zh-cn_image_0000001127125210.png) |
| chartreuse | \#7fff00 | ![zh-cn_image_0000001173324811](figures/zh-cn_image_0000001173324811.png) |
| chocolate | \#d2691e | ![zh-cn_image_0000001127125256](figures/zh-cn_image_0000001127125256.png) |
| coral | \#ff7f50 | ![zh-cn_image_0000001173164877](figures/zh-cn_image_0000001173164877.png) |
| cornflowerblue | \#6495ed | ![zh-cn_image_0000001173324781](figures/zh-cn_image_0000001173324781.png) |
| cornsilk | \#fff8dc | ![zh-cn_image_0000001127285048](figures/zh-cn_image_0000001127285048.png) |
| crimson | \#dc143c | ![zh-cn_image_0000001127285066](figures/zh-cn_image_0000001127285066.png) |
| cyan | \#00ffff | ![zh-cn_image_0000001173324789](figures/zh-cn_image_0000001173324789.png) |
| darkblue | \#00008b | ![zh-cn_image_0000001173164841](figures/zh-cn_image_0000001173164841.png) |
| darkcyan | \#008b8b | ![zh-cn_image_0000001173324745](figures/zh-cn_image_0000001173324745.png) |
| darkgoldenrod | \#b8860b | ![zh-cn_image_0000001173324835](figures/zh-cn_image_0000001173324835.png) |
| darkgray | \#a9a9a9 | ![zh-cn_image_0000001127285028](figures/zh-cn_image_0000001127285028.png) |
| darkgreen | \#006400 | ![zh-cn_image_0000001127284990](figures/zh-cn_image_0000001127284990.png) |
| darkgrey | \#a9a9a9 | ![zh-cn_image_0000001127125174](figures/zh-cn_image_0000001127125174.png) |
| darkkhaki | \#bdb76b | ![zh-cn_image_0000001127285070](figures/zh-cn_image_0000001127285070.png) |
| darkmagenta | \#8b008b | ![zh-cn_image_0000001173164875](figures/zh-cn_image_0000001173164875.png) |
| darkolivegreen | \#556b2f | ![zh-cn_image_0000001173164835](figures/zh-cn_image_0000001173164835.png) |
| darkorange | \#ff8c00 | ![zh-cn_image_0000001127125178](figures/zh-cn_image_0000001127125178.png) |
| darkorchid | \#9932cc | ![zh-cn_image_0000001173324829](figures/zh-cn_image_0000001173324829.png) |
| darkred | \#8b0000 | ![zh-cn_image_0000001173164851](figures/zh-cn_image_0000001173164851.png) |
| darksalmon | \#e9967a | ![zh-cn_image_0000001127284998](figures/zh-cn_image_0000001127284998.png) |
| darkseagreen | \#8fbc8f | ![zh-cn_image_0000001173324755](figures/zh-cn_image_0000001173324755.png) |
| darkslateblue | \#483d8b | ![zh-cn_image_0000001127125246](figures/zh-cn_image_0000001127125246.png) |
| darkslategray | \#2f4f4f | ![zh-cn_image_0000001127125190](figures/zh-cn_image_0000001127125190.png) |
| darkslategrey | \#2f4f4f | ![zh-cn_image_0000001173324759](figures/zh-cn_image_0000001173324759.png) |
| darkturquoise | \#00ced1 | ![zh-cn_image_0000001127284980](figures/zh-cn_image_0000001127284980.png) |
| darkviolet | \#9400d3 | ![zh-cn_image_0000001127285058](figures/zh-cn_image_0000001127285058.png) |
| deeppink | \#ff1493 | ![zh-cn_image_0000001173324767](figures/zh-cn_image_0000001173324767.png) |
| deepskyblue | \#00bfff | ![zh-cn_image_0000001173164897](figures/zh-cn_image_0000001173164897.png) |
| dimgray | \#696969 | ![zh-cn_image_0000001127285022](figures/zh-cn_image_0000001127285022.png) |
| dimgrey | \#696969 | ![zh-cn_image_0000001173164911](figures/zh-cn_image_0000001173164911.png) |
| dodgerblue | \#1e90ff | ![zh-cn_image_0000001173164855](figures/zh-cn_image_0000001173164855.png) |
| firebrick | \#b22222 | ![zh-cn_image_0000001127125234](figures/zh-cn_image_0000001127125234.png) |
| floralwhite | \#fffaf0 | ![zh-cn_image_0000001173324771](figures/zh-cn_image_0000001173324771.png) |
| forestgreen | \#228b22 | ![zh-cn_image_0000001173324825](figures/zh-cn_image_0000001173324825.png) |
| fuchsia | \#ff00ff | ![zh-cn_image_0000001127285052](figures/zh-cn_image_0000001127285052.png) |
| gainsboro | \#dcdcdc | ![zh-cn_image_0000001173164901](figures/zh-cn_image_0000001173164901.png) |
| ghostwhite | \#f8f8ff | ![zh-cn_image_0000001127285012](figures/zh-cn_image_0000001127285012.png) |
| gold | \#ffd700 | ![zh-cn_image_0000001173324761](figures/zh-cn_image_0000001173324761.png) |
| goldenrod | \#daa520 | ![zh-cn_image_0000001173324817](figures/zh-cn_image_0000001173324817.png) |
| gray | \#808080 | ![zh-cn_image_0000001127125238](figures/zh-cn_image_0000001127125238.png) |
| green | \#008000 | ![zh-cn_image_0000001173164865](figures/zh-cn_image_0000001173164865.png) |
| greenyellow | \#adff2f | ![zh-cn_image_0000001127285000](figures/zh-cn_image_0000001127285000.png) |
| grey | \#808080 | ![zh-cn_image_0000001127285054](figures/zh-cn_image_0000001127285054.png) |
| honeydew | \#f0fff0 | ![zh-cn_image_0000001173324813](figures/zh-cn_image_0000001173324813.png) |
| hotpink | \#ff69b4 | ![zh-cn_image_0000001127285016](figures/zh-cn_image_0000001127285016.png) |
| indianred | \#cd5c5c | ![zh-cn_image_0000001173164849](figures/zh-cn_image_0000001173164849.png) |
| indigo | \#4b0082 | ![zh-cn_image_0000001173324821](figures/zh-cn_image_0000001173324821.png) |
| ivory | \#fffff0 | ![zh-cn_image_0000001173164887](figures/zh-cn_image_0000001173164887.png) |
| khaki | \#f0e68c | ![zh-cn_image_0000001173324801](figures/zh-cn_image_0000001173324801.png) |
| lavender | \#e6e6fa | ![zh-cn_image_0000001127125188](figures/zh-cn_image_0000001127125188.png) |
| lavenderblush | \#fff0f5 | ![zh-cn_image_0000001173324809](figures/zh-cn_image_0000001173324809.png) |
| lawngreen | \#7cfc00 | ![zh-cn_image_0000001127125224](figures/zh-cn_image_0000001127125224.png) |
| lemonchiffon | \#fffacd | ![zh-cn_image_0000001173164879](figures/zh-cn_image_0000001173164879.png) |
| lightblue | \#add8e6 | ![zh-cn_image_0000001127125180](figures/zh-cn_image_0000001127125180.png) |
| lightcoral | \#f08080 | ![zh-cn_image_0000001127125228](figures/zh-cn_image_0000001127125228.png) |
| lightcyan | \#e0ffff | ![zh-cn_image_0000001173324799](figures/zh-cn_image_0000001173324799.png) |
| lightgoldenrodyellow | \#fafad2 | ![zh-cn_image_0000001127125218](figures/zh-cn_image_0000001127125218.png) |
| lightgray | \#d3d3d3 | ![zh-cn_image_0000001127284974](figures/zh-cn_image_0000001127284974.png) |
| lightgreen | \#90ee90 | ![zh-cn_image_0000001173324805](figures/zh-cn_image_0000001173324805.png) |
| lightpink | \#ffb6c1 | ![zh-cn_image_0000001127285038](figures/zh-cn_image_0000001127285038.png) |
| lightsalmon | \#ffa07a | ![zh-cn_image_0000001173324795](figures/zh-cn_image_0000001173324795.png) |
| lightseagreen | \#20b2aa | ![zh-cn_image_0000001173324737](figures/zh-cn_image_0000001173324737.png) |
| lightskyblue | \#87cefa | ![zh-cn_image_0000001127285042](figures/zh-cn_image_0000001127285042.png) |
| lightslategray | \#778899 | ![zh-cn_image_0000001127125226](figures/zh-cn_image_0000001127125226.png) |
| lightslategrey | \#778899 | ![zh-cn_image_0000001127125222](figures/zh-cn_image_0000001127125222.png) |
| lightsteelblue | \#b0c4de | ![zh-cn_image_0000001127284976](figures/zh-cn_image_0000001127284976.png) |
| lightyellow | \#ffffe0 | ![zh-cn_image_0000001173324807](figures/zh-cn_image_0000001173324807.png) |
| lime | \#00ff00 | ![zh-cn_image_0000001127285020](figures/zh-cn_image_0000001127285020.png) |
| limegreen | \#32cd32 | ![zh-cn_image_0000001127125236](figures/zh-cn_image_0000001127125236.png) |
| linen | \#faf0e6 | ![zh-cn_image_0000001173324739](figures/zh-cn_image_0000001173324739.png) |
| magenta | \#ff00ff | ![zh-cn_image_0000001127285044](figures/zh-cn_image_0000001127285044.png) |
| maroon | \#800000 | ![zh-cn_image_0000001127285018](figures/zh-cn_image_0000001127285018.png) |
| mediumaquamarine | \#66cdaa | ![zh-cn_image_0000001173164899](figures/zh-cn_image_0000001173164899.png) |
| mediumblue | \#0000cd | ![zh-cn_image_0000001127284968](figures/zh-cn_image_0000001127284968.png) |
| mediumorchid | \#ba55d3 | ![zh-cn_image_0000001127125216](figures/zh-cn_image_0000001127125216.png) |
| mediumpurple | \#9370db | ![zh-cn_image_0000001173324779](figures/zh-cn_image_0000001173324779.png) |
| mediumseagreen | \#3cb371 | ![zh-cn_image_0000001127125230](figures/zh-cn_image_0000001127125230.png) |
| mediumslateblue | \#7b68ee | ![zh-cn_image_0000001173164921](figures/zh-cn_image_0000001173164921.png) |
| mediumspringgreen | \#00fa9a | ![zh-cn_image_0000001173324793](figures/zh-cn_image_0000001173324793.png) |
| mediumturquoise | \#48d1cc | ![zh-cn_image_0000001127125214](figures/zh-cn_image_0000001127125214.png) |
| mediumvioletred | \#c71585 | ![zh-cn_image_0000001173164893](figures/zh-cn_image_0000001173164893.png) |
| midnightblue | \#191970 | ![zh-cn_image_0000001127125260](figures/zh-cn_image_0000001127125260.png) |
| mintcream | \#f5fffa | ![zh-cn_image_0000001127285030](figures/zh-cn_image_0000001127285030.png) |
| mistyrose | \#ffe4e1 | ![zh-cn_image_0000001173324785](figures/zh-cn_image_0000001173324785.png) |
| moccasin | \#ffe4b5 | ![zh-cn_image_0000001127125232](figures/zh-cn_image_0000001127125232.png) |
| navajowhite | \#ffdead | ![zh-cn_image_0000001173164925](figures/zh-cn_image_0000001173164925.png) |
| navy | \#000080 | ![zh-cn_image_0000001127285032](figures/zh-cn_image_0000001127285032.png) |
| oldlace | \#fdf5e6 | ![zh-cn_image_0000001127125184](figures/zh-cn_image_0000001127125184.png) |
| olive | \#808000 | ![zh-cn_image_0000001127125244](figures/zh-cn_image_0000001127125244.png) |
| olivedrab | \#6b8e23 | ![zh-cn_image_0000001173324839](figures/zh-cn_image_0000001173324839.png) |
| orange | \#ffa500 | ![zh-cn_image_0000001173164885](figures/zh-cn_image_0000001173164885.png) |
| orangered | \#ff4500 | ![zh-cn_image_0000001127284996](figures/zh-cn_image_0000001127284996.png) |
| orchid | \#da70d6 | ![zh-cn_image_0000001127285056](figures/zh-cn_image_0000001127285056.png) |
| palegoldenrod | \#eee8aa | ![zh-cn_image_0000001127125262](figures/zh-cn_image_0000001127125262.png) |
| palegreen | \#98fb98 | ![zh-cn_image_0000001127285006](figures/zh-cn_image_0000001127285006.png) |
| paleturquoise | \#afeeee | ![zh-cn_image_0000001173324757](figures/zh-cn_image_0000001173324757.png) |
| palevioletred | \#db7093 | ![zh-cn_image_0000001173164905](figures/zh-cn_image_0000001173164905.png) |
| papayawhip | \#ffefd5 | ![zh-cn_image_0000001127125248](figures/zh-cn_image_0000001127125248.png) |
| peachpuff | \#ffdab9 | ![zh-cn_image_0000001173324769](figures/zh-cn_image_0000001173324769.png) |
| peru | \#cd853f | ![zh-cn_image_0000001173164843](figures/zh-cn_image_0000001173164843.png) |
| pink | \#ffc0cb | ![zh-cn_image_0000001127125242](figures/zh-cn_image_0000001127125242.png) |
| plum | \#dda0dd | ![zh-cn_image_0000001173324831](figures/zh-cn_image_0000001173324831.png) |
| powderblue | \#b0e0e6 | ![zh-cn_image_0000001127285010](figures/zh-cn_image_0000001127285010.png) |
| purple | \#800080 | ![zh-cn_image_0000001127285002](figures/zh-cn_image_0000001127285002.png) |
| rebeccapurple | \#663399 | ![zh-cn_image_0000001173164907](figures/zh-cn_image_0000001173164907.png) |
| red | \#ff0000 | ![zh-cn_image_0000001127125254](figures/zh-cn_image_0000001127125254.png) |
| rosybrown | \#bc8f8f | ![zh-cn_image_0000001173324775](figures/zh-cn_image_0000001173324775.png) |
| royalblue | \#4169e1 | ![zh-cn_image_0000001127284972](figures/zh-cn_image_0000001127284972.png) |
| saddlebrown | \#8b4513 | ![zh-cn_image_0000001127125250](figures/zh-cn_image_0000001127125250.png) |
| salmon | \#fa8072 | ![zh-cn_image_0000001127285064](figures/zh-cn_image_0000001127285064.png) |
| sandybrown | \#f4a460 | ![zh-cn_image_0000001173324777](figures/zh-cn_image_0000001173324777.png) |
| seagreen | \#2e8b57 | ![zh-cn_image_0000001173324733](figures/zh-cn_image_0000001173324733.png) |
| seashell | \#fff5ee | ![zh-cn_image_0000001127285062](figures/zh-cn_image_0000001127285062.png) |
| sienna | \#a0522d | ![zh-cn_image_0000001173164917](figures/zh-cn_image_0000001173164917.png) |
| silver | \#c0c0c0 | ![zh-cn_image_0000001173324743](figures/zh-cn_image_0000001173324743.png) |
| skyblue | \#87ceeb | ![zh-cn_image_0000001127284970](figures/zh-cn_image_0000001127284970.png) |
| slateblue | \#6a5acd | ![zh-cn_image_0000001173164915](figures/zh-cn_image_0000001173164915.png) |
| slategray | \#708090 | ![zh-cn_image_0000001173324815](figures/zh-cn_image_0000001173324815.png) |
| slategrey | \#708090 | ![zh-cn_image_0000001127284982](figures/zh-cn_image_0000001127284982.png) |
| snow | \#fffafa | ![zh-cn_image_0000001173324731](figures/zh-cn_image_0000001173324731.png) |
| springgreen | \#00ff7f | ![zh-cn_image_0000001127285060](figures/zh-cn_image_0000001127285060.png) |
| steelblue | \#4682b4 | ![zh-cn_image_0000001127125240](figures/zh-cn_image_0000001127125240.png) |
| tan | \#d2b48c | ![zh-cn_image_0000001173324747](figures/zh-cn_image_0000001173324747.png) |
| teal | \#008080 | ![zh-cn_image_0000001173324741](figures/zh-cn_image_0000001173324741.png) |
| thistle | \#d8Bfd8 | ![zh-cn_image_0000001173164913](figures/zh-cn_image_0000001173164913.png) |
| tomato | \#ff6347 | ![zh-cn_image_0000001173164909](figures/zh-cn_image_0000001173164909.png) |
| turquoise | \#40e0d0 | ![zh-cn_image_0000001173164837](figures/zh-cn_image_0000001173164837.png) |
| violet | \#ee82ee | ![zh-cn_image_0000001127125258](figures/zh-cn_image_0000001127125258.png) |
| wheat | \#f5deb3 | ![zh-cn_image_0000001127285068](figures/zh-cn_image_0000001127285068.png) |
| white | \#ffffff | ![zh-cn_image_0000001173324823](figures/zh-cn_image_0000001173324823.png) |
| whitesmoke | \#f5f5f5 | ![zh-cn_image_0000001127284992](figures/zh-cn_image_0000001127284992.png) |
| yellow | \#ffff00 | ![zh-cn_image_0000001173324837](figures/zh-cn_image_0000001173324837.png) |
| yellowgreen | \#9acd32 | ![zh-cn_image_0000001173164923](figures/zh-cn_image_0000001173164923.png) |
| lightgray | \#d3d3d3 | ![zh-cn_image_0000001127284974](figures/zh-cn_image_0000001127284974.png) |
| lightgreen | \#90ee90 | ![zh-cn_image_0000001173324805](figures/zh-cn_image_0000001173324805.png) |
| lightpink | \#ffb6c1 | ![zh-cn_image_0000001127285038](figures/zh-cn_image_0000001127285038.png) |
| lightsalmon | \#ffa07a | ![zh-cn_image_0000001173324795](figures/zh-cn_image_0000001173324795.png) |
| lightseagreen | \#20b2aa | ![zh-cn_image_0000001173324737](figures/zh-cn_image_0000001173324737.png) |
| lightskyblue | \#87cefa | ![zh-cn_image_0000001127285042](figures/zh-cn_image_0000001127285042.png) |
| lightslategray | \#778899 | ![zh-cn_image_0000001127125226](figures/zh-cn_image_0000001127125226.png) |
| lightslategrey | \#778899 | ![zh-cn_image_0000001127125222](figures/zh-cn_image_0000001127125222.png) |
| lightsteelblue | \#b0c4de | ![zh-cn_image_0000001127284976](figures/zh-cn_image_0000001127284976.png) |
| lightyellow | \#ffffe0 | ![zh-cn_image_0000001173324807](figures/zh-cn_image_0000001173324807.png) |
| lime | \#00ff00 | ![zh-cn_image_0000001127285020](figures/zh-cn_image_0000001127285020.png) |
| limegreen | \#32cd32 | ![zh-cn_image_0000001127125236](figures/zh-cn_image_0000001127125236.png) |
| linen | \#faf0e6 | ![zh-cn_image_0000001173324739](figures/zh-cn_image_0000001173324739.png) |
| magenta | \#ff00ff | ![zh-cn_image_0000001127285044](figures/zh-cn_image_0000001127285044.png) |
| maroon | \#800000 | ![zh-cn_image_0000001127285018](figures/zh-cn_image_0000001127285018.png) |
| mediumaquamarine | \#66cdaa | ![zh-cn_image_0000001173164899](figures/zh-cn_image_0000001173164899.png) |
| mediumblue | \#0000cd | ![zh-cn_image_0000001127284968](figures/zh-cn_image_0000001127284968.png) |
| mediumorchid | \#ba55d3 | ![zh-cn_image_0000001127125216](figures/zh-cn_image_0000001127125216.png) |
| mediumpurple | \#9370db | ![zh-cn_image_0000001173324779](figures/zh-cn_image_0000001173324779.png) |
| mediumseagreen | \#3cb371 | ![zh-cn_image_0000001127125230](figures/zh-cn_image_0000001127125230.png) |
| mediumslateblue | \#7b68ee | ![zh-cn_image_0000001173164921](figures/zh-cn_image_0000001173164921.png) |
| mediumspringgreen | \#00fa9a | ![zh-cn_image_0000001173324793](figures/zh-cn_image_0000001173324793.png) |
| mediumturquoise | \#48d1cc | ![zh-cn_image_0000001127125214](figures/zh-cn_image_0000001127125214.png) |
| mediumvioletred | \#c71585 | ![zh-cn_image_0000001173164893](figures/zh-cn_image_0000001173164893.png) |
| midnightblue | \#191970 | ![zh-cn_image_0000001127125260](figures/zh-cn_image_0000001127125260.png) |
| mintcream | \#f5fffa | ![zh-cn_image_0000001127285030](figures/zh-cn_image_0000001127285030.png) |
| mistyrose | \#ffe4e1 | ![zh-cn_image_0000001173324785](figures/zh-cn_image_0000001173324785.png) |
| moccasin | \#ffe4b5 | ![zh-cn_image_0000001127125232](figures/zh-cn_image_0000001127125232.png) |
| navajowhite | \#ffdead | ![zh-cn_image_0000001173164925](figures/zh-cn_image_0000001173164925.png) |
| navy | \#000080 | ![zh-cn_image_0000001127285032](figures/zh-cn_image_0000001127285032.png) |
| oldlace | \#fdf5e6 | ![zh-cn_image_0000001127125184](figures/zh-cn_image_0000001127125184.png) |
| olive | \#808000 | ![zh-cn_image_0000001127125244](figures/zh-cn_image_0000001127125244.png) |
| olivedrab | \#6b8e23 | ![zh-cn_image_0000001173324839](figures/zh-cn_image_0000001173324839.png) |
| orange | \#ffa500 | ![zh-cn_image_0000001173164885](figures/zh-cn_image_0000001173164885.png) |
| orangered | \#ff4500 | ![zh-cn_image_0000001127284996](figures/zh-cn_image_0000001127284996.png) |
| orchid | \#da70d6 | ![zh-cn_image_0000001127285056](figures/zh-cn_image_0000001127285056.png) |
| palegoldenrod | \#eee8aa | ![zh-cn_image_0000001127125262](figures/zh-cn_image_0000001127125262.png) |
| palegreen | \#98fb98 | ![zh-cn_image_0000001127285006](figures/zh-cn_image_0000001127285006.png) |
| paleturquoise | \#afeeee | ![zh-cn_image_0000001173324757](figures/zh-cn_image_0000001173324757.png) |
| palevioletred | \#db7093 | ![zh-cn_image_0000001173164905](figures/zh-cn_image_0000001173164905.png) |
| papayawhip | \#ffefd5 | ![zh-cn_image_0000001127125248](figures/zh-cn_image_0000001127125248.png) |
| peachpuff | \#ffdab9 | ![zh-cn_image_0000001173324769](figures/zh-cn_image_0000001173324769.png) |
| peru | \#cd853f | ![zh-cn_image_0000001173164843](figures/zh-cn_image_0000001173164843.png) |
| pink | \#ffc0cb | ![zh-cn_image_0000001127125242](figures/zh-cn_image_0000001127125242.png) |
| plum | \#dda0dd | ![zh-cn_image_0000001173324831](figures/zh-cn_image_0000001173324831.png) |
| powderblue | \#b0e0e6 | ![zh-cn_image_0000001127285010](figures/zh-cn_image_0000001127285010.png) |
| purple | \#800080 | ![zh-cn_image_0000001127285002](figures/zh-cn_image_0000001127285002.png) |
| rebeccapurple | \#663399 | ![zh-cn_image_0000001173164907](figures/zh-cn_image_0000001173164907.png) |
| red | \#ff0000 | ![zh-cn_image_0000001127125254](figures/zh-cn_image_0000001127125254.png) |
| rosybrown | \#bc8f8f | ![zh-cn_image_0000001173324775](figures/zh-cn_image_0000001173324775.png) |
| royalblue | \#4169e1 | ![zh-cn_image_0000001127284972](figures/zh-cn_image_0000001127284972.png) |
| saddlebrown | \#8b4513 | ![zh-cn_image_0000001127125250](figures/zh-cn_image_0000001127125250.png) |
| salmon | \#fa8072 | ![zh-cn_image_0000001127285064](figures/zh-cn_image_0000001127285064.png) |
| sandybrown | \#f4a460 | ![zh-cn_image_0000001173324777](figures/zh-cn_image_0000001173324777.png) |
| seagreen | \#2e8b57 | ![zh-cn_image_0000001173324733](figures/zh-cn_image_0000001173324733.png) |
| seashell | \#fff5ee | ![zh-cn_image_0000001127285062](figures/zh-cn_image_0000001127285062.png) |
| sienna | \#a0522d | ![zh-cn_image_0000001173164917](figures/zh-cn_image_0000001173164917.png) |
| silver | \#c0c0c0 | ![zh-cn_image_0000001173324743](figures/zh-cn_image_0000001173324743.png) |
| skyblue | \#87ceeb | ![zh-cn_image_0000001127284970](figures/zh-cn_image_0000001127284970.png) |
| slateblue | \#6a5acd | ![zh-cn_image_0000001173164915](figures/zh-cn_image_0000001173164915.png) |
| slategray | \#708090 | ![zh-cn_image_0000001173324815](figures/zh-cn_image_0000001173324815.png) |
| slategrey | \#708090 | ![zh-cn_image_0000001127284982](figures/zh-cn_image_0000001127284982.png) |
| snow | \#fffafa | ![zh-cn_image_0000001173324731](figures/zh-cn_image_0000001173324731.png) |
| springgreen | \#00ff7f | ![zh-cn_image_0000001127285060](figures/zh-cn_image_0000001127285060.png) |
| steelblue | \#4682b4 | ![zh-cn_image_0000001127125240](figures/zh-cn_image_0000001127125240.png) |
| tan | \#d2b48c | ![zh-cn_image_0000001173324747](figures/zh-cn_image_0000001173324747.png) |
| teal | \#008080 | ![zh-cn_image_0000001173324741](figures/zh-cn_image_0000001173324741.png) |
| thistle | \#d8Bfd8 | ![zh-cn_image_0000001173164913](figures/zh-cn_image_0000001173164913.png) |
| tomato | \#ff6347 | ![zh-cn_image_0000001173164909](figures/zh-cn_image_0000001173164909.png) |
| turquoise | \#40e0d0 | ![zh-cn_image_0000001173164837](figures/zh-cn_image_0000001173164837.png) |
| violet | \#ee82ee | ![zh-cn_image_0000001127125258](figures/zh-cn_image_0000001127125258.png) |
| wheat | \#f5deb3 | ![zh-cn_image_0000001127285068](figures/zh-cn_image_0000001127285068.png) |
| white | \#ffffff | ![zh-cn_image_0000001173324823](figures/zh-cn_image_0000001173324823.png) |
| whitesmoke | \#f5f5f5 | ![zh-cn_image_0000001127284992](figures/zh-cn_image_0000001127284992.png) |
| yellow | \#ffff00 | ![zh-cn_image_0000001173324837](figures/zh-cn_image_0000001173324837.png) |
| yellowgreen | \#9acd32 | ![zh-cn_image_0000001173164923](figures/zh-cn_image_0000001173164923.png) |
zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md
浏览文件 @ cdb6cf82
# button
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。
......@@ -15,13 +15,13 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| type | string | - | 否 | 不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，则可选值包括如下：<br/>-&nbsp;capsule：胶囊型按钮，带圆角按钮，有背景色和文本；<br/>-&nbsp;circle：圆形按钮，支持放置图标；<br/>-&nbsp;text：文本按钮，仅包含文本显示；<br/>-&nbsp;arc：弧形按钮，仅支持智能穿戴；<br/>-&nbsp;download：下载按钮，额外增加下载进度条功能。 |
| value | string | - | 否 | button的文本值。 |
| icon | string | - | 否 | button的图标路径，图标格式为jpg，png和svg。 |
| placement<sup>5+</sup> | string | end | 否 | 仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：<br/>-&nbsp;start：图标位于文本起始处；<br/>-&nbsp;end：图标位于文本结束处；<br/>-&nbsp;top：图标位于文本上方；<br/>-&nbsp;bottom：图标位于文本下方。 |
| waiting | boolean | false | 否 | waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------------- | ------- | ----- | ---- | ---------------------------------------- |
| type | string | - | 否 | 不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，则可选值包括如下：<br/>-&nbsp;capsule：胶囊型按钮，带圆角按钮，有背景色和文本；<br/>-&nbsp;circle：圆形按钮，支持放置图标；<br/>-&nbsp;text：文本按钮，仅包含文本显示；<br/>-&nbsp;arc：弧形按钮，仅支持智能穿戴；<br/>-&nbsp;download：下载按钮，额外增加下载进度条功能。 |
| value | string | - | 否 | button的文本值。 |
| icon | string | - | 否 | button的图标路径，图标格式为jpg，png和svg。 |
| placement<sup>5+</sup> | string | end | 否 | 仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：<br/>-&nbsp;start：图标位于文本起始处；<br/>-&nbsp;end：图标位于文本结束处；<br/>-&nbsp;top：图标位于文本上方；<br/>-&nbsp;bottom：图标位于文本下方。 |
| waiting | boolean | false | 否 | waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效。 |
## 样式
......@@ -31,38 +31,38 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| text-color | &lt;color&gt; | \#ff007dff<br/> | 否 | 按钮的文本颜色。 |
| font-size | &lt;length&gt; | 16px<br/> | 否 | 按钮的文本尺寸。 |
| allow-scale | boolean | true | 否 | 按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-style | string | normal | 否 | 按钮的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | &lt;string&gt; | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| icon-width | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的宽，默认填满整个圆形按钮。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;icon使用svg图源时必须设置该样式。 |
| icon-height | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的高，默认填满整个圆形按钮。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;icon使用svg图源时必须设置该样式。 |
| radius | &lt;length&gt; | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 胶囊按钮（type=capsule）时，不支持border相关样式；
>
> - 圆形按钮（type=circle）时，不支持文本相关样式；
>
> - 文本按钮（type=text）时，自适应文本大小，不支持尺寸设置（radius，width，height），背景透明不支持background-color样式。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------- | -------------------------- | --------------- | ---- | ---------------------------------------- |
| text-color | &lt;color&gt; | \#ff007dff<br/> | 否 | 按钮的文本颜色。 |
| font-size | &lt;length&gt; | 16px<br/> | 否 | 按钮的文本尺寸。 |
| allow-scale | boolean | true | 否 | 按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-style | string | normal | 否 | 按钮的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | &lt;string&gt; | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| icon-width | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的宽，默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 |
| icon-height | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的高，默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 |
| radius | &lt;length&gt; | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 |
> **说明：**
> - 胶囊按钮（type=capsule）时，不支持border相关样式；
>
> - 圆形按钮（type=circle）时，不支持文本相关样式；
>
> - 文本按钮（type=text）时，自适应文本大小，不支持尺寸设置（radius，width，height），背景透明不支持background-color样式。
### type设置为arc
除支持[通用样式](../arkui-js/js-components-common-styles.md)中background-color、opacity、display、visibility、position、[left|top|right|bottom外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| text-color | &lt;color&gt; | \#de0000 | 否 | 弧形按钮的文本颜色。 |
| font-size | &lt;length&gt; | 37.5px | 否 | 弧形按钮的文本尺寸。 |
| allow-scale | boolean | true | 否 | 弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 |
| font-style | string | normal | 否 | 弧形按钮的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 弧形按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | &lt;string&gt; | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| text-color | &lt;color&gt; | \#de0000 | 否 | 弧形按钮的文本颜色。 |
| font-size | &lt;length&gt; | 37.5px | 否 | 弧形按钮的文本尺寸。 |
| allow-scale | boolean | true | 否 | 弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 |
| font-style | string | normal | 否 | 弧形按钮的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 弧形按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | &lt;string&gt; | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
## 事件
......@@ -76,13 +76,13 @@
类型为download时，支持如下方法：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| setProgress | {&nbsp;progress:percent&nbsp;} | 设定下载按钮进度条进度，取值位于0-100区间内，当设置的值大于0时，下载按钮展现进度条。当设置的值大于等于100时，取消进度条显示。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;浮在进度条上的文字通过value值进行变更。 |
| 名称 | 参数 | 描述 |
| ----------- | ------------------------------ | ---------------------------------------- |
| setProgress | {&nbsp;progress:percent&nbsp;} | 设定下载按钮进度条进度，取值位于0-100区间内，当设置的值大于0时，下载按钮展现进度条。当设置的值大于等于100时，取消进度条显示。<br/>浮在进度条上的文字通过value值进行变更。 |
## 示例
```
```html
<!-- xxx.hml -->
<div class="div-button">
<button class="first" type="capsule" value="Capsule button"></button>
......@@ -94,7 +94,7 @@
</div>
```
```
```css
/* xxx.css */
.div-button {
flex-direction: column;
......@@ -137,8 +137,8 @@
}
```
```
// xxx.js
```js
// xxx.js
export default {
data: {
count: 5,
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md
浏览文件 @ cdb6cf82
# chart
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
图表组件，用于呈现线形图、柱状图、量规图界面。
......@@ -19,114 +19,114 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| type | string | line | 否 | 设置图表类型（不支持动态修改），可选项有：<br/>-&nbsp;bar：柱状图。<br/>-&nbsp;line：线形图。<br/>-&nbsp;gauge：量规图。<br/>-&nbsp;progress<sup>5+</sup>：进度类圆形图表。<br/>-&nbsp;loading<sup>5+</sup>：加载类圆形图表。<br/>-&nbsp;rainbow<sup>5+</sup>：占比类圆形图表。 |
| options | ChartOptions | - | 否 | 图表参数设置，柱状图和线形图必须设置参数设置，量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改） |
| datasets | Array&lt;ChartDataset&gt; | - | 否 | 数据集合，柱状图和线形图必须设置数据集合，量规图不生效。可以设置多条数据集及其背景色。 |
| segments<sup>5+</sup> | DataSegment&nbsp;\|&nbsp;Array&lt;DataSegment&gt; | - | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。<br/>DataSegment针对进度类和加载类圆形图表使用，<br/>Array&lt;DataSegment&gt;针对占比类图标使用，DataSegment最多9个。 |
| effects<sup>5+</sup> | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 |
| animationduration<sup>6+</sup> | number | 3000 | 否 | 设置占比类圆形图表展开动画时长，单位为ms。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------------------ | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| type | string | line | 否 | 设置图表类型（不支持动态修改），可选项有：<br/>-&nbsp;bar：柱状图。<br/>-&nbsp;line：线形图。<br/>-&nbsp;gauge：量规图。<br/>-&nbsp;progress<sup>5+</sup>：进度类圆形图表。<br/>-&nbsp;loading<sup>5+</sup>：加载类圆形图表。<br/>-&nbsp;rainbow<sup>5+</sup>：占比类圆形图表。 |
| options | ChartOptions | - | 否 | 图表参数设置，柱状图和线形图必须设置参数设置，量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改） |
| datasets | Array&lt;ChartDataset&gt; | - | 否 | 数据集合，柱状图和线形图必须设置数据集合，量规图不生效。可以设置多条数据集及其背景色。 |
| segments<sup>5+</sup> | DataSegment&nbsp;\|&nbsp;Array&lt;DataSegment&gt; | - | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。<br/>DataSegment针对进度类和加载类圆形图表使用，<br/>Array&lt;DataSegment&gt;针对占比类图标使用，DataSegment最多9个。 |
| effects<sup>5+</sup> | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 |
| animationduration<sup>6+</sup> | number | 3000 | 否 | 设置占比类圆形图表展开动画时长，单位为ms。 |
**表1** ChartOptions
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| xAxis | ChartAxis | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 |
| yAxis | ChartAxis | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 |
| series | ChartSeries | - | 否 | 数据序列参数设置。可以设置1）线的样式，如线宽、是否平滑；2）设置线最前端位置白点的样式和大小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅线形图支持。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------ | ----------- | ---- | ---- | ---------------------------------------- |
| xAxis | ChartAxis | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 |
| yAxis | ChartAxis | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 |
| series | ChartSeries | - | 否 | 仅线形图支持设置数据序列参数，可以设置的样式：<br>- 线的样式，如线宽、是否平滑。<br>- 设置线最前端位置白点的样式和大小。 |
**表2** ChartDataset
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| strokeColor | &lt;color&gt; | \#ff6384 | 否 | 线条颜色。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅线形图支持。 |
| fillColor | &lt;color&gt; | \#ff6384 | 否 | 填充颜色。线形图表示填充的渐变颜色。 |
| data | Array&lt;number&gt;&nbsp;\|&nbsp;Array&lt;Point&gt;<sup>5+</sup> | - | 是 | 设置绘制线或柱中的点集。 |
| gradient | boolean | false | 否 | 设置是否显示填充渐变颜色。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅线形图支持。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------- | ---------------------------------------- | -------- | ---- | ---------------------- |
| strokeColor | &lt;color&gt; | \#ff6384 | 否 | 仅线形图支持设置线条颜色。 |
| fillColor | &lt;color&gt; | \#ff6384 | 否 | 填充颜色。<br>线形图表示填充的渐变颜色。 |
| data | Array&lt;number&gt;&nbsp;\|&nbsp;Array&lt;Point&gt;<sup>5+</sup> | - | 是 | 设置绘制线或柱中的点集。 |
| gradient | boolean | false | 否 | 仅线形图支持设置是否显示填充渐变颜色。 |
**表3** ChartAxis
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| min | number | 0 | 否 | 轴的最小值。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅线形图支持负数。 |
| max | number | 100 | 否 | 轴的最大值。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅线形图支持负数。 |
| axisTick | number | 10 | 否 | 轴显示的刻度数量。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。<br/>>&nbsp;在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 |
| display | boolean | false | 否 | 是否显示轴。 |
| color | &lt;color&gt; | \#c0c0c0 | 否 | 轴颜色。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------------- | -------- | ---- | ---------------------------------------- |
| min | number | 0 | 否 | 轴的最小值，仅线形图支持负数。 |
| max | number | 100 | 否 | 轴的最大值，仅线形图支持负数。 |
| axisTick | number | 10 | 否 | 轴显示的刻度数量。仅支持1~20，且具体显示的效果与图的宽度所占的像素/（max-min）有关。<br/>在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 |
| display | boolean | false | 否 | 是否显示轴。 |
| color | &lt;color&gt; | \#c0c0c0 | 否 | 轴颜色。 |
**表4** ChartSeries
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| lineStyle | ChartLineStyle | - | 否 | 线样式设置，如线宽、是否平滑。 |
| headPoint | PointStyle | - | 否 | 线最前端位置白点的样式和大小。 |
| topPoint | PointStyle | - | 否 | 最高点的样式和大小。 |
| bottomPoint | PointStyle | - | 否 | 最低点的样式和大小。 |
| loop | ChartLoop | - | 否 | 设置屏幕显示满时，是否需要重头开始绘制。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------- | -------------- | ---- | ---- | -------------------- |
| lineStyle | ChartLineStyle | - | 否 | 线样式设置，如线宽、是否平滑。 |
| headPoint | PointStyle | - | 否 | 线最前端位置白点的样式和大小。 |
| topPoint | PointStyle | - | 否 | 最高点的样式和大小。 |
| bottomPoint | PointStyle | - | 否 | 最低点的样式和大小。 |
| loop | ChartLoop | - | 否 | 设置屏幕显示满时，是否需要重头开始绘制。 |
**表5** ChartLineStyle
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | &lt;length&gt; | 1px | 否 | 线宽设置。 |
| smooth | boolean | false | 否 | 是否平滑。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------ | -------------- | ----- | ---- | ----- |
| width | &lt;length&gt; | 1px | 否 | 线宽设置。 |
| smooth | boolean | false | 否 | 是否平滑。 |
**表6** PointStyle
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| shape | string | circle | 否 | 高亮点的形状。可选值为：<br/>-&nbsp;circle：圆形。<br/>-&nbsp;square：方形。<br/>-&nbsp;triangle：三角形。 |
| size | &lt;length&gt; | 5px | 否 | 高亮点的大小。 |
| strokeWidth | &lt;length&gt; | 1px | 否 | 边框宽度 |
| strokeColor | &lt;color&gt; | \#ff0000 | 否 | 边框颜色。 |
| fillColor | &lt;color&gt; | \#ff0000 | 否 | 填充颜色。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------- | -------------- | -------- | ---- | ---------------------------------------- |
| shape | string | circle | 否 | 高亮点的形状。可选值为：<br/>-&nbsp;circle：圆形。<br/>-&nbsp;square：方形。<br/>-&nbsp;triangle：三角形。 |
| size | &lt;length&gt; | 5px | 否 | 高亮点的大小。 |
| strokeWidth | &lt;length&gt; | 1px | 否 | 边框宽度 |
| strokeColor | &lt;color&gt; | \#ff0000 | 否 | 边框颜色。 |
| fillColor | &lt;color&gt; | \#ff0000 | 否 | 填充颜色。 |
**表7** ChartLoop
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| margin | &lt;length&gt; | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。注意：轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 |
| gradient | boolean | false | 否 | 是否需要渐变擦除。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------------- | ----- | ---- | ---------------------------------------- |
| margin | &lt;length&gt; | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 |
| gradient | boolean | false | 否 | 是否需要渐变擦除。 |
**表8** Point<sup>5+</sup>
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | number | 0 | 是 | 表示绘制点的Y轴坐标。 |
| pointStyle | PointStyle | - | 否 | 表示当前数据点的绘制样式。 |
| description | string | - | 否 | 表示当前点的注释内容。 |
| textLocation | string | - | 否 | 可选值为top，bottom，none。分别表示注释的绘制位置位于点的上方，下方，以及不绘制。 |
| textColor | &lt;color&gt; | \#000000 | 否 | 表示注释文字的颜色。 |
| lineDash | string | solid | 否 | 表示绘制当前线段虚线的样式。“dashed，&nbsp;5，&nbsp;5”表示纯虚线，绘制5px的实线后留5px的空白。“solid”表示绘制实线。 |
| lineColor | &lt;color&gt; | \#000000 | 否 | 表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------ | ------------- | -------- | ---- | ---------------------------------------- |
| value | number | 0 | 是 | 表示绘制点的Y轴坐标。 |
| pointStyle | PointStyle | - | 否 | 表示当前数据点的绘制样式。 |
| description | string | - | 否 | 表示当前点的注释内容。 |
| textLocation | string | - | 否 | 可选值为top，bottom，none。分别表示注释的绘制位置位于点的上方，下方，以及不绘制。 |
| textColor | &lt;color&gt; | \#000000 | 否 | 表示注释文字的颜色。 |
| lineDash | string | solid | 否 | 表示绘制当前线段虚线的样式。“dashed，&nbsp;5，&nbsp;5”表示纯虚线，绘制5px的实线后留5px的空白。“solid”表示绘制实线。 |
| lineColor | &lt;color&gt; | \#000000 | 否 | 表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。 |
**表9** DataSegment<sup>5+</sup>
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| startColor | Color | - | 否 | 起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会使用系统默认预置的颜色数组，具体颜色值见下表。 |
| endColor | Color | - | 否 | 终止位置的颜色，设置endColor必须设置startColor。<br/>不设置startColor时，会使用系统默认预置的颜色数组。 |
| value | number | 0 | 是 | 占比数据的所占份额，最大100。 |
| name | string | - | 否 | 此类数据的名称。 |
| 数据组 | 浅色主题 | 深色主题 |
| -------- | -------- | -------- |
| 0 | 起始颜色：\#f7ce00，结束颜色：\#f99b11 | 起始颜色：\#d1a738，结束颜色：\#eb933d |
| 1 | 起始颜色：\#f76223，结束颜色：\#f2400a | 起始颜色：\#e67d50，结束颜色：\#d9542b |
| 2 | 起始颜色：\#f772ac，结束颜色：\#e65392 | 起始颜色：\#d5749e，结束颜色：\#d6568d |
| 3 | 起始颜色：\#a575eb，结束颜色：\#a12df7 | 起始颜色：\#9973d1，结束颜色：\#5552d9 |
| 4 | 起始颜色：\#7b79f7，结束颜色：\#4b48f7 | 起始颜色：\#7977d9，结束颜色：\#f99b11 |
| 5 | 起始颜色：\#4b8af3，结束颜色：\#007dff | 起始颜色：\#4c81d9，结束颜色：\#217bd9 |
| 6 | 起始颜色：\#73c1e6，结束颜色：\#4fb4e3 | 起始颜色：\#5ea6d1，结束颜色：\#4895c2 |
| 7 | 起始颜色：\#a5d61d，结束颜色：\#69d14f | 起始颜色：\#91c23a，结束颜色：\#70ba5d |
| 8 | 起始颜色：\#a2a2b0，结束颜色：\#8e8e93 | 起始颜色：\#8c8c99，结束颜色：\#6b6b76 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------- | ------ | ---- | ---- | ---------------------------------------- |
| startColor | Color | - | 否 | 起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会使用系统默认预置的颜色数组，具体颜色值见下表。 |
| endColor | Color | - | 否 | 终止位置的颜色，设置endColor必须设置startColor。<br/>不设置startColor时，会使用系统默认预置的颜色数组。 |
| value | number | 0 | 是 | 占比数据的所占份额，最大100。 |
| name | string | - | 否 | 此类数据的名称。 |
| 数据组 | 浅色主题 | 深色主题 |
| ---- | --------------------------- | --------------------------- |
| 0 | 起始颜色：\#f7ce00，结束颜色：\#f99b11 | 起始颜色：\#d1a738，结束颜色：\#eb933d |
| 1 | 起始颜色：\#f76223，结束颜色：\#f2400a | 起始颜色：\#e67d50，结束颜色：\#d9542b |
| 2 | 起始颜色：\#f772ac，结束颜色：\#e65392 | 起始颜色：\#d5749e，结束颜色：\#d6568d |
| 3 | 起始颜色：\#a575eb，结束颜色：\#a12df7 | 起始颜色：\#9973d1，结束颜色：\#5552d9 |
| 4 | 起始颜色：\#7b79f7，结束颜色：\#4b48f7 | 起始颜色：\#7977d9，结束颜色：\#f99b11 |
| 5 | 起始颜色：\#4b8af3，结束颜色：\#007dff | 起始颜色：\#4c81d9，结束颜色：\#217bd9 |
| 6 | 起始颜色：\#73c1e6，结束颜色：\#4fb4e3 | 起始颜色：\#5ea6d1，结束颜色：\#4895c2 |
| 7 | 起始颜色：\#a5d61d，结束颜色：\#69d14f | 起始颜色：\#91c23a，结束颜色：\#70ba5d |
| 8 | 起始颜色：\#a2a2b0，结束颜色：\#8e8e93 | 起始颜色：\#8c8c99，结束颜色：\#6b6b76 |
当类型为量规图时，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| percent | number | 0 | 否 | 当前值占整体的百分比，取值范围为0-100。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------- | ------ | ---- | ---- | ---------------------- |
| percent | number | 0 | 否 | 当前值占整体的百分比，取值范围为0-100。 |
## 样式
......@@ -135,18 +135,18 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| stroke-width | &lt;length&gt; | 32px（量规）<br/>24px（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条的宽度。 |
| start-angle | &lt;deg&gt; | 240（量规）<br/>0（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条起始角度，以时钟0点为基线。范围为0到360。 |
| total-angle | &lt;deg&gt; | 240（量规）<br/>360（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 |
| center-x | &lt;length&gt; | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-y和radius一起配置才能生效。（仅量规图支持） |
| center-y | &lt;length&gt; | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-x和radius一起配置才能生效。（仅量规图支持） |
| radius | &lt;length&gt; | - | 否 | 量规组件刻度条半径，该样式优先于通用样式的width和height样式。该样式需要和center-x和center-y一起配置才能生效。（仅量规图支持） |
| colors | Array | - | 否 | 量规组件刻度条每一个区段的颜色。<br/>如：colors:&nbsp;\#ff0000,&nbsp;\#00ff00。（仅量规图支持） |
| weights | Array | - | 否 | 量规组件刻度条每一个区段的权重。<br/>如：weights:&nbsp;2,&nbsp;2。（仅量规图支持） |
| font-family<sup>5+</sup> | Array | - | 否 | 表示绘制注释的字体样式，支持[自定义字体](../arkui-js/js-components-common-customizing-font.md)。 |
| font-size<sup>5+</sup> | &lt;length&gt; | - | 否 | 表示绘制注释的字体的大小。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------------ | -------------- | -------------------------- | ---- | ---------------------------------------- |
| stroke-width | &lt;length&gt; | 32px（量规）<br/>24px（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条的宽度。 |
| start-angle | &lt;deg&gt; | 240（量规）<br/>0（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条起始角度，以时钟0点为基线。范围为0到360。 |
| total-angle | &lt;deg&gt; | 240（量规）<br/>360（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 |
| center-x | &lt;length&gt; | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-y和radius一起配置才能生效。（仅量规图支持） |
| center-y | &lt;length&gt; | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-x和radius一起配置才能生效。（仅量规图支持） |
| radius | &lt;length&gt; | - | 否 | 量规组件刻度条半径，该样式优先于通用样式的width和height样式。该样式需要和center-x和center-y一起配置才能生效。（仅量规图支持） |
| colors | Array | - | 否 | 量规组件刻度条每一个区段的颜色。<br/>如：colors:&nbsp;\#ff0000,&nbsp;\#00ff00。（仅量规图支持） |
| weights | Array | - | 否 | 量规组件刻度条每一个区段的权重。<br/>如：weights:&nbsp;2,&nbsp;2。（仅量规图支持） |
| font-family<sup>5+</sup> | Array | - | 否 | 表示绘制注释的字体样式，支持[自定义字体](../arkui-js/js-components-common-customizing-font.md)。 |
| font-size<sup>5+</sup> | &lt;length&gt; | - | 否 | 表示绘制注释的字体的大小。 |
## 事件
......@@ -158,14 +158,14 @@
除支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法：
| 方法 | 参数 | 描述 |
| -------- | -------- | -------- |
| append | {<br/>serial:&nbsp;number,&nbsp;//&nbsp;设置要更新的线形图数据下标<br/>data:&nbsp;Array&lt;number&gt;,&nbsp;//&nbsp;设置新增的数据<br/>} | 往已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。注意：不会更新datasets[index].data。仅线形图支持，按横坐标加1递增（与xAxis&nbsp;min/max设置相关）。 |
| 方法 | 参数 | 描述 |
| ------ | ---------------------------------------- | ---------------------------------------- |
| append | {<br/>serial:&nbsp;number,&nbsp;//&nbsp;设置要更新的线形图数据下标<br/>data:&nbsp;Array&lt;number&gt;,&nbsp;//&nbsp;设置新增的数据<br/>} | 向已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。不会更新datasets[index].data。仅线形图支持，按横坐标加1递增（与xAxis&nbsp;min/max设置相关）。 |
## 示例
1. 线形图
```
```html
<!-- xxx.hml -->
<div class="container">
<stack class="chart-region">
......@@ -176,7 +176,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -202,7 +202,7 @@
}
```
```
```js
// xxx.js
export default {
data: {
......@@ -257,7 +257,7 @@
![zh-cn_image_0000001173324843](figures/zh-cn_image_0000001173324843.png)
2. 柱状图
```
```html
<!-- xxx.hml -->
<div class="container">
<stack class="data-region">
......@@ -267,7 +267,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -287,7 +287,7 @@
}
```
```
```js
// xxx.js
export default {
data: {
......@@ -325,7 +325,7 @@
![zh-cn_image_0000001173164929](figures/zh-cn_image_0000001173164929.png)
3. 量规图
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="gauge-region">
......@@ -334,7 +334,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-divider.md
浏览文件 @ cdb6cf82
# divider
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供分隔器组件，分隔不同内容块/内容元素。可用于列表或界面布局。
......@@ -19,31 +19,31 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| vertical | boolean | false | 否 | 使用水平分割线还是垂直分割线，默认水平。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------- | ----- | ---- | -------------------- |
| vertical | boolean | false | 否 | 使用水平分割线还是垂直分割线，默认水平。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 不支持focusable、disabled属性。
> **说明：**
> 不支持focusable、disabled属性。
## 样式
仅支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| margin | &lt;length&gt; | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。 |
| margin-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | 否 | 使用简写属性设置左、上、右、下外边距属性，类型length，单位px，默认值0。 |
| color | &lt;color&gt; | \#08000000 | 否 | 设置分割线颜色。 |
| stroke-width | &lt;length&gt; | 1 | 否 | 设置分割线宽度。 |
| display | string | flex | 否 | 确定分割线所产生的框的类型。值flex/none，默认值flex。 |
| visibility | string | visible | 否 | 是否显示分割线。不可见的框会占用布局。visible代表显示元素，hidden代表不显示元素。 |
| line-cap | string | butt | 否 | 设置分割线条的端点样式，默认为butt，可选值为：<br/>-&nbsp;butt：分割线两端为平行线；<br/>-&nbsp;round：分割线两端额外添加半圆；<br/>-&nbsp;square：分割线两端额外添加半方形；<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;round和square会额外增加一个线宽的分割线长度。 |
| flex | number | - | 否 | 规定了分割线如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 |
| flex-grow | number | 0 | 否 | 设置分割线的伸展因子，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex项加起来的大小）的分配系数。0为不伸展。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 |
| flex-shrink | number | 1 | 否 | 设置分割线的收缩因子，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 |
| flex-basis | &lt;length&gt; | - | 否 | 设置分割线在主轴方向上的初始大小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------------------------------- | -------------- | ---------- | ---- | ---------------------------------------- |
| margin | &lt;length&gt; | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。 |
| margin-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | 否 | 使用简写属性设置左、上、右、下外边距属性，类型length，单位px，默认值0。 |
| color | &lt;color&gt; | \#08000000 | 否 | 设置分割线颜色。 |
| stroke-width | &lt;length&gt; | 1 | 否 | 设置分割线宽度。 |
| display | string | flex | 否 | 确定分割线所产生的框的类型。值flex/none，默认值flex。 |
| visibility | string | visible | 否 | 是否显示分割线。不可见的框会占用布局。visible代表显示元素，hidden代表不显示元素。 |
| line-cap | string | butt | 否 | 设置分割线条的端点样式，默认为butt，可选值为：<br/>-&nbsp;butt：分割线两端为平行线；<br/>-&nbsp;round：分割线两端额外添加半圆，额外增加一个线宽的分割线长度；<br/>-&nbsp;square：分割线两端额外添加半方形，额外增加一个线宽的分割线长度； |
| flex | number | - | 否 | 规定了分割线如何适应父组件中的可用空间，用来设置组件的flex-grow。<br>仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 |
| flex-grow | number | 0 | 否 | 设置分割线的伸展因子，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex项加起来的大小）的分配系数，0为不伸展。<br/>仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 |
| flex-shrink | number | 1 | 否 | 设置分割线的收缩因子，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。<br/>仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 |
| flex-basis | &lt;length&gt; | - | 否 | 设置分割线在主轴方向上的初始大小。<br>仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 |
## 事件
......@@ -58,7 +58,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="content">
......@@ -67,7 +67,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
margin: 20px;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-image-animator.md
浏览文件 @ cdb6cf82
# image-animator
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
图片帧动画播放器。
......@@ -15,26 +15,26 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| images | Array&lt;ImageFrame&gt; | - | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg。ImageFrame的详细说明请见表 ImageFrame说明。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用时需要使用数据绑定的方式，如images&nbsp;=&nbsp;{{images}}，js中声明相应变量：images:&nbsp;[{src:&nbsp;"/common/heart-rate01.png"},&nbsp;{src:&nbsp;"/common/heart-rate02.png"}]。<br/>>&nbsp;<br/>>&nbsp;js中声明相应变量：images:&nbsp;[{src:&nbsp;"/common/heart-rate01.png",&nbsp;duration:&nbsp;"100"},&nbsp;{src:&nbsp;"/common/heart-rate02.png",&nbsp;duration:&nbsp;"200"}]。支持配置每一帧图片的时长，单位毫秒。<sup>6+</sup> |
| predecode<sup>6+</sup> | number | 0 | 否 | 是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。 |
| iteration | number&nbsp;\|&nbsp;string | infinite | 否 | 设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。 |
| reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片；&nbsp;true表示从最后1张图片播放到第1张图片。 |
| fixedsize | boolean | true | 否 | 设置图片大小是否固定为组件大小。&nbsp;true表示图片大小与组件大小一致，此时设置图片的width&nbsp;、height&nbsp;、top&nbsp;和left属性是无效的。false表示每一张图片的&nbsp;width&nbsp;、height&nbsp;、top和left属性都要单独设置。 |
| duration | string | - | 是 | 设置单次播放时长。单位支持[s(秒)\|ms(毫秒)]，默认单位为ms。&nbsp;duration为0时，不播放图片。&nbsp;值改变只会在下一次循环开始时生效，当images中设置了单独的duration后，该属性设置无效。 |
| fillmode<sup>5+</sup> | string | forwards | 否 | 指定帧动画执行结束后的状态。可选项有：<br/>-&nbsp;none：恢复初始状态。<br/>-&nbsp;forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------------- | -------------------------- | -------- | ---- | ---------------------------------------- |
| images | Array&lt;ImageFrame&gt; | - | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg。ImageFrame的详细说明请见表 ImageFrame说明。<br/>使用时需要使用数据绑定的方式：<br>- hml文件中引用图片资源：`images = {{images}}`，<br>- js文件中声明相应变量：<br>`images: [{src: "/common/heart-rate01.png",duration:"100"}]`。从API Version 6 开始，支持配置每一帧图片的时长，单位毫秒。 |
| predecode<sup>6+</sup> | number | 0 | 否 | 是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。 |
| iteration | number&nbsp;\|&nbsp;string | infinite | 否 | 设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。 |
| reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片；&nbsp;true表示从最后1张图片播放到第1张图片。 |
| fixedsize | boolean | true | 否 | 设置图片大小是否固定为组件大小。&nbsp;true表示图片大小与组件大小一致，此时设置图片的width&nbsp;、height&nbsp;、top&nbsp;和left属性是无效的。false表示每一张图片的&nbsp;width&nbsp;、height&nbsp;、top和left属性都要单独设置。 |
| duration | string | - | 是 | 设置单次播放时长。单位支持[s(秒)\|ms(毫秒)]，默认单位为ms。&nbsp;duration为0时，不播放图片。&nbsp;值改变只会在下一次循环开始时生效，当images中设置了单独的duration后，该属性设置无效。 |
| fillmode<sup>5+</sup> | string | forwards | 否 | 指定帧动画执行结束后的状态。可选项有：<br/>-&nbsp;none：恢复初始状态。<br/>-&nbsp;forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。 |
**表1** ImageFrame说明
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| src | &lt;uri&gt; | - | 是 | 图片路径，图片格式为svg，png和jpg。 |
| width | &lt;length&gt; | 0 | 否 | 图片宽度。 |
| height | &lt;length&gt; | 0 | 否 | 图片高度。 |
| top | &lt;length&gt; | 0 | 否 | 图片相对于组件左上角的纵向坐标。 |
| left | &lt;length&gt; | 0 | 否 | 图片相对于组件左上角的横向坐标。 |
| duration<sup>6+</sup> | number | - | 否 | 每一帧图片的播放时长，单位毫秒。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------------------- | -------------- | ---- | ---- | ---------------------- |
| src | &lt;uri&gt; | - | 是 | 图片路径，图片格式为svg，png和jpg。 |
| width | &lt;length&gt; | 0 | 否 | 图片宽度。 |
| height | &lt;length&gt; | 0 | 否 | 图片高度。 |
| top | &lt;length&gt; | 0 | 否 | 图片相对于组件左上角的纵向坐标。 |
| left | &lt;length&gt; | 0 | 否 | 图片相对于组件左上角的横向坐标。 |
| duration<sup>6+</sup> | number | - | 否 | 每一帧图片的播放时长，单位毫秒。 |
## 样式
......@@ -46,30 +46,30 @@
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| start | - | 帧动画启动时触发。 |
| pause | - | 帧动画暂停时触发。 |
| stop | - | 帧动画结束时触发。 |
| resume | - | 帧动画恢复时触发。 |
| 名称 | 参数 | 描述 |
| ------ | ---- | --------- |
| start | - | 帧动画启动时触发。 |
| pause | - | 帧动画暂停时触发。 |
| stop | - | 帧动画结束时触发。 |
| resume | - | 帧动画恢复时触发。 |
## 方法
支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| start | - | 开始播放图片帧动画。再次调用，重新从第1帧开始播放。 |
| pause | - | 暂停播放图片帧动画。 |
| stop | - | 停止播放图片帧动画。 |
| resume | - | 继续播放图片帧。 |
| getState | - | 获取播放状态。可能值有：<br/>-&nbsp;playing：播放中<br/>-&nbsp;paused：已暂停<br/>-&nbsp;stopped：已停止。 |
| 名称 | 参数 | 描述 |
| -------- | ---- | ---------------------------------------- |
| start | - | 开始播放图片帧动画。再次调用，重新从第1帧开始播放。 |
| pause | - | 暂停播放图片帧动画。 |
| stop | - | 停止播放图片帧动画。 |
| resume | - | 继续播放图片帧。 |
| getState | - | 获取播放状态。<br/>-&nbsp;playing：播放中<br/>-&nbsp;paused：已暂停<br/>-&nbsp;stopped：已停止。 |
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" />
......@@ -82,7 +82,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -111,7 +111,7 @@
}
```
```
```js
//xxx.js
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md
浏览文件 @ cdb6cf82
# image
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
图片组件，用来渲染展示图片。
......@@ -15,55 +15,55 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| src | string | - | 否 | 图片的路径，支持本地路径，图片格式包括png、jpg、bmp、svg和gif。<br/>支持Base64字符串<sup>6+</sup>。格式为data:image/[png&nbsp;\|&nbsp;jpeg&nbsp;\|&nbsp;bmp&nbsp;\|&nbsp;webp];base64,&nbsp;[base64&nbsp;data],&nbsp;其中[base64&nbsp;data]为Base64字符串数据。<br/>支持dataability://的路径前缀，用于访问通过data&nbsp;ability提供的图片路径<sup>6+</sup>。 |
| alt | string | - | 否 | 占位图，当指定图片在加载中时显示。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---- | ------ | ---- | ---- | ---------------------------------------- |
| src | string | - | 否 | 图片的路径，支持本地路径，图片格式包括png、jpg、bmp、svg和gif。<br/>- 支持Base64字符串<sup>6+</sup>。格式为data:image/[png&nbsp;\|&nbsp;jpeg&nbsp;\|&nbsp;bmp&nbsp;\|&nbsp;webp];base64,&nbsp;[base64&nbsp;data],&nbsp;其中[base64&nbsp;data]为Base64字符串数据。<br/>- 支持dataability://的路径前缀，用于访问通过data&nbsp;ability提供的图片路径<sup>6+</sup>。 |
| alt | string | - | 否 | 占位图，当指定图片在加载中时显示。 |
## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| object-fit | string | cover | 否 | 设置图片的缩放类型。可选值类型说明请见object-fit 类型说明。（不支持svg格式） |
| match-text-direction | boolean | false | 否 | 图片是否跟随文字方向。（不支持svg格式） |
| fit-original-size | boolean | false | 否 | image组件在未设置宽高的情况下是否适应图源尺寸（该属性为true时object-fit属性不生效），svg类型图源不支持该属性。 |
| object-position<sup>7+</sup> | string | 0px&nbsp;0px | 否 | 设置图片在组件内展示的位置。<br/>设置类型有两种：<br/>1.&nbsp;像素，单位px，示例&nbsp;15px&nbsp;15px&nbsp;代表X轴或者Y轴移动的位置<br/>2.&nbsp;字符，可选值：<br/>-&nbsp;left&nbsp;图片显示在组件左侧；<br/>-&nbsp;top&nbsp;图片显示在组件顶部位置；<br/>-&nbsp;right&nbsp;图片显示在组件右侧位置；<br/>-&nbsp;bottom 图片显示在组件底部位置。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------------------- | ------- | ------------ | ---- | ---------------------------------------- |
| object-fit | string | cover | 否 | 设置图片的缩放类型，不支持svg格式。可选值类型说明请见object-fit 类型说明。 |
| match-text-direction | boolean | false | 否 | 图片是否跟随文字方向，不支持svg格式。 |
| fit-original-size | boolean | false | 否 | image组件在未设置宽高的情况下是否适应图源尺寸，该属性为true时object-fit属性不生效，svg类型图源不支持该属性。 |
| object-position<sup>7+</sup> | string | 0px&nbsp;0px | 否 | 设置图片在组件内展示的位置。<br/>设置类型有两种：<br/>1.&nbsp;像素，单位px，示例&nbsp;15px&nbsp;15px&nbsp;代表X轴或者Y轴移动的位置<br/>2.&nbsp;字符，可选值：<br/>-&nbsp;left&nbsp;图片显示在组件左侧；<br/>-&nbsp;top&nbsp;图片显示在组件顶部位置；<br/>-&nbsp;right&nbsp;图片显示在组件右侧位置；<br/>-&nbsp;bottom 图片显示在组件底部位置。 |
**表1** object-fit 类型说明
| 类型 | 描述 |
| -------- | -------- |
| cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。 |
| contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。 |
| fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 |
| none | 保持原有尺寸进行居中显示。 |
| scale-down | 保持宽高比居中显示，图片缩小或者保持不变。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用svg图片资源时：
>
> - 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制；
>
> - 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域；
>
> - 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下：
>
> 1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分；
>
> 2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。
| 类型 | 描述 |
| ---------- | ------------------------------------ |
| cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。 |
| contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。 |
| fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 |
| none | 保持原有尺寸进行居中显示。 |
| scale-down | 保持宽高比居中显示，图片缩小或者保持不变。 |
> **说明：**
> 使用svg图片资源时：
>
> - 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制；
>
> - 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域；
>
> - 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下：
>
> 1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分；
>
> 2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| complete(Rich) | {&nbsp;width：width，&nbsp;height：height&nbsp;} | 图片成功加载时触发该回调，返回成功加载的图源尺寸。 |
| error(Rich) | {&nbsp;width：width，&nbsp;height：height&nbsp;} | 图片加载出现异常时触发该回调，异常时长宽为零。 |
| 名称 | 参数 | 描述 |
| -------------- | ---------------------------------------- | ------------------------- |
| complete(Rich) | {<br>&nbsp;width：width，<br>&nbsp;height：height<br>&nbsp;} | 图片成功加载时触发该回调，返回成功加载的图源尺寸。 |
| error(Rich) | {<br>&nbsp;width：width，<br>&nbsp;height：height<br>&nbsp;} | 图片加载出现异常时触发该回调，异常时长宽为零。 |
## 方法
......@@ -72,7 +72,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<image src="common/images/example.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red;">
......@@ -81,7 +81,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
justify-content: center;
......@@ -96,7 +96,7 @@
}
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md
浏览文件 @ cdb6cf82
# input
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
交互式组件，包括单选框，多选框，按钮和单行文本输入框。
......@@ -19,29 +19,29 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| type | string | text<br/> | 否 | input组件类型，可选值为text，email，date，time，number，password，button，checkbox，radio。<br/>其中text，email，date，time，number，password这六种类型之间支持动态切换修改。<br/>button，checkbox，radio不支持动态修改。可选值定义如下：<br/>-&nbsp;button：定义可点击的按钮；<br/>-&nbsp;checkbox：定义多选框；<br/>-&nbsp;radio：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个；<br/>-&nbsp;text：定义一个单行的文本字段；<br/>-&nbsp;email：定义用于e-mail地址的字段；<br/>-&nbsp;date：定义&nbsp;date&nbsp;控件（包括年、月、日，不包括时间）；<br/>-&nbsp;time：定义用于输入时间的控件（不带时区）；<br/>-&nbsp;number：定义用于输入数字的字段；<br/>-&nbsp;password：定义密码字段（字段中的字符会被遮蔽）。 |
| checked | boolean | false | 否 | 当前组件是否选中，仅type为checkbox和radio生效。 |
| name | string | - | 否 | input组件的名称。 |
| value | string | - | 否 | input组件的value值，当类型为radio时必填且相同name值的选项该值唯一。 |
| placeholder | string | - | 否 | 设置提示文本的内容，仅在type为text\|email\|date\|time\|number\|password时生效。 |
| maxlength | number | - | 否 | 输入框可输入的最多字符数量，不填表示不限制输入框中字符数量。 |
| enterkeytype | string | default | 否 | 不支持动态修改。<br/>设置软键盘Enter按钮的类型，可选值为：<br/>-&nbsp;default：默认<br/>-&nbsp;next：下一项<br/>-&nbsp;go：前往<br/>-&nbsp;done：完成<br/>-&nbsp;send：发送<br/>-&nbsp;search：搜索<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;除“next”外，点击后会自动收起软键盘。 |
| headericon | string | - | 否 | 在文本输入前的图标资源路径，该图标不支持点击事件（button，checkbox和radio不生效），图标格式为jpg，png和svg。 |
| showcounter<sup>5+</sup> | boolean | false | 否 | 文本输入框是否显示计数下标，需要配合maxlength一起使用。 |
| menuoptions<sup>5+</sup> | Array&lt;MeunOption&gt; | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 |
| autofocus<sup>6+</sup> | boolean | false | 否 | 是否自动获焦。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;应用首页中设置不生效，可在onActive中延迟（100-500ms左右）调用focus方法实现输入框在首页中自动获焦。 |
| selectedstart<sup>6+</sup> | number | -1 | 否 | 开始选择文本时初始选择位置。 |
| selectedend<sup>6+</sup> | number | -1 | 否 | 开始选择文本时结尾选择位置。 |
| softkeyboardenabled<sup>6+</sup> | boolean | true | 否 | 编辑时是否弹出系统软键盘。 |
| showpasswordicon<sup>6+</sup> | boolean | true | 否 | 是否显示密码框末尾的图标（仅type为password时生效）。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------------------------------- | ----------------------- | --------- | ---- | ---------------------------------------- |
| type | string | text<br/> | 否 | input组件类型，可选值为text，email，date，time，number，password，button，checkbox，radio。<br/>其中text，email，date，time，number，password这六种类型之间支持动态切换修改。<br/>button，checkbox，radio不支持动态修改。可选值定义如下：<br/>-&nbsp;button：定义可点击的按钮；<br/>-&nbsp;checkbox：定义多选框；<br/>-&nbsp;radio：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个；<br/>-&nbsp;text：定义一个单行的文本字段；<br/>-&nbsp;email：定义用于e-mail地址的字段；<br/>-&nbsp;date：定义&nbsp;date&nbsp;控件（包括年、月、日，不包括时间）；<br/>-&nbsp;time：定义用于输入时间的控件（不带时区）；<br/>-&nbsp;number：定义用于输入数字的字段；<br/>-&nbsp;password：定义密码字段（字段中的字符会被遮蔽）。 |
| checked | boolean | false | 否 | 当前组件是否选中，仅type为checkbox和radio生效。 |
| name | string | - | 否 | input组件的名称。 |
| value | string | - | 否 | input组件的value值，当类型为radio时必填且相同name值的选项该值唯一。 |
| placeholder | string | - | 否 | 设置提示文本的内容，仅在type为text\|email\|date\|time\|number\|password时生效。 |
| maxlength | number | - | 否 | 输入框可输入的最多字符数量，不填表示不限制输入框中字符数量。 |
| enterkeytype | string | default | 否 | 不支持动态修改。<br/>设置软键盘Enter按钮的类型，可选值为：<br/>-&nbsp;default：默认<br/>-&nbsp;next：下一项<br/>-&nbsp;go：前往<br/>-&nbsp;done：完成<br/>-&nbsp;send：发送<br/>-&nbsp;search：搜索<br/>除“next”外，点击后会自动收起软键盘。 |
| headericon | string | - | 否 | 在文本输入前的图标资源路径，该图标不支持点击事件（button，checkbox和radio不生效），图标格式为jpg，png和svg。 |
| showcounter<sup>5+</sup> | boolean | false | 否 | 文本输入框是否显示计数下标，需要配合maxlength一起使用。 |
| menuoptions<sup>5+</sup> | Array&lt;MeunOption&gt; | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 |
| autofocus<sup>6+</sup> | boolean | false | 否 | 是否自动获焦。<br/>应用首页中设置不生效，可在onActive中延迟（100-500ms左右）调用focus方法实现输入框在首页中自动获焦。 |
| selectedstart<sup>6+</sup> | number | -1 | 否 | 开始选择文本时初始选择位置。 |
| selectedend<sup>6+</sup> | number | -1 | 否 | 开始选择文本时结尾选择位置。 |
| softkeyboardenabled<sup>6+</sup> | boolean | true | 否 | 编辑时是否弹出系统软键盘。 |
| showpasswordicon<sup>6+</sup> | boolean | true | 否 | 是否显示密码框末尾的图标（仅type为password时生效）。 |
**表1** MenuOption<sup>5+</sup>
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| icon | string | 菜单选项中的图标路径。 |
| 名称 | 类型 | 描述 |
| ------- | ------ | ----------- |
| icon | string | 菜单选项中的图标路径。 |
| content | string | 菜单选项中的文本内容。 |
......@@ -49,14 +49,14 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 单行输入框或者按钮的文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 单行输入框或者按钮的文本尺寸。 |
| allow-scale | boolean | true | 否 | 单行输入框或者按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| placeholder-color | &lt;color&gt; | \#99000000 | 否 | 单行输入框的提示文本的颜色，type为text\|email\|date\|time\|number\|password时生效。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 单行输入框或者按钮的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| caret-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置输入光标的颜色。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------------ | -------------------------- | ---------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 单行输入框或者按钮的文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 单行输入框或者按钮的文本尺寸。 |
| allow-scale | boolean | true | 否 | 单行输入框或者按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| placeholder-color | &lt;color&gt; | \#99000000 | 否 | 单行输入框的提示文本的颜色，type为text\|email\|date\|time\|number\|password时生效。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 单行输入框或者按钮的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| caret-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置输入光标的颜色。 |
## 事件
......@@ -64,35 +64,35 @@
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
- 当input类型为text、email、date、time、number、password时，支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| change | {&nbsp;value:inputValue&nbsp;} | 输入框输入内容发生变化时触发该事件，返回用户当前输入值。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;改变value属性值不会触发该回调。 |
| enterkeyclick | {&nbsp;value:enterKey&nbsp;} | 软键盘enter键点击后触发该事件，返回enter按钮的类型，enterKey类型为number，可选值为：<br/>-&nbsp;2：设置enterkeytype属性为go时生效。<br/>-&nbsp;3：设置enterkeytype属性为search时生效。<br/>-&nbsp;4：设置enterkeytype属性为send时生效。<br/>-&nbsp;5：设置enterkeytype属性为next时生效。<br/>-&nbsp;6：不设置enterkeytype或者设置enterkeytype属性为default、done时生效。 |
| translate<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 |
| share<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 |
| search<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 |
| optionselect<sup>5+</sup> | {&nbsp;index:optionIndex,&nbsp;value:&nbsp;selectedText&nbsp;} | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 |
| selectchange<sup>6+</sup> | {&nbsp;start:&nbsp;number，end:&nbsp;number&nbsp;} | 文本选择变化时触发事件。 |
| 名称 | 参数 | 描述 |
| ------------------------- | ---------------------------------------- | ---------------------------------------- |
| change | {<br>&nbsp;value: inputValue<br>&nbsp;} | 输入框输入内容发生变化时触发该事件，返回用户当前输入值。<br/>改变value属性值不会触发该回调。 |
| enterkeyclick | {<br>&nbsp;value: enterKey<br>&nbsp;} | 软键盘enter键点击后触发该事件，返回enter按钮的类型，enterKey类型为number，可选值为：<br/>-&nbsp;2：设置enterkeytype属性为go时生效。<br/>-&nbsp;3：设置enterkeytype属性为search时生效。<br/>-&nbsp;4：设置enterkeytype属性为send时生效。<br/>-&nbsp;5：设置enterkeytype属性为next时生效。<br/>-&nbsp;6：不设置enterkeytype或者设置enterkeytype属性为default、done时生效。 |
| translate<sup>5+</sup> | {<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 |
| share<sup>5+</sup> | {<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 |
| search<sup>5+</sup> | {<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 |
| optionselect<sup>5+</sup> | {<br>&nbsp;index: optionIndex,<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 |
| selectchange<sup>6+</sup> | {<br>start:&nbsp;number,<br>end:&nbsp;number<br>&nbsp;} | 文本选择变化时触发事件。 |
- 当input类型为checkbox、radio时，支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| change | {&nbsp;checked:true&nbsp;\|&nbsp;false&nbsp;} | checkbox多选框或radio单选框的checked状态发生变化时触发该事件。 |
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | ---------------------------------------- |
| change | {<br>&nbsp;checked:true&nbsp;\|&nbsp;false&nbsp;<br>} | checkbox多选框或radio单选框的checked状态发生变化时触发该事件。 |
## 方法
除支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| focus | {&nbsp;focus:&nbsp;true\|false&nbsp;}，focus不传默认为true。 | 使组件获得或者失去焦点，type为text\|email\|date\|time\|number\|password时，可弹出或收起输入法。 |
| showError | {&nbsp;error:&nbsp;string&nbsp;} | 展示输入错误提示，type为text\|email\|date\|time\|number\|password时生效。 |
| delete<sup>6+</sup> | - | type为text\|email\|date\|time\|number\|password时，根据当前光标位置删除文本内容，如果当前输入组件没有光标，默认删除最后一个字符并展示光标。 |
| 名称 | 参数 | 描述 |
| ------------------- | ---------------------------------------- | ---------------------------------------- |
| focus | {<br>&nbsp;focus:&nbsp;true\|false<br>&nbsp;}，<br>focus不传值时，默认为true。 | 使组件获得或者失去焦点，type为text\|email\|date\|time\|number\|password时，可弹出或收起输入法。 |
| showError | {<br>&nbsp;error:&nbsp;string&nbsp;<br>} | 展示输入错误提示，type为text\|email\|date\|time\|number\|password时生效。 |
| delete<sup>6+</sup> | - | type为text\|email\|date\|time\|number\|password时，根据当前光标位置删除文本内容，如果当前输入组件没有光标，默认删除最后一个字符并展示光标。 |
## 示例
1. type为text
```
```html
<!-- xxx.hml -->
<div class="content">
<input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send"
......@@ -103,7 +103,7 @@
</div>
```
```
```css
/* xxx.css */
.content {
width: 60%;
......@@ -119,7 +119,7 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt'
export default {
......@@ -146,14 +146,14 @@
![zh-cn_image_0000001252835901](figures/zh-cn_image_0000001252835901.png)
2. type为button
```
```html
<!-- xxx.hml -->
<div class="div-button">
<input class="button" type="button" value="Input-Button"></input>
</div>
```
```
```css
/* xxx.css */
.div-button {
flex-direction: column;
......@@ -168,14 +168,14 @@
![zh-cn_image_0000001207995958](figures/zh-cn_image_0000001207995958.png)
3. type为checkbox
```
```html
<!-- xxx.hml -->
<div class="content">
<input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
</div>
```
```
```css
/* xxx.css */
.content{
width: 100%;
......@@ -185,7 +185,7 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt'
export default {
......@@ -201,7 +201,7 @@
![zh-cn_image_0000001208155956](figures/zh-cn_image_0000001208155956.png)
4. type为radio
```
```html
<!-- xxx.hml -->
<div class="content">
<input type="radio" checked='true' name="radioSample" value="radio1" onchange="onRadioChange('radio1')"></input>
......@@ -210,7 +210,7 @@
</div>
```
```
```css
/* xxx.css */
.content{
width: 100%;
......@@ -220,7 +220,7 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt'
export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md
浏览文件 @ cdb6cf82
# label
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
为input、button、textarea组件定义相应的标注，点击该标注时会触发绑定组件的点击效果。
......@@ -19,33 +19,33 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| target | string | - | 否 | 目标组件的属性id值。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------ | ------ | ---- | ---- | ----------- |
| target | string | - | 否 | 目标组件的属性id值。 |
## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | #e5000000 | 否 | 设置文本的颜色。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果需要支持动态生效，请参看config描述文件中config-changes标签。 |
| letter-spacing | &lt;length&gt; | 0px | 否 | 设置文本的字符间距。 |
| font-style | string | normal | 否 | 设置文本的字体样式，可选值为：<br/>-&nbsp;normal：标准的字体样式；<br/>-&nbsp;italic：斜体的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置文本的字体粗细，number类型取值[100,&nbsp;900]，默认为400，取值越大，字体越粗。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;number取值必须为100的整数倍。<br/>string类型取值支持如下四个值：lighter、normal、bold、bolder。 |
| text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：<br/>-&nbsp;underline：文字下划线修饰；<br/>-&nbsp;line-through：穿过文本的修饰线n<br/>-&nbsp;none：标准文本。 |
| text-align | string | start<br/> | 否 | 设置文本的文本对齐方式，可选值为：<br/>-&nbsp;left：文本左对齐；<br/>-&nbsp;center：文本居中对齐；<br/>-&nbsp;right：文本右对齐；<br/>-&nbsp;start：根据文字书写相同的方向对齐；<br/>-&nbsp;end：根据文字书写相反的方向对齐。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 |
| line-height | &lt;length&gt; | 0px | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。 |
| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：<br/>-&nbsp;clip：将文本根据父容器大小进行裁剪显示；<br/>-&nbsp;ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 |
| font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| max-lines | number | - | 否 | 设置文本的最大行数。 |
| min-font-size | &lt;length&gt; | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| max-font-size | &lt;length&gt; | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| font-size-step | &lt;length&gt; | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 |
| prefer-font-sizes | &lt;array&gt; | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。<br/>如：prefer-font-sizes:&nbsp;12px,14px,16px |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | #e5000000 | 否 | 设置文本的颜色。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果需要支持动态生效，请参看config描述文件中config-changes标签。 |
| letter-spacing | &lt;length&gt; | 0px | 否 | 设置文本的字符间距。 |
| font-style | string | normal | 否 | 设置文本的字体样式，可选值为：<br/>-&nbsp;normal：标准的字体样式；<br/>-&nbsp;italic：斜体的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置文本的字体粗细，number类型取值[100,&nbsp;900]，默认为400，取值越大，字体越粗。<br/>number取值必须为100的整数倍。<br/>string类型取值支持如下四个值：lighter、normal、bold、bolder。 |
| text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：<br/>-&nbsp;underline：文字下划线修饰；<br/>-&nbsp;line-through：穿过文本的修饰线n<br/>-&nbsp;none：标准文本。 |
| text-align | string | start<br/> | 否 | 设置文本的文本对齐方式，可选值为：<br/>-&nbsp;left：文本左对齐；<br/>-&nbsp;center：文本居中对齐；<br/>-&nbsp;right：文本右对齐；<br/>-&nbsp;start：根据文字书写相同的方向对齐；<br/>-&nbsp;end：根据文字书写相反的方向对齐。<br/>如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 |
| line-height | &lt;length&gt; | 0px | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。 |
| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：<br/>-&nbsp;clip：将文本根据父容器大小进行裁剪显示；<br/>-&nbsp;ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 |
| font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| max-lines | number | - | 否 | 设置文本的最大行数。 |
| min-font-size | &lt;length&gt; | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| max-font-size | &lt;length&gt; | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| font-size-step | &lt;length&gt; | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 |
| prefer-font-sizes | &lt;array&gt; | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。<br/>如：prefer-font-sizes:&nbsp;12px,14px,16px |
## 事件
......@@ -60,7 +60,7 @@
## 示例
```
```html
<!--xxx.hml -->
<div class="container">
<div class="row">
......@@ -78,7 +78,7 @@
</div>
```
```
```css
/*xxx.css */
.container {
flex-direction: column;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md
浏览文件 @ cdb6cf82
# marquee
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
跑马灯组件，用于展示一段单行滚动的文字。
......@@ -19,49 +19,49 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| scrollamount | number | 6 | 否 | 跑马灯每次滚动时移动的最大长度。 |
| loop | number | -1 | 否 | 跑马灯滚动的次数。如果未指定，则默认值为-1，当该值小于等于零时表示marquee将连续滚动。 |
| direction | string | left | 否 | 设置跑马灯的文字滚动方向，可选值为left和right。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------ | ------ | ---- | ---- | ---------------------------------------- |
| scrollamount | number | 6 | 否 | 跑马灯每次滚动时移动的最大长度。 |
| loop | number | -1 | 否 | 跑马灯滚动的次数。如果未指定，则默认值为-1，当该值小于等于零时表示marquee将连续滚动。 |
| direction | string | left | 否 | 设置跑马灯的文字滚动方向，可选值为left和right。 |
## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | \#e5000000 | 否 | 设置跑马灯中文字的文本颜色。 |
| font-size | &lt;length&gt; | 37.5 | 否 | 设置跑马灯中文字的文本尺寸。 |
| allow-scale | boolean | true | 否 | 设置跑马灯中文字的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置跑马灯中文字的字体的粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 设置跑马灯中文字的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#e5000000 | 否 | 设置跑马灯中文字的文本颜色。 |
| font-size | &lt;length&gt; | 37.5 | 否 | 设置跑马灯中文字的文本尺寸。 |
| allow-scale | boolean | true | 否 | 设置跑马灯中文字的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置跑马灯中文字的字体的粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 设置跑马灯中文字的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| bounce(Rich) | - | 当文本滚动到末尾时触发该事件。 |
| finish(Rich) | - | 当完成滚动次数时触发该事件。需要在&nbsp;loop&nbsp;属性值大于&nbsp;0&nbsp;时触发。 |
| start(Rich) | - | 当文本滚动开始时触发该事件。 |
| 名称 | 参数 | 描述 |
| ------------ | ---- | ---------------------------------------- |
| bounce(Rich) | - | 当文本滚动到末尾时触发该事件。 |
| finish(Rich) | - | 当完成滚动次数时触发该事件。需要在&nbsp;loop&nbsp;属性值大于&nbsp;0&nbsp;时触发。 |
| start(Rich) | - | 当文本滚动开始时触发该事件。 |
## 方法
除支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| start | - | 开始滚动。 |
| stop | - | 停止滚动。 |
| 名称 | 参数 | 描述 |
| ----- | ---- | ----- |
| start | - | 开始滚动。 |
| stop | - | 停止滚动。 |
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}"direction="{{marqueeDir}}"
......@@ -73,7 +73,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -104,7 +104,7 @@
}
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-menu.md
浏览文件 @ cdb6cf82
# menu
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作。
......@@ -19,52 +19,52 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：↵
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| target | string | - | 否 | 目标元素选择器。当使用目标元素选择器后，点击目标元素会自动弹出menu菜单。弹出菜单位置优先为目标元素右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。 |
| type | string | click | 否 | 目标元素触发弹窗的方式，可选值有：<br/>-&nbsp;click：点击弹窗。<br/>-&nbsp;longpress：长按弹窗。 |
| title | string | - | 否 | 菜单标题内容。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------ | ------ | ----- | ---- | ---------------------------------------- |
| target | string | - | 否 | 目标元素选择器。当使用目标元素选择器后，点击目标元素会自动弹出menu菜单。弹出菜单位置优先为目标元素右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。 |
| type | string | click | 否 | 目标元素触发弹窗的方式，可选值有：<br/>-&nbsp;click：点击弹窗。<br/>-&nbsp;longpress：长按弹窗。 |
| title | string | - | 否 | 菜单标题内容。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 不支持focusable、disabled属性。
> **说明：**
> 不支持focusable、disabled属性。
## 样式
仅支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| text-color | &lt;color&gt; | - | 否 | 设置菜单的文本颜色。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置菜单的文本尺寸。 |
| allow-scale | boolean | true | 否 | 设置菜单的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| letter-spacing | &lt;length&gt; | 0 | 否 | 设置菜单的字符间距。 |
| font-style | string | normal | 否 | 设置菜单的字体样式。见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置菜单的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 设置菜单的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| text-color | &lt;color&gt; | - | 否 | 设置菜单的文本颜色。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置菜单的文本尺寸。 |
| allow-scale | boolean | true | 否 | 设置菜单的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| letter-spacing | &lt;length&gt; | 0 | 否 | 设置菜单的字符间距。 |
| font-style | string | normal | 否 | 设置菜单的字体样式。见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置菜单的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 设置菜单的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
## 事件
仅支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| 名称 | 参数 | 描述 |
| -------- | ------------------------- | ---------------------------------------- |
| selected | {&nbsp;value:value&nbsp;} | 菜单中某个值被点击选中时触发，返回的value值为option组件的value属性。 |
| cancel | - | 用户取消。 |
| cancel | - | 用户取消。 |
## 方法
仅支持如下方法。
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| 名称 | 参数 | 描述 |
| ---- | --------------------------------- | ---------------------------------------- |
| show | {&nbsp;x:x,&nbsp;&nbsp;y:y&nbsp;} | 显示menu菜单。(x,&nbsp;y)指定菜单弹窗位置。其中x表示距离可见区域左边沿的&nbsp;X&nbsp;轴坐标，不包含任何滚动偏移，y表示距离可见区域上边沿的&nbsp;Y&nbsp;轴坐标，不包含任何滚动偏移以及状态栏。菜单优先显示在弹窗位置右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。 |
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<text onclick="onTextClick" class="title-text">Show popup menu.</text>
......@@ -76,7 +76,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -88,7 +88,7 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-option.md
浏览文件 @ cdb6cf82
# option
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
当作为&lt;[select](../arkui-js/js-components-basic-select.md)&gt;的子组件时用来展示下拉选择的具体项目。
......@@ -23,25 +23,25 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：↵
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| selected | boolean | - | 否 | 选择项是否为下拉列表的默认项，仅在父组件是select时生效。 |
| value | string | - | 是 | 选择项的值，作为select、menu父组件的selected事件中的返回值。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;option选项的UI展示值需要放在标签内，如&lt;option&nbsp;value="10"&gt;十月&lt;/option&gt; |
| icon | string | - | 否 | 图标资源路径，该图标展示在选项文本前，图标格式为jpg，png和svg。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------- | ---- | ---- | ---------------------------------------- |
| selected | boolean | - | 否 | 选择项是否为下拉列表的默认项，仅在父组件是select时生效。 |
| value | string | - | 是 | 选择项的值，作为select、menu父组件的selected事件中的返回值。<br/>option选项的UI展示值需要放在标签内，如：<br>`<option value="10">十月</option>` |
| icon | string | - | 否 | 图标资源路径，该图标展示在选项文本前，图标格式为jpg，png和svg。 |
## 样式
支持如下样式。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 选择项的文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 选择项的文本尺寸。 |
| allow-scale | boolean | true | 否 | 选择项的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 选择项的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| text-decoration | string | none | 否 | 选择项的文本修饰，见[text组件text-decoration的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 选择项的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 选择项的文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 选择项的文本尺寸。 |
| allow-scale | boolean | true | 否 | 选择项的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 选择项的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| text-decoration | string | none | 否 | 选择项的文本修饰，见[text组件text-decoration的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 选择项的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
## 事件
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md
浏览文件 @ cdb6cf82
# picker-view
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
嵌入页面的滑动选择器。
......@@ -23,7 +23,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------------- | ------ | ---- | ---- | ---------------------------------------- |
| range | Array | - | 否 | 设置文本选择器的取值范围。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用时需要使用数据绑定的方式，如range&nbsp;=&nbsp;{{data}}，js中声明相应变量：data：["15",&nbsp;"20",&nbsp;"25"]。 |
| range | Array | - | 否 | 设置文本选择器的取值范围。<br/>使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 |
| selected | string | 0 | 否 | 设置文本选择器的默认选择值，该值需要为range的索引。 |
| indicatorprefix | string | - | 否 | 文本选择器选定值增加的前缀字段。 |
| indicatorsuffix | string | - | 否 | 文本选择器选定值增加的后缀字段。 |
......@@ -34,7 +34,7 @@
| ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- |
| containsecond | boolean | false | 否 | 时间选择器是否包含秒。 |
| selected | string | 当前时间 | 否 | 设置时间选择器的默认取值，格式为&nbsp;HH:mm；<br/>当包含秒时，格式为HH:mm:ss。 |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup> |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 |
日期选择器：type=date
......@@ -51,7 +51,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- |
| selected | string | 当前日期时间 | 否 | 设置日期时间选择器的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。 |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置日期时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup> |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置日期时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 |
| lunar<sup>5+</sup> | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 |
| lunarswitch | boolean | false | 否 | 设置日期时间选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 |
......@@ -60,7 +60,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------- | --------- | ---- | ---------------------------------------- |
| columns | number | - | 是 | 设置多列文本选择器的列数。 |
| range | 二维Array | - | 否 | 设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如&nbsp;&nbsp;[["a","b"],&nbsp;["c","d"]]。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用时需要使用数据绑定的方式，如range&nbsp;=&nbsp;{{data}}，js中声明相应变量：data：[["a","b"],&nbsp;["c","d"]]。 |
| range | 二维Array | - | 否 | 设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如&nbsp;&nbsp;[["a","b"],&nbsp;["c","d"]]。<br/>使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 |
| selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。 |
......@@ -121,7 +121,7 @@ type=multi-text：
## 示例
```
```html
<!-- xxx.hml -->
<div class="container" @swipe="handleSwipe">
<text class="title">
......@@ -131,7 +131,7 @@ type=multi-text：
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -153,7 +153,7 @@ type=multi-text：
}
```
```
```js
/* xxx.js */
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md
浏览文件 @ cdb6cf82
# picker
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。
......@@ -31,7 +31,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------ | ---- | ---- | ---------------------------------------- |
| range | Array | - | 否 | 设置普通选择器的取值范围，如["15",&nbsp;"20",&nbsp;"25"]。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用时需要使用数据绑定的方式，如range&nbsp;=&nbsp;{{data}}，js中声明相应变量：data：["15",&nbsp;"20",&nbsp;"25"]。 |
| range | Array | - | 否 | 设置普通选择器的取值范围，如["15",&nbsp;"20",&nbsp;"25"]。<br/>使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 |
| selected | string | 0 | 否 | 设置普通选择器弹窗的默认取值，取值需要是&nbsp;range&nbsp;的索引值，该取值表示选择器弹窗界面的默认选择值。 |
| value | string | - | 否 | 设置普通选择器的值。 |
......@@ -47,7 +47,7 @@
| selected | string | 当前日期 | 否 | 设置日期选择器弹窗的默认取值，格式为&nbsp;YYYY-MM-DD，该取值表示选择器弹窗界面的默认选择值。 |
| value | string | - | 是 | 设置日期选择器的值。 |
| lunar<sup>5+</sup> | boolean | false | 否 | 设置日期选择器弹窗界面是否为农历展示。 |
| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>> 当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 |
| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。<br/>当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 |
### 时间选择器
......@@ -59,7 +59,7 @@
| containsecond | boolean | false | 否 | 设置时间选择器是否包含秒。 |
| selected | string | 当前时间 | 否 | 设置时间选择器弹窗的默认取值，格式为&nbsp;HH:mm；当包含秒时，格式为HH:mm:ss，<br/>该取值表示选择器弹窗界面的默认选择值。 |
| value | string | - | 否 | 设置时间选择器的值。 |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup> |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 |
### 日期时间选择器
......@@ -70,9 +70,9 @@
| ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- |
| selected | string | 当前日期时间 | 否 | 设置日期时间选择器弹窗的默认取值，有两种可选格式。<br/>-&nbsp;月日时分：MM-DD-HH-mm<br/>-&nbsp;年月日时分：YYYY-MM-DD-HH-mm<br/>不设置年时，默认使用当前年，该取值表示选择器弹窗界面的默认选择值。 |
| value | string | - | 是 | 设置日期时间选择器的值。 |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置日期时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup> |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置日期时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 |
| lunar<sup>5+</sup> | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 |
| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 |
| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。<br/>当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 |
### 多列文本选择器
......@@ -82,7 +82,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------- | --------- | ---- | ---------------------------------------- |
| columns | number | - | 是 | 设置多列文本选择器的列数。 |
| range | 二维Array | - | 否 | 设置多列文本选择器的选择项，其中range&nbsp;为二维数组。长度表示多少列，数组的每项表示每列的数据，如&nbsp;&nbsp;[["a","b"],&nbsp;["c","d"]]。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用时需要使用数据绑定的方式，如range&nbsp;=&nbsp;{{data}}，js中声明相应变量：data：[["a","b"],&nbsp;["c","d"]]。 |
| range | 二维Array | - | 否 | 设置多列文本选择器的选择项，其中range&nbsp;为二维数组。长度表示多少列，数组的每项表示每列的数据，如&nbsp;&nbsp;[["a","b"],&nbsp;["c","d"]]。<br/>使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 |
| selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗界面的默认选择值。 |
| value | Array | - | 否 | 设置多列文本选择器的值，每一列被选中项对应的值构成的数组。 |
......@@ -95,7 +95,7 @@
| -------------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| text-color | &lt;color&gt; | - | 否 | 选择器的文本颜色。 |
| font-size | &lt;length&gt; | - | 否 | 选择器的文本尺寸。 |
| allow-scale | boolean | true | 否 | 选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| allow-scale | boolean | true | 否 | 选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| letter-spacing | &lt;length&gt; | 0 | 否 | 选择器的字符间距。见[text组件的letter-spacing样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| text-decoration | string | - | 否 | 选择器的文本修饰。见[text组件的text-decoration样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-style | string | normal | 否 | 选择器的字体样式。见[text组件的font-style样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
......@@ -122,7 +122,7 @@
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | ---------------------------------------- |
| change | {&nbsp;year:&nbsp;year,&nbsp;month:&nbsp;month,&nbsp;day:&nbsp;day&nbsp;} | 日期选择器选择值后点击弹窗中的确认按钮时触发该事件。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;month值范围为：&nbsp;0（1月）~11（12月）。<sup>5+</sup> |
| change | {&nbsp;year:&nbsp;year,&nbsp;month:&nbsp;month,&nbsp;day:&nbsp;day&nbsp;} | 日期选择器选择值后点击弹窗中的确认按钮时触发该事件。<br/>从API Version 5开始，month值范围为：&nbsp;0（1月）~11（12月）。 |
| cancel | - | 用户点击弹窗中的取消按钮时触发该事件。 |
......@@ -162,7 +162,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<select @change="selectChange">
......@@ -187,7 +187,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -214,7 +214,7 @@
}
```
```
```js
// xxx.js
import router from '@system.router';
import prompt from '@system.prompt';
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md
浏览文件 @ cdb6cf82
# piece
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
一种块状的入口，可包含图片和文本。常用于展示收件人，例如：邮件收件人或信息收件人。
......@@ -15,28 +15,28 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| content | string | - | 是 | 操作块文本内容。 |
| closable | boolean | false | 否 | 设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。 |
| icon | string | - | 否 | 操作块删除图标的url，支持本地路径。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------- | ----- | ---- | ---------------------------------------- |
| content | string | - | 是 | 操作块文本内容。 |
| closable | boolean | false | 否 | 设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。 |
| icon | string | - | 否 | 操作块删除图标的url，支持本地路径。 |
## 样式
支持[通用样式](../arkui-js/js-components-common-styles.md)。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 文本和图片默认在整个piece组件中居中。
> **说明：**
> 文本和图片默认在整个piece组件中居中。
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| close | - | 当piece组件点击删除图标触发，此时可以通过渲染属性if删除该组件。 |
| 名称 | 参数 | 描述 |
| ----- | ---- | ----------------------------------- |
| close | - | 当piece组件点击删除图标触发，此时可以通过渲染属性if删除该组件。 |
## 方法
......@@ -45,7 +45,7 @@
## 示例
```
```html
<!-- xxx.hml-->
<div class="container" >
<piece if="{{first}}" content="example"></piece>
......@@ -53,7 +53,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
width: 100%;
......@@ -63,7 +63,7 @@
}
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-progress.md
浏览文件 @ cdb6cf82
# progress
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
进度条，用于显示内容加载或操作处理进度。
......@@ -19,27 +19,27 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| type | string | horizontal | 否 | 设置进度条的类型，该属性不支持动态修改，可选值为：<br/>-&nbsp;horizontal：线性进度条；<br/>-&nbsp;circular：loading样式进度条；<br/>-&nbsp;ring：圆环形进度条；<br/>-&nbsp;scale-ring：带刻度圆环形进度条<br/>-&nbsp;arc：弧形进度条。<br/>-&nbsp;eclipse5+：圆形进度条，展现类似月圆月缺的进度展示效果。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---- | ------ | ---------- | ---- | ---------------------------------------- |
| type | string | horizontal | 否 | 设置进度条的类型，该属性不支持动态修改，可选值为：<br/>-&nbsp;horizontal：线性进度条；<br/>-&nbsp;circular：loading样式进度条；<br/>-&nbsp;ring：圆环形进度条；<br/>-&nbsp;scale-ring：带刻度圆环形进度条<br/>-&nbsp;arc：弧形进度条。<br/>-&nbsp;eclipse5+：圆形进度条，展现类似月圆月缺的进度展示效果。 |
不同类型的进度条还支持不同的属性：
- 类型为horizontal、ring、scale-ring时，支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| percent | number | 0 | 否 | 当前进度。取值范围为0-100。 |
| secondarypercent | number | 0 | 否 | 次级进度。取值范围为0-100。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------- | ------ | ---- | ---- | ---------------- |
| percent | number | 0 | 否 | 当前进度。取值范围为0-100。 |
| secondarypercent | number | 0 | 否 | 次级进度。取值范围为0-100。 |
- 类型为ring、scale-ring时，支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| clockwise | boolean | true | 否 | 圆环形进度条是否采用顺时针。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------- | ------- | ---- | ---- | -------------- |
| clockwise | boolean | true | 否 | 圆环形进度条是否采用顺时针。 |
- 类型为arc、eclipse5+时，支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| percent | number | 0 | 否 | 当前进度。取值范围为0-100。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------- | ------ | ---- | ---- | ---------------- |
| percent | number | 0 | 否 | 当前进度。取值范围为0-100。 |
## 样式
......@@ -48,49 +48,49 @@
type=horizontal
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | \#ff007dff | 否 | 设置进度条的颜色。 |
| stroke-width | &lt;length&gt; | 4px | 否 | 设置进度条的宽度。 |
| background-color | &lt;color&gt; | - | 否 | 设置进度条的背景色。 |
| secondary-color | &lt;color&gt; | - | 否 | 设置次级进度条的颜色。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------- | -------------- | ---------- | ---- | ----------- |
| color | &lt;color&gt; | \#ff007dff | 否 | 设置进度条的颜色。 |
| stroke-width | &lt;length&gt; | 4px | 否 | 设置进度条的宽度。 |
| background-color | &lt;color&gt; | - | 否 | 设置进度条的背景色。 |
| secondary-color | &lt;color&gt; | - | 否 | 设置次级进度条的颜色。 |
type=circular
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | - | 否 | loading进度条上的圆点颜色。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----- | ------------- | ---- | ---- | ----------------- |
| color | &lt;color&gt; | - | 否 | loading进度条上的圆点颜色。 |
type=ring, scale-ring
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt;&nbsp;\|&nbsp;&lt;linear-gradient&gt; | - | 否 | 环形进度条的颜色，ring类型支持线性渐变色设置。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;线性渐变色仅支持两个颜色参数设置格式，如color&nbsp;=&nbsp;linear-gradient(\#ff0000,&nbsp;\#00ff00)。 |
| background-color | &lt;color&gt; | - | 否 | 环形进度条的背景色。 |
| secondary-color | &lt;color&gt; | - | 否 | 环形次级进度条的颜色。 |
| stroke-width | &lt;length&gt; | 10px | 否 | 环形进度条的宽度。 |
| scale-width | &lt;length&gt; | - | 否 | 带刻度的环形进度条的刻度粗细，类型为scale-ring生效。 |
| scale-number | number | 120 | 否 | 带刻度的环形进度条的刻度数量，类型为scale-ring生效。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| color | &lt;color&gt;&nbsp;\|&nbsp;&lt;linear-gradient&gt; | - | 否 | 环形进度条的颜色，ring类型支持线性渐变色设置。<br/>线性渐变色仅支持两个颜色参数设置格式，如color&nbsp;=&nbsp;linear-gradient(\#ff0000,&nbsp;\#00ff00)。 |
| background-color | &lt;color&gt; | - | 否 | 环形进度条的背景色。 |
| secondary-color | &lt;color&gt; | - | 否 | 环形次级进度条的颜色。 |
| stroke-width | &lt;length&gt; | 10px | 否 | 环形进度条的宽度。 |
| scale-width | &lt;length&gt; | - | 否 | 带刻度的环形进度条的刻度粗细，类型为scale-ring生效。 |
| scale-number | number | 120 | 否 | 带刻度的环形进度条的刻度数量，类型为scale-ring生效。 |
type=arc
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | - | 否 | 弧形进度条的颜色。 |
| background-color | &lt;color&gt; | - | 否 | 弧形进度条的背景色。 |
| stroke-width | &lt;length&gt; | 4px | 否 | 弧形进度条的宽度。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;进度条宽度越大，进度条越靠近圆心，进度条始终在半径区域内。 |
| start-angle | &lt;deg&gt; | 240 | 否 | 弧形进度条起始角度，以时钟0点为基线，取值范围为0到360（顺时针）。 |
| total-angle | &lt;deg&gt; | 240 | 否 | 弧形进度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 |
| center-x | &lt;length&gt; | 弧形进度条宽度的一半 | 否 | 弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-y和radius一起使用。 |
| center-y | &lt;length&gt; | 弧形进度条高度的一半 | 否 | 弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-x和radius一起使用。 |
| radius | &lt;length&gt; | 弧形进度条宽高最小值的一半 | 否 | 弧形进度条半径，该样式需要和center-x和center-y一起使用。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------- | -------------- | ------------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | - | 否 | 弧形进度条的颜色。 |
| background-color | &lt;color&gt; | - | 否 | 弧形进度条的背景色。 |
| stroke-width | &lt;length&gt; | 4px | 否 | 弧形进度条的宽度，始终在半径区域内。<br/>进度条宽度越大，进度条越靠近圆心。 |
| start-angle | &lt;deg&gt; | 240 | 否 | 弧形进度条起始角度，以时钟0点为基线，取值范围为0到360（顺时针）。 |
| total-angle | &lt;deg&gt; | 240 | 否 | 弧形进度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 |
| center-x | &lt;length&gt; | 弧形进度条宽度的一半 | 否 | 弧形进度条中心位置，坐标原点为组件左上角顶点。该样式需要和center-y和radius一起使用。 |
| center-y | &lt;length&gt; | 弧形进度条高度的一半 | 否 | 弧形进度条中心位置，坐标原点为组件左上角顶点。该样式需要和center-x和radius一起使用。 |
| radius | &lt;length&gt; | 弧形进度条宽高最小值的一半 | 否 | 弧形进度条半径，该样式需要和center-x和center-y一起使用。 |
type=eclipse<sup>5+</sup>
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | - | 否 | 圆形进度条的颜色。 |
| background-color | &lt;color&gt; | - | 否 | 弧形进度条的背景色。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------- | ------------- | ---- | ---- | ---------- |
| color | &lt;color&gt; | - | 否 | 圆形进度条的颜色。 |
| background-color | &lt;color&gt; | - | 否 | 弧形进度条的背景色。 |
## 事件
......@@ -104,7 +104,7 @@ type=eclipse<sup>5+</sup>
## 示例
```
```html
<!--xxx.hml -->
<div class="container">
<progress class="min-progress" type="scale-ring" percent= "10" secondarypercent="50"></progress>
......@@ -114,7 +114,7 @@ type=eclipse<sup>5+</sup>
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md
浏览文件 @ cdb6cf82
# qrcode
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
生成并显示二维码。
......@@ -19,26 +19,26 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | string | - | 是 | 用来生成二维码的内容。 |
| type | string | rect | 否 | 二维码类型。可能选项有：<br/>-&nbsp;rect：矩形二维码。<br/>-&nbsp;circle：圆形二维码。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----- | ------ | ---- | ---- | ---------------------------------------- |
| value | string | - | 是 | 用来生成二维码的内容。 |
| type | string | rect | 否 | 二维码类型。可能选项有：<br/>-&nbsp;rect：矩形二维码。<br/>-&nbsp;circle：圆形二维码。 |
## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | \#000000 | 否 | 二维码颜色。 |
| background-color | &lt;color&gt; | \#ffffff | 否 | 二维码背景颜色。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------- | ------------- | -------- | ---- | -------- |
| color | &lt;color&gt; | \#000000 | 否 | 二维码颜色。 |
| background-color | &lt;color&gt; | \#ffffff | 否 | 二维码背景颜色。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - width和height不一致时，取二者较小值作为二维码的边长。且最终生成的二维码居中显示。
> **说明：**
> - width和height不一致时，取二者较小值作为二维码的边长。且最终生成的二维码居中显示。
>
>
> - width和height只设置一个时，取设置的值作为二维码的边长。都不设置时，使用200px作为默认边长。
>
> - width和height只设置一个时，取设置的值作为二维码的边长。都不设置时，使用200px作为默认边长。
>
......@@ -53,7 +53,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<qrcode value="{{qr_value}}" type="{{qr_type}}"
......@@ -71,7 +71,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
width: 100%;
......@@ -90,7 +90,7 @@ select{
}
```
```
```js
/* index.js */
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-rating.md
浏览文件 @ cdb6cf82
# rating
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
评分条，表示用户使用感受的衡量标准条。
......@@ -41,7 +41,7 @@
| height | &lt;length&gt;\|&lt;percentage&gt; | 24px<br/>12px（不可操作） | 否 | 默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的高度值。 |
| rtl-flip | boolean | true | 否 | 在RTL文字方向下是否自动翻转图源。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> star-background，star-secondary，star-foreground三个星级图源必须全部设置，否则默认的星级颜色为灰色，以此提示图源设置错误。
......@@ -61,7 +61,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<rating numstars="5" rating="5" @change="changeRating" id="rating">
......@@ -69,7 +69,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
display: flex;
......@@ -81,7 +81,7 @@ rating {
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-richtext.md
浏览文件 @ cdb6cf82
# richtext
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
>
> - 该组件从API version 6开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
......@@ -33,7 +33,7 @@
| start | - | 开始加载时触发。 |
| complete | - | 加载完成时触发。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> - 不支持focus、blur、key事件。
>
> - 不支持无障碍事件。
......@@ -52,14 +52,14 @@
## 示例
```
```html
<!-- xxx.hml -->
<div style="flex-direction: column;width: 100%;">
<richtext @start="onLoadStart" @complete="onLoadEnd">{{content}}</richtext>
</div>
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md
浏览文件 @ cdb6cf82
# search
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供搜索框组件，用于提供用户搜索内容的输入区域。
......@@ -15,19 +15,19 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| icon | string | - | 否 | 搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。 |
| hint | string | - | 否 | 搜索提示文字。 |
| value | string | - | 否 | 搜索框搜索文本值。 |
| searchbutton<sup>5+</sup> | string | - | 否 | 搜索框末尾搜索按钮文本值。 |
| menuoptions<sup>5+</sup> | Array&lt;MenuOption&gt; | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------------- | ----------------------- | ---- | ---- | --------------------------------- |
| icon | string | - | 否 | 搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。 |
| hint | string | - | 否 | 搜索提示文字。 |
| value | string | - | 否 | 搜索框搜索文本值。 |
| searchbutton<sup>5+</sup> | string | - | 否 | 搜索框末尾搜索按钮文本值。 |
| menuoptions<sup>5+</sup> | Array&lt;MenuOption&gt; | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 |
**表1** MenuOption<sup>5+</sup>
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| icon | string | 菜单选项中的图标路径。 |
| 名称 | 类型 | 描述 |
| ------- | ------ | ----------- |
| icon | string | 菜单选项中的图标路径。 |
| content | string | 菜单选项中的文本内容。 |
......@@ -35,28 +35,28 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 搜索框的文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 搜索框的文本尺寸。 |
| allow-scale | boolean | true | 否 | 搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| placeholder-color | &lt;color&gt; | \#99000000<br/> | 否 | 搜索框的提示文本颜色。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 搜索框的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 搜索框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| caret-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置输入光标的颜色。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------------ | -------------------------- | --------------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 搜索框的文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 搜索框的文本尺寸。 |
| allow-scale | boolean | true | 否 | 搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| placeholder-color | &lt;color&gt; | \#99000000<br/> | 否 | 搜索框的提示文本颜色。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 搜索框的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 搜索框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| caret-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置输入光标的颜色。 |
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| change | {&nbsp;text:newText&nbsp;} | 输入内容发生变化时触发。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;改变value属性值不会触发该回调。 |
| submit | {&nbsp;text:submitText&nbsp;} | 点击搜索图标、搜索按钮<sup>5+</sup>或者按下软键盘搜索按钮时触发。 |
| translate<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 |
| share<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 |
| search<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 |
| 名称 | 参数 | 描述 |
| ------------------------- | ---------------------------------------- | ---------------------------------------- |
| change | {&nbsp;text:newText&nbsp;} | 输入内容发生变化时触发。<br/>改变value属性值不会触发该回调。 |
| submit | {&nbsp;text:submitText&nbsp;} | 点击搜索图标、搜索按钮<sup>5+</sup>或者按下软键盘搜索按钮时触发。 |
| translate<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 |
| share<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 |
| search<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 |
| optionselect<sup>5+</sup> | {&nbsp;index:optionIndex,&nbsp;value:&nbsp;selectedText&nbsp;} | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 |
......@@ -67,7 +67,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<search hint="请输入搜索内容" searchbutton="搜索" @search="search">
......@@ -75,7 +75,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
display: flex;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md
浏览文件 @ cdb6cf82
# select
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
下拉选择按钮，可让用户在多个选项之间选择。
......@@ -24,22 +24,22 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| font-family | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------- | ------ | ---------- | ---- | ---------------------------------------- |
| font-family | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| 名称 | 参数 | 描述 |
| ------ | ------------------------- | ---------------------------------------- |
| change | {newValue:&nbsp;newValue} | 下拉选择新值后触发该事件，newValue的值为子组件option的value属性值。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
>
> - select组件不支持click事件。
> select组件不支持click事件。
## 方法
......@@ -49,7 +49,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<select @change="changeFruit">
......@@ -66,7 +66,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
display: flex;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md
浏览文件 @ cdb6cf82
# slider
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
滑动条组件，用来快速调节设置值，如音量、亮度等。
......@@ -55,7 +55,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<text>slider start value is {{startValue}}</text>
......@@ -65,7 +65,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -75,7 +75,7 @@
}
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md
浏览文件 @ cdb6cf82
# span
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
作为&lt;[text](../arkui-js/js-components-basic-text.md)&gt;子组件提供文本修饰能力。
......@@ -19,23 +19,23 @@
支持[通用属性](../arkui-js/js-components-common-attributes.md)。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 不支持focusable和disabled属性。
> **说明：**
> 不支持focusable和disabled属性。
## 样式
仅支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | - | 否 | 设置文本段落的文本颜色。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本段落的文本尺寸。 |
| allow-scale | boolean | true | 否 | 设置文本段落的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-style | string | normal | 否 | 设置文本段落的字体样式，见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置文本段落的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| text-decoration | string | none | 否 | 设置文本段落的文本修饰，见[text组件text-decoration样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 设置文本段落的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | - | 否 | 设置文本段落的文本颜色。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本段落的文本尺寸。 |
| allow-scale | boolean | true | 否 | 设置文本段落的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-style | string | normal | 否 | 设置文本段落的字体样式，见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置文本段落的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| text-decoration | string | none | 否 | 设置文本段落的文本修饰，见[text组件text-decoration样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 设置文本段落的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
## 事件
......@@ -50,7 +50,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
......@@ -59,7 +59,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
display: flex;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md
浏览文件 @ cdb6cf82
# switch
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
开关选择器，通过开关，开启或关闭某个功能。
......@@ -19,12 +19,12 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| checked | boolean | false | 否 | 是否选中。 |
| showtext | boolean | false | 否 | 是否显示文本。 |
| texton | string | "On" | 否 | 选中时显示的文本。 |
| textoff | string | "Off" | 否 | 未选中时显示的文本。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------- | ----- | ---- | ---------- |
| checked | boolean | false | 否 | 是否选中。 |
| showtext | boolean | false | 否 | 是否显示文本。 |
| texton | string | "On" | 否 | 选中时显示的文本。 |
| textoff | string | "Off" | 否 | 未选中时显示的文本。 |
## 样式
......@@ -33,24 +33,24 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| texton-color(Rich) | &lt;color&gt; | \#000000 | 否 | 选中时显示的文本颜色。 |
| textoff-color(Rich) | &lt;color&gt; | \#000000 | 否 | 未选中时显示的文本颜色。 |
| text-padding(Rich) | number | 0px | 否 | texton/textoff中最长文本两侧距离滑块边界的距离。 |
| font-size(Rich) | &lt;length&gt; | - | 否 | 文本尺寸，仅设置texton和textoff生效。 |
| allow-scale(Rich) | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-style(Rich) | string | normal | 否 | 字体样式，仅设置texton和textoff生效。见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-weight(Rich) | number&nbsp;\|&nbsp;string | normal | 否 | 字体粗细，仅设置texton和textoff生效。见[text组件的font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family(Rich) | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。仅设置texton和textoff生效。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| texton-color(Rich) | &lt;color&gt; | \#000000 | 否 | 选中时显示的文本颜色。 |
| textoff-color(Rich) | &lt;color&gt; | \#000000 | 否 | 未选中时显示的文本颜色。 |
| text-padding(Rich) | number | 0px | 否 | texton/textoff中最长文本两侧距离滑块边界的距离。 |
| font-size(Rich) | &lt;length&gt; | - | 否 | 文本尺寸，仅设置texton和textoff生效。 |
| allow-scale(Rich) | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-style(Rich) | string | normal | 否 | 字体样式，仅设置texton和textoff生效。见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-weight(Rich) | number&nbsp;\|&nbsp;string | normal | 否 | 字体粗细，仅设置texton和textoff生效。见[text组件的font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family(Rich) | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。仅设置texton和textoff生效。 |
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | ------------- |
| change | {&nbsp;checked:&nbsp;checkedValue&nbsp;} | 选中状态改变时触发该事件。 |
## 方法
......@@ -59,7 +59,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<switch showtext="true" texton="开启" textoff="关闭" checked="true" @change="switchChange">
......@@ -67,7 +67,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
display: flex;
......@@ -81,7 +81,7 @@ switch{
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md
浏览文件 @ cdb6cf82
# text
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
>
> - 该组件从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> - 该组件从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 文本的展示内容需要写在元素标签内。
> - 文本的展示内容需要写在元素标签内。
文本，用于呈现一段信息。
......@@ -27,43 +27,43 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | #e5000000 | 否 | 设置文本的颜色。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果需要支持动态生效，请参看config描述文件中config-changes标签。 |
| letter-spacing | &lt;length&gt; | 0px | 否 | 设置文本的字符间距。 |
| word-spacing<sup>7+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;string | normal | 否 | 设置文本之间的间距，string可选值为：<br/>normal：默认的字间距。 |
| font-style | string | normal | 否 | 设置文本的字体样式，可选值为：<br/>-&nbsp;normal：标准的字体样式；<br/>-&nbsp;italic：斜体的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置文本的字体粗细，number类型取值[100,&nbsp;900]，默认为400，取值越大，字体越粗。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;number取值必须为100的整数倍。<br/>string类型取值支持如下四个值：lighter、normal、bold、bolder。 |
| text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：<br/>-&nbsp;underline：文字下划线修饰；<br/>-&nbsp;line-through：穿过文本的修饰线n<br/>-&nbsp;none：标准文本。 |
| text-decoration-color<sup>7+</sup> | &lt;color&gt; | - | 否 | 设置文本修饰线的颜色。 |
| text-align | string | start<br/> | 否 | 设置文本的文本对齐方式，可选值为：<br/>-&nbsp;left：文本左对齐；<br/>-&nbsp;center：文本居中对齐；<br/>-&nbsp;right：文本右对齐；<br/>-&nbsp;start：根据文字书写相同的方向对齐；<br/>-&nbsp;end：根据文字书写相反的方向对齐。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 |
| line-height | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>7+</sup>&nbsp;\|&nbsp;string<sup>7+</sup> | 0px<sup>1-6</sup><br/>normal<sup>7+</sup> | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。string可选值为：<br/>normal<sup>7+</sup>：默认的行高。 |
| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：<br/>-&nbsp;clip：将文本根据父容器大小进行裁剪显示；<br/>-&nbsp;ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 |
| font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| max-lines | number&nbsp;\|&nbsp;string<sup>7+</sup> | - | 否 | 设置文本的最大行数，string类型可选值为：<br/>-&nbsp;auto<sup>7+</sup>：文本行数自适应容器高度。 |
| min-font-size | &lt;length&gt; | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| max-font-size | &lt;length&gt; | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| font-size-step | &lt;length&gt; | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 |
| prefer-font-sizes | &lt;array&gt; | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。<br/>如：prefer-font-sizes:&nbsp;12px,14px,16px |
| word-break<sup>6+</sup> | string | normal | 否 | 设置文本折行模式，可选值为：<br/>-&nbsp;normal：默认换行规则，依据各自语言的规则，允许在字间发生换行。<br/>-&nbsp;break-all：对于非中文/日文/韩文的文本，可在任意字符间断行。<br/>-&nbsp;break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。 |
| text-indent<sup>7+</sup> | &lt;length&gt; | - | 否 | 设置首行缩进量。 |
| white-space<sup>7+</sup> | string | pre | 否 | 设置处理元素中空白的模式，可选值为：<br/>-&nbsp;normal：所有空格、回车、制表符都合并成一个空格，文本自动换行；<br/>-&nbsp;nowrap：所有空格、回车、制表符都合并成一个空格，文本不换行；<br/>-&nbsp;pre：所有东西原样输出；<br/>-&nbsp;pre-wrap：所有东西原样输出，文本换行；<br/>-&nbsp;pre-line：所有空格、制表符合并成一个空格，回车不变，文本换行。 |
| adapt-height<sup>7+</sup> | boolean | false | 否 | 文本大小是否自适应容器高度。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;设置字体大小自适应相关样式后生效。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。
>
> - 文本换行：文本可以通过转义字符\r\n进行换行。
>
> - 文本标签内支持以下转义字符：\a，\b，\f，\n，\r，\t，\v，\'，\"，\0。
>
> - 当使用子组件span组成文本段落时，如果span属性样式异常，将导致text段落无法显示。
>
> - letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件（span）组成的文本内容。
>
> - text组件说明：不支持text内同时存在文本内容和span子组件。（如果同时存在，只显示span内的内容)
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------------------------- | ---------------------------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | #e5000000 | 否 | 设置文本的颜色。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果需要支持动态生效，请参看config描述文件中config-changes标签。 |
| letter-spacing | &lt;length&gt; | 0px | 否 | 设置文本的字符间距。 |
| word-spacing<sup>7+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;string | normal | 否 | 设置文本之间的间距，string可选值为：<br/>normal：默认的字间距。 |
| font-style | string | normal | 否 | 设置文本的字体样式，可选值为：<br/>-&nbsp;normal：标准的字体样式；<br/>-&nbsp;italic：斜体的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置文本的字体粗细，number类型取值[100,&nbsp;900]，默认为400，取值越大，字体越粗。number取值必须为100的整数倍。<br/>string类型取值支持如下四个值：lighter、normal、bold、bolder。 |
| text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：<br/>-&nbsp;underline：文字下划线修饰；<br/>-&nbsp;line-through：穿过文本的修饰线n<br/>-&nbsp;none：标准文本。 |
| text-decoration-color<sup>7+</sup> | &lt;color&gt; | - | 否 | 设置文本修饰线的颜色。 |
| text-align | string | start<br/> | 否 | 设置文本的文本对齐方式，可选值为：<br/>-&nbsp;left：文本左对齐；<br/>-&nbsp;center：文本居中对齐；<br/>-&nbsp;right：文本右对齐；<br/>-&nbsp;start：根据文字书写相同的方向对齐；<br/>-&nbsp;end：根据文字书写相反的方向对齐。<br/>如果文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 |
| line-height | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>7+</sup>&nbsp;\|&nbsp;string<sup>7+</sup> | 0px<sup>1-6</sup><br/>normal<sup>7+</sup> | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。string可选值为：<br/>normal<sup>7+</sup>：默认的行高。 |
| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：<br/>-&nbsp;clip：将文本根据父容器大小进行裁剪显示；<br/>-&nbsp;ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 |
| font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| max-lines | number&nbsp;\|&nbsp;string<sup>7+</sup> | - | 否 | 设置文本的最大行数，string类型可选值为：<br/>-&nbsp;auto<sup>7+</sup>：文本行数自适应容器高度。 |
| min-font-size | &lt;length&gt; | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| max-font-size | &lt;length&gt; | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| font-size-step | &lt;length&gt; | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 |
| prefer-font-sizes | &lt;array&gt; | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。<br/>如：prefer-font-sizes:&nbsp;12px,14px,16px |
| word-break<sup>6+</sup> | string | normal | 否 | 设置文本折行模式，可选值为：<br/>-&nbsp;normal：默认换行规则，依据各自语言的规则，允许在字间发生换行。<br/>-&nbsp;break-all：对于非中文/日文/韩文的文本，可在任意字符间断行。<br/>-&nbsp;break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。 |
| text-indent<sup>7+</sup> | &lt;length&gt; | - | 否 | 设置首行缩进量。 |
| white-space<sup>7+</sup> | string | pre | 否 | 设置处理元素中空白的模式，可选值为：<br/>-&nbsp;normal：所有空格、回车、制表符都合并成一个空格，文本自动换行；<br/>-&nbsp;nowrap：所有空格、回车、制表符都合并成一个空格，文本不换行；<br/>-&nbsp;pre：所有东西原样输出；<br/>-&nbsp;pre-wrap：所有东西原样输出，文本换行；<br/>-&nbsp;pre-line：所有空格、制表符合并成一个空格，回车不变，文本换行。 |
| adapt-height<sup>7+</sup> | boolean | false | 否 | 文本大小是否自适应容器高度。<br/>设置字体大小自适应相关样式后生效。 |
> **说明：**
> - 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。
>
> - 文本换行：文本可以通过转义字符\r\n进行换行。
>
> - 文本标签内支持以下转义字符：\a，\b，\f，\n，\r，\t，\v，\'，\"，\0。
>
> - 当使用子组件span组成文本段落时，如果span属性样式异常，将导致text段落无法显示。
>
> - letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件（span）组成的文本内容。
>
> - text组件说明：不支持text内同时存在文本内容和span子组件。（如果同时存在，只显示span内的内容)
## 事件
......@@ -77,7 +77,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="content">
......@@ -88,7 +88,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
display: flex;
......@@ -108,7 +108,7 @@
}
```
```
```js
// xxx.js
export default {
data: {
......@@ -119,7 +119,7 @@ export default {
![zh-cn_image_0000001167823076](figures/zh-cn_image_0000001167823076.png)
```
```html
<!-- xxx.hml -->
<div class="container">
<text class="text1">
......@@ -131,7 +131,7 @@ export default {
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-textarea.md
浏览文件 @ cdb6cf82
# textarea
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
多行文本输入的文本框。
......@@ -20,25 +20,25 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| placeholder | string | - | 否 | 多行文本框的提示文本内容。 |
| maxlength | number | - | 否 | 多行文本框可输入的最多字符数量。 |
| headericon | string | - | 否 | 在文本输入前的图标展示，该图标不支持点击事件，图标格式为jpg，png和svg。 |
| extend | boolean | false | 否 | 文本框是否支持可扩展，设置可扩展属性后文本框高度可以跟随文字自适应。 |
| value<sup>5+</sup> | string | - | 否 | 多行文本框的内容。 |
| showcounter<sup>5+</sup> | boolean | false | 否 | 文本框是否需要开启计数下标功能，需要配合maxlength一起使用。 |
| menuoptions<sup>5+</sup> | Array&lt;MenuOption&gt; | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 |
| autofocus<sup>6+</sup> | boolean | false | 否 | 是否自动获焦。 |
| selectedstart<sup>6+</sup> | number | -1 | 否 | 开始选择文本时初始选择位置。 |
| selectedend<sup>6+</sup> | number | -1 | 否 | 开始选择文本时结尾选择位置。 |
| softkeyboardenabled<sup>6+</sup> | boolean | true | 否 | 编辑时是否弹出系统软键盘。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------------------------------- | ----------------------- | ----- | ---- | ---------------------------------------- |
| placeholder | string | - | 否 | 多行文本框的提示文本内容。 |
| maxlength | number | - | 否 | 多行文本框可输入的最多字符数量。 |
| headericon | string | - | 否 | 在文本输入前的图标展示，该图标不支持点击事件，图标格式为jpg，png和svg。 |
| extend | boolean | false | 否 | 文本框是否支持可扩展，设置可扩展属性后文本框高度可以跟随文字自适应。 |
| value<sup>5+</sup> | string | - | 否 | 多行文本框的内容。 |
| showcounter<sup>5+</sup> | boolean | false | 否 | 文本框是否需要开启计数下标功能，需要配合maxlength一起使用。 |
| menuoptions<sup>5+</sup> | Array&lt;MenuOption&gt; | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 |
| autofocus<sup>6+</sup> | boolean | false | 否 | 是否自动获焦。 |
| selectedstart<sup>6+</sup> | number | -1 | 否 | 开始选择文本时初始选择位置。 |
| selectedend<sup>6+</sup> | number | -1 | 否 | 开始选择文本时结尾选择位置。 |
| softkeyboardenabled<sup>6+</sup> | boolean | true | 否 | 编辑时是否弹出系统软键盘。 |
**表1** MenuOption<sup>5+</sup>
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| icon | string | 菜单选项中的图标路径。 |
| 名称 | 类型 | 描述 |
| ------- | ------ | ----------- |
| icon | string | 菜单选项中的图标路径。 |
| content | string | 菜单选项中的文本内容。 |
......@@ -46,29 +46,29 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 多行文本框的文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 多行文本框的文本尺寸。 |
| allow-scale | boolean | true | 否 | 多行文本框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| placeholder-color | &lt;color&gt; | \#99000000 | 否 | 多行文本框的提示文本颜色，type为text\|email\|date\|time\|number\|password时生效。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 多行文本框的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 多行文本框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| caret-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置输入光标的颜色。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------------ | -------------------------- | ---------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 多行文本框的文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 多行文本框的文本尺寸。 |
| allow-scale | boolean | true | 否 | 多行文本框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| placeholder-color | &lt;color&gt; | \#99000000 | 否 | 多行文本框的提示文本颜色，type为text\|email\|date\|time\|number\|password时生效。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 多行文本框的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 多行文本框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| caret-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置输入光标的颜色。 |
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| change | {&nbsp;text:&nbsp;newText,&nbsp;lines:&nbsp;textLines,&nbsp;height:&nbsp;textHeight&nbsp;} | 输入内容发生变化时触发该事件，通过参数获取输入内容、行数和行高。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;改变value属性值不会触发该回调。<sup>5+</sup> |
| translate<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 |
| share<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 |
| search<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 |
| 名称 | 参数 | 描述 |
| ------------------------- | ---------------------------------------- | ---------------------------------------- |
| change | {&nbsp;text:&nbsp;newText,&nbsp;lines:&nbsp;textLines,&nbsp;height:&nbsp;textHeight&nbsp;} | 输入内容发生变化时触发该事件，通过参数获取输入内容、行数和行高。<br/>从API Version 5开始，改变value属性值不会触发该回调。 |
| translate<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 |
| share<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 |
| search<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 |
| optionselect<sup>5+</sup> | {&nbsp;index:optionIndex,&nbsp;value:&nbsp;selectedText&nbsp;} | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 |
| selectchange<sup>6+</sup> | {&nbsp;start:&nbsp;number，end:&nbsp;number&nbsp;} | 文本选择变化时触发事件。 |
| selectchange<sup>6+</sup> | {&nbsp;start:&nbsp;number，end:&nbsp;number&nbsp;} | 文本选择变化时触发事件。 |
## 方法
......@@ -78,7 +78,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<textarea id="textarea" class="textarea" extend="true" maxlength="20"
headericon="/common/navigation_menu1_icon.svg" placeholder="Please input text"
......@@ -86,14 +86,14 @@
</textarea>
```
```
```css
/* xxx.css */
.textarea {
placeholder-color: gray;
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md
浏览文件 @ cdb6cf82
# toggle
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
状态按钮用于从一组选项中进行选择，并可能在界面上实时显示选择后的结果。通常这一组选项都是由状态按钮构成。
......@@ -20,32 +20,32 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | string | - | 是 | 状态按钮的文本值。 |
| checked | boolean | false | 否 | 状态按钮是否被选中。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------- | ------- | ----- | ---- | ---------- |
| value | string | - | 是 | 状态按钮的文本值。 |
| checked | boolean | false | 否 | 状态按钮是否被选中。 |
## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| text-color | &lt;color&gt; | \#E5000000 | 否 | 状态按钮的文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 状态按钮的文本尺寸。 |
| allow-scale | boolean | true | 否 | 状态按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-style | string | normal | 否 | 状态按钮的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 状态按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | &lt;string&gt; | sans-serif | 否 | 状态按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| text-color | &lt;color&gt; | \#E5000000 | 否 | 状态按钮的文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 状态按钮的文本尺寸。 |
| allow-scale | boolean | true | 否 | 状态按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-style | string | normal | 否 | 状态按钮的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 状态按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | &lt;string&gt; | sans-serif | 否 | 状态按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| 名称 | 参数 | 描述 |
| ------ | ------------------------------- | -------------- |
| change | {&nbsp;checked：isChecked&nbsp;} | 组件选中状态发生变化时触发。 |
......@@ -56,7 +56,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div style="flex-direction: column;">
<text class="margin">1. Multiple choice example</text>
......@@ -71,14 +71,14 @@
</div>
```
```
```css
/* xxx.css */
.margin {
margin: 7px;
}
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md
浏览文件 @ cdb6cf82
# toolbar-item
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
工具栏子组件。作为工具栏组件的子组件，用于展示工具栏上的一个操作选项。
......@@ -15,34 +15,34 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | string | - | 是 | 该操作项文本内容。 |
| icon | string | - | 是 | 该操作项图标资源路径，该图标展示在选项文本上，支持本地路径，格式为png，jpg和svg。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----- | ------ | ---- | ---- | ---------------------------------------- |
| value | string | - | 是 | 该操作项文本内容。 |
| icon | string | - | 是 | 该操作项图标资源路径，该图标展示在选项文本上，支持本地路径，格式为png，jpg和svg。 |
## 样式
仅支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 文本大小。 |
| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 |
| font-style | string | normal | 否 | 文本字体样式，可选值为：<br/>1.&nbsp;normal:&nbsp;标准的字体样式；<br/>2.&nbsp;italic:&nbsp;斜体的字体样式。 |
| font-weight | number\|string | normal | 否 | 文本字体粗细，number类型取值[100,&nbsp;900]的整数（被100整除），默认为400，取值越大，字体越粗。string类型取值为：lighter、normal、bold、bolder。 |
| text-decoration | string | none | 否 | 文本修饰，可选值为：<br/>1.&nbsp;underline:&nbsp;文本下划线修饰；<br/>2.&nbsp;line-through:&nbsp;穿过文本的修饰线；<br/>3.&nbsp;none:&nbsp;标准文本。 |
| font-family | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| background | &lt;linear-gradient&gt; | - | 否 | 仅支持设置[渐变样式](../arkui-js/js-components-common-gradient.md)，与background-color、background-image不兼容。 |
| background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 |
| background-image | string | - | 否 | 设置背景图片。与background-color、background不兼容；支持网络图片资源和本地图片资源地址。 |
| background-size | -&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | auto | 否 | 设置背景图片的大小。<br/>-&nbsp;string可选值：<br/>&nbsp;&nbsp;-&nbsp;contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。<br/>&nbsp;&nbsp;-&nbsp;cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。<br/>&nbsp;&nbsp;-&nbsp;auto：保持原图的比例不变。<br/>-&nbsp;length值参数方式：<br/>&nbsp;&nbsp;设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。<br/>-&nbsp;百分比参数方式：<br/>&nbsp;&nbsp;以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。 |
| background-repeat | string | repeat | 否 | 针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。<br/>-&nbsp;repeat：在水平轴和竖直轴上同时重复绘制图片。<br/>-&nbsp;repeat-x：只在水平轴上重复绘制图片。<br/>-&nbsp;repeat-y：只在竖直轴上重复绘制图片。<br/>-&nbsp;no-repeat：不会重复绘制图片。 |
| background-position | -&nbsp;string&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | 0px&nbsp;0px | 否 | -&nbsp;关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。<br/>&nbsp;&nbsp;-&nbsp;left：水平方向上最左侧。<br/>&nbsp;&nbsp;-&nbsp;right：水平方向上最右侧。<br/>&nbsp;&nbsp;-&nbsp;top：竖直方向上最顶部。<br/>&nbsp;&nbsp;-&nbsp;bottom：竖直方向上最底部。<br/>&nbsp;&nbsp;-&nbsp;center：水平方向或竖直方向上中间位置。<br/>-&nbsp;length值参数方式：第一个值是水平位置，第二个值是垂直位置。&nbsp;左上角是&nbsp;0&nbsp;0。单位是像素&nbsp;(0px&nbsp;0px)&nbsp;&nbsp;。如果仅规定了一个值，另外一个值将是50%。<br/>-&nbsp;百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是&nbsp;0%&nbsp;0%。右下角是&nbsp;100%&nbsp;100%。如果仅规定了一个值，另外一个值为50%。<br/>-&nbsp;可以混合使用&lt;percentage&gt;和&lt;length&gt;。 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 |
| visibility | string | visible | 否 | 是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：<br/>-&nbsp;visible：元素正常显示。<br/>-&nbsp;hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;visibility和display样式都设置时，仅display生效。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------- | ---------------------------------------- | ------------ | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 文本大小。 |
| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 |
| font-style | string | normal | 否 | 文本字体样式，可选值为：<br/> -&nbsp;normal:&nbsp;标准的字体样式；<br/>- &nbsp;italic:&nbsp;斜体的字体样式。 |
| font-weight | number\|string | normal | 否 | 文本字体粗细，number类型取值[100,&nbsp;900]的整数（被100整除），默认为400，取值越大，字体越粗。string类型取值为：lighter、normal、bold、bolder。 |
| text-decoration | string | none | 否 | 文本修饰，可选值为：<br/>- underline:&nbsp;文本下划线修饰；<br/>- &nbsp;line-through:&nbsp;穿过文本的修饰线；<br/>- &nbsp;none:&nbsp;标准文本。 |
| font-family | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| background | &lt;linear-gradient&gt; | - | 否 | 仅支持设置[渐变样式](../arkui-js/js-components-common-gradient.md)，与background-color、background-image不兼容。 |
| background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 |
| background-image | string | - | 否 | 设置背景图片。与background-color、background不兼容；支持网络图片资源和本地图片资源地址。 |
| background-size | -&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | auto | 否 | 设置背景图片的大小。<br/>-&nbsp;string可选值：<br/>&nbsp;&nbsp;-&nbsp;contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。<br/>&nbsp;&nbsp;-&nbsp;cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。<br/>&nbsp;&nbsp;-&nbsp;auto：保持原图的比例不变。<br/>-&nbsp;length参数方式：<br/>&nbsp;&nbsp;设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。<br/>-&nbsp;百分比参数方式：<br/>以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。 |
| background-repeat | string | repeat | 否 | 针对重复背景图篇的样式进行设置，背景图篇默认在水平和垂直方向上重复。<br/>-&nbsp;repeat：在水平轴和竖直轴上同时重复绘制图片。<br/>-&nbsp;repeat-x：只在水平轴上重复绘制图片。<br/>-&nbsp;repeat-y：只在竖直轴上重复绘制图片。<br/>-&nbsp;no-repeat：不会重复绘制图片。 |
| background-position | -&nbsp;string&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | 0px&nbsp;0px | 否 | 设置背景图片位置。<br>- 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。<br/>&nbsp;&nbsp;-&nbsp;left：水平方向上最左侧。<br/>&nbsp;&nbsp;-&nbsp;right：水平方向上最右侧。<br/>&nbsp;&nbsp;-&nbsp;top：竖直方向上最顶部。<br/>&nbsp;&nbsp;-&nbsp;bottom：竖直方向上最底部。<br/>&nbsp;&nbsp;-&nbsp;center：水平方向或竖直方向上中间位置。<br/>-&nbsp;length值参数方式：第一个值是水平位置，第二个值是垂直位置。&nbsp;左上角是&nbsp;0&nbsp;0。单位是像素&nbsp;(0px&nbsp;0px)&nbsp;&nbsp;。如果仅规定了一个值，另外一个值将是50%。<br/>-&nbsp;百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是&nbsp;0%&nbsp;0%。右下角是&nbsp;100%&nbsp;100%。如果仅规定了一个值，另外一个值为50%。<br/>-&nbsp;可以混合使用&lt;percentage&gt;和&lt;length&gt;。 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 |
| visibility | string | visible | 否 | 是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：<br/>-&nbsp;visible：元素正常显示。<br/>-&nbsp;hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。<br/>visibility和display样式都设置时，仅display生效。 |
## 事件
......@@ -57,7 +57,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<toolbar style="position: fixed; bottom: 0px; ">
<toolbar-item icon='common/Icon/location.png' value='Option 1' > </toolbar-item>
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar.md
浏览文件 @ cdb6cf82
# toolbar
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
工具栏。放在界面底部，用于展示针对当前界面的操作选项。
......@@ -15,7 +15,7 @@
支持&lt;toolbar-item&gt;子组件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 工具栏最多可以展示5个toolbar-item子组件，如果存在6个及以上toolbar-item子组件，则保留前面4个子组件，后续的子组件收纳到工具栏上的更多项中，通过点击更多项弹窗展示剩下的子组件，更多项展示的组件样式采用系统默认样式，toolbar-item上设置的自定义样式不生效。
......@@ -28,7 +28,7 @@
支持[通用样式](../arkui-js/js-components-common-styles.md)。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 不支持height样式，高度固定为56px。
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-web.md
浏览文件 @ cdb6cf82
......@@ -38,7 +38,7 @@ web组件不跟随转场动画。一个页面仅支持一个web组件。
| reload | - | 重新加载页面。 |
## 示例
```
```html
<!-- xxx.hml -->
<div style="height: 500px; width: 500px; flex-direction: column;">
<button onclick="reloadWeb">click to reload</button>
......@@ -46,7 +46,7 @@ web组件不跟随转场动画。一个页面仅支持一个web组件。
</div>
```
```
```js
// xxx.js
export default {
reloadWeb() {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-xcomponent.md
浏览文件 @ cdb6cf82
......@@ -17,11 +17,11 @@
除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 参数类型 | 必填 | 描述 |
| ----------- | -------- | ---- | ------------------------------------------------------------ |
| id | string | 是 | 组件的唯一标识，支持最大的字符串长度128。 |
| type | string | 是 | 用于指定xcomponent组件类型，可选值为：<br/>-surface：组件内容单独送显，直接合成到屏幕。<br/>-component：组件内容与其他组件合成后统一送显。<br/> |
| libraryname | string | 否 | 应用Native层编译输出动态库名称。 |
| 名称 | 参数类型 | 必填 | 描述 |
| ----------- | ------ | ---- | ---------------------------------------- |
| id | string | 是 | 组件的唯一标识，支持最大的字符串长度128。 |
| type | string | 是 | 用于指定xcomponent组件类型，可选值为：<br/>- surface：组件内容单独送显，直接合成到屏幕。<br/>- component：组件内容与其他组件合成后统一送显。<br/> |
| libraryname | string | 否 | 应用Native层编译输出动态库名称。 |
## 样式
......@@ -31,26 +31,26 @@
除支持[通用事件](js-components-common-events.md)外，还支持如下事件：
| 名称 | 功能描述 |
| ------------------------------- | ------------------------------- |
| 名称 | 功能描述 |
| -------------------------------- | ---------------------------------------- |
| onLoad(context?: object) => void | 插件加载完成时回调事件。<br/>context：开发者扩展的xcomponent方法的实例对象，context对象的接口由开发者自定义。 |
| onDestroy() => void | 插件卸载完成时回调事件。 |
| onDestroy() => void | 插件卸载完成时回调事件。 |
## 方法
除支持[通用方法](js-components-common-methods.md)外，还支持如下方法：
| 名称 | 参数 | 返回值类型 | 描述 |
| ------------------------ | ------------------------------------------------------------ | ---------- | ------------------------------------------------------------ |
| getXComponentSurfaceId | - | string | 获取xcomponent对应Surface的ID，供@ohos接口使用，比如camera相关接口。 |
| setXComponentSurfaceSize | {<br/>surfaceWidth: number,<br/>surfaceHeight: number <br/>} | - | 设置xcomponent持有Surface的宽度和高度。 |
| getXComponentContext | - | object | 获取开发者扩展的xcomponent方法的实例对象。 |
| 名称 | 参数 | 返回值类型 | 描述 |
| ------------------------ | ---------------------------------------- | ------ | ---------------------------------------- |
| getXComponentSurfaceId | - | string | 获取xcomponent对应Surface的ID，供@ohos接口使用，比如camera相关接口。 |
| setXComponentSurfaceSize | {<br/>surfaceWidth: number,<br/>surfaceHeight: number <br/>} | - | 设置xcomponent持有Surface的宽度和高度。 |
| getXComponentContext | - | object | 获取开发者扩展的xcomponent方法的实例对象。 |
## 示例
提供surface类型xcomponent，支持相机预览等能力。
```
```html
<!-- xxx.hml -->
<div style="height: 500px; width: 500px; flex-direction: column; justify-content: center; align-items: center;">
<text id = 'camera' class = 'title'>camera_display</text>
......@@ -58,7 +58,7 @@
</div>
```
```
```js
// xxx.js
import camera from '@ohos.multimedia.camera';
export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md
浏览文件 @ cdb6cf82
# canvas组件
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供画布组件。用于自定义绘制图形。
......@@ -41,22 +41,22 @@ getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext
获取canvas绘图上下文。不支持在onInit和onReady中进行调用。
- 参数
| 参数名 | 参数类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| type | string | 是 | 设置为'2d'，返回值为2D绘制对象，该对象可用于在画布组件上绘制矩形、文本、图片等。 |
| options<sup>6+</sup> | ContextAttrOptions | 否 | 当前仅支持配置是否开启抗锯齿功能，默认为关闭。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 描述 |
| -------------------- | ------------------ | ---- | ---------------------------------------- |
| type | string | 是 | 设置为'2d'，返回值为2D绘制对象，该对象可用于在画布组件上绘制矩形、文本、图片等。 |
| options<sup>6+</sup> | ContextAttrOptions | 否 | 当前仅支持配置是否开启抗锯齿功能，默认为关闭。 |
**表1** ContextAttrOptions
| 参数名 | 类型 | 说明 |
| -------- | -------- | -------- |
| antialias | boolean | 是否开启抗锯齿功能，默认为false。 |
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 用于在画布组件上绘制矩形、文本、图片等。 |
| 参数名 | 类型 | 说明 |
| --------- | ------- | ------------------- |
| antialias | boolean | 是否开启抗锯齿功能，默认为false。 |
**返回值：**
| 类型 | 说明 |
| ---------------------------------------- | -------------------- |
| [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 用于在画布组件上绘制矩形、文本、图片等。 |
### toDataURL<sup>6+</sup>
......@@ -64,20 +64,20 @@ toDataURL(type?: string, quality?: number): string
生成一个包含图片展示的URL。
- 参数
| 参数名 | 参数类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| type | string | 否 | 可选参数，用于指定图像格式，默认格式为image/png。 |
| quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 描述 |
| ------- | ------ | ---- | ---------------------------------------- |
| type | string | 否 | 可选参数，用于指定图像格式，默认格式为image/png。 |
| quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 |
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| string | 图像的URL地址。 |
**返回值：**
| 类型 | 说明 |
| ------ | --------- |
| string | 图像的URL地址。 |
## 示例
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
......@@ -85,7 +85,7 @@ toDataURL(type?: string, quality?: number): string
</div>
```
```
```js
// xxx.js
export default {
handleClick() {
......
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md
浏览文件 @ cdb6cf82
# CanvasGradient对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
渐变对象。
......@@ -12,32 +12,32 @@ addColorStop(offset: number, color: string): void
设置渐变断点值，包括偏移和颜色。
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| offset | number | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
| color | string | 设置渐变的颜色。 |
- 示例
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
</div>
**参数：**
| 参数 | 类型 | 描述 |
| ------ | ------ | ---------------------------- |
| offset | number | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
| color | string | 设置渐变的颜色。 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"</canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle"onclick="handleClick" />
</div>
```
```
// xxx.js
export default {
handleClick() {
const el =this.$refs.canvas;
const ctx =el.getContext('2d');
const gradient = ctx.createLinearGradient(0,0,100,0);
gradient.addColorStop(0,'#00ffff');
gradient.addColorStop(1,'#ffff00');
}
```js
// xxx.js
export default {
handleClick() {
const el =this.$refs.canvas;
const ctx =el.getContext('2d');
const gradient = ctx.createLinearGradient(0,0,100,0);
gradient.addColorStop(0,'#00ffff');
gradient.addColorStop(1,'#ffff00');
}
}
```
![zh-cn_image_0000001152610806](figures/zh-cn_image_0000001152610806.png)
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @ cdb6cf82
# CanvasRenderingContext2D对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
使用CanvasRenderingContext2D在canvas画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
......@@ -16,7 +16,7 @@
</div>
```
```
```js
// xxx.js
export default {
handleClick() {
......@@ -56,7 +56,7 @@
| [lineJoin](#linejoin) | string | miter | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;round：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;bevel：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;miter：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 |
| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 |
| [font](#font) | string | "normal&nbsp;normal&nbsp;14px&nbsp;sans-serif" | 设置文本绘制中的字体样式。<br/>语法：ctx.font="font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family"<sup>5+</sup><br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：normal,&nbsp;italic。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：normal,&nbsp;bold,&nbsp;bolder,&nbsp;lighter,&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：sans-serif,&nbsp;serif,&nbsp;monospace。 |
| [textAlign](#textalign) | string | left | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;left：文本左对齐。<br/>-&nbsp;right：文本右对齐。<br/>-&nbsp;center：文本居中对齐。<br/>-&nbsp;start：文本对齐界线开始的地方。<br/>-&nbsp;end：文本对齐界线结束的地方。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下start和left一致，rtl布局模式下start和right一致·。 |
| [textAlign](#textalign) | string | left | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;left：文本左对齐。<br/>-&nbsp;right：文本右对齐。<br/>-&nbsp;center：文本居中对齐。<br/>-&nbsp;start：文本对齐界线开始的地方。<br/>-&nbsp;end：文本对齐界线结束的地方。<br/>ltr布局模式下start和left一致，rtl布局模式下start和right一致·。 |
| [textBaseline](#textbaseline) | string | alphabetic | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;alphabetic：文本基线是标准的字母基线。<br/>-&nbsp;top：文本基线在文本块的顶部。<br/>-&nbsp;hanging：文本基线是悬挂基线。<br/>-&nbsp;middle：文本基线在文本块的中间。<br/>-&nbsp;ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic&nbsp;基线，那么ideographic基线位置在字符本身的底部。<br/>-&nbsp;bottom：文本基线在文本块的底部。&nbsp;与&nbsp;ideographic&nbsp;基线的区别在于&nbsp;ideographic&nbsp;基线不需要考虑下行字母。 |
| [globalAlpha](#globalalpha) | number | - | 设置透明度，0.0为完全透明，1.0为完全不透明。 |
| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量，精度为float。 |
......@@ -70,16 +70,15 @@
### fillStyle
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
......@@ -95,15 +94,15 @@ export default {
### lineWidth
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
......@@ -120,15 +119,15 @@ export default {
### strokeStyle
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
......@@ -145,15 +144,15 @@ export default {
### lineCap
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
......@@ -172,15 +171,15 @@ export default {
### lineJoin
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
......@@ -200,15 +199,15 @@ export default {
### miterLimit
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
......@@ -229,15 +228,15 @@ export default {
### font
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
......@@ -253,15 +252,15 @@ export default {
### textAlign
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
......@@ -292,15 +291,15 @@ export default {
### textBaseline
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
......@@ -328,15 +327,15 @@ export default {
### globalAlpha
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
......@@ -355,15 +354,15 @@ export default {
### lineDashOffset
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
......@@ -380,48 +379,49 @@ export default {
### globalCompositeOperation
- 类型字段说明
| 值 | 描述 |
| ---------------- | ------------------------ |
| source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 |
| source-atop | 在现有绘制内容顶部显示新绘制内容。 |
| source-in | 在现有绘制内容中显示新绘制内容。 |
| source-out | 在现有绘制内容之外显示新绘制内容。 |
| destination-over | 在新绘制内容上方显示现有绘制内容。 |
| destination-atop | 在新绘制内容顶部显示现有绘制内容。 |
| destination-in | 在新绘制内容中显示现有绘制内容。 |
| destination-out | 在新绘制内容外显示现有绘制内容。 |
| lighter | 显示新绘制内容和现有绘制内容。 |
| copy | 显示新绘制内容而忽略现有绘制内容。 |
| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
- 示例
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
类型字段说明
| 值 | 描述 |
| ---------------- | ------------------------ |
| source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 |
| source-atop | 在现有绘制内容顶部显示新绘制内容。 |
| source-in | 在现有绘制内容中显示新绘制内容。 |
| source-out | 在现有绘制内容之外显示新绘制内容。 |
| destination-over | 在新绘制内容上方显示现有绘制内容。 |
| destination-atop | 在新绘制内容顶部显示现有绘制内容。 |
| destination-in | 在新绘制内容中显示现有绘制内容。 |
| destination-out | 在新绘制内容外显示现有绘制内容。 |
| lighter | 显示新绘制内容和现有绘制内容。 |
| copy | 显示新绘制内容而忽略现有绘制内容。 |
| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
//xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(20, 20, 50, 50);
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(50, 50, 50, 50);
// Start drawing second example
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(120, 20, 50, 50);
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(150, 50, 50, 50);
}
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(20, 20, 50, 50);
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(50, 50, 50, 50);
// Start drawing second example
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(120, 20, 50, 50);
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(150, 50, 50, 50);
}
}
```
![zh-cn_image_0000001213192781](figures/zh-cn_image_0000001213192781.png)
......@@ -430,15 +430,15 @@ export default {
### shadowBlur
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
......@@ -455,15 +455,15 @@ export default {
### shadowColor
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
......@@ -480,15 +480,15 @@ export default {
### shadowOffsetX
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
......@@ -507,15 +507,15 @@ export default {
### shadowOffsetY
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
......@@ -533,15 +533,15 @@ export default {
### imageSmoothingEnabled<sup>6+</sup>
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
......@@ -569,23 +569,24 @@ fillRect(x: number, y: number, width:number, height: number): void
填充一个矩形。
- 参数
| 参数 | 类型 | 描述 |
| ------ | ------ | ------------- |
| x | number | 指定矩形左上角点的x坐标。 |
| y | number | 指定矩形左上角点的y坐标。 |
| width | number | 指定矩形的宽度。 |
| height | number | 指定矩形的高度。 |
**参数：**
| 参数 | 类型 | 描述 |
| ------ | ------ | ------------- |
| x | number | 指定矩形左上角点的x坐标。 |
| y | number | 指定矩形左上角点的y坐标。 |
| width | number | 指定矩形的宽度。 |
| height | number | 指定矩形的高度。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -604,23 +605,23 @@ clearRect(x: number, y: number, width:number, height: number): void
删除指定区域内的绘制内容。
- 参数
| 参数 | 类型 | 描述 |
| ------ | ------ | ------------- |
| x | number | 指定矩形上的左上角x坐标。 |
| y | number | 指定矩形上的左上角y坐标。 |
| width | number | 指定矩形的宽度。 |
| height | number | 指定矩形的高度。 |
**参数：**
| 参数 | 类型 | 描述 |
| ------ | ------ | ------------- |
| x | number | 指定矩形上的左上角x坐标。 |
| y | number | 指定矩形上的左上角y坐标。 |
| width | number | 指定矩形的宽度。 |
| height | number | 指定矩形的高度。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -642,23 +643,23 @@ strokeRect(x: number, y: number, width:number, height: number): void
绘制具有边框的矩形，矩形内部不填充。
- 参数
| 参数 | 类型 | 描述 |
| ------ | ------ | ------------ |
| x | number | 指定矩形的左上角x坐标。 |
| y | number | 指定矩形的左上角y坐标。 |
| width | number | 指定矩形的宽度。 |
| height | number | 指定矩形的高度。 |
**参数：**
| 参数 | 类型 | 描述 |
| ------ | ------ | ------------ |
| x | number | 指定矩形的左上角x坐标。 |
| y | number | 指定矩形的左上角y坐标。 |
| width | number | 指定矩形的宽度。 |
| height | number | 指定矩形的高度。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -678,22 +679,22 @@ fillText(text: string, x: number, y: number): void
绘制填充类文本。
- 参数
| 参数 | 类型 | 描述 |
| ---- | ------ | --------------- |
| text | string | 需要绘制的文本内容。 |
| x | number | 需要绘制的文本的左下角x坐标。 |
| y | number | 需要绘制的文本的左下角y坐标。 |
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | --------------- |
| text | string | 需要绘制的文本内容。 |
| x | number | 需要绘制的文本的左下角x坐标。 |
| y | number | 需要绘制的文本的左下角y坐标。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -713,22 +714,22 @@ strokeText(text: string, x: number, y: number): void
绘制描边类文本。
- 参数
| 参数 | 类型 | 描述 |
| ---- | ------ | --------------- |
| text | string | 需要绘制的文本内容。 |
| x | number | 需要绘制的文本的左下角x坐标。 |
| y | number | 需要绘制的文本的左下角y坐标。 |
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | --------------- |
| text | string | 需要绘制的文本内容。 |
| x | number | 需要绘制的文本的左下角x坐标。 |
| y | number | 需要绘制的文本的左下角y坐标。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -748,25 +749,25 @@ measureText(text: string): TextMetrics
该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。
- 参数
| 参数 | 类型 | 描述 |
| ---- | ------ | ---------- |
| text | string | 需要进行测量的文本。 |
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | ---------- |
| text | string | 需要进行测量的文本。 |
- 返回值
| 类型 | 说明 |
| ----------- | -------------------------------------- |
| TextMetrics | 包含指定字体的宽度，该宽度可以通过TextMetrics.width来获取。 |
**返回值：**
| 类型 | 说明 |
| ----------- | -------------------------------------- |
| TextMetrics | 包含指定字体的宽度，该宽度可以通过TextMetrics.width来获取。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -788,15 +789,15 @@ stroke(): void
进行边框绘制操作。
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -819,15 +820,15 @@ beginPath(): void
创建一个新的绘制路径。
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -851,21 +852,21 @@ moveTo(x: number, y: number): void
路径从当前点移动到指定点。
- 参数
| 参数 | 类型 | 描述 |
| ---- | ------ | --------- |
| x | number | 指定位置的x坐标。 |
| y | number | 指定位置的y坐标。 |
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | --------- |
| x | number | 指定位置的x坐标。 |
| y | number | 指定位置的y坐标。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -887,21 +888,21 @@ lineTo(x: number, y: number): void
从当前点到指定点进行路径连接。
- 参数
| 参数 | 类型 | 描述 |
| ---- | ------ | --------- |
| x | number | 指定位置的x坐标。 |
| y | number | 指定位置的y坐标。 |
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | --------- |
| x | number | 指定位置的x坐标。 |
| y | number | 指定位置的y坐标。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -923,15 +924,15 @@ closePath(): void
结束当前路径形成一个封闭路径。
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -955,26 +956,26 @@ createPattern(image: Image, repetition: string): Object
通过指定图像和重复方式创建图片填充的模板。
- 参数
| 参数 | 类型 | 描述 |
| ---------- | ------ | ---------------------------------------- |
| image | Image | 图源对象，具体参考[Image对象](../arkui-js/js-components-canvas-image.md)。 |
| repetition | string | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
**参数：**
| 参数 | 类型 | 描述 |
| ---------- | ------ | ---------------------------------------- |
| image | Image | 图源对象，具体参考[Image对象](../arkui-js/js-components-canvas-image.md)。 |
| repetition | string | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
- 返回值
| 类型 | 说明 |
| ------ | ----------------- |
| Object | 指定图像填充的Pattern对象。 |
**返回值：**
| 类型 | 说明 |
| ------ | ----------------- |
| Object | 指定图像填充的Pattern对象。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -997,25 +998,25 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。
- 参数
| 参数 | 类型 | 描述 |
| ---- | ------ | -------------- |
| cp1x | number | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 第二个贝塞尔参数的x坐标值。 |
| cp2y | number | 第二个贝塞尔参数的y坐标值。 |
| x | number | 路径结束时的x坐标值。 |
| y | number | 路径结束时的y坐标值。 |
- 示例
```
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | -------------- |
| cp1x | number | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 第二个贝塞尔参数的x坐标值。 |
| cp2y | number | 第二个贝塞尔参数的y坐标值。 |
| x | number | 路径结束时的x坐标值。 |
| y | number | 路径结束时的y坐标值。 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1037,23 +1038,23 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
创建二次贝赛尔曲线的路径。
- 参数
| 参数 | 类型 | 描述 |
| ---- | ------ | ----------- |
| cpx | number | 贝塞尔参数的x坐标值。 |
| cpy | number | 贝塞尔参数的y坐标值。 |
| x | number | 路径结束时的x坐标值。 |
| y | number | 路径结束时的y坐标值。 |
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | ----------- |
| cpx | number | 贝塞尔参数的x坐标值。 |
| cpy | number | 贝塞尔参数的y坐标值。 |
| x | number | 路径结束时的x坐标值。 |
| y | number | 路径结束时的y坐标值。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1075,25 +1076,25 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
绘制弧线路径。
- 参数
| 参数 | 类型 | 描述 |
| ------------- | ------- | ---------- |
| x | number | 弧线圆心的x坐标值。 |
| y | number | 弧线圆心的y坐标值。 |
| radius | number | 弧线的圆半径。 |
| startAngle | number | 弧线的起始弧度。 |
| endAngle | number | 弧线的终止弧度。 |
| anticlockwise | boolean | 是否逆时针绘制圆弧。 |
- 示例
```
**参数：**
| 参数 | 类型 | 描述 |
| ------------- | ------- | ---------- |
| x | number | 弧线圆心的x坐标值。 |
| y | number | 弧线圆心的y坐标值。 |
| radius | number | 弧线的圆半径。 |
| startAngle | number | 弧线的起始弧度。 |
| endAngle | number | 弧线的终止弧度。 |
| anticlockwise | boolean | 是否逆时针绘制圆弧。 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1114,24 +1115,24 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。
- 参数
| 参数 | 类型 | 描述 |
| ------ | ------ | --------------- |
| x1 | number | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 圆弧经过的第二个点的x坐标值。 |
| y2 | number | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 圆弧的圆半径值。 |
- 示例
```
**参数：**
| 参数 | 类型 | 描述 |
| ------ | ------ | --------------- |
| x1 | number | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 圆弧经过的第二个点的x坐标值。 |
| y2 | number | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 圆弧的圆半径值。 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1152,27 +1153,27 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
在规定的矩形区域绘制一个椭圆。
- 参数
| 参数 | 类型 | 描述 |
| ------------- | ------ | ------------------------------------ |
| x | number | 椭圆圆心的x轴坐标。 |
| y | number | 椭圆圆心的y轴坐标。 |
| radiusX | number | 椭圆x轴的半径长度。 |
| radiusY | number | 椭圆y轴的半径长度。 |
| rotation | number | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 椭圆绘制的结束点角度，以弧度表示。 |
| anticlockwise | number | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) |
- 示例
```
**参数：**
| 参数 | 类型 | 描述 |
| ------------- | ------ | ------------------------------------ |
| x | number | 椭圆圆心的x轴坐标。 |
| y | number | 椭圆圆心的y轴坐标。 |
| radiusX | number | 椭圆x轴的半径长度。 |
| radiusY | number | 椭圆y轴的半径长度。 |
| rotation | number | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 椭圆绘制的结束点角度，以弧度表示。 |
| anticlockwise | number | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1193,23 +1194,23 @@ rect(x: number, y: number, width: number, height: number): void
创建矩形路径。
- 参数
| 参数 | 类型 | 描述 |
| ------ | ------ | ------------- |
| x | number | 指定矩形的左上角x坐标值。 |
| y | number | 指定矩形的左上角y坐标值。 |
| width | number | 指定矩形的宽度。 |
| height | number | 指定矩形的高度。 |
**参数：**
| 参数 | 类型 | 描述 |
| ------ | ------ | ------------- |
| x | number | 指定矩形的左上角x坐标值。 |
| y | number | 指定矩形的左上角y坐标值。 |
| width | number | 指定矩形的宽度。 |
| height | number | 指定矩形的高度。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1229,15 +1230,15 @@ fill(): void
对封闭路径进行填充。
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1257,15 +1258,15 @@ clip(): void
设置当前路径为剪切路径。
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1289,20 +1290,20 @@ rotate(rotate: number): void
针对当前坐标轴进行顺时针旋转。
- 参数
| 参数 | 类型 | 描述 |
| ------ | ------ | ---------------------------------------- |
| rotate | number | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
**参数：**
| 参数 | 类型 | 描述 |
| ------ | ------ | ---------------------------------------- |
| rotate | number | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1322,21 +1323,21 @@ scale(x: number, y: number): void
设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。
- 参数
| 参数 | 类型 | 描述 |
| ---- | ------ | ----------- |
| x | number | 设置水平方向的缩放值。 |
| y | number | 设置垂直方向的缩放值。 |
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | ----------- |
| x | number | 设置水平方向的缩放值。 |
| y | number | 设置垂直方向的缩放值。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1357,32 +1358,32 @@ transform(scaleX: number, skewX: number, skewY: number, scale: number, translate
transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
> **说明：**
> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
>
> - x' = scaleX \* x + skewY \* y + translateX
> - x' = scaleX \* x + skewY \* y + translateX
>
> - y' = skewX \* x + scaleY \* y + translateY
- 参数
| 参数 | 类型 | 描述 |
| ---------- | ------ | -------- |
| scaleX | number | 指定水平缩放值。 |
| skewX | number | 指定水平倾斜值。 |
| skewY | number | 指定垂直倾斜值。 |
| scaleY | number | 指定垂直缩放值。 |
| translateX | number | 指定水平移动值。 |
| translateY | number | 指定垂直移动值。 |
- 示例
```
> - y' = skewX \* x + scaleY \* y + translateY
**参数：**
| 参数 | 类型 | 描述 |
| ---------- | ------ | -------- |
| scaleX | number | 指定水平缩放值。 |
| skewX | number | 指定水平倾斜值。 |
| skewY | number | 指定垂直倾斜值。 |
| scaleY | number | 指定垂直缩放值。 |
| translateX | number | 指定水平移动值。 |
| translateY | number | 指定垂直移动值。 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1408,25 +1409,25 @@ setTransform(scaleX: number, skewX: number, skewY: number, scale: number, transl
setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。
- 参数
| 参数 | 类型 | 描述 |
| ---------- | ------ | -------- |
| scaleX | number | 指定水平缩放值。 |
| skewX | number | 指定水平倾斜值。 |
| skewY | number | 指定垂直倾斜值。 |
| scaleY | number | 指定垂直缩放值。 |
| translateX | number | 指定水平移动值。 |
| translateY | number | 指定垂直移动值。 |
- 示例
```
**参数：**
| 参数 | 类型 | 描述 |
| ---------- | ------ | -------- |
| scaleX | number | 指定水平缩放值。 |
| skewX | number | 指定水平倾斜值。 |
| skewY | number | 指定垂直倾斜值。 |
| scaleY | number | 指定垂直缩放值。 |
| translateX | number | 指定水平移动值。 |
| translateY | number | 指定垂直移动值。 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1449,21 +1450,21 @@ translate(x: number, y: number): void
移动当前坐标系的原点。
- 参数
| 参数 | 类型 | 描述 |
| ---- | ------ | -------- |
| x | number | 设置水平平移量。 |
| y | number | 设置竖直平移量。 |
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | -------- |
| x | number | 设置水平平移量。 |
| y | number | 设置竖直平移量。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1484,24 +1485,24 @@ createPath2D(path: Path2D, cmds: string): Path2D
创建一个Path2D对象。
- 参数
| 参数 | 类型 | 描述 |
| ---- | ------ | -------------- |
| path | Path2D | Path2D对象。 |
| cmds | string | SVG的Path描述字符串。 |
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | -------------- |
| path | Path2D | Path2D对象。 |
| cmds | string | SVG的Path描述字符串。 |
- 返回值
**返回值：**
[Path2D对象](../arkui-js/js-components-canvas-path2d.md)
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1529,28 +1530,28 @@ drawImage(image: Image | PixelMap, sx: number, sy: number, sWidth: number, sHeig
进行图像绘制。
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| image | Image \| PixelMap<sup>9+</sup> | 图片资源，请参考[Image对象](../arkui-js/js-components-canvas-image.md) 或[PixelMap对象](../apis/js-apis-image.md#pixelmap7)。 |
| sx | number | 裁切源图像时距离源图像左上角的x坐标值。 |
| sy | number | 裁切源图像时距离源图像左上角的y坐标值。 |
| sWidth | number | 裁切源图像时需要裁切的宽度。 |
| sHeight | number | 裁切源图像时需要裁切的高度。 |
| dx | number | 绘制区域左上角在x轴的位置。 |
| dy | number | 绘制区域左上角在y&nbsp;轴的位置。 |
| dWidth | number | 绘制区域的宽度。 |
| dHeight | number | 绘制区域的高度。 |
- 示例
```
**参数：**
| 参数 | 类型 | 描述 |
| ------- | ------------------------------ | ---------------------------------------- |
| image | Image \| PixelMap<sup>9+</sup> | 图片资源，请参考[Image对象](../arkui-js/js-components-canvas-image.md) 或[PixelMap对象](../apis/js-apis-image.md#pixelmap7)。 |
| sx | number | 裁切源图像时距离源图像左上角的x坐标值。 |
| sy | number | 裁切源图像时距离源图像左上角的y坐标值。 |
| sWidth | number | 裁切源图像时需要裁切的宽度。 |
| sHeight | number | 裁切源图像时需要裁切的高度。 |
| dx | number | 绘制区域左上角在x轴的位置。 |
| dy | number | 绘制区域左上角在y&nbsp;轴的位置。 |
| dWidth | number | 绘制区域的宽度。 |
| dHeight | number | 绘制区域的高度。 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1571,15 +1572,15 @@ restore(): void
对保存的绘图上下文进行恢复。
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1596,15 +1597,15 @@ save(): void
对当前的绘图上下文进行保存。
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1621,21 +1622,21 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object
创建一个线性渐变色，返回CanvasGradient对象，请参考[CanvasGradient对象](../arkui-js/js-components-canvas-canvasgradient.md)。
- 参数
| 参数 | 类型 | 描述 |
| ---- | ------ | -------- |
| x0 | number | 起点的x轴坐标。 |
| y0 | number | 起点的y轴坐标。 |
| x1 | number | 终点的x轴坐标。 |
| y1 | number | 终点的y轴坐标。 |
- 返回值
| 类型 | 说明 |
| ------ | ---------------------- |
| Object | 返回创建的CanvasGradient对象。 |
- 示例
```
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | -------- |
| x0 | number | 起点的x轴坐标。 |
| y0 | number | 起点的y轴坐标。 |
| x1 | number | 终点的x轴坐标。 |
| y1 | number | 终点的y轴坐标。 |
**返回值：**
| 类型 | 说明 |
| ------ | ---------------------- |
| Object | 返回创建的CanvasGradient对象。 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
......@@ -1643,7 +1644,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object
</div>
```
```
```js
// xxx.js
export default {
handleClick() {
......@@ -1670,23 +1671,23 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
创建一个径向渐变色，返回CanvasGradient对象，请参考CanvasGradient
- 参数
| 参数 | 类型 | 描述 |
| ---- | ------ | ----------------- |
| x0 | number | 起始圆的x轴坐标。 |
| y0 | number | 起始圆的y轴坐标。 |
| r0 | number | 起始圆的半径。必须是非负且有限的。 |
| x1 | number | 终点圆的x轴坐标。 |
| y1 | number | 终点圆的y轴坐标。 |
| r1 | number | 终点圆的半径。必须为非负且有限的。 |
- 返回值
| 类型 | 说明 |
| ------ | ---------------------- |
| Object | 返回创建的CanvasGradient对象。 |
- 示例
```
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | ----------------- |
| x0 | number | 起始圆的x轴坐标。 |
| y0 | number | 起始圆的y轴坐标。 |
| r0 | number | 起始圆的半径。必须是非负且有限的。 |
| x1 | number | 终点圆的x轴坐标。 |
| y1 | number | 终点圆的y轴坐标。 |
| r1 | number | 终点圆的半径。必须为非负且有限的。 |
**返回值：**
| 类型 | 说明 |
| ------ | ---------------------- |
| Object | 返回创建的CanvasGradient对象。 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
......@@ -1694,7 +1695,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
</div>
```
```
```js
// xxx.js
export default {
handleClick() {
......@@ -1721,27 +1722,27 @@ createImageData(width: number, height: number, imageData: Object): Object
创建新的ImageData 对象，请参考[ImageData对象](../arkui-js/js-components-canvas-imagedata.md)。
- 参数
| 参数 | 类型 | 描述 |
| --------- | ------ | ----------------- |
| width | number | ImageData的宽度。 |
| height | number | ImageData的高度。 |
| imagedata | Object | 复制现有的ImageData对象。 |
**参数：**
| 参数 | 类型 | 描述 |
| --------- | ------ | ----------------- |
| width | number | ImageData的宽度。 |
| height | number | ImageData的高度。 |
| imagedata | Object | 复制现有的ImageData对象。 |
- 返回值
| 类型 | 说明 |
| ------ | ----------------- |
| Object | 返回创建的ImageData对象。 |
**返回值：**
| 类型 | 说明 |
| ------ | ----------------- |
| Object | 返回创建的ImageData对象。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1759,28 +1760,28 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
以当前canvas指定区域内的像素创建ImageData对象。
- 参数
| 参数 | 类型 | 描述 |
| ---- | ------ | --------------- |
| sx | number | 需要输出的区域的左上角x坐标。 |
| sy | number | 需要输出的区域的左上角y坐标。 |
| sw | number | 需要输出的区域的宽度。 |
| sh | number | 需要输出的区域的高度。 |
- 返回值
| 类型 | 说明 |
| ------ | ----------------------- |
| Object | 返回包含指定区域像素的ImageData对象。 |
- 示例
```
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | --------------- |
| sx | number | 需要输出的区域的左上角x坐标。 |
| sy | number | 需要输出的区域的左上角y坐标。 |
| sw | number | 需要输出的区域的宽度。 |
| sh | number | 需要输出的区域的高度。 |
**返回值：**
| 类型 | 说明 |
| ------ | ----------------------- |
| Object | 返回包含指定区域像素的ImageData对象。 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1797,26 +1798,26 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
使用ImageData数据填充新的矩形区域。
- 参数
| 参数 | 类型 | 描述 |
| ----------- | ------ | ----------------------------- |
| imagedata | Object | 包含像素值的ImageData对象。 |
| dx | number | 填充区域在x轴方向的偏移量。 |
| dy | number | 填充区域在y轴方向的偏移量。 |
| dirtyX | number | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
| dirtyY | number | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 |
| dirtyWidth | number | 源图像数据矩形裁切范围的宽度。 |
| dirtyHeight | number | 源图像数据矩形裁切范围的高度。 |
- 示例
```
**参数：**
| 参数 | 类型 | 描述 |
| ----------- | ------ | ----------------------------- |
| imagedata | Object | 包含像素值的ImageData对象。 |
| dx | number | 填充区域在x轴方向的偏移量。 |
| dy | number | 填充区域在y轴方向的偏移量。 |
| dirtyX | number | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
| dirtyY | number | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 |
| dirtyWidth | number | 源图像数据矩形裁切范围的宽度。 |
| dirtyHeight | number | 源图像数据矩形裁切范围的高度。 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1842,31 +1843,31 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
获取用当前canvas指定区域内的像素创建的PixelMap对象。
- 参数
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | --------------------------- |
| sx | number | 指定区域的左上角x坐标。 |
| sy | number | 指定区域的左上角y坐标。 |
| sw | number | 指定区域的宽度。 |
| sh | number | 指定区域的高度。 |
| 参数 | 类型 | 描述 |
| ---- | ------ | ------------ |
| sx | number | 指定区域的左上角x坐标。 |
| sy | number | 指定区域的左上角y坐标。 |
| sw | number | 指定区域的宽度。 |
| sh | number | 指定区域的高度。 |
- 返回值
**返回值：**
| 类型 | 说明 |
| -------- | ------------------------------------ |
| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 返回包含指定区域像素的PixelMap对象。 |
| 类型 | 说明 |
| ---------------------------------------- | ---------------------- |
| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 返回包含指定区域像素的PixelMap对象。 |
- 示例
**示例：**
```
```html
<!-- xxx.hml -->
<div>
<canvas id="canvasId" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1883,20 +1884,20 @@ setLineDash(segments: Array): void
设置画布的虚线样式。
- 参数
| 参数 | 类型 | 描述 |
| -------- | ----- | -------------------- |
| segments | Array | 作为数组用来描述线段如何交替和间距长度。 |
**参数：**
| 参数 | 类型 | 描述 |
| -------- | ----- | -------------------- |
| segments | Array | 作为数组用来描述线段如何交替和间距长度。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1917,20 +1918,20 @@ getLineDash(): Array
获得当前画布的虚线样式。
- 返回值
| 类型 | 说明 |
| ----- | ------------------------ |
| Array | 返回数组，该数组用来描述线段如何交替和间距长度。 |
**返回值：**
| 类型 | 说明 |
| ----- | ------------------------ |
| Array | 返回数组，该数组用来描述线段如何交替和间距长度。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -1947,20 +1948,20 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
显示给定的ImageBitmap对象。
- 参数
| 参数 | 类型 | 描述 |
| ------ | ----------- | ------------------ |
| bitmap | ImageBitmap | 待显示的ImageBitmap对象。 |
**参数：**
| 参数 | 类型 | 描述 |
| ------ | ----------- | ------------------ |
| bitmap | ImageBitmap | 待显示的ImageBitmap对象。 |
- 示例
```
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......
zh-cn/application-dev/reference/arkui-js/js-components-canvas-image.md
浏览文件 @ cdb6cf82
# Image对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
图片对象。
## 属性
| 属性 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| src | string | - | 是 | 图片资源的路径。 |
| width | &lt;length&gt; | 0px | 否 | 图片的宽度。 |
| height | &lt;length&gt; | 0px | 否 | 图片的高度。 |
| onload | Function | - | 否 | 图片加载成功后触发该事件，无参数。 |
| onerror | Function | - | 否 | 图片加载失败后触发该事件，无参数。 |
| 属性 | 类型 | 默认值 | 必填 | 描述 |
| ------- | -------------- | ---- | ---- | ----------------- |
| src | string | - | 是 | 图片资源的路径。 |
| width | &lt;length&gt; | 0px | 否 | 图片的宽度。 |
| height | &lt;length&gt; | 0px | 否 | 图片的高度。 |
| onload | Function | - | 否 | 图片加载成功后触发该事件，无参数。 |
| onerror | Function | - | 否 | 图片加载失败后触发该事件，无参数。 |
## 示例
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
export default {
onShow(){
const el =this.$refs.canvas;
......
zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagebitmap.md
浏览文件 @ cdb6cf82
# ImageBitmap对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......
zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagedata.md
浏览文件 @ cdb6cf82
# ImageData对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
ImageData对象可以存储canvas渲染的像素数据。
## 属性
| 属性 | 类型 | 描述 |
| -------- | -------- | -------- |
| width | number | 矩形区域实际像素宽度。 |
| height | number | 矩形区域实际像素高度。 |
| data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
| 属性 | 类型 | 描述 |
| ------ | ------------------------- | ---------------------------- |
| width | number | 矩形区域实际像素宽度。 |
| height | number | 矩形区域实际像素高度。 |
| data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
## 示例
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
```
//xxx.js
```js
// xxx.js
import prompt from '@system.prompt';
export default {
onShow() {
......
zh-cn/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md
浏览文件 @ cdb6cf82
# OffscreenCanvas对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
可以离屏渲染的canvas对象。
......@@ -9,9 +9,9 @@
## 属性
| 属性 | 类型 | 描述 |
| -------- | -------- | -------- |
| width | number | offscreen&nbsp;canvas对象的宽度。 |
| 属性 | 类型 | 描述 |
| ------ | ------ | --------------------------- |
| width | number | offscreen&nbsp;canvas对象的宽度。 |
| height | number | offscreen&nbsp;canvas对象的高度。 |
......@@ -24,16 +24,16 @@ getContext(type: string, options?: CanvasRenderingContext2DSettings): OffscreenC
获取offscreen canvas绘图上下文，返回值为2D绘制对象。
- 参数
| 参数名 | 参数类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| contextId | string | 是 | 仅支持&nbsp;'2d'。 |
| options | [CanvasRenderingContext2DSettings](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 否 | 用于在离屏画布上进行绘制矩形、文本、图片等。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 描述 |
| --------- | ---------------------------------------- | ---- | ---------------------- |
| contextId | string | 是 | 仅支持&nbsp;'2d'。 |
| options | [CanvasRenderingContext2DSettings](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 否 | 用于在离屏画布上进行绘制矩形、文本、图片等。 |
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| [OffscreenCanvasRenderingContext2D](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 2D绘制对象，用于在画布组件上绘制矩形、文本、图片等。 |
**返回值：**
| 类型 | 说明 |
| ---------------------------------------- | --------------------------- |
| [OffscreenCanvasRenderingContext2D](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 2D绘制对象，用于在画布组件上绘制矩形、文本、图片等。 |
### toDataURL
......@@ -42,16 +42,16 @@ toDataURL(type?: string, quality?:number):
生成一个包含图片展示的URL。
- 参数
| 参数名 | 参数类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| type | string | 否 | 可选参数，用于指定图像格式，默认格式为image/png。 |
| quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 描述 |
| ------- | ------ | ---- | ---------------------------------------- |
| type | string | 否 | 可选参数，用于指定图像格式，默认格式为image/png。 |
| quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 |
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| string | 图像的URL地址。 |
**返回值：**
| 类型 | 说明 |
| ------ | --------- |
| string | 图像的URL地址。 |
### transferToImageBitmap
......@@ -60,22 +60,22 @@ transferToImageBitmap(): ImageBitmap
在离屏画布最近渲染的图像上创建一个ImageBitmap对象。
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| [ImageBitmap](../arkui-js/js-components-canvas-imagebitmap.md) | 存储离屏画布上渲染的像素数据。 |
**返回值：**
| 类型 | 说明 |
| ---------------------------------------- | --------------- |
| [ImageBitmap](../arkui-js/js-components-canvas-imagebitmap.md) | 存储离屏画布上渲染的像素数据。 |
## 示例
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvasId" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
```
```js
//xxx.js
export default {
onShow() {
......@@ -93,3 +93,4 @@ export default {
}
}
```
zh-cn/application-dev/reference/arkui-js/js-components-canvas-path2d.md
浏览文件 @ cdb6cf82
# Path2D对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 6开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 6开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。
......@@ -12,31 +12,31 @@ addPath(path: Object): void
将另一个路径添加到当前的路径对象中。
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| path | Object | 需要添加到当前路径的路径对象 |
- 示例
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
```
//xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path1 = ctx.createPath2D("M250 150 L150 350 L350 350 Z");
var path2 = ctx.createPath2D();
path2.addPath(path1);
ctx.stroke(path2);
}
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | -------------- |
| path | Object | 需要添加到当前路径的路径对象 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"</canvas>
</div>
```
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path1 = ctx.createPath2D("M250 150 L150 350 L350 350 Z");
var path2 = ctx.createPath2D();
path2.addPath(path1);
ctx.stroke(path2);
}
}
```
![zh-cn_image_0000001173164873](figures/zh-cn_image_0000001173164873.png)
......@@ -47,35 +47,35 @@ setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, trans
设置路径变换矩阵。
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| scaleX | number | x轴的缩放比例 |
| skewX | number | x轴的倾斜角度 |
| skewY | number | y轴的倾斜角度 |
| scaleY | number | y轴的缩放比例 |
| translateX | number | x轴的平移距离 |
| translateY | number | y轴的平移距离 |
- 示例
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
```
//xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D("M250 150 L150 350 L350 350 Z");
path.setTransform(0.8, 0, 0, 0.4, 0, 0);
ctx.stroke(path);
}
**参数：**
| 参数 | 类型 | 描述 |
| ---------- | ------ | ------- |
| scaleX | number | x轴的缩放比例 |
| skewX | number | x轴的倾斜角度 |
| skewY | number | y轴的倾斜角度 |
| scaleY | number | y轴的缩放比例 |
| translateX | number | x轴的平移距离 |
| translateY | number | y轴的平移距离 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"</canvas>
</div>
```
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D("M250 150 L150 350 L350 350 Z");
path.setTransform(0.8, 0, 0, 0.4, 0, 0);
ctx.stroke(path);
}
}
```
![zh-cn_image_0000001127125208](figures/zh-cn_image_0000001127125208.png)
......@@ -87,28 +87,28 @@ closePath(): void
将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。
- 示例
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
```
//xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D();
path.moveTo(200, 100);
path.lineTo(300, 100);
path.lineTo(200, 200);
path.closePath();
ctx.stroke(path);
}
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"</canvas>
</div>
```
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D();
path.moveTo(200, 100);
path.lineTo(300, 100);
path.lineTo(200, 200);
path.closePath();
ctx.stroke(path);
}
}
```
![zh-cn_image_0000001127125202](figures/zh-cn_image_0000001127125202.png)
......@@ -120,34 +120,34 @@ moveTo(x: number, y: number): void
将路径的当前坐标点移动到目标点，移动过程中不绘制线条。
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| x | number | 目标点X轴坐标 |
| y | number | 目标点Y轴坐标 |
- 示例
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
</div>
```
```
//xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D();
path.moveTo(50, 100);
path.lineTo(250, 100);
path.lineTo(150, 200);
path.closePath();
ctx.stroke(path);
}
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | ------- |
| x | number | 目标点X轴坐标 |
| y | number | 目标点Y轴坐标 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"</canvas>
</div>
```
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D();
path.moveTo(50, 100);
path.lineTo(250, 100);
path.lineTo(150, 200);
path.closePath();
ctx.stroke(path);
}
}
```
![zh-cn_image_0000001173164869](figures/zh-cn_image_0000001173164869.png)
......@@ -159,35 +159,35 @@ lineTo(x: number, y: number): void
从当前点绘制一条直线到目标点。
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| x | number | 目标点X轴坐标 |
| y | number | 目标点Y轴坐标 |
- 示例
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 400px; height: 450px; background-color: #ffff00;"></canvas>
</div>
```
```
//xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D();
path.moveTo(100, 100);
path.lineTo(100, 200);
path.lineTo(200, 200);
path.lineTo(200, 100);
path.closePath();
ctx.stroke(path);
}
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | ------- |
| x | number | 目标点X轴坐标 |
| y | number | 目标点Y轴坐标 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 400px; height: 450px; background-color: #ffff00;"</canvas>
</div>
```
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D();
path.moveTo(100, 100);
path.lineTo(100, 200);
path.lineTo(200, 200);
path.lineTo(200, 100);
path.closePath();
ctx.stroke(path);
}
}
```
![zh-cn_image_0000001127285024](figures/zh-cn_image_0000001127285024.png)
......@@ -199,36 +199,36 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| cp1x | number | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 第二个贝塞尔参数的x坐标值。 |
| cp2y | number | 第二个贝塞尔参数的y坐标值。 |
| x | number | 路径结束时的x坐标值。 |
| y | number | 路径结束时的y坐标值。 |
- 示例
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
```
//xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D();
path.moveTo(10, 10);
path.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke(path);
}
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | -------------- |
| cp1x | number | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 第二个贝塞尔参数的x坐标值。 |
| cp2y | number | 第二个贝塞尔参数的y坐标值。 |
| x | number | 路径结束时的x坐标值。 |
| y | number | 路径结束时的y坐标值。 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"</canvas>
</div>
```
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D();
path.moveTo(10, 10);
path.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke(path);
}
}
```
![zh-cn_image_0000001173324783](figures/zh-cn_image_0000001173324783.png)
......@@ -240,34 +240,34 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
创建二次贝赛尔曲线的路径。
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| cpx | number | 贝塞尔参数的x坐标值。 |
| cpy | number | 贝塞尔参数的y坐标值。 |
| x | number | 路径结束时的x坐标值。 |
| y | number | 路径结束时的y坐标值。 |
- 示例
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
```
//xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D();
path.moveTo(10, 10);
path.quadraticCurveTo(100, 100, 200, 20);
ctx.stroke(path);
}
**参数：**
| 参数 | 类型 | 描述 |
| ---- | ------ | ----------- |
| cpx | number | 贝塞尔参数的x坐标值。 |
| cpy | number | 贝塞尔参数的y坐标值。 |
| x | number | 路径结束时的x坐标值。 |
| y | number | 路径结束时的y坐标值。 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"</canvas>
</div>
```
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D();
path.moveTo(10, 10);
path.quadraticCurveTo(100, 100, 200, 20);
ctx.stroke(path);
}
}
```
![zh-cn_image_0000001173164871](figures/zh-cn_image_0000001173164871.png)
......@@ -279,35 +279,35 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
绘制弧线路径。
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| x | number | 弧线圆心的x坐标值。 |
| y | number | 弧线圆心的y坐标值。 |
| radius | number | 弧线的圆半径。 |
| startAngle | number | 弧线的起始弧度。 |
| endAngle | number | 弧线的终止弧度。 |
| anticlockwise | boolean | 是否逆时针绘制圆弧。 |
- 示例
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
```
//xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D();
path.arc(100, 75, 50, 0, 6.28);
ctx.stroke(path);
}
**参数：**
| 参数 | 类型 | 描述 |
| ------------- | ------- | ---------- |
| x | number | 弧线圆心的x坐标值。 |
| y | number | 弧线圆心的y坐标值。 |
| radius | number | 弧线的圆半径。 |
| startAngle | number | 弧线的起始弧度。 |
| endAngle | number | 弧线的终止弧度。 |
| anticlockwise | boolean | 是否逆时针绘制圆弧。 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"</canvas>
</div>
```
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D();
path.arc(100, 75, 50, 0, 6.28);
ctx.stroke(path);
}
}
```
![zh-cn_image_0000001173164867](figures/zh-cn_image_0000001173164867.png)
......@@ -319,34 +319,34 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| x1 | number | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 圆弧经过的第二个点的x坐标值。 |
| y2 | number | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 圆弧的圆半径值。 |
- 示例
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
```
//xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D();
path.arcTo(150, 20, 150, 70, 50);
ctx.stroke(path);
}
**参数：**
| 参数 | 类型 | 描述 |
| ------ | ------ | --------------- |
| x1 | number | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 圆弧经过的第二个点的x坐标值。 |
| y2 | number | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 圆弧的圆半径值。 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"</canvas>
</div>
```
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D();
path.arcTo(150, 20, 150, 70, 50);
ctx.stroke(path);
}
}
```
![zh-cn_image_0000001127125204](figures/zh-cn_image_0000001127125204.png)
......@@ -358,37 +358,37 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
在规定的矩形区域绘制一个椭圆。
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| x | number | 椭圆圆心的x轴坐标。 |
| y | number | 椭圆圆心的y轴坐标。 |
| radiusX | number | 椭圆x轴的半径长度。 |
| radiusY | number | 椭圆y轴的半径长度。 |
| rotation | number | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 椭圆绘制的结束点角度，以弧度表示。 |
| anticlockwise | number | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) |
- 示例
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 450px; background-color: #ffff00;"></canvas>
</div>
```
```
//xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx =el.getContext('2d');
var path = ctx.createPath2D();
path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1);
ctx.stroke(path);
}
**参数：**
| 参数 | 类型 | 描述 |
| ------------- | ------ | ------------------------------------ |
| x | number | 椭圆圆心的x轴坐标。 |
| y | number | 椭圆圆心的y轴坐标。 |
| radiusX | number | 椭圆x轴的半径长度。 |
| radiusY | number | 椭圆y轴的半径长度。 |
| rotation | number | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 椭圆绘制的结束点角度，以弧度表示。 |
| anticlockwise | number | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 450px; background-color: #ffff00;"</canvas>
</div>
```
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx =el.getContext('2d');
var path = ctx.createPath2D();
path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1);
ctx.stroke(path);
}
}
```
![zh-cn_image_0000001173324787](figures/zh-cn_image_0000001173324787.png)
......@@ -400,33 +400,33 @@ rect(x: number, y: number, width: number, height: number): void
创建矩形路径。
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| x | number | 指定矩形的左上角x坐标值。 |
| y | number | 指定矩形的左上角y坐标值。 |
| width | number | 指定矩形的宽度。 |
| height | number | 指定矩形的高度。 |
- 示例
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 450px; background-color: #ffff00;"></canvas>
</div>
```
```
//xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D();
path.rect(20, 20, 100, 100);
ctx.stroke(path);
}
**参数：**
| 参数 | 类型 | 描述 |
| ------ | ------ | ------------- |
| x | number | 指定矩形的左上角x坐标值。 |
| y | number | 指定矩形的左上角y坐标值。 |
| width | number | 指定矩形的宽度。 |
| height | number | 指定矩形的高度。 |
**示例：**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 450px; background-color: #ffff00;"</canvas>
</div>
```
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
var path = ctx.createPath2D();
path.rect(20, 20, 100, 100);
ctx.stroke(path);
}
}
```
![zh-cn_image_0000001127125212](figures/zh-cn_image_0000001127125212.png)
zh-cn/application-dev/reference/arkui-js/js-components-common-animation.md
浏览文件 @ cdb6cf82
# 动画样式
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
组件支持动态的旋转、平移、缩放效果，可在style或css中设置。
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| transform-origin | string<sup>6+</sup>&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;&lt;length&gt;&nbsp;string<sup>6+</sup>&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;&lt;length&gt; | center&nbsp;center | 变换对象的原点位置，支持px和百分比(相对于动画目标组件)，如果仅设置一个值，另一个值为50%，第一个string的可选值为：left&nbsp;\|&nbsp;center&nbsp;\|&nbsp;right&nbsp;，第二个string的可选值为：top&nbsp;\|&nbsp;center&nbsp;\|&nbsp;bottom。<br/>示例：<br/>transform-origin:&nbsp;200px&nbsp;30%。<br/>transform-origin:&nbsp;100px&nbsp;top。<br/>transform-origin:&nbsp;center&nbsp;center。 |
| transform | string | - | 支持同时设置平移/旋转/缩放的属性。<br/>详见表 transform操作说明。 |
| animation<sup>6+</sup> | string | 0s&nbsp;ease&nbsp;0s&nbsp;1&nbsp;normal&nbsp;none&nbsp;running&nbsp;none | 格式：duration&nbsp;\|&nbsp;timing-function&nbsp;\|&nbsp;delay&nbsp;\|&nbsp;iteration-count&nbsp;\|&nbsp;direction&nbsp;\|&nbsp;fill-mode&nbsp;\|&nbsp;play-state&nbsp;\|&nbsp;name，每个字段不区分先后，但是&nbsp;duration&nbsp;/&nbsp;delay&nbsp;按照出现的先后顺序解析。 |
| animation-name | string | - | 指定\@keyframes，详见表 @keyframes属性说明。 |
| animation-delay | &lt;time&gt; | 0 | 定义动画播放的延迟时间。支持的单位为[s(秒)\|ms(毫秒)&nbsp;]，默认单位为ms，格式为：1000ms或1s。 |
| animation-duration | &lt;time&gt; | 0 | 定义一个动画周期。支持的单位为[s(秒)\|ms(毫秒)&nbsp;]，默认单位为ms，格式为：1000ms或1s。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;animation-duration&nbsp;样式必须设置，否则时长为&nbsp;0，则不会播放动画。 |
| animation-iteration-count | number&nbsp;&nbsp;\|&nbsp;infinite | 1 | 定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。 |
| animation-timing-function | string | ease<br/> | 描述动画执行的速度曲线，用于使动画更为平滑。<br/>可选项有：<br/>-&nbsp;linear：表示动画从头到尾的速度都是相同的。<br/>-&nbsp;ease：表示动画以低速开始，然后加快，在结束前变慢，cubic-bezier(0.25,&nbsp;0.1,&nbsp;0.25,&nbsp;1.0)。<br/>-&nbsp;ease-in：表示动画以低速开始，cubic-bezier(0.42,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。<br/>-&nbsp;ease-out：表示动画以低速结束，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。<br/>-&nbsp;ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。<br/>-&nbsp;friction：阻尼曲线，cubic-bezier(0.2,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。<br/>-&nbsp;extreme-deceleration：急缓曲线，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.0,&nbsp;1.0)。<br/>-&nbsp;sharp：锐利曲线，cubic-bezier(0.33,&nbsp;0.0,&nbsp;0.67,&nbsp;1.0)。<br/>-&nbsp;rhythm：节奏曲线，cubic-bezier(0.7,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。<br/>-&nbsp;smooth：平滑曲线，cubic-bezier(0.4,&nbsp;0.0,&nbsp;0.4,&nbsp;1.0)。<br/>-&nbsp;cubic-bezier：在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。<br/>-&nbsp;steps:&nbsp;阶梯曲线<sup>6+</sup>。语法：steps(number[,&nbsp;end\|start])；number必须设置，支持的类型为正整数。第二个参数可选，表示在每个间隔的起点或是终点发生阶跃变化，支持设置end或start，默认值为end。 |
| animation-direction<sup>6+</sup> | string | normal | 指定动画的播放模式：<br/>-&nbsp;normal：&nbsp;动画正向循环播放。<br/>-&nbsp;reverse：&nbsp;动画反向循环播放。<br/>-&nbsp;alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放。<br/>-&nbsp;alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。 |
| animation-fill-mode | string | none | 指定动画开始和结束的状态：<br/>-&nbsp;none：在动画执行之前和之后都不会应用任何样式到目标上。<br/>-&nbsp;forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。<br/>-&nbsp;backwards<sup>6+</sup>：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值，当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。<br/>-&nbsp;both<sup>6+</sup>：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。 |
| animation-play-state<sup>6+</sup> | string | running | 指定动画的当前状态：<br/>-&nbsp;paused：动画状态为暂停。<br/>-&nbsp;running：动画状态为播放。 |
| transition<sup>6+</sup> | string | all&nbsp;0&nbsp;ease&nbsp;0 | 指定组件状态切换时的过渡效果，可以通过transition属性设置如下四个属性：<br/>-&nbsp;transition-property：规定设置过渡效果的&nbsp;CSS&nbsp;属性的名称，目前支持宽、高、背景色。<br/>-&nbsp;transition-duration：规定完成过渡效果需要的时间，单位秒。<br/>-&nbsp;transition-timing-function：规定过渡效果的时间曲线，支持样式动画提供的曲线。<br/>-&nbsp;transition-delay：规定过渡效果延时启动时间，单位秒。 |
| 名称 | 类型 | 默认值 | 描述 |
| --------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| transform-origin | string<sup>6+</sup>&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;&lt;length&gt;&nbsp;string<sup>6+</sup>&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;&lt;length&gt; | center&nbsp;center | 变换对象的原点位置，支持px和百分比(相对于动画目标组件)，如果仅设置一个值，另一个值为50%，第一个string的可选值为：left&nbsp;\|&nbsp;center&nbsp;\|&nbsp;right&nbsp;，第二个string的可选值为：top&nbsp;\|&nbsp;center&nbsp;\|&nbsp;bottom。<br/>示例：<br/>transform-origin:&nbsp;200px&nbsp;30%。<br/>transform-origin:&nbsp;100px&nbsp;top。<br/>transform-origin:&nbsp;center&nbsp;center。 |
| transform | string | - | 支持同时设置平移/旋转/缩放的属性。<br/>详见表 transform操作说明。 |
| animation<sup>6+</sup> | string | 0s&nbsp;ease&nbsp;0s&nbsp;1&nbsp;normal&nbsp;none&nbsp;running&nbsp;none | 格式：duration&nbsp;\|&nbsp;timing-function&nbsp;\|&nbsp;delay&nbsp;\|&nbsp;iteration-count&nbsp;\|&nbsp;direction&nbsp;\|&nbsp;fill-mode&nbsp;\|&nbsp;play-state&nbsp;\|&nbsp;name，每个字段不区分先后，但是&nbsp;duration&nbsp;/&nbsp;delay&nbsp;按照出现的先后顺序解析。 |
| animation-name | string | - | 指定\@keyframes，详见表 @keyframes属性说明。 |
| animation-delay | &lt;time&gt; | 0 | 定义动画播放的延迟时间。支持的单位为[s(秒)\|ms(毫秒)&nbsp;]，默认单位为ms，格式为：1000ms或1s。 |
| animation-duration | &lt;time&gt; | 0 | 定义一个动画周期。支持的单位为[s(秒)\|ms(毫秒)&nbsp;]，默认单位为ms，格式为：1000ms或1s。<br/>必须设置animation-duration&nbsp;样式，否则时长为&nbsp;0将不会播放动画。 |
| animation-iteration-count | number&nbsp;&nbsp;\|&nbsp;infinite | 1 | 定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。 |
| animation-timing-function | string | ease<br/> | 描述动画执行的速度曲线，用于使动画更为平滑。<br/>可选项有：<br/>-&nbsp;linear：表示动画从头到尾的速度都是相同的。<br/>-&nbsp;ease：表示动画以低速开始，然后加快，在结束前变慢，cubic-bezier(0.25,&nbsp;0.1,&nbsp;0.25,&nbsp;1.0)。<br/>-&nbsp;ease-in：表示动画以低速开始，cubic-bezier(0.42,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。<br/>-&nbsp;ease-out：表示动画以低速结束，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。<br/>-&nbsp;ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。<br/>-&nbsp;friction：阻尼曲线，cubic-bezier(0.2,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。<br/>-&nbsp;extreme-deceleration：急缓曲线，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.0,&nbsp;1.0)。<br/>-&nbsp;sharp：锐利曲线，cubic-bezier(0.33,&nbsp;0.0,&nbsp;0.67,&nbsp;1.0)。<br/>-&nbsp;rhythm：节奏曲线，cubic-bezier(0.7,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。<br/>-&nbsp;smooth：平滑曲线，cubic-bezier(0.4,&nbsp;0.0,&nbsp;0.4,&nbsp;1.0)。<br/>-&nbsp;cubic-bezier：在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。<br/>-&nbsp;steps:&nbsp;阶梯曲线<sup>6+</sup>。语法：steps(number[,&nbsp;end\|start])；number必须设置，支持的类型为正整数。第二个参数可选，表示在每个间隔的起点或是终点发生阶跃变化，支持设置end或start，默认值为end。 |
| animation-direction<sup>6+</sup> | string | normal | 指定动画的播放模式：<br/>-&nbsp;normal：&nbsp;动画正向循环播放。<br/>-&nbsp;reverse：&nbsp;动画反向循环播放。<br/>-&nbsp;alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放。<br/>-&nbsp;alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。 |
| animation-fill-mode | string | none | 指定动画开始和结束的状态：<br/>-&nbsp;none：在动画执行之前和之后都不会应用任何样式到目标上。<br/>-&nbsp;forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。<br/>-&nbsp;backwards<sup>6+</sup>：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值，当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。<br/>-&nbsp;both<sup>6+</sup>：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。 |
| animation-play-state<sup>6+</sup> | string | running | 指定动画的当前状态：<br/>-&nbsp;paused：动画状态为暂停。<br/>-&nbsp;running：动画状态为播放。 |
| transition<sup>6+</sup> | string | all&nbsp;0&nbsp;ease&nbsp;0 | 指定组件状态切换时的过渡效果，可以通过transition属性设置如下四个属性：<br/>-&nbsp;transition-property：规定设置过渡效果的&nbsp;CSS&nbsp;属性的名称，目前支持宽、高、背景色。<br/>-&nbsp;transition-duration：规定完成过渡效果需要的时间，单位秒。<br/>-&nbsp;transition-timing-function：规定过渡效果的时间曲线，支持样式动画提供的曲线。<br/>-&nbsp;transition-delay：规定过渡效果延时启动时间，单位秒。 |
**表1** transform操作说明
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| none<sup>6+</sup> | - | 不进行任何转换。 |
| matrix<sup>6+</sup> | &lt;number&gt; | 入参为六个值的矩阵，6个值分别代表：scaleX,&nbsp;skewY,&nbsp;skewX,&nbsp;scaleY,&nbsp;translateX,&nbsp;translateY。 |
| matrix3d<sup>6+</sup> | &lt;number&gt; | 入参为十六个值的4X4矩阵。 |
| translate | &lt;length&gt;\|&nbsp;&lt;percent&gt; | 平移动画属性，支持设置x轴和y轴两个维度的平移参数。 |
| translate3d<sup>6+</sup> | &lt;length&gt;\|&nbsp;&lt;percent&gt; | 三个入参，分别代表X轴、Y轴、Z轴的平移距离。 |
| translateX | &lt;length&gt;\|&nbsp;&lt;percent&gt; | X轴方向平移动画属性。 |
| translateY | &lt;length&gt;\|&nbsp;&lt;percent&gt; | Y轴方向平移动画属性。 |
| translateZ<sup>6+</sup> | &lt;length&gt;\|&nbsp;&lt;percent&gt; | Z轴的平移距离。 |
| scale | &lt;number&gt; | 缩放动画属性，支持设置x轴和y轴两个维度的缩放参数。 |
| scale3d<sup>6+</sup> | &lt;number&gt; | 三个入参，分别代表X轴、Y轴、Z轴的缩放参数。 |
| scaleX | &lt;number&gt; | X轴方向缩放动画属性。 |
| scaleY | &lt;number&gt; | Y轴方向缩放动画属性。 |
| scaleZ<sup>6+</sup> | &lt;number&gt; | Z轴的缩放参数。 |
| rotate | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt;&nbsp;\|&nbsp;&lt;grad&gt;<sup>6+</sup>&nbsp;\|&nbsp;&lt;turn&gt;6+ | 旋转动画属性，支持设置x轴和y轴两个维度的选中参数。 |
| rotate3d<sup>6+</sup> | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt;&nbsp;\|&nbsp;&lt;grad&gt;&nbsp;\|&nbsp;&lt;turn&gt; | 四个入参，前三个分别为X轴、Y轴、Z轴的旋转向量，第四个是旋转角度。 |
| rotateX | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt;&nbsp;\|&nbsp;&lt;grad&gt;<sup>6+</sup>&nbsp;\|&nbsp;&lt;turn&gt;<sup>6+</sup> | X轴方向旋转动画属性。 |
| rotateY | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt;&nbsp;\|&nbsp;&lt;grad&gt;<sup>6+</sup>&nbsp;\|&nbsp;&lt;turn&gt;<sup>6+</sup> | Y轴方向旋转动画属性。 |
| rotateZ<sup>6+</sup> | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt;&nbsp;\|&nbsp;&lt;grad&gt;&nbsp;\|&nbsp;&lt;turn&gt; | Z轴方向的旋转角度。 |
| skew<sup>6+</sup> | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt;&nbsp;\|&nbsp;&lt;grad&gt;&nbsp;\|&nbsp;&lt;turn&gt; | 两个入参，分别为X轴和Y轴的2D倾斜角度。 |
| skewX<sup>6+</sup> | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt;&nbsp;\|&nbsp;&lt;grad&gt;&nbsp;\|&nbsp;&lt;turn&gt; | X轴的2D倾斜角度。 |
| skewY<sup>6+</sup> | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt;&nbsp;\|&nbsp;&lt;grad&gt;&nbsp;\|&nbsp;&lt;turn&gt; | Y轴的2D倾斜角度。 |
| perspective<sup>6+</sup> | &lt;number&gt; | 3D透视场景下镜头距离元素表面的距离。 |
| 名称 | 类型 | 描述 |
| ------------------------ | ---------------------------------------- | ---------------------------------------- |
| none<sup>6+</sup> | - | 不进行任何转换。 |
| matrix<sup>6+</sup> | &lt;number&gt; | 入参为六个值的矩阵，6个值分别代表：scaleX,&nbsp;skewY,&nbsp;skewX,&nbsp;scaleY,&nbsp;translateX,&nbsp;translateY。 |
| matrix3d<sup>6+</sup> | &lt;number&gt; | 入参为十六个值的4X4矩阵。 |
| translate | &lt;length&gt;\|&nbsp;&lt;percent&gt; | 平移动画属性，支持设置x轴和y轴两个维度的平移参数。 |
| translate3d<sup>6+</sup> | &lt;length&gt;\|&nbsp;&lt;percent&gt; | 三个入参，分别代表X轴、Y轴、Z轴的平移距离。 |
| translateX | &lt;length&gt;\|&nbsp;&lt;percent&gt; | X轴方向平移动画属性。 |
| translateY | &lt;length&gt;\|&nbsp;&lt;percent&gt; | Y轴方向平移动画属性。 |
| translateZ<sup>6+</sup> | &lt;length&gt;\|&nbsp;&lt;percent&gt; | Z轴的平移距离。 |
| scale | &lt;number&gt; | 缩放动画属性，支持设置x轴和y轴两个维度的缩放参数。 |
| scale3d<sup>6+</sup> | &lt;number&gt; | 三个入参，分别代表X轴、Y轴、Z轴的缩放参数。 |
| scaleX | &lt;number&gt; | X轴方向缩放动画属性。 |
| scaleY | &lt;number&gt; | Y轴方向缩放动画属性。 |
| scaleZ<sup>6+</sup> | &lt;number&gt; | Z轴的缩放参数。 |
| rotate | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt;&nbsp;\|&nbsp;&lt;grad&gt;<sup>6+</sup>&nbsp;\|&nbsp;&lt;turn&gt;6+ | 旋转动画属性，支持设置x轴和y轴两个维度的选中参数。 |
| rotate3d<sup>6+</sup> | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt;&nbsp;\|&nbsp;&lt;grad&gt;&nbsp;\|&nbsp;&lt;turn&gt; | 四个入参，前三个分别为X轴、Y轴、Z轴的旋转向量，第四个是旋转角度。 |
| rotateX | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt;&nbsp;\|&nbsp;&lt;grad&gt;<sup>6+</sup>&nbsp;\|&nbsp;&lt;turn&gt;<sup>6+</sup> | X轴方向旋转动画属性。 |
| rotateY | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt;&nbsp;\|&nbsp;&lt;grad&gt;<sup>6+</sup>&nbsp;\|&nbsp;&lt;turn&gt;<sup>6+</sup> | Y轴方向旋转动画属性。 |
| rotateZ<sup>6+</sup> | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt;&nbsp;\|&nbsp;&lt;grad&gt;&nbsp;\|&nbsp;&lt;turn&gt; | Z轴方向的旋转角度。 |
| skew<sup>6+</sup> | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt;&nbsp;\|&nbsp;&lt;grad&gt;&nbsp;\|&nbsp;&lt;turn&gt; | 两个入参，分别为X轴和Y轴的2D倾斜角度。 |
| skewX<sup>6+</sup> | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt;&nbsp;\|&nbsp;&lt;grad&gt;&nbsp;\|&nbsp;&lt;turn&gt; | X轴的2D倾斜角度。 |
| skewY<sup>6+</sup> | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt;&nbsp;\|&nbsp;&lt;grad&gt;&nbsp;\|&nbsp;&lt;turn&gt; | Y轴的2D倾斜角度。 |
| perspective<sup>6+</sup> | &lt;number&gt; | 3D透视场景下镜头距离元素表面的距离。 |
**表2** @keyframes属性说明
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| background-color | &lt;color&gt; | - | 动画执行后应用到组件上的背景颜色。 |
| opacity | number | 1 | 动画执行后应用到组件上的不透明度值，为介于0到1间的数值，默认为1。 |
| width | &lt;length&gt; | - | 动画执行后应用到组件上的宽度值。 |
| height | &lt;length&gt; | - | 动画执行后应用到组件上的高度值。 |
| transform | string | - | 定义应用在组件上的变换类型，见表 transform操作说明。 |
| 名称 | 类型 | 默认值 | 描述 |
| -------------------------------- | ---------------------------------------- | ------------ | ---------------------------------------- |
| background-color | &lt;color&gt; | - | 动画执行后应用到组件上的背景颜色。 |
| opacity | number | 1 | 动画执行后应用到组件上的不透明度值，为介于0到1间的数值，默认为1。 |
| width | &lt;length&gt; | - | 动画执行后应用到组件上的宽度值。 |
| height | &lt;length&gt; | - | 动画执行后应用到组件上的高度值。 |
| transform | string | - | 定义应用在组件上的变换类型，见表 transform操作说明。 |
| background-position<sup>6+</sup> | string&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;&lt;length&gt;&nbsp;string&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;&lt;length&gt; | 50%&nbsp;50% | 背景图位置。单位支持百分比和px，第一个值是水平位置，第二个值是垂直位置。如果仅设置一个值，另一个值为50%。第一个string的可选值为：left&nbsp;\|&nbsp;center&nbsp;\|&nbsp;right&nbsp;，第二个string的可选值为：top&nbsp;\|&nbsp;center&nbsp;\|&nbsp;bottom。<br/>示例：<br/>-&nbsp;background-position:&nbsp;200px&nbsp;30%<br/>-&nbsp;background-position:&nbsp;100px&nbsp;top<br/>-&nbsp;background-position:&nbsp;center&nbsp;center |
对于不支持起始值或终止值缺省的情况，可以通过from和to显示指定起始和结束。可以通过百分比指定动画运行的中间状态<sup>6+</sup>。示例：
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="rect">
</div>
</div>
```
```
```css
/* xxx.css */
.container {
display: flex;
justify-content: center;
......@@ -103,7 +105,7 @@
![zh-cn_image_0000001173324797](figures/zh-cn_image_0000001173324797.gif)
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="simpleAnimation simpleSize" style="animation-play-state: {{playState}}"></div>
......@@ -111,7 +113,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -132,7 +134,7 @@
}
```
```
```js
// xxx.js
export default {
data: {
......@@ -152,12 +154,12 @@ export default {
![zh-cn_image_0000001127285034](figures/zh-cn_image_0000001127285034.gif)
```
```html
<!-- xxx.hml -->
<div id='img' class="img"></div>
```
```
```css
/* xxx.css */
.img {
width: 294px;
......@@ -180,14 +182,14 @@ export default {
}
```
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="content"></div>
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -212,9 +214,9 @@ export default {
![zh-cn_image_0000001152833768](figures/zh-cn_image_0000001152833768.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> @keyframes的from/to不支持动态绑定。
>
> steps函数的end和start含义如下图所示。
>
> ![zh-cn_image_0000001127125220](figures/zh-cn_image_0000001127125220.png)
> **说明：**
> @keyframes的from/to不支持动态绑定。
>
> steps函数的end和start含义如下图所示。
>
> ![zh-cn_image_0000001127125220](figures/zh-cn_image_0000001127125220.png)
zh-cn/application-dev/reference/arkui-js/js-components-common-atomic-layout.md
浏览文件 @ cdb6cf82
# 原子布局
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
在屏幕形态和规格不同等情况下，布局效果需要实现自适应，因此系统提供了面向不同屏幕尺寸界面自适应适配的布局能力，称为原子布局。设计师可以考虑使用原子能力，定义元素在不同形态的尺寸界面上体现的自适应规则。开发者可以使用原子布局能力，快速实现让应用在多形态屏幕上有与设计效果相匹配的自适应效果。
......
zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md
浏览文件 @ cdb6cf82
# 通用属性
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 常规属性
常规属性是指组件普遍支持的用来设置组件基本标识和外观显示特征的属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| id | string | - | 否 | 组件的唯一标识。 |
| style | string | - | 否 | 组件的样式声明。 |
| class | string | - | 否 | 组件的样式类，用于引用样式表。 |
| ref | string | - | 否 | 用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs&nbsp;属性对象上。 |
| disabled | boolean | false | 否 | 当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。 |
| data | string | - | 否 | 给当前组件设置data属性，进行相应的数据存储和读取。JS文件中：<br/>-&nbsp;在事件回调中使用&nbsp;e.target.attr.data&nbsp;读取数据，e为事件回调函数入参。<br/>-&nbsp;使用`$element`或者`$refs`获取DOM元素后，通过attr.data&nbsp;进行访问。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;从API&nbsp;Version&nbsp;6&nbsp;开始，建议使用data-\*。 |
| data-\*<sup>6+</sup> | string | - | 否 | 给当前组件设置data-\*属性，进行相应的数据存储和读取。大小写不敏感，如data-A和data-a默认相同。JS文件中：<br/>-&nbsp;在事件回调中使用&nbsp;e.target.dataSet.a读取数据，e为事件回调函数入参。<br/>-&nbsp;使用`$element`或者`$refs`获取DOM元素后，通过dataSet.a进行访问。 |
| click-effect<sup>5+</sup> | string | - | 否 | 通过这个属性可以设置组件的弹性点击效果，当前支持如下三种效果：<br/>-&nbsp;spring-small：建议小面积组件设置，缩放(90%)。<br/>-&nbsp;spring-medium：建议中面积组件设置，缩放(95%)。<br/>-&nbsp;spring-large：建议大面积组件设置，缩放(95%)。 |
| dir<sup>6+</sup> | string | auto | 否 | 设置元素布局模式，支持设置rtl、ltr和auto三种属性值：<br/>-&nbsp;rtl：使用从右往左布局模式。<br/>-&nbsp;ltr：使用从左往右布局模式。<br/>-&nbsp;auto：跟随系统语言环境。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------------- | ------- | ----- | ---- | ---------------------------------------- |
| id | string | - | 否 | 组件的唯一标识。 |
| style | string | - | 否 | 组件的样式声明。 |
| class | string | - | 否 | 组件的样式类，用于引用样式表。 |
| ref | string | - | 否 | 用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs&nbsp;属性对象上。 |
| disabled | boolean | false | 否 | 当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。 |
| data | string | - | 否 | 给当前组件设置data属性，进行相应的数据存储和读取。JS文件中：<br/>-&nbsp;在事件回调中使用&nbsp;e.target.attr.data&nbsp;读取数据，e为事件回调函数入参。<br/>-&nbsp;使用`$element`或者`$refs`获取DOM元素后，通过attr.data&nbsp;进行访问。<br/>从API&nbsp;Version&nbsp;6&nbsp;开始，建议使用data-\*。 |
| data-\*<sup>6+</sup> | string | - | 否 | 给当前组件设置data-\*属性，进行相应的数据存储和读取。大小写不敏感，如data-A和data-a默认相同。JS文件中：<br/>-&nbsp;在事件回调中使用&nbsp;e.target.dataSet.a读取数据，e为事件回调函数入参。<br/>-&nbsp;使用`$element`或者`$refs`获取DOM元素后，通过dataSet.a进行访问。 |
| click-effect<sup>5+</sup> | string | - | 否 | 通过这个属性可以设置组件的弹性点击效果，当前支持如下三种效果：<br/>-&nbsp;spring-small：建议小面积组件设置，缩放(90%)。<br/>-&nbsp;spring-medium：建议中面积组件设置，缩放(95%)。<br/>-&nbsp;spring-large：建议大面积组件设置，缩放(95%)。 |
| dir<sup>6+</sup> | string | auto | 否 | 设置元素布局模式，支持设置rtl、ltr和auto三种属性值：<br/>-&nbsp;rtl：使用从右往左布局模式。<br/>-&nbsp;ltr：使用从左往右布局模式。<br/>-&nbsp;auto：跟随系统语言环境。 |
## 渲染属性
渲染属性是指组件普遍支持的用来设置组件是否渲染的属性。
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| for | Array | - | 根据设置的数据列表，展开当前元素。 |
| if | boolean | - | 根据设置的boolean值，添加或移除当前元素。 |
| show | boolean | - | 根据设置的boolean值，显示或隐藏当前元素。 |
| 名称 | 类型 | 默认值 | 描述 |
| ---- | ------- | ---- | ------------------------ |
| for | Array | - | 根据设置的数据列表，展开当前元素。 |
| if | boolean | - | 根据设置的boolean值，添加或移除当前元素。 |
| show | boolean | - | 根据设置的boolean值，显示或隐藏当前元素。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 属性和样式不能混用，不能在属性字段中进行样式设置。
> **说明：**
> 属性和样式不能混用，不能在属性字段中进行样式设置。
zh-cn/application-dev/reference/arkui-js/js-components-common-customizing-font.md
浏览文件 @ cdb6cf82
# 自定义字体样式
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
font-face用于定义字体样式。应用可以在style中定义font-face来指定相应的字体名和字体资源，然后在font-family样式中引用该字体。
......@@ -38,7 +38,8 @@ font-face用于定义字体样式。应用可以在style中定义font-face来指
**示例：**
页面布局：
```
```html
<!-- xxx.hml -->
<div>
<text class="demo-text">测试自定义字体</text>
</div>
......@@ -46,7 +47,7 @@ font-face用于定义字体样式。应用可以在style中定义font-face来指
页面样式：
```
```css
@font-face {
font-family: HWfont;
src: url("/common/HWfont.ttf");
......
zh-cn/application-dev/reference/arkui-js/js-components-common-events.md
浏览文件 @ cdb6cf82
# 通用事件
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 事件说明
......@@ -13,42 +13,42 @@
相对于私有事件，大部分组件都可以绑定如下事件。
| 名称 | 参数 | 描述 | 是否支持冒泡 |
| ------------------------ | ---------- | ---------------------------------------- | -------------- |
| touchstart | TouchEvent | 手指刚触摸屏幕时触发该事件。<br>> **说明：** TouchEvent具体可参考表2 TouchEvent对象属性列表 | 是<sup>5+</sup> |
| touchmove | TouchEvent | 手指触摸屏幕后移动时触发该事件。 | 是<sup>5+</sup> |
| touchcancel | TouchEvent | 手指触摸屏幕中动作被打断时触发该事件。 | 是<sup>5+</sup> |
| touchend | TouchEvent | 手指触摸结束离开屏幕时触发该事件。 | 是<sup>5+</sup> |
| click | - | 点击动作触发该事件。 | 是<sup>6+</sup> |
| doubleclick<sup>7+</sup> | - | 双击动作触发该事件 | 否<br/>**说明：** 从API&nbsp;Version&nbsp;9&nbsp;开始支持冒泡。 |
| longpress | - | 长按动作触发该事件。 | 否<br/>**说明：** 从API&nbsp;Version&nbsp;9&nbsp;开始支持冒泡。 |
| swipe<sup>5+</sup> | SwipeEvent | 组件上快速滑动后触发该事件。<br/>> **说明：** SwipeEvent具体可参考表4 SwipeEvent 基础事件对象属性列表 | 否<br/>**说明：** 从API&nbsp;Version&nbsp;9&nbsp;开始支持冒泡。|
| attached<sup>6+</sup> | - | 当前组件节点挂载在渲染树后触发。 | 否 |
| detached<sup>6+</sup> | - | 当前组件节点从渲染树中移除后触发。 | 否 |
| pinchstart<sup>7+</sup> | PinchEvent | 手指开始执行捏合操作时触发该事件。<br/>> **说明：** PinchEvent具体可参考表5 PinchEvent 对象属性列表 | 否 |
| pinchupdate<sup>7+</sup> | PinchEvent | 手指执行捏合操作过程中触发该事件。 | 否 |
| pinchend<sup>7+</sup> | PinchEvent | 手指捏合操作结束离开屏幕时触发该事件。 | 否 |
| pinchcancel<sup>7+</sup> | PinchEvent | 手指捏合操作被打断时触发该事件。 | 否 |
| dragstart<sup>7+</sup> | DragEvent | 用户开始拖拽时触发该事件。<br/>> **说明：** DragEvent具体可参考表6 DragEvent对象属性列表 | 否 |
| drag<sup>7+</sup> | DragEvent | 拖拽过程中触发该事件。 | 否 |
| dragend<sup>7+</sup> | DragEvent | 用户拖拽完成后触发。 | 否 |
| dragenter<sup>7+</sup> | DragEvent | 进入释放目标时触发该事件。 | 否 |
| dragover<sup>7+</sup> | DragEvent | 在释放目标内拖动时触发。 | 否 |
| dragleave<sup>7+</sup> | DragEvent | 离开释放目标区域时触发。 | 否 |
| drop<sup>7+</sup> | DragEvent | 在可释放目标区域内释放时触发。 | 否 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 除上述事件外，其他事件均为非冒泡事件，如[input的change事件](../arkui-js/js-components-basic-input.md#事件)，详见各个组件。
| 名称 | 参数 | 描述 | 是否支持冒泡 |
| ------------------------ | ---------- | ---------------------------------------- | ---------------------------------------- |
| touchstart | TouchEvent | 手指刚触摸屏幕时触发该事件。TouchEvent具体可参考表2 。 | 是<sup>5+</sup> |
| touchmove | TouchEvent | 手指触摸屏幕后移动时触发该事件。 | 是<sup>5+</sup> |
| touchcancel | TouchEvent | 手指触摸屏幕中动作被打断时触发该事件。 | 是<sup>5+</sup> |
| touchend | TouchEvent | 手指触摸结束离开屏幕时触发该事件。 | 是<sup>5+</sup> |
| click | - | 点击动作触发该事件。 | 是<sup>6+</sup> |
| doubleclick<sup>7+</sup> | - | 双击动作触发该事件 | 否<br/> 从API&nbsp;Version&nbsp;9&nbsp;开始支持冒泡。 |
| longpress | - | 长按动作触发该事件。 | 否<br/>从API&nbsp;Version&nbsp;9&nbsp;开始支持冒泡。 |
| swipe<sup>5+</sup> | SwipeEvent | 组件上快速滑动后触发该事件。 SwipeEvent具体可参考表4 。 | 否<br/>从API&nbsp;Version&nbsp;9&nbsp;开始支持冒泡。 |
| attached<sup>6+</sup> | - | 当前组件节点挂载在渲染树后触发。 | 否 |
| detached<sup>6+</sup> | - | 当前组件节点从渲染树中移除后触发。 | 否 |
| pinchstart<sup>7+</sup> | PinchEvent | 手指开始执行捏合操作时触发该事件。<br/>PinchEvent具体可参考表5。 | 否 |
| pinchupdate<sup>7+</sup> | PinchEvent | 手指执行捏合操作过程中触发该事件。 | 否 |
| pinchend<sup>7+</sup> | PinchEvent | 手指捏合操作结束离开屏幕时触发该事件。 | 否 |
| pinchcancel<sup>7+</sup> | PinchEvent | 手指捏合操作被打断时触发该事件。 | 否 |
| dragstart<sup>7+</sup> | DragEvent | 用户开始拖拽时触发该事件。<br/>DragEvent具体可参考表6。 | 否 |
| drag<sup>7+</sup> | DragEvent | 拖拽过程中触发该事件。 | 否 |
| dragend<sup>7+</sup> | DragEvent | 用户拖拽完成后触发。 | 否 |
| dragenter<sup>7+</sup> | DragEvent | 进入释放目标时触发该事件。 | 否 |
| dragover<sup>7+</sup> | DragEvent | 在释放目标内拖动时触发。 | 否 |
| dragleave<sup>7+</sup> | DragEvent | 离开释放目标区域时触发。 | 否 |
| drop<sup>7+</sup> | DragEvent | 在可释放目标区域内释放时触发。 | 否 |
> **说明：**
> 除上述事件外，其他事件均为非冒泡事件，如[input的change事件](../arkui-js/js-components-basic-input.md#事件)，详见各个组件。
**表1** BaseEvent对象属性列表
| 属性 | 类型 | 说明 |
| --------- | ------ | --------------------------- |
| type | string | 当前事件的类型，比如click、longpress等。 |
| timestamp | number | 该事件触发时的时间戳。 |
| deviceId<sup>6+</sup> | number | 触发该事件的设备ID信息。|
| target<sup>6+</sup> | [Target](#target对象6) | 触发该事件的目标对象。|
| 属性 | 类型 | 说明 |
| --------------------- | -------------------- | --------------------------- |
| type | string | 当前事件的类型，比如click、longpress等。 |
| timestamp | number | 该事件触发时的时间戳。 |
| deviceId<sup>6+</sup> | number | 触发该事件的设备ID信息。 |
| target<sup>6+</sup> | [Target](#target对象6) | 触发该事件的目标对象。 |
**表2** TouchEvent对象属性列表(继承BaseEvent)
......@@ -72,7 +72,7 @@
| 属性 | 类型 | 说明 |
| --------------------- | ------ | ---------------------------------------- |
| direction | string | 滑动方向，可能值有：<br/>1.&nbsp;left：向左滑动；<br/>2.&nbsp;right：向右滑动；<br/>3.&nbsp;up：向上滑动；<br/>4.&nbsp;down：向下滑动。 |
| direction | string | 滑动方向，可能值有：<br/>- &nbsp;left：向左滑动；<br/>- &nbsp;right：向右滑动；<br/>- &nbsp;up：向上滑动；<br/>- &nbsp;down：向下滑动。 |
| distance<sup>6+</sup> | number | 在滑动方向上的滑动距离。 |
**表5** PinchEvent 对象属性列表<sup>7+</sup>
......@@ -85,13 +85,13 @@
**表6** DragEvent对象属性列表(继承BaseEvent)<sup>7+</sup>
| 属性 | 类型 | 说明 |
| ------------ | ------------ | -------------------------------- |
| type | string | 事件名称。 |
| globalX | number | 距离屏幕左上角坐标原点横向距离。 |
| globalY | number | 距离屏幕左上角坐标原点纵向距离。 |
| timestamp | number | 时间戳。 |
| dataTransfer<sup>9+</sup> | [DataTransfer](#datatransfer对象9) | 用于传输数据。 |
| 属性 | 类型 | 说明 |
| ------------------------- | -------------------------------- | ---------------- |
| type | string | 事件名称。 |
| globalX | number | 距离屏幕左上角坐标原点横向距离。 |
| globalY | number | 距离屏幕左上角坐标原点纵向距离。 |
| timestamp | number | 时间戳。 |
| dataTransfer<sup>9+</sup> | [DataTransfer](#datatransfer对象9) | 用于传输数据。 |
## Target对象<sup>6+</sup>
......@@ -105,7 +105,7 @@
**示例：**
```
```html
<!-- xxx.hml -->
<div>
<div data-a="dataA" data-b="dataB"
......@@ -113,7 +113,7 @@
</div>
```
```
```js
// xxx.js
export default {
touchstartfunc(msg) {
......@@ -133,137 +133,136 @@ setData(key: string, value: object): boolean
设置给定key关联的数据。如果没有与该key关联的数据，则将其添加到末尾。如果该key关联的数据已经存在，则在相同位置替换现有数据。
- 参数：
| 参数名 | 参数类型 | 必填 | 描述 |
| ------ | -------- | ---- | ----------------------- |
| key | string | 是 | 数据建值。 |
| value | object | 是 | 要存储的数据。 |
- 返回值：
| 类型 | 说明 |
| ------ | -------- |
| boolean | 执行结果，true表示成功，false表示失败。 |
- 示例：
```js
// setData的value参数，可以是基本数据类型。
dragStart(e) {
var isSetOk = e.dataTransfer.setData('name', 1);
},
// setData的value参数，也可以是对象类型。
dragStart(e) {
var person = new Object();
person.name = "tom";
person.age = 21;
var isSetOk = e.dataTransfer.setData('person', person);
}
```
**参数：**
| 参数名 | 参数类型 | 必填 | 描述 |
| ----- | ------ | ---- | ------- |
| key | string | 是 | 数据建值。 |
| value | object | 是 | 要存储的数据。 |
**返回值：**
| 类型 | 说明 |
| ------- | ------------------------ |
| boolean | 执行结果，true表示成功，false表示失败。 |
**示例：**
```js
// setData的value参数，可以是基本数据类型。
dragStart(e) {
var isSetOk = e.dataTransfer.setData('name', 1);
},
// setData的value参数，也可以是对象类型。
dragStart(e) {
var person = new Object();
person.name = "tom";
person.age = 21;
var isSetOk = e.dataTransfer.setData('person', person);
}
```
### getData<sup>9+</sup>
getData(key: string): object
获取给定key关联的数据，如果没有与该key关联的数据，则返回空字符串。
- 参数：
| 参数名 | 参数类型 | 必填 | 描述 |
| ------ | -------- | ---- | -------------------------- |
| key | string | 是 | 数据建值。 |
- 返回值：
| 类型 | 说明 |
| ------ | -------- |
| object | 获取的数据。 |
- 示例：
```js
dragStart(e) {
var person = new Object();
person.name = "tom";
person.age = 21;
e.dataTransfer.setData('person', person);
},
dragEnd(e){
var person = e.dataTransfer.getData('person');
},
```
**参数：**
| 参数名 | 参数类型 | 必填 | 描述 |
| ---- | ------ | ---- | ----- |
| key | string | 是 | 数据建值。 |
**返回值：**
| 类型 | 说明 |
| ------ | ------ |
| object | 获取的数据。 |
**示例：**
```js
dragStart(e) {
var person = new Object();
person.name = "tom";
person.age = 21;
e.dataTransfer.setData('person', person);
},
dragEnd(e){
var person = e.dataTransfer.getData('person');
},
```
### clearData<sup>9+</sup>
clearData(key?: string): boolean
删除给定key关联的数据。如果没有与该key关联的数据，则该方法不会产生任何效果。
如果key为空，则删除所有数据。
- 参数：
| 参数名 | 参数类型 | 必填 | 描述 |
| ------ | -------- | ---- | ------------------------------------------ |
| key | string | 否 | 数据建值。 |
**参数：**
- 返回值：
| 类型 | 说明 |
| ------ | -------- |
| boolean | 执行结果，true表示成功，false表示失败。 |
| 参数名 | 参数类型 | 必填 | 描述 |
| ---- | ------ | ---- | ----- |
| key | string | 否 | 数据建值。 |
- 示例：
**返回值：**
| 类型 | 说明 |
| ------- | ------------------------ |
| boolean | 执行结果，true表示成功，false表示失败。 |
```js
dragEnd(e) {
var isSuccess = e.dataTransfer.clearData('name');
}
```
**示例：**
```js
dragEnd(e) {
var isSuccess = e.dataTransfer.clearData('name');
}
```
### setDragImage<sup>9+</sup>
setDragImage(pixelmap: PixelMap, offsetX: number,offsetY: number): boolean
用于设置自定义的拖动图像。
- 参数：
| 参数名 | 参数类型 | 必填 | 描述 |
| -------- | -------- | ---- | ------------------------------------------------------------ |
| pixelmap | PixelMap | 是 | pixelmap为前端传入的图片资源，请参考[PixelMap对象](../apis/js-apis-image.md#pixelmap7)。 |
| offsetX | number | 是 | 相对于图片的横向偏移量。 |
| offsetY | number | 是 | 相对于图片的纵向偏移量 。 |
- 返回值：
| 类型 | 说明 |
| ------ | -------- |
| bool | 执行结果，true表示成功，false表示失败。 |
- 示例：
```js
createPixelMap() {
let color = new ArrayBuffer(4*96*96);
var buffer = new Uint8Array(color);
for (var i = 0; i < buffer.length; i++) {
buffer[i] = (i + 1) % 255;
}
let opts = {
alphaType:0,
editable:true,
pixelFormat:4,
scaleMode:1,
size:{height:96,width:96}
}
const promise = image.createPixelMap(color,opts);
promise.then((data)=> {
console.error('-create pixmap has info message:' + JSON.stringify(data));
this.pixelMap = data;
this.pixelMapReader = data;
})
},
onInit() {
this.createPixelMap
},
dragStart(e) {
e.dataTransfer.setDragImage(this.pixelMapReader, 50, 50);
**参数：**
| 参数名 | 参数类型 | 必填 | 描述 |
| -------- | -------- | ---- | ---------------------------------------- |
| pixelmap | PixelMap | 是 | pixelmap为前端传入的图片资源，请参考[PixelMap对象](../apis/js-apis-image.md#pixelmap7)。 |
| offsetX | number | 是 | 相对于图片的横向偏移量。 |
| offsetY | number | 是 | 相对于图片的纵向偏移量 。 |
**返回值：**
| 类型 | 说明 |
| ---- | ------------------------ |
| bool | 执行结果，true表示成功，false表示失败。 |
**示例：**
```js
createPixelMap() {
let color = new ArrayBuffer(4*96*96);
var buffer = new Uint8Array(color);
for (var i = 0; i < buffer.length; i++) {
buffer[i] = (i + 1) % 255;
}
```
let opts = {
alphaType:0,
editable:true,
pixelFormat:4,
scaleMode:1,
size:{height:96,width:96}
}
const promise = image.createPixelMap(color,opts);
promise.then((data)=> {
console.error('-create pixmap has info message:' + JSON.stringify(data));
this.pixelMap = data;
this.pixelMapReader = data;
})
},
onInit() {
this.createPixelMap
},
dragStart(e) {
e.dataTransfer.setDragImage(this.pixelMapReader, 50, 50);
}
```
\ No newline at end of file
zh-cn/application-dev/reference/arkui-js/js-components-common-gradient.md
浏览文件 @ cdb6cf82
# 渐变样式
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
组件普遍支持的在style或css中设置的 可以平稳过渡两个或多个指定的颜色。
......@@ -31,49 +31,53 @@ background: repeating-linear-gradient(direction/angle, color, color, ...);
支持以下四种方式：\#ff0000、\#ffff0000、rgb(255, 0, 0)、rgba(255, 0, 0, 1)，需要指定至少两种颜色。
- 参数
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| direction | to&nbsp;&lt;side-or-corner&gt;&nbsp;&nbsp;&lt;side-or-corner&gt;&nbsp;=&nbsp;[left&nbsp;\|&nbsp;right]&nbsp;\|\|&nbsp;[top&nbsp;\|&nbsp;bottom] | to&nbsp;bottom&nbsp;(由上到下渐变) | 否 | 指定过渡方向，如：to&nbsp;left&nbsp;(从右向左渐变)&nbsp;&nbsp;；或者<br/>to&nbsp;bottom&nbsp;right&nbsp;(从左上角到右下角)。 |
| angle | &lt;deg&gt; | 180deg | 否 | 指定过渡方向，以元素几何中心为坐标原点，水平方向为X轴，angle指定了渐变线与Y轴的夹角(顺时针方向)。 |
| color | &lt;color&gt;&nbsp;[&lt;length&gt;\|&lt;percentage&gt;] | - | 是 | 定义使用渐变样式区域内颜色的渐变效果。 |
**参数：**
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- |
| direction | to&nbsp;&lt;side-or-corner&gt;&nbsp;&nbsp;&lt;side-or-corner&gt;&nbsp;=&nbsp;[left&nbsp;\|&nbsp;right]&nbsp;\|\|&nbsp;[top&nbsp;\|&nbsp;bottom] | to&nbsp;bottom&nbsp;(由上到下渐变) | 否 | 指定过渡方向，如：to&nbsp;left&nbsp;(从右向左渐变)&nbsp;&nbsp;；或者<br/>to&nbsp;bottom&nbsp;right&nbsp;(从左上角到右下角)。 |
| angle | &lt;deg&gt; | 180deg | 否 | 指定过渡方向，以元素几何中心为坐标原点，水平方向为X轴，angle指定了渐变线与Y轴的夹角(顺时针方向)。 |
| color | &lt;color&gt;&nbsp;[&lt;length&gt;\|&lt;percentage&gt;] | - | 是 | 定义使用渐变样式区域内颜色的渐变效果。 |
- 示例
1. 默认渐变方向为从上向下渐变
```
#gradient {
height: 300px;
width: 600px;
/* 从顶部开始向底部由红色向绿色渐变 */
background: linear-gradient(red, #00ff00);
}
```
**示例：**
1. 默认渐变方向为从上向下渐变。
![zh-cn_image_0000001190934502](figures/zh-cn_image_0000001190934502.png)
```css
#gradient {
height: 300px;
width: 600px;
/* 从顶部开始向底部由红色向绿色渐变 */
background: linear-gradient(red, #00ff00);
}
```
2. 45度夹角渐变
​
![zh-cn_image_0000001190934502](figures/zh-cn_image_0000001190934502.png)
```
/* 45度夹角，从红色渐变到绿色 */
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
```
2. 45度夹角渐变。
![zh-cn_image_0000001189854534](figures/zh-cn_image_0000001189854534.png)
```css
/* 45度夹角，从红色渐变到绿色 */
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
```
3. 设置方向从左向右渐变
​
```
/* 从左向右渐变，在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
```
![zh-cn_image_0000001189854534](figures/zh-cn_image_0000001189854534.png)
![zh-cn_image_0000001236694521](figures/zh-cn_image_0000001236694521.png)
3. 设置方向从左向右渐变。
4. 重复渐变
```css
/* 从左向右渐变，在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
```
```
/* 从左向右重复渐变，重复渐变区域30px（60-30）透明度0.5 */
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
```
![zh-cn_image_0000001236694521](figures/zh-cn_image_0000001236694521.png)
![zh-cn_image_0000001237134475](figures/zh-cn_image_0000001237134475.png)
4. 重复渐变。
```css
/* 从左向右重复渐变，重复渐变区域30px（60-30）透明度0.5 */
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
```
![zh-cn_image_0000001237134475](figures/zh-cn_image_0000001237134475.png)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-js/js-components-common-mediaquery.md
浏览文件 @ cdb6cf82
# 媒体查询
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
>
> - 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> - 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - media属性值默认为设备的真实尺寸大小、物理像素和真实的屏幕分辨率。请勿与以720px为基准的项目配置宽度px混淆。
> - media属性值默认为设备的真实尺寸大小、物理像素和真实的屏幕分辨率。请勿与以720px为基准的项目配置宽度px混淆。
媒体查询（Media Query）在移动设备上应用十分广泛，开发者经常需要根据设备的大致类型或者特定的特征和设备参数（例如屏幕分辨率）来修改应用的样式。为此媒体查询提供了如下功能：
......@@ -17,7 +17,7 @@
## CSS语法规则
使用\@media来引入查询语句，具体规则如下：
使用@media来引入查询语句，具体规则如下：
```
@media [media-type] [and|not|only] [(media-feature)] {
......@@ -25,20 +25,18 @@
}
```
例子：
@media screen and (round-screen: true) { … } ： 当设备屏幕是圆形时条件成立
\@media screen and (round-screen: true) { … } // 当设备屏幕是圆形时条件成立
@media (max-height: 800) { … } ：范围查询，CSS level 3 写法
\@media (max-height: 800) { … } // 范围查询，CSS level 3 写法
@media (height &lt;= 800) { … } ：范围查询，CSS level 4 写法，与CSS level3写法等价
\@media (height &lt;= 800) { … } // 范围查询，CSS level 4 写法，与CSS level3写法等价
\@media screen and (device-type: tv) or (resolution &lt; 2) { … } // 同时包含媒体类型和多个媒体特征的多条件复杂语句查询
@media screen and (device-type: tv) or (resolution &lt; 2) { … } ： 同时包含媒体类型和多个媒体特征的多条件复杂语句查询
## 页面中引用资源
通过\@import方式引入媒体查询，具体使用方法如下：
通过@import方式引入媒体查询，具体使用方法如下：
```
@import url [media-type] [and|not|only] [(media-feature)];
......@@ -53,8 +51,8 @@
## 媒体类型
| 类型 | 说明 |
| -------- | -------- |
| 类型 | 说明 |
| ------ | -------------- |
| screen | 按屏幕相关参数进行媒体查询。 |
......@@ -64,58 +62,58 @@
**表1** 媒体逻辑操作符
| 类型 | 说明 |
| -------- | -------- |
| and | 将多个媒体特征（Media&nbsp;Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。<br/>例如：screen&nbsp;and&nbsp;(device-type:&nbsp;wearable)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。 |
| not | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。<br/>例如：not&nbsp;screen&nbsp;and&nbsp;(min-height:&nbsp;50)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当应用高度小于50个像素单位或者大于600个像素单位时成立。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用not运算符时必须指定媒体类型。 |
| only | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：<br/>screen&nbsp;and&nbsp;(min-height:&nbsp;50)<br/>老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用only时必须指定媒体类型。 |
| 类型 | 说明 |
| -------- | ---------------------------------------- |
| and | 将多个媒体特征（Media&nbsp;Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。<br/>例如：screen&nbsp;and&nbsp;(device-type:&nbsp;wearable)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。 |
| not | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。<br/>例如：not&nbsp;screen&nbsp;and&nbsp;(min-height:&nbsp;50)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当应用高度小于50个像素单位或者大于600个像素单位时成立。<br/>使用not运算符时必须指定媒体类型。 |
| only | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：<br/>screen&nbsp;and&nbsp;(min-height:&nbsp;50)<br/>老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。<br/>使用only时必须指定媒体类型。 |
| ,(comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。<br/>例如：screen&nbsp;and&nbsp;(min-height:&nbsp;1000),&nbsp;&nbsp;（round-screen：true）&nbsp;表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
| or | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。<br/>例如：screen&nbsp;and&nbsp;(max-height:&nbsp;1000)&nbsp;or&nbsp;&nbsp;（round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
| or | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。<br/>例如：screen&nbsp;and&nbsp;(max-height:&nbsp;1000)&nbsp;or&nbsp;&nbsp;（round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
在MediaQuery Level 4中引入了范围查询，使其能够使用max-，min-的同时，也支持了&lt;=，&gt;=，&lt;，&gt;操作符。
**表2** 媒体逻辑范围操作符
| 类型 | 说明 |
| -------- | -------- |
| 类型 | 说明 |
| ----- | ---------------------------------------- |
| &lt;= | 小于等于，例如：screen&nbsp;and&nbsp;(height&nbsp;&lt;=&nbsp;50)。 |
| &gt;= | 大于等于，例如：screen&nbsp;and&nbsp;(height&nbsp;&gt;=&nbsp;600)。 |
| &lt; | 小于，例如：screen&nbsp;and&nbsp;(height&nbsp;&lt;&nbsp;50)。 |
| &gt; | 大于，例如：screen&nbsp;and&nbsp;(height&nbsp;&gt;&nbsp;600)。 |
| &lt; | 小于，例如：screen&nbsp;and&nbsp;(height&nbsp;&lt;&nbsp;50)。 |
| &gt; | 大于，例如：screen&nbsp;and&nbsp;(height&nbsp;&gt;&nbsp;600)。 |
## 媒体特征
| 类型 | 说明 |
| -------- | -------- |
| height | 应用页面显示区域的高度。 |
| min-height | 应用页面显示区域的最小高度。 |
| max-height | 应用页面显示区域的最大高度。 |
| width | 应用页面显示区域的宽度。 |
| min-width | 应用页面显示区域的最小宽度。 |
| max-width | 应用页面显示区域的最大宽度。 |
| resolution | 设备的分辨率，支持dpi，dppx和dpcm单位。其中：<br/>-&nbsp;dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm；<br/>-&nbsp;dpcm表示每厘米上的物理像素个数，1dpcm&nbsp;≈&nbsp;2.54dpi；<br/>-&nbsp;dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx&nbsp;=&nbsp;96dpi。 |
| min-resolution | 设备的最小分辨率。 |
| max-resolution | 设备的最大分辨率。 |
| orientation | 屏幕的方向。<br/>可选值：<br/>-&nbsp;orientation:&nbsp;portrait（设备竖屏）<br/>-&nbsp;orientation:&nbsp;landscape（设备横屏） |
| aspect-ratio | 应用页面显示区域的宽度与高度的比值。<br/>例如：aspect-ratio:1/2 |
| min-aspect-ratio | 应用页面显示区域的宽度与高度的最小比值。 |
| max-aspect-ratio | 应用页面显示区域的宽度与高度的最大比值。 |
| device-height | 设备的高度。 |
| min-device-height | 设备的最小高度。 |
| max-device-height | 设备的最大高度。 |
| device-width | 设备的宽度。 |
| min-device-width | 设备的最小宽度。 |
| max-device-width | 设备的最大宽度。 |
| round-screen | 屏幕类型，圆形屏幕为true，&nbsp;非圆形屏幕为&nbsp;false。 |
| dark-mode<sup>6+</sup> | 系统为深色模式时为true，否则为false。 |
| 类型 | 说明 |
| ---------------------- | ---------------------------------------- |
| height | 应用页面显示区域的高度。 |
| min-height | 应用页面显示区域的最小高度。 |
| max-height | 应用页面显示区域的最大高度。 |
| width | 应用页面显示区域的宽度。 |
| min-width | 应用页面显示区域的最小宽度。 |
| max-width | 应用页面显示区域的最大宽度。 |
| resolution | 设备的分辨率，支持dpi，dppx和dpcm单位。其中：<br/>-&nbsp;dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm；<br/>-&nbsp;dpcm表示每厘米上的物理像素个数，1dpcm&nbsp;≈&nbsp;2.54dpi；<br/>-&nbsp;dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx&nbsp;=&nbsp;96dpi。 |
| min-resolution | 设备的最小分辨率。 |
| max-resolution | 设备的最大分辨率。 |
| orientation | 屏幕的方向。<br/>可选值：<br/>-&nbsp;orientation:&nbsp;portrait（设备竖屏）<br/>-&nbsp;orientation:&nbsp;landscape（设备横屏） |
| aspect-ratio | 应用页面显示区域的宽度与高度的比值。<br/>例如：aspect-ratio:1/2 |
| min-aspect-ratio | 应用页面显示区域的宽度与高度的最小比值。 |
| max-aspect-ratio | 应用页面显示区域的宽度与高度的最大比值。 |
| device-height | 设备的高度。 |
| min-device-height | 设备的最小高度。 |
| max-device-height | 设备的最大高度。 |
| device-width | 设备的宽度。 |
| min-device-width | 设备的最小宽度。 |
| max-device-width | 设备的最大宽度。 |
| round-screen | 屏幕类型，圆形屏幕为true，&nbsp;非圆形屏幕为&nbsp;false。 |
| dark-mode<sup>6+</sup> | 系统为深色模式时为true，否则为false。 |
## 示例代码
- 通用媒体特征示例代码：
```
```html
<!-- xxx.hml -->
<div>
<div class="container">
......@@ -124,7 +122,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
width: 300px;
......
zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md
浏览文件 @ cdb6cf82
# 通用方法
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
当组件通过id属性标识后，可以使用该id获取组件对象并调用相关组件方法。
......@@ -10,184 +10,183 @@
animate( keyframes: Keyframes, options: Options)：void
- 参数
| 参数名 | 参数类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| keyframes | keyframes | 是 | 设置动画样式 |
| options | Options | 是 | 用于设置动画属性的对象列表。options请见表3 Options说明。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 描述 |
| --------- | --------- | ---- | ------------------------------------ |
| keyframes | keyframes | 是 | 设置动画样式 |
| options | Options | 是 | 用于设置动画属性的对象列表。options请见表3 Options说明。 |
**表1** keyframes
| 属性 | 类型 | 说明 |
| -------- | -------- | -------- |
| frames | Array&lt;Style&gt; | 用于设置动画样式的对象列表。Style类型说明请见表2 Style类型说明。 |
| 属性 | 类型 | 说明 |
| ------ | ------------------ | -------------------------------------- |
| frames | Array&lt;Style&gt; | 用于设置动画样式的对象列表。Style类型说明请见表2 Style类型说明。 |
**表2** Style类型说明
| 参数 | 类型 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- |
| width | number | - | 动画执行过程中设置到组件上的宽度值。 |
| height | number | - | 动画执行过程中设置到组件上的高度值。 |
| backgroundColor | &lt;color&gt; | none | 动画执行过程中设置到组件上的背景颜色。 |
| opacity | number | 1 | 设置到组件上的透明度（介于0到1之间）。 |
| backgroundPosition | string | - | 格式为"x&nbsp;y"，单位为百分号或者px。<br/>第一个值是水平位置，第二个值是垂直位置。<br/>如果仅规定了一个值，另一个值为&nbsp;50%。 |
| transformOrigin | string | 'center&nbsp;center' | 变换对象的中心点。<br/>第一个参数表示x轴的值，可以设置为left、center、right、长度值或百分比值。<br/>第二个参数表示y轴的值，可以设置为top、center、bottom、长度值或百分比值。 |
| transform | [Transform](../arkui-js/js-components-common-animation.md) | - | 设置到变换对象上的类型。 |
| offset | number | - | -&nbsp;offset值（如果提供）必须在0.0到1.0（含）之间，并以升序排列。<br/>-&nbsp;若只有两帧，可以不填offset。<br/>-&nbsp;若超过两帧，offset必填。 |
| 参数 | 类型 | 默认值 | 说明 |
| ------------------ | ---------------------------------------- | -------------------- | ---------------------------------------- |
| width | number | - | 动画执行过程中设置到组件上的宽度值。 |
| height | number | - | 动画执行过程中设置到组件上的高度值。 |
| backgroundColor | &lt;color&gt; | none | 动画执行过程中设置到组件上的背景颜色。 |
| opacity | number | 1 | 设置到组件上的透明度，介于0到1之间。 |
| backgroundPosition | string | - | 格式为"x&nbsp;y"，单位为百分号或者px。<br/>第一个值是水平位置，第二个值是垂直位置。<br/>如果仅规定了一个值，另一个值为&nbsp;50%。 |
| transformOrigin | string | 'center&nbsp;center' | 变换对象的中心点。<br/>第一个参数表示x轴的值，可以设置为left、center、right、长度值或百分比值。<br/>第二个参数表示y轴的值，可以设置为top、center、bottom、长度值或百分比值。 |
| transform | [Transform](../arkui-js/js-components-common-animation.md) | - | 设置到变换对象上的类型。 |
| offset | number | - | -&nbsp;offset值（如果提供）必须在0.0到1.0（含）之间，并以升序排列。<br/>-&nbsp;若只有两帧，可以不填offset。<br/>-&nbsp;若超过两帧，offset必填。 |
**表3** Options说明
| 参数 | 类型 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- |
| duration | number | 0 | 指定当前动画的运行时长（单位毫秒）。 |
| easing | string | linear | 描述动画的时间曲线，支持类型见表4 easing有效值说明。 |
| delay | number | 0 | 设置动画执行的延迟时间（默认值表示无延迟）。 |
| iterations | number&nbsp;\|&nbsp;string | 1 | 设置动画执行的次数。number表示固定次数，Infinity枚举表示无限次数播放。 |
| direction<sup>6+</sup> | string | normal | 指定动画的播放模式：<br/>normal：&nbsp;动画正向循环播放；<br/>reverse：&nbsp;动画反向循环播放；<br/>alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放；<br/>alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。 |
| fill | string | none | 指定动画开始和结束的状态：<br/>none：在动画执行之前和之后都不会应用任何样式到目标上。<br/>forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。<br/>backwards<sup>6+</sup>：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值，当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。<br/>both：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。 |
| 参数 | 类型 | 默认值 | 说明 |
| ---------------------- | -------------------------- | ------ | ---------------------------------------- |
| duration | number | 0 | 指定当前动画的运行时长，单位毫秒。 |
| easing | string | linear | 描述动画的时间曲线，支持类型见表4 easing有效值说明。 |
| delay | number | 0 | 设置动画执行的延迟时间，默认值表示无延迟。 |
| iterations | number&nbsp;\|&nbsp;string | 1 | 设置动画执行的次数。number表示固定次数，Infinity枚举表示无限次数播放。 |
| direction<sup>6+</sup> | string | normal | 指定动画的播放模式：<br/>normal：&nbsp;动画正向循环播放；<br/>reverse：&nbsp;动画反向循环播放；<br/>alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放；<br/>alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。 |
| fill | string | none | 指定动画开始和结束的状态：<br/>none：在动画执行之前和之后都不会应用任何样式到目标上。<br/>forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。<br/>backwards<sup>6+</sup>：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值，当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。<br/>both：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。 |
**表4** easing有效值说明
| 值 | 描述 |
| -------- | -------- |
| linear | 动画线性变化。 |
| ease-in | 动画速度先慢后快，cubic-bezier(0.42,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。 |
| ease-out | 动画速度先快后慢，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。 |
| ease-in-out | 动画先加速后减速，cubic-bezier(0.42,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。 |
| friction | 阻尼曲线，cubic-bezier(0.2,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 |
| extreme-deceleration | 急缓曲线，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.0,&nbsp;1.0)。 |
| sharp | 锐利曲线，cubic-bezier(0.33,&nbsp;0.0,&nbsp;0.67,&nbsp;1.0)。 |
| rhythm | 节奏曲线，cubic-bezier(0.7,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 |
| smooth | 平滑曲线，cubic-bezier(0.4,&nbsp;0.0,&nbsp;0.4,&nbsp;1.0)。 |
| cubic-bezier(x1,&nbsp;y1,&nbsp;x2,&nbsp;y2) | 在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。 |
| steps(number,&nbsp;step-position)<sup>6+</sup> | Step曲线。<br/>number必须设置，支持的类型为int。<br/>step-position参数可选，支持设置start或end，默认值为end。 |
- 返回值
| 值 | 描述 |
| ---------------------------------------- | ---------------------------------------- |
| linear | 动画线性变化。 |
| ease-in | 动画速度先慢后快，cubic-bezier(0.42,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。 |
| ease-out | 动画速度先快后慢，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。 |
| ease-in-out | 动画先加速后减速，cubic-bezier(0.42,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。 |
| friction | 阻尼曲线，cubic-bezier(0.2,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 |
| extreme-deceleration | 急缓曲线，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.0,&nbsp;1.0)。 |
| sharp | 锐利曲线，cubic-bezier(0.33,&nbsp;0.0,&nbsp;0.67,&nbsp;1.0)。 |
| rhythm | 节奏曲线，cubic-bezier(0.7,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 |
| smooth | 平滑曲线，cubic-bezier(0.4,&nbsp;0.0,&nbsp;0.4,&nbsp;1.0)。 |
| cubic-bezier(x1,&nbsp;y1,&nbsp;x2,&nbsp;y2) | 在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。 |
| steps(number,&nbsp;step-position)<sup>6+</sup> | Step曲线。<br/>number必须设置，支持的类型为int。<br/>step-position参数可选，支持设置start或end，默认值为end。 |
**返回值：**
animation对象属性：
| 属性 | 类型 | 说明 |
| -------- | -------- | -------- |
| finished | boolean | 只读，用于表示当前动画是否已播放完成。 |
| pending | boolean | 只读，用于表示当前动画是否处于等待其他异步操作完成的等待状态（例如启动一个延时播放的动画）。 |
| playState | string | 可读可写，动画的执行状态：<br/>-&nbsp;idle：未执行状态，包括已结束或未开始。<br/>-&nbsp;running：动画正在运行。<br/>-&nbsp;paused：动画暂停。<br/>-&nbsp;finished：动画播放完成。 |
| startTime | number | 可读可写，动画播放开始的预定时间，用途类似于options参数中的delay。 |
| 属性 | 类型 | 说明 |
| --------- | ------- | ---------------------------------------- |
| finished | boolean | 只读，用于表示当前动画是否已播放完成。 |
| pending | boolean | 只读，用于表示当前动画是否处于等待其他异步操作完成的等待状态（例如启动一个延时播放的动画）。 |
| playState | string | 可读可写，动画的执行状态：<br/>-&nbsp;idle：未执行状态，包括已结束或未开始。<br/>-&nbsp;running：动画正在运行。<br/>-&nbsp;paused：动画暂停。<br/>-&nbsp;finished：动画播放完成。 |
| startTime | number | 可读可写，动画播放开始的预定时间，用途类似于options参数中的delay。 |
animation对象方法：
| 方法 | 参数 | 说明 |
| -------- | -------- | -------- |
| play | - | 组件播放动画。 |
| finish | - | 组件完成动画。 |
| pause | - | 组件暂停动画。 |
| cancel | - | 组件取消动画。 |
| reverse | - | 组件倒播动画。 |
| 方法 | 参数 | 说明 |
| ------- | ---- | ------- |
| play | - | 组件播放动画。 |
| finish | - | 组件完成动画。 |
| pause | - | 组件暂停动画。 |
| cancel | - | 组件取消动画。 |
| reverse | - | 组件倒播动画。 |
animation对象事件：
| 事件 | 说明 |
| -------- | -------- |
| start<sup>6+</sup> | 动画开始事件。 |
| cancel | 动画被强制取消。 |
| finish | 动画播放完成。 |
| repeat | 动画重播事件。 |
- 示例
```
<!-- xxx.hml -->
<div class="container">
<div id="idName" class="box"></div>
<div class="buttonBox">
<button @click="start">
start
</button>
<button @click="cancel">
cancels
</button>
</div>
| 事件 | 说明 |
| ------------------ | -------- |
| start<sup>6+</sup> | 动画开始事件。 |
| cancel | 动画被强制取消。 |
| finish | 动画播放完成。 |
| repeat | 动画重播事件。 |
**示例：**
```html
<!-- xxx.hml -->
<div class="container">
<div id="idName" class="box"></div>
<div class="buttonBox">
<button @click="start">
start
</button>
<button @click="cancel">
cancels
</button>
</div>
```
```
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.box{
width: 200px;
height: 200px;
background-color: #ff0000;
margin-top: 30px;
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.box{
width: 200px;
height: 200px;
background-color: #ff0000;
margin-top: 30px;
}
.buttonBox{
margin-top: 30px;
width: 250px;
justify-content: space-between;
}
button{
background-color: #8e8b89;
color: white;
width: 100px;
height: 40px;
font-size: 24px;
}
```
```js
// xxx.js
import prompt from '@system.prompt';
export default{
data:{
animation:'',
},
onInit(){
},
onShow(){
var options = {
duration: 1500,
easing: 'friction',
delay: 500,
fill: 'forwards',
iterations: 2,
direction: 'normal',
};
var frames = [
{transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0},
{transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0}
];
this.animation = this.$element('idName').animate(frames, options);
// handle finish event
this.animation.onfinish = function(){
prompt.showToast({
message: "The animation is finished."
});
};
// handle cancel event
this.animation.oncancel = function(){
prompt.showToast({
message: "The animation is canceled."
});
};
// handle repeat event
this.animation.onrepeat = function(){
prompt.showToast({
message: "The animation is repeated."
});
};
},
start(){
this.animation.play();
},
cancel(){
this.animation.cancel();
}
.buttonBox{
margin-top: 30px;
width: 250px;
justify-content: space-between;
}
button{
background-color: #8e8b89;
color: white;
width: 100px;
height: 40px;
font-size: 24px;
}
```
```
// xxx.js
import prompt from '@system.prompt';
export default{
data:{
animation:'',
},
onInit(){
},
onShow(){
var options = {
duration: 1500,
easing: 'friction',
delay: 500,
fill: 'forwards',
iterations: 2,
direction: 'normal',
};
var frames = [
{transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0},
{transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0}
];
this.animation = this.$element('idName').animate(frames, options);
// handle finish event
this.animation.onfinish = function(){
prompt.showToast({
message: "The animation is finished."
});
};
// handle cancel event
this.animation.oncancel = function(){
prompt.showToast({
message: "The animation is canceled."
});
};
// handle repeat event
this.animation.onrepeat = function(){
prompt.showToast({
message: "The animation is repeated."
});
};
},
start(){
this.animation.play();
},
cancel(){
this.animation.cancel();
}
}
```
![zh-cn_image_0000001229677045](figures/zh-cn_image_0000001229677045.gif)
}
```
![zh-cn_image_0000001229677045](figures/zh-cn_image_0000001229677045.gif)
## getBoundingClientRect
......@@ -195,61 +194,59 @@ getBoundingClientRect(): \<Rect>
获取元素的大小及其相对于窗口的位置。
- 返回值
**表5** Rect对象说明<sup>6+</sup>
| 属性 | 类型 | 描述 |
| -------- | -------- | -------- |
| width | number | 该元素的宽度。 |
| height | number | 该元素的高度。 |
| left | number | 该元素左边界距离窗口的偏移。 |
| top | number | 该元素上边界距离窗口的偏移。 |
- 示例
```
// xxx.js
var rect = this.$element('id').getBoundingClientRect();
console.info(`current element position is ${rect.left}, ${rect.top}`);
```
**返回值：**
**表5** Rect对象说明<sup>6+</sup>
| 属性 | 类型 | 描述 |
| ------ | ------ | -------------- |
| width | number | 该元素的宽度。 |
| height | number | 该元素的高度。 |
| left | number | 该元素左边界距离窗口的偏移。 |
| top | number | 该元素上边界距离窗口的偏移。 |
**示例：**
```js
// xxx.js
var rect = this.$element('id').getBoundingClientRect();
console.info(`current element position is ${rect.left}, ${rect.top}`);
```
## createIntersectionObserver
createIntersectionObserver(param?: ObserverParam): Observer
监听元素在当前页面的可见范围。
- 参数
| 参数名 | 参数类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| param | ObserverParam | - | 获取observer的回调。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 描述 |
| ----- | ------------- | ---- | -------------- |
| param | ObserverParam | - | 获取observer的回调。 |
**表6** ObserverParam对象说明<sup>6+</sup>
| 属性 | 类型 | 描述 |
| -------- | -------- | -------- |
| ratios | Array&lt;number&gt; | 组件超出或小于范围时触发observer的回调。 |
- 返回值
| 属性 | 类型 | 描述 |
| ------ | ------------------- | ------------------------ |
| ratios | Array&lt;number&gt; | 组件超出或小于范围时触发observer的回调。 |
**返回值：**
**表7** Observer对象支持的方法<sup>6+</sup>
| 方法 | 参数 | 描述 |
| -------- | -------- | -------- |
| observe | callback:&nbsp;function | 开启observer的订阅方法。超出或小于阈值时触发callback。 |
| unobserve | - | 取消observer的订阅方法。 |
- 示例
```
// xxx.js
let observer = this.$element('broad').createIntersectionObserver({
ratios: [0.2, 0.5], // number
});
observer.observe((isVisible, ratio)=> {
console.info('this element is ' + isVisible + 'ratio is ' + ratio)
})
observer.unobserve()
```
| 方法 | 参数 | 描述 |
| --------- | ----------------------- | ----------------------------------- |
| observe | callback:&nbsp;function | 开启observer的订阅方法。超出或小于阈值时触发callback。 |
| unobserve | - | 取消observer的订阅方法。 |
**示例：**
```js
// xxx.js
let observer = this.$element('broad').createIntersectionObserver({
ratios: [0.2, 0.5], // number
});
observer.observe((isVisible, ratio)=> {
console.info('this element is ' + isVisible + 'ratio is ' + ratio)
})
observer.unobserve()
```
\ No newline at end of file
zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md
浏览文件 @ cdb6cf82
# 通用样式
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
组件普遍支持的可以在style或css中设置组件外观样式。
| 名称 | 类型 | 默认值 | 描述 |
| ----------------------------------------- | ------------------------------------------------------------ | ------------ | ------------------------------------------------------------ |
| width | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 设置组件自身的宽度。<br/>缺省时使用元素自身内容需要的宽度。<br/> |
| height | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 设置组件自身的高度。<br/>缺省时使用元素自身内容需要的高度。<br/> |
| min-width<sup>5+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | 0 | 设置元素的最小宽度。 |
| min-height<sup>5+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | 0 | 设置元素的最小高度。 |
| max-width<sup>5+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 设置元素的最大宽度。默认无限制。 |
| max-height<sup>5+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 设置元素的最大高度。默认无限制。 |
| padding | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 使用简写属性设置所有的内边距属性。<br/>该属性可以有1到4个值：<br/>-&nbsp;指定一个值时，该值指定四个边的内边距。<br/>-&nbsp;指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。<br/>-&nbsp;指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。<br/>-&nbsp;指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 |
| padding-[left\|top\|right\|bottom] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 设置左、上、右、下内边距属性。 |
| padding-[start\|end] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 设置起始和末端内边距属性。 |
| margin | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。<br/>-&nbsp;只有一个值时，这个值会被指定给全部的四个边。<br/>-&nbsp;两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。<br/>-&nbsp;三个值时，第一个值被匹配给上,&nbsp;第二个值被匹配给左和右，第三个值被匹配给下。<br/>-&nbsp;四个值时，会依次按上、右、下、左的顺序匹配&nbsp;(即顺时针顺序)。 |
| margin-[left\|top\|right\|bottom] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 设置左、上、右、下外边距属性。 |
| margin-[start\|end] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 设置起始和末端外边距属性。 |
| border | - | 0 | 使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。 |
| border-style | string | solid | 使用简写属性设置所有边框的样式，可选值为：<br/>-&nbsp;dotted：显示为一系列圆点，圆点半径为border-width的一半。<br/>-&nbsp;dashed：显示为一系列短的方形虚线。<br/>-&nbsp;solid：显示为一条实线。 |
| border-[left\|top\|right\|bottom]-style | string | solid | 分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。 |
| border-[left\|top\|right\|bottom] | - | - | 使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。 |
| border-width | &lt;length&gt; | 0 | 使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。 |
| border-[left\|top\|right\|bottom]-width | &lt;length&gt; | 0 | 分别设置左、上、右、下四个边框的宽度。 |
| border-color | &lt;color&gt; | black | 使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。 |
| border-[left\|top\|right\|bottom]-color | &lt;color&gt; | black | 分别设置左、上、右、下四个边框的颜色。 |
| border-radius | &lt;length&gt; | - | border-radius属性设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left\|top\|right\|bottom]-width，border-[left\|top\|right\|bottom]-color&nbsp;，border-[left\|top\|right\|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;顺序为左下、右下、左上和右上。 |
| border-[top\|bottom]-[left\|right]-radius | &lt;length&gt; | - | 分别设置左上，右上，右下和左下四个角的圆角半径。 |
| background | &lt;linear-gradient&gt; | - | 仅支持设置[渐变样式](../arkui-js/js-components-common-gradient.md)，与background-color、background-image不兼容。 |
| background-color | &lt;color&gt; | - | 设置背景颜色。 |
| background-image | string | - | 设置背景图片。与background-color、background不兼容，支持网络图片资源和本地图片资源地址。<br/>示例：<br/>-&nbsp;background-image:&nbsp;url("/common/background.png")<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;不支持svg格式图片。 |
| background-size | -&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | auto | 设置背景图片的大小。<br/>-&nbsp;string可选值：<br/>&nbsp;&nbsp;-&nbsp;contain：把图片扩展至最大尺寸，以使其高度和宽度完全适用内容区域。<br/>&nbsp;&nbsp;-&nbsp;cover：把背景图片扩展至足够大，以使背景图片完全覆盖背景区域；背景图片的某些部分也许无法显示在背景定位区域中。<br/>&nbsp;&nbsp;-&nbsp;auto：保持原图的比例不变。<br/>-&nbsp;length值参数方式：<br/>&nbsp;&nbsp;设置背景图片的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。<br/>-&nbsp;百分比参数方式：<br/>&nbsp;&nbsp;以父元素的百分比来设置背景图片的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。 |
| background-repeat | string | repeat | 针对重复背景图片样式进行设置，背景图片默认在水平和垂直方向上重复。<br/>-&nbsp;repeat：在水平轴和竖直轴上同时重复绘制图片。<br/>-&nbsp;repeat-x：只在水平轴上重复绘制图片。<br/>-&nbsp;repeat-y：只在竖直轴上重复绘制图片。<br/>-&nbsp;no-repeat：不会重复绘制图片。 |
| background-position | -&nbsp;string&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | 0px&nbsp;0px | -&nbsp;关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。<br/>&nbsp;&nbsp;-&nbsp;left：水平方向上最左侧。<br/>&nbsp;&nbsp;-&nbsp;right：水平方向上最右侧。<br/>&nbsp;&nbsp;-&nbsp;top：竖直方向上最顶部。<br/>&nbsp;&nbsp;-&nbsp;bottom：竖直方向上最底部。<br/>&nbsp;&nbsp;-&nbsp;center：水平方向或竖直方向上中间位置。<br/>-&nbsp;length值参数方式：第一个值是水平位置，第二个值是垂直位置。&nbsp;左上角是&nbsp;0&nbsp;0。单位是像素&nbsp;(0px&nbsp;0px)&nbsp;&nbsp;。如果仅规定了一个值，另外一个值将是50%。<br/>-&nbsp;百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是&nbsp;0%&nbsp;0%。右下角是&nbsp;100%&nbsp;100%。如果仅规定了一个值，另外一个值为50%。<br/>-&nbsp;可以混合使用&lt;percentage&gt;和&lt;length&gt;。 |
| box-shadow<sup>5+</sup> | string | 0 | 语法：box-shadow:&nbsp;h-shadow&nbsp;v-shadow&nbsp;blur&nbsp;spread&nbsp;color<br/>通过这个样式可以设置当前组件的阴影样式，包括水平位置(必填)、垂直位置(必填)、模糊半径(可选，默认值为0)、阴影延展距离(可选，默认值为0)、阴影颜色(可选，默认值为黑色)。<br/>示例：<br/>-&nbsp;box-shadow&nbsp;:10px&nbsp;20px&nbsp;5px&nbsp;10px&nbsp;\#888888<br/>-&nbsp;box-shadow&nbsp;:100px&nbsp;100px&nbsp;30px&nbsp;red<br/>-&nbsp;box-shadow&nbsp;:-100px&nbsp;-100px&nbsp;0px&nbsp;40px |
| filter<sup>5+</sup> | string | - | 语法：filter:&nbsp;blur(px)<br/>通过这个样式可以设置当前组件布局范围的内容模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。<br/>示例：<br/>-&nbsp;filter:&nbsp;blur(10px) |
| backdrop-filter<sup>5+</sup> | string | - | 语法：backdrop-filter:&nbsp;blur(px)<br/>通过这个样式可以设置当前组件布局范围的背景模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。<br/>示例：<br/>-&nbsp;backdrop-filter:&nbsp;blur(10px) |
| window-filter<sup>5+</sup> | string | - | 语法：window-filter:&nbsp;blur(percent),&nbsp;style<sup>5+</sup><br/>通过这个样式可以设置当前组件布局范围的窗口模糊程度和模糊样式，如果没有设置值，则默认是0%(不模糊)，多块模糊区域时不支持设置不同的模糊值和模糊样式。style可选值：small_light(默认值),&nbsp;medium_light,&nbsp;large_light,&nbsp;xlarge_light,&nbsp;small_dark,&nbsp;medium_dark,&nbsp;large_dark,&nbsp;xlarge_dark。<br/>示例：<br/>-&nbsp;window-filter:&nbsp;blur(50%)<br/>-&nbsp;window-filter:&nbsp;blur(10%),&nbsp;large_light |
| opacity | number | 1 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
| display | string | flex | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。<br />-inline<sup>9+</sup>：元素会被显示为内联元素，元素前后没有换行符。<br />-block<sup>9+</sup>：元素将显示为块级元素，元素前后会带有换行符，容器组件默认为block。<br />-inline-block<sup>9+</sup>：设置为行内盒子，在同一行展示，可以设置宽高，基础组件默认为inline-block。 |
| visibility | string | visible | 是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：<br/>-&nbsp;visible：元素正常显示。<br/>-&nbsp;hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;visibility和display样式都设置时，仅display生效。 |
| flex | number&nbsp;\|&nbsp;string | - | 规定当前组件如何适应父组件中的可用空间。<br/>flex可以指定1个、2个<sup>5+</sup>或3个<sup>5+</sup>值。<br/>单值语法：<br/>-&nbsp;一个无单位数：用来设置组件的flex-grow。<br/>-&nbsp;一个有效的宽度值5+：用来设置组件的flex-basis。<br/>双值语法<sup>5+</sup>：<br/>第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：<br/>-&nbsp;一个无单位数：用来设置组件的flex-shrink。<br/>-&nbsp;一个有效的宽度值：用来设置组件的flex-basis。<br/>三值语法<sup>5+</sup>：<br/>第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;、&lt;refresh&gt;、&lt;stepper-item&gt;<sup>5+</sup>时生效。 |
| flex-grow | number | 0 | 设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;、&lt;refresh&gt;、&lt;stepper-item&gt;<sup>5+</sup>时生效。 |
| flex-shrink | number | 1 | 设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;、&lt;refresh&gt;、&lt;stepper-item&gt;<sup>5+</sup>时生效。 |
| flex-basis | &lt;length&gt; | - | 设置组件在主轴方向上的初始大小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;、&lt;refresh&gt;、&lt;stepper-item&gt;<sup>5+</sup>时生效。 |
| align-self<sup>6+</sup> | string | - | 设置自身在父元素交叉轴上的对齐方式，该样式会覆盖父元素的align-items样式，仅在父容器为div、list。可选值为：<br/>-&nbsp;stretch&nbsp;弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start&nbsp;元素向交叉轴起点对齐。<br/>-&nbsp;flex-end&nbsp;元素向交叉轴终点对齐。<br/>-&nbsp;center&nbsp;元素在交叉轴居中。<br/>-&nbsp;baseline&nbsp;元素在交叉轴基线对齐。 |
| position | string | relative | 设置元素的定位类型，不支持动态变更。<br/>-&nbsp;fixed：相对与整个界面进行定位。<br/>-&nbsp;absolute：相对于父元素进行定位。<br/>-&nbsp;relative：相对于其正常位置进行定位。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;absolute属性仅在父容器为&lt;div&gt;、&lt;stack&gt;时生效。 |
| [left\|top\|right\|bottom] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | left\|top\|right\|bottom需要配合position样式使用，来确定元素的偏移位置。<br/>-&nbsp;left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>-&nbsp;top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。<br/>-&nbsp;right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。<br/>-&nbsp;bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。 |
| [start&nbsp;\|&nbsp;end]<sup>6+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | start&nbsp;\|&nbsp;end需要配合position样式使用，来确定元素的偏移位置。<br/>-&nbsp;start属性规定元素的起始边缘。该属性定义了定位元素起始外边距边界与其包含块起始边界之间的偏移。<br/>-&nbsp;end属性规定元素的结尾边缘。该属性定义了一个定位元素的结尾边距边界与其包含块结尾边界之间的偏移。 |
| z-index<sup>6+</sup> | number | - | 表示对于同一父节点其子节点的渲染顺序。数值越大，渲染数据越靠后。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;z-index不支持auto，并且opacity等其他样式不会影响z-index的渲染顺序。 |
| image-fill<sup>6+</sup> | &lt;color&gt; | - | 为svg图片填充颜色，支持组件范围（与设置图片资源的属性）：button（icon属性）、piece（icon属性）、search（icon属性）、input（headericon属性）、textarea（headericon属性）、image（src属性）、toolbar-item(icon属性)。<br/>svg图片文件内的fill属性颜色值在渲染时将被替换为image-fill所配的颜色值，且仅对svg图片内显示声明的fill属性生效。 |
| clip-path<sup>6+</sup> | [&nbsp;&lt;geometry-box&gt;&nbsp;\|\|&nbsp;&lt;basic-shape&gt;&nbsp;]&nbsp;\|&nbsp;none | - | 设置组件的裁剪区域。区域内的部分显示，区域外的不显示。<br/>&lt;geometry-box&gt;：表示裁剪区域的作用范围，默认为border-box。可选值为：<br/>-&nbsp;margin-box：margin计算入长宽尺寸内。<br/>-&nbsp;border-box：border计算入长宽尺寸内。<br/>-&nbsp;padding-box：padding计算入长宽尺寸内。<br/>-&nbsp;content-box：margin/border/padding不计算入长宽尺寸内。<br/>&lt;basic-shape&gt;：表示裁剪的形状。包含以下类型：<br/>-&nbsp;inset，格式为：inset(&nbsp;&lt;percentage&gt;{1,4}&nbsp;[&nbsp;round&nbsp;&lt;'border-radius'&gt;&nbsp;]?&nbsp;)。<br/>-&nbsp;circle，格式为：circle(&nbsp;[&nbsp;&lt;percentage&gt;&nbsp;]?&nbsp;[&nbsp;at&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt;&nbsp;]?&nbsp;)。<br/>-&nbsp;ellipse，格式为：ellipse(&nbsp;[&nbsp;&lt;percentage&gt;{2}&nbsp;]?&nbsp;[&nbsp;at&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt;&nbsp;]?&nbsp;)。<br/>-&nbsp;polygon，格式为：polygon(&nbsp;[&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt;&nbsp;]\#&nbsp;)<br/>-&nbsp;path，格式为：path(&nbsp;&lt;string&gt;&nbsp;)。 |
| mask-image<sup>6+</sup> | -&nbsp;&lt;linear-gradient&gt;<br/>-&nbsp;string | - | 设置渐变色遮罩或本地图片设置。<br/>设置渐变色遮罩，示例：<br/>linear-gradient(to&nbsp;left,&nbsp;black,&nbsp;white)<br/>设置纯色遮罩，示例：<br/>linear-gradient(to&nbsp;right,&nbsp;grey&nbsp;,&nbsp;grey)<br/>设置本地svg图片为遮罩，示例：url(common/mask.svg) |
| mask-size<sup>6+</sup> | -&nbsp;string<br/>-&nbsp;&lt;length&gt;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | auto | 设置遮罩图片显示大小，仅当mask-image为图片资源时有效。<br/>string可选值：<br/>-&nbsp;contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。<br/>-&nbsp;cover：把图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。<br/>-&nbsp;auto：保持原图的比例不变。<br/>length值参数方式：设置图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。<br/>百分比参数方式：以原图宽高的百分比来设置图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。 |
| mask-position<sup>6+</sup> | -&nbsp;string&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | 0px&nbsp;0px | 设置遮罩图片显示位置，仅当mask-image为图片资源时有效。关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。<br/>string可选值：<br/>-&nbsp;left：水平方向上最左侧。<br/>-&nbsp;right：水平方向上最右侧。<br/>-&nbsp;top：竖直方向上最顶部。<br/>-&nbsp;bottom：竖直方向上最底部。<br/>-&nbsp;center：水平方向或竖直方向上中间位置。<br/>length值参数方式：第一个值是水平位置，第二个值是垂直位置。&nbsp;左上角是&nbsp;0&nbsp;0。单位是像素&nbsp;(0px&nbsp;0px)&nbsp;&nbsp;。如果仅规定了一个值，另外一个值将是50%。<br/>百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是&nbsp;0%&nbsp;0%。右下角是&nbsp;100%&nbsp;100%。如果仅规定了一个值，另外一个值为50%。<br/>可以混合使用&lt;percentage&gt;和&lt;length&gt;。 |
| border-image-source<sup>7+</sup> | string | - | 指定元素的边框图片。<br/>示例：<br/>border-image-source:&nbsp;url("/common/images/border.png") |
| border-image-slice<sup>7+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | 0 | 指定图片的边界内向偏移。<br/>该属性可以有1到4个值：<br/>指定一个值时，该值指定四个边的内偏移。<br/>指定两个值时，第一个值指定上下两边的内偏移，第二个指定左右两边的内偏移。<br/>指定三个值时，第一个指定上边的内偏移，第二个指定左右两边的内偏移，第三个指定下边的内偏移。<br/>指定四个值时分别为上、右、下、左边的内偏移（顺时针顺序）。 |
| border-image-width<sup>7+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | 0 | 指定图片边界的宽度。<br/>指定一个值时，该值指定四个边的宽度。<br/>指定两个值时，第一个值指定上下两边的宽度&nbsp;，第二个指定左右两边的宽度。<br/>指定三个值时，第一个指定上边的宽度&nbsp;，第二个指定左右两边的宽度&nbsp;，第三个指定下边的宽度。<br/>指定四个值时分别为上、右、下、左边的宽度&nbsp;（顺时针顺序）。 |
| border-image-outset<sup>7+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | 0 | 指定边框图像可超出边框的大小。<br/>指定一个值时，边框图像在四个方向超出边框的距离。<br/>指定两个值时，第一个值指定上下两边的边框图像超出边框的距离，第二个指定左右两边的&nbsp;。<br/>指定三个值时，第一个指定上边的边框图像超出边框的距离&nbsp;，第二个指定左右两边的边框图像超出边框的距离&nbsp;，第三个指定下边的边框图像超出边框的距离&nbsp;。<br/>指定四个值时分别为上、右、下、左边的边框图像超出边框的距离&nbsp;（顺时针顺序）。 |
| border-image-repeat<sup>7+</sup> | string | stretch | 定义图片如何填充边框。<br/>stretch:&nbsp;拉伸图片以填充边框。<br/>repeat：平铺图片以填充边框。<br/>round：平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。<br/> |
| border-image<sup>7+</sup> | string | - | 简写属性，可以选择以下两种设置方式：<br/>-&nbsp;设置图片边框的每个属性。包含图像的边界向内偏移，图像边界的宽度，边框图像可超出边框盒的大小，图片如何填充边框，顺序设置为&nbsp;border-image-source&nbsp;,border-image-slice,border-image-width,border-image-outset,border-image-repeat，不设置的值为默认值。<br/>-&nbsp;渐变色边框<br/>&nbsp;&nbsp;示例:<br/>&nbsp;&nbsp;border-image:&nbsp;linear-gradient(red,&nbsp;yellow)&nbsp;10px |
| box-sizing<sup>9+</sup> | string | border-box | 设置组件的边框类型。<br/>content-box：标准盒子模型。设置的width和height只包含内容的宽和高，不包含边框（border）和内边距（padding）。<br/>border-box：设置的width和height包含内容，边框（border）和内边距（padding），即：组件内容区的实际宽度 = width - (border + padding) 。|
| 名称 | 类型 | 默认值 | 描述 |
| ---------------------------------------- | ---------------------------------------- | ------------ | ---------------------------------------- |
| width | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 设置组件自身的宽度。<br/>缺省时使用元素自身内容需要的宽度。<br/> |
| height | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 设置组件自身的高度。<br/>缺省时使用元素自身内容需要的高度。<br/> |
| min-width<sup>5+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | 0 | 设置元素的最小宽度。 |
| min-height<sup>5+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | 0 | 设置元素的最小高度。 |
| max-width<sup>5+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 设置元素的最大宽度。默认无限制。 |
| max-height<sup>5+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 设置元素的最大高度。默认无限制。 |
| padding | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 使用简写属性设置所有的内边距属性。<br/>该属性可以有1到4个值：<br/>-&nbsp;指定一个值时，该值指定四个边的内边距。<br/>-&nbsp;指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。<br/>-&nbsp;指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。<br/>-&nbsp;指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 |
| padding-[left\|top\|right\|bottom] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 设置左、上、右、下内边距属性。 |
| padding-[start\|end] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 设置起始和末端内边距属性。 |
| margin | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。<br/>-&nbsp;只有一个值时，这个值会被指定给全部的四个边。<br/>-&nbsp;两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。<br/>-&nbsp;三个值时，第一个值被匹配给上,&nbsp;第二个值被匹配给左和右，第三个值被匹配给下。<br/>-&nbsp;四个值时，会依次按上、右、下、左的顺序匹配&nbsp;(即顺时针顺序)。 |
| margin-[left\|top\|right\|bottom] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 设置左、上、右、下外边距属性。 |
| margin-[start\|end] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 设置起始和末端外边距属性。 |
| border | - | 0 | 使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。 |
| border-style | string | solid | 使用简写属性设置所有边框的样式，可选值为：<br/>-&nbsp;dotted：显示为一系列圆点，圆点半径为border-width的一半。<br/>-&nbsp;dashed：显示为一系列短的方形虚线。<br/>-&nbsp;solid：显示为一条实线。 |
| border-[left\|top\|right\|bottom]-style | string | solid | 分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。 |
| border-[left\|top\|right\|bottom] | - | - | 使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。 |
| border-width | &lt;length&gt; | 0 | 使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。 |
| border-[left\|top\|right\|bottom]-width | &lt;length&gt; | 0 | 分别设置左、上、右、下四个边框的宽度。 |
| border-color | &lt;color&gt; | black | 使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。 |
| border-[left\|top\|right\|bottom]-color | &lt;color&gt; | black | 分别设置左、上、右、下四个边框的颜色。 |
| border-radius | &lt;length&gt; | - | border-radius属性设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left\|top\|right\|bottom]-width，border-[left\|top\|right\|bottom]-color&nbsp;，border-[left\|top\|right\|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。<br/>顺序为左下、右下、左上和右上。 |
| border-[top\|bottom]-[left\|right]-radius | &lt;length&gt; | - | 分别设置左上，右上，右下和左下四个角的圆角半径。 |
| background | &lt;linear-gradient&gt; | - | 仅支持设置[渐变样式](../arkui-js/js-components-common-gradient.md)，与background-color、background-image不兼容。 |
| background-color | &lt;color&gt; | - | 设置背景颜色。 |
| background-image | string | - | 设置背景图片。与background-color、background不兼容，支持网络图片资源和本地图片资源地址。<br/>示例：<br/>-&nbsp;background-image:&nbsp;url("/common/background.png")<br>不支持svg格式图片。 |
| background-size | -&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | auto | 设置背景图片的大小。<br/>-&nbsp;string可选值：<br/>&nbsp;&nbsp;-&nbsp;contain：把图片扩展至最大尺寸，以使其高度和宽度完全适用内容区域。<br/>&nbsp;&nbsp;-&nbsp;cover：把背景图片扩展至足够大，以使背景图片完全覆盖背景区域；背景图片的某些部分也许无法显示在背景定位区域中。<br/>&nbsp;&nbsp;-&nbsp;auto：保持原图的比例不变。<br/>-&nbsp;length值参数方式：<br/>&nbsp;&nbsp;设置背景图片的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。<br/>-&nbsp;百分比参数方式：<br/>&nbsp;&nbsp;以父元素的百分比来设置背景图片的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。 |
| background-repeat | string | repeat | 针对重复背景图片样式进行设置，背景图片默认在水平和垂直方向上重复。<br/>-&nbsp;repeat：在水平轴和竖直轴上同时重复绘制图片。<br/>-&nbsp;repeat-x：只在水平轴上重复绘制图片。<br/>-&nbsp;repeat-y：只在竖直轴上重复绘制图片。<br/>-&nbsp;no-repeat：不会重复绘制图片。 |
| background-position | -&nbsp;string&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | 0px&nbsp;0px | -&nbsp;关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。<br/>&nbsp;&nbsp;-&nbsp;left：水平方向上最左侧。<br/>&nbsp;&nbsp;-&nbsp;right：水平方向上最右侧。<br/>&nbsp;&nbsp;-&nbsp;top：竖直方向上最顶部。<br/>&nbsp;&nbsp;-&nbsp;bottom：竖直方向上最底部。<br/>&nbsp;&nbsp;-&nbsp;center：水平方向或竖直方向上中间位置。<br/>-&nbsp;length值参数方式：第一个值是水平位置，第二个值是垂直位置。&nbsp;左上角是&nbsp;0&nbsp;0。单位是像素&nbsp;(0px&nbsp;0px)&nbsp;&nbsp;。如果仅规定了一个值，另外一个值将是50%。<br/>-&nbsp;百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是&nbsp;0%&nbsp;0%。右下角是&nbsp;100%&nbsp;100%。如果仅规定了一个值，另外一个值为50%。<br/>-&nbsp;可以混合使用&lt;percentage&gt;和&lt;length&gt;。 |
| box-shadow<sup>5+</sup> | string | 0 | 语法：box-shadow:&nbsp;h-shadow&nbsp;v-shadow&nbsp;blur&nbsp;spread&nbsp;color<br/>通过这个样式可以设置当前组件的阴影样式，包括水平位置(必填)、垂直位置(必填)、模糊半径(可选，默认值为0)、阴影延展距离(可选，默认值为0)、阴影颜色(可选，默认值为黑色)。<br/>示例：<br/>-&nbsp;box-shadow&nbsp;:10px&nbsp;20px&nbsp;5px&nbsp;10px&nbsp;\#888888<br/>-&nbsp;box-shadow&nbsp;:100px&nbsp;100px&nbsp;30px&nbsp;red<br/>-&nbsp;box-shadow&nbsp;:-100px&nbsp;-100px&nbsp;0px&nbsp;40px |
| filter<sup>5+</sup> | string | - | 语法：filter:&nbsp;blur(px)<br/>通过这个样式可以设置当前组件布局范围的内容模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。<br/>示例：<br/>-&nbsp;filter:&nbsp;blur(10px) |
| backdrop-filter<sup>5+</sup> | string | - | 语法：backdrop-filter:&nbsp;blur(px)<br/>通过这个样式可以设置当前组件布局范围的背景模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。<br/>示例：<br/>-&nbsp;backdrop-filter:&nbsp;blur(10px) |
| window-filter<sup>5+</sup> | string | - | 语法：window-filter:&nbsp;blur(percent),&nbsp;style<sup>5+</sup><br/>通过这个样式可以设置当前组件布局范围的窗口模糊程度和模糊样式，如果没有设置值，则默认是0%(不模糊)，多块模糊区域时不支持设置不同的模糊值和模糊样式。style可选值：small_light(默认值),&nbsp;medium_light,&nbsp;large_light,&nbsp;xlarge_light,&nbsp;small_dark,&nbsp;medium_dark,&nbsp;large_dark,&nbsp;xlarge_dark。<br/>示例：<br/>-&nbsp;window-filter:&nbsp;blur(50%)<br/>-&nbsp;window-filter:&nbsp;blur(10%),&nbsp;large_light |
| opacity | number | 1 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
| display | string | flex | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。<br />-inline<sup>9+</sup>：元素会被显示为内联元素，元素前后没有换行符。<br />-block<sup>9+</sup>：元素将显示为块级元素，元素前后会带有换行符，容器组件默认为block。<br />-inline-block<sup>9+</sup>：设置为行内盒子，在同一行展示，可以设置宽高，基础组件默认为inline-block。 |
| visibility | string | visible | 是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：<br/>-&nbsp;visible：元素正常显示。<br/>-&nbsp;hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。<br/>visibility和display样式都设置时，仅display生效。 |
| flex | number&nbsp;\|&nbsp;string | - | 规定当前组件如何适应父组件中的可用空间。<br/>flex可以指定1个、2个<sup>5+</sup>或3个<sup>5+</sup>值。<br/>单值语法：<br/>-&nbsp;一个无单位数：用来设置组件的flex-grow。<br/>-&nbsp;一个有效的宽度值<sup>5+</sup>：用来设置组件的flex-basis。<br/>双值语法<sup>5+</sup>：<br/>第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：<br/>-&nbsp;一个无单位数：用来设置组件的flex-shrink。<br/>-&nbsp;一个有效的宽度值：用来设置组件的flex-basis。<br/>三值语法<sup>5+</sup>：<br/>第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。<br/>仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;、&lt;refresh&gt;、&lt;stepper-item&gt;<sup>5+</sup>时生效。 |
| flex-grow | number | 0 | 设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。<br/>仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;、&lt;refresh&gt;、&lt;stepper-item&gt;<sup>5+</sup>时生效。 |
| flex-shrink | number | 1 | 设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。<br/>仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;、&lt;refresh&gt;、&lt;stepper-item&gt;<sup>5+</sup>时生效。 |
| flex-basis | &lt;length&gt; | - | 设置组件在主轴方向上的初始大小。<br/>仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;、&lt;refresh&gt;、&lt;stepper-item&gt;<sup>5+</sup>时生效。 |
| align-self<sup>6+</sup> | string | - | 设置自身在父元素交叉轴上的对齐方式，该样式会覆盖父元素的align-items样式，仅在父容器为div、list。可选值为：<br/>-&nbsp;stretch&nbsp;弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start&nbsp;元素向交叉轴起点对齐。<br/>-&nbsp;flex-end&nbsp;元素向交叉轴终点对齐。<br/>-&nbsp;center&nbsp;元素在交叉轴居中。<br/>-&nbsp;baseline&nbsp;元素在交叉轴基线对齐。 |
| position | string | relative | 设置元素的定位类型，不支持动态变更。<br/>-&nbsp;fixed：相对与整个界面进行定位。<br/>-&nbsp;absolute：相对于父元素进行定位，仅在父容器为&lt;div&gt;、&lt;stack&gt;时生效。<br/>-&nbsp;relative：相对于其正常位置进行定位。 |
| [left\|top\|right\|bottom] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | left\|top\|right\|bottom需要配合position样式使用，来确定元素的偏移位置。<br/>-&nbsp;left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>-&nbsp;top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。<br/>-&nbsp;right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。<br/>-&nbsp;bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。 |
| [start&nbsp;\|&nbsp;end]<sup>6+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | start&nbsp;\|&nbsp;end需要配合position样式使用，来确定元素的偏移位置。<br/>-&nbsp;start属性规定元素的起始边缘。该属性定义了定位元素起始外边距边界与其包含块起始边界之间的偏移。<br/>-&nbsp;end属性规定元素的结尾边缘。该属性定义了一个定位元素的结尾边距边界与其包含块结尾边界之间的偏移。 |
| z-index<sup>6+</sup> | number | - | 表示对于同一父节点其子节点的渲染顺序。数值越大，渲染数据越靠后。<br/>z-index不支持auto，并且opacity等其他样式不会影响z-index的渲染顺序。 |
| image-fill<sup>6+</sup> | &lt;color&gt; | - | 为svg图片填充颜色，支持组件范围（与设置图片资源的属性）：button（icon属性）、piece（icon属性）、search（icon属性）、input（headericon属性）、textarea（headericon属性）、image（src属性）、toolbar-item(icon属性)。<br/>svg图片文件内的fill属性颜色值在渲染时将被替换为image-fill所配的颜色值，且仅对svg图片内显示声明的fill属性生效。 |
| clip-path<sup>6+</sup> | [&nbsp;&lt;geometry-box&gt;&nbsp;\|\|&nbsp;&lt;basic-shape&gt;&nbsp;]&nbsp;\|&nbsp;none | - | 设置组件的裁剪区域。区域内的部分显示，区域外的不显示。<br/>&lt;geometry-box&gt;：表示裁剪区域的作用范围，默认为border-box。可选值为：<br/>-&nbsp;margin-box：margin计算入长宽尺寸内。<br/>-&nbsp;border-box：border计算入长宽尺寸内。<br/>-&nbsp;padding-box：padding计算入长宽尺寸内。<br/>-&nbsp;content-box：margin/border/padding不计算入长宽尺寸内。<br/>&lt;basic-shape&gt;：表示裁剪的形状。包含以下类型：<br/>-&nbsp;inset，格式为：inset(&nbsp;&lt;percentage&gt;{1,4}&nbsp;[&nbsp;round&nbsp;&lt;'border-radius'&gt;&nbsp;]?&nbsp;)。<br/>-&nbsp;circle，格式为：circle(&nbsp;[&nbsp;&lt;percentage&gt;&nbsp;]?&nbsp;[&nbsp;at&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt;&nbsp;]?&nbsp;)。<br/>-&nbsp;ellipse，格式为：ellipse(&nbsp;[&nbsp;&lt;percentage&gt;{2}&nbsp;]?&nbsp;[&nbsp;at&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt;&nbsp;]?&nbsp;)。<br/>-&nbsp;polygon，格式为：polygon(&nbsp;[&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt;&nbsp;]\#&nbsp;)<br/>-&nbsp;path，格式为：path(&nbsp;&lt;string&gt;&nbsp;)。 |
| mask-image<sup>6+</sup> | -&nbsp;&lt;linear-gradient&gt;<br/>-&nbsp;string | - | 设置渐变色遮罩或本地图片设置。<br/>设置渐变色遮罩，示例：<br/>linear-gradient(to&nbsp;left,&nbsp;black,&nbsp;white)<br/>设置纯色遮罩，示例：<br/>linear-gradient(to&nbsp;right,&nbsp;grey&nbsp;,&nbsp;grey)<br/>设置本地svg图片为遮罩，示例：url(common/mask.svg) |
| mask-size<sup>6+</sup> | -&nbsp;string<br/>-&nbsp;&lt;length&gt;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | auto | 设置遮罩图片显示大小，仅当mask-image为图片资源时有效。<br/>string可选值：<br/>-&nbsp;contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。<br/>-&nbsp;cover：把图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。<br/>-&nbsp;auto：保持原图的比例不变。<br/>length值参数方式：设置图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。<br/>百分比参数方式：以原图宽高的百分比来设置图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。 |
| mask-position<sup>6+</sup> | -&nbsp;string&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | 0px&nbsp;0px | 设置遮罩图片显示位置，仅当mask-image为图片资源时有效。关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。<br/>string可选值：<br/>-&nbsp;left：水平方向上最左侧。<br/>-&nbsp;right：水平方向上最右侧。<br/>-&nbsp;top：竖直方向上最顶部。<br/>-&nbsp;bottom：竖直方向上最底部。<br/>-&nbsp;center：水平方向或竖直方向上中间位置。<br/>length值参数方式：第一个值是水平位置，第二个值是垂直位置。&nbsp;左上角是&nbsp;0&nbsp;0。单位是像素&nbsp;(0px&nbsp;0px)&nbsp;&nbsp;。如果仅规定了一个值，另外一个值将是50%。<br/>百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是&nbsp;0%&nbsp;0%。右下角是&nbsp;100%&nbsp;100%。如果仅规定了一个值，另外一个值为50%。<br/>可以混合使用&lt;percentage&gt;和&lt;length&gt;。 |
| border-image-source<sup>7+</sup> | string | - | 指定元素的边框图片。<br/>示例：<br/>border-image-source:&nbsp;url("/common/images/border.png") |
| border-image-slice<sup>7+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | 0 | 指定图片的边界内向偏移。<br/>该属性可以有1到4个值：<br/>指定一个值时，该值指定四个边的内偏移。<br/>指定两个值时，第一个值指定上下两边的内偏移，第二个指定左右两边的内偏移。<br/>指定三个值时，第一个指定上边的内偏移，第二个指定左右两边的内偏移，第三个指定下边的内偏移。<br/>指定四个值时分别为上、右、下、左边的内偏移（顺时针顺序）。 |
| border-image-width<sup>7+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | 0 | 指定图片边界的宽度。<br/>指定一个值时，该值指定四个边的宽度。<br/>指定两个值时，第一个值指定上下两边的宽度&nbsp;，第二个指定左右两边的宽度。<br/>指定三个值时，第一个指定上边的宽度&nbsp;，第二个指定左右两边的宽度&nbsp;，第三个指定下边的宽度。<br/>指定四个值时分别为上、右、下、左边的宽度&nbsp;（顺时针顺序）。 |
| border-image-outset<sup>7+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | 0 | 指定边框图像可超出边框的大小。<br/>指定一个值时，边框图像在四个方向超出边框的距离。<br/>指定两个值时，第一个值指定上下两边的边框图像超出边框的距离，第二个指定左右两边的&nbsp;。<br/>指定三个值时，第一个指定上边的边框图像超出边框的距离&nbsp;，第二个指定左右两边的边框图像超出边框的距离&nbsp;，第三个指定下边的边框图像超出边框的距离&nbsp;。<br/>指定四个值时分别为上、右、下、左边的边框图像超出边框的距离&nbsp;（顺时针顺序）。 |
| border-image-repeat<sup>7+</sup> | string | stretch | 定义图片如何填充边框。<br/>stretch:&nbsp;拉伸图片以填充边框。<br/>repeat：平铺图片以填充边框。<br/>round：平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。<br/> |
| border-image<sup>7+</sup> | string | - | 简写属性，可以选择以下两种设置方式：<br/>-&nbsp;设置图片边框的每个属性。包含图像的边界向内偏移，图像边界的宽度，边框图像可超出边框盒的大小，图片如何填充边框，顺序设置为&nbsp;border-image-source&nbsp;,border-image-slice,border-image-width,border-image-outset,border-image-repeat，不设置的值为默认值。<br/>-&nbsp;渐变色边框<br/>&nbsp;&nbsp;示例:<br/>&nbsp;&nbsp;border-image:&nbsp;linear-gradient(red,&nbsp;yellow)&nbsp;10px |
| box-sizing<sup>9+</sup> | string | border-box | 设置组件的边框类型。<br/>content-box：标准盒子模型。设置的width和height只包含内容的宽和高，不包含边框（border）和内边距（padding）。<br/>border-box：设置的width和height包含内容，边框（border）和内边距（padding），即：组件内容区的实际宽度 = width - (border + padding) 。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 通用样式都不是必填项。
> **说明：**
> 通用样式都不是必填项。
## 示例
......
zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md
浏览文件 @ cdb6cf82
# 转场样式
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 共享元素转场
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| shareid | string | 无 | 进行共享元素转场时使用，若不配置，则转场样式不生效。共享元素转场当前支持的组件：list-item、image、text、button、label。 |
| 名称 | 类型 | 默认值 | 描述 |
| ------- | ------ | ---- | ---------------------------------------- |
| shareid | string | 无 | 进行共享元素转场时使用，若不配置，则转场样式不生效。共享元素转场当前支持的组件：list-item、image、text、button、label。 |
### 样式
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| shared-transition-effect | string | exchange | 配置共享元素转场时的入场样式。<br/>-&nbsp;exchange（默认值）：源页面元素移动到目的页元素位置，并进行适当缩放。<br/>-&nbsp;static：目的页元素位置不变，用户可配置透明度动画。当前仅跳转目标页配置的static效果生效。 |
| shared-transition-name | string | - | 转场时，目的页配置的样式优先生效。该样式用于配置共享元素的动画效果，一个由@keyframes定义的动画序列，支持transform和透明度动画。若共享元素效果与自定义的动画冲突，以自定义动画为准。 |
| 名称 | 类型 | 默认值 | 描述 |
| --------------------------------- | ------ | -------- | ---------------------------------------- |
| shared-transition-effect | string | exchange | 配置共享元素转场时的入场样式。<br/>-&nbsp;exchange（默认值）：源页面元素移动到目的页元素位置，并进行适当缩放。<br/>-&nbsp;static：目的页元素位置不变，用户可配置透明度动画。当前仅跳转目标页配置的static效果生效。 |
| shared-transition-name | string | - | 转场时，目的页配置的样式优先生效。该样式用于配置共享元素的动画效果，一个由@keyframes定义的动画序列，支持transform和透明度动画。若共享元素效果与自定义的动画冲突，以自定义动画为准。 |
| shared-transition-timing-function | string | friction | 转场时，目的页配置的样式优先生效。该属性定义了共享元素转场时的差值曲线。若不配置，默认使用friction曲线。 |
......@@ -42,7 +42,7 @@
PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage”。
```
```html
<!-- PageA -->
<!-- xxx.hml -->
<div>
......@@ -55,7 +55,7 @@ PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage
</div>
```
```
```js
// xxx.js
import router from '@system.router';
export default {
......@@ -67,7 +67,7 @@ export default {
}
```
```
```css
/* xxx.css */
.shared-transition-style {
shared-transition-effect: exchange;
......@@ -79,7 +79,7 @@ export default {
}
```
```
```html
<!-- PageB -->
<!-- xxx.hml -->
<div>
......@@ -87,7 +87,7 @@ export default {
</div>
```
```
```js
// xxx.js
import router from '@system.router';
export default {
......@@ -97,7 +97,7 @@ export default {
}
```
```
```css
/* xxx.css */
.shared-transition-style {
shared-transition-effect: exchange;
......@@ -112,22 +112,22 @@ export default {
## 卡片转场样式
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 卡片转场无法和其他转场(包括共享元素转场和自定义转场)共同使用。
> **说明：**
> 卡片转场无法和其他转场(包括共享元素转场和自定义转场)共同使用。
### 样式
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| transition-effect | string | - | 用于配置当前页面中的某个组件在卡片转场过程中是否进行转场动效，当前支持如下配置：<br/>-&nbsp;unfold：配置这个属性的组件，如在卡片的上方，则向上移动一个卡片的高度，如在卡片的下方，则向下移动一个卡片的高度。<br/>-&nbsp;none：转场过程中没有动效。 |
| 名称 | 类型 | 默认值 | 描述 |
| ----------------- | ------ | ---- | ---------------------------------------- |
| transition-effect | string | - | 用于配置当前页面中的某个组件在卡片转场过程中是否进行转场动效，当前支持如下配置：<br/>-&nbsp;unfold：配置这个属性的组件，如在卡片的上方，则向上移动一个卡片的高度，如在卡片的下方，则向下移动一个卡片的高度。<br/>-&nbsp;none：转场过程中没有动效。 |
### 示例
source_page包含顶部内容以及卡片列表，点击卡片可以跳转到target_page。
```
```html
<!-- source_page -->
<!-- xxx.hml -->
<div class="container">
......@@ -142,7 +142,7 @@ source_page包含顶部内容以及卡片列表，点击卡片可以跳转到tar
</div>
```
```
```js
// xxx.js
import router from '@system.router'
export default {
......@@ -161,7 +161,7 @@ export default {
}
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -181,7 +181,7 @@ export default {
}
```
```
```html
<!-- target_page -->
<!-- xxx.hml -->
<div class="container">
......@@ -191,7 +191,7 @@ export default {
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -214,12 +214,12 @@ export default {
### 样式
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| transition-enter | string | - | 与@keyframes配套使用，支持transform和透明度动画，详见[动画样式 表 @keyframes属性说明](../arkui-js/js-components-common-animation.md)。 |
| transition-exit | string | - | 与\@keyframes配套使用，支持transform和透明度动画，详见[动画样式 表 @keyframes属性说明](../arkui-js/js-components-common-animation.md)。 |
| transition-duration | string | 跟随设备默认的页面转场时间 | 支持的单位为[s(秒)\|ms(毫秒)&nbsp;]，默认单位为ms，未配置时使用系统默认值。 |
| transition-timing-function | string | friction | 描述转场动画执行的速度曲线，用于使转场更为平滑。详细参数见[动画样式](../arkui-js/js-components-common-animation.md)中“animation-timing-function”有效值说明。 |
| 名称 | 类型 | 默认值 | 描述 |
| -------------------------- | ------ | ------------- | ---------------------------------------- |
| transition-enter | string | - | 与@keyframes配套使用，支持transform和透明度动画，详见[动画样式 表 @keyframes属性说明](../arkui-js/js-components-common-animation.md)。 |
| transition-exit | string | - | 与\@keyframes配套使用，支持transform和透明度动画，详见[动画样式 表 @keyframes属性说明](../arkui-js/js-components-common-animation.md)。 |
| transition-duration | string | 跟随设备默认的页面转场时间 | 支持的单位为[s(秒)\|ms(毫秒)&nbsp;]，默认单位为ms，未配置时使用系统默认值。 |
| transition-timing-function | string | friction | 描述转场动画执行的速度曲线，用于使转场更为平滑。详细参数见[动画样式](../arkui-js/js-components-common-animation.md)中“animation-timing-function”有效值说明。 |
### 注意事项
......@@ -242,7 +242,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
1. Page1
```
```html
<!-- xxx.hml -->
<div class="container">
<text>index</text>
......@@ -250,12 +250,12 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
</div>
```
```
<!-- xxx.js -->
```css
// xxx.js
import router from '@system.router';
export default {
data: {
},
jump() {
router.push({
......@@ -265,8 +265,8 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
}
```
```
<!-- xxx.css -->
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
......@@ -283,13 +283,13 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
transition-duration: 5s;
transition-timing-function: friction;
}
@keyframes go_page {
from {
opacity: 0;
transform: translate(0px) rotate(60deg) scale(1.0);
}
to {
opacity: 1;
transform: translate(100px) rotate(360deg) scale(1.0);
......@@ -300,7 +300,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
opacity: 1;
transform: translate(200px) rotate(60deg) scale(2);
}
to {
opacity: 0;
transform: translate(200px) rotate(360deg) scale(2);
......@@ -308,11 +308,10 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
}
```
2. Page2
```
```html
<!-- xxx.hml -->
<div class="container">
<text>transition</text>
......@@ -320,12 +319,12 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
</div
```
```
<!-- xxx.js -->
```js
// xxx.js
import router from '@system.router';
export default {
data: {
},
jumpBack() {
router.back()
......@@ -333,8 +332,8 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
}
```
```
<!-- xxx.css -->
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
......@@ -342,7 +341,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
width: 100%;
height: 100%;
}
.move_page {
width: 100px;
height: 100px;
......@@ -352,7 +351,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
transition-duration: 5s;
transition-timing-function: ease;
}
@keyframes go_page {
from {
opacity: 0;
......@@ -363,7 +362,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
transform:translate(100px) rotate(180deg) scale(2.0);
}
}
@keyframes exit_page {
from {
opacity: 1;
......@@ -375,5 +374,5 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
}
}
```
![transition](figures/transition.gif)
zh-cn/application-dev/reference/arkui-js/js-components-container-badge.md
浏览文件 @ cdb6cf82
# badge
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
应用中如果有需用户关注的新事件提醒，可以采用新事件标记来标识。
......@@ -15,39 +15,39 @@
支持单个子组件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅支持单子组件节点，如果使用多子组件节点，默认使用第一个子组件节点。
> **说明：**
> 仅支持单子组件节点，如果使用多子组件节点，默认使用第一个子组件节点。
## 属性
除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| placement | string | rightTop | 否 | 事件提醒的数字标记或者圆点标记的位置，可选值为：<br/>-&nbsp;right：位于组件右边框。<br/>-&nbsp;rightTop：位于组件边框右上角。<br/>-&nbsp;left：位于组件左边框。 |
| count | number | 0 | 否 | 设置提醒的消息数，默认为0。当设置相应的提醒消息数大于0时，消息提醒会变成数字标记类型，未设置消息数或者消息数不大于0时，消息提醒将采用圆点标记。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;当数字设置为大于maxcount时，将使用maxcount显示。<br/>>&nbsp;count属性最大支持整数值为2147483647。 |
| visible | boolean | false | 否 | 是否显示消息提醒，当收到新信息提醒时可以设置该属性为true，显示相应的消息提醒，如果需要使用数字标记类型，同时需要设置相应的count属性。 |
| maxcount | number | 99 | 否 | 最大消息数限制，当收到新信息提醒大于该限制时，标识数字会进行省略，仅显示maxcount+。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;maxcount属性最大支持整数值为2147483647。 |
| config | BadgeConfig | - | 否 | 设置新事件标记相关配置属性。 |
| label<sup>6+</sup> | string | - | 否 | 设置新事件提醒的文本值。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用该属性时，count和maxcount属性不生效。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------ | ----------- | -------- | ---- | ---------------------------------------- |
| placement | string | rightTop | 否 | 事件提醒的数字标记或者圆点标记的位置，可选值为：<br/>-&nbsp;right：位于组件右边框。<br/>-&nbsp;rightTop：位于组件边框右上角。<br/>-&nbsp;left：位于组件左边框。 |
| count | number | 0 | 否 | 设置提醒的消息数，默认为0。当设置相应的提醒消息数大于0时，消息提醒会变成数字标记类型，未设置消息数或者消息数不大于0时，消息提醒将采用圆点标记。<br/>当数字设置大于maxcount时，将使用maxcount显示。count属性最大支持整数值为2147483647。 |
| visible | boolean | false | 否 | 是否显示消息提醒，当收到新信息提醒时可以设置该属性为true，显示相应的消息提醒，如果需要使用数字标记类型，同时需要设置相应的count属性。 |
| maxcount | number | 99 | 否 | 最大消息数限制，当收到新信息提醒大于该限制时，标识数字会进行省略，仅显示maxcount+。<br/>maxcount属性支持的最大整数值为2147483647。 |
| config | BadgeConfig | - | 否 | 设置新事件标记相关配置属性。 |
| label<sup>6+</sup> | string | - | 否 | 设置新事件提醒的文本值。<br/>使用该属性时，count和maxcount属性不生效。 |
**表1** BadgeConfig
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| badgeColor | &lt;color&gt; | \#fa2a2d | 否 | 新事件标记背景色。 |
| textColor | &lt;color&gt; | \#ffffff | 否 | 数字标记的数字文本颜色。 |
| textSize | &lt;length&gt; | 10px | 否 | 数字标记的数字文本大小。 |
| badgeSize | &lt;length&gt; | 6px | 否 | 圆点标记的默认大小 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------- | -------------- | -------- | ---- | ------------ |
| badgeColor | &lt;color&gt; | \#fa2a2d | 否 | 新事件标记背景色。 |
| textColor | &lt;color&gt; | \#ffffff | 否 | 数字标记的数字文本颜色。 |
| textSize | &lt;length&gt; | 10px | 否 | 数字标记的数字文本大小。 |
| badgeSize | &lt;length&gt; | 6px | 否 | 圆点标记的默认大小 |
## 样式
支持[通用样式](../arkui-js/js-components-common-styles.md)。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> badge组件的子组件大小不能超过badge组件本身的大小，否则子组件不会绘制。
> **说明：**
> badge组件的子组件大小不能超过badge组件本身的大小，否则子组件不会绘制。
## 事件
......@@ -62,7 +62,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<badge class="badge" config="{{badgeconfig}}" visible="true" count="100" maxcount="99">
......@@ -74,7 +74,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -95,7 +95,7 @@
}
```
```
```js
// xxx.js
export default {
data:{
......
zh-cn/application-dev/reference/arkui-js/js-components-container-dialog.md
浏览文件 @ cdb6cf82
# dialog
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
自定义弹窗容器。
......@@ -19,13 +19,13 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| dragable<sup>7+</sup> | boolean | false | 否 | 设置对话框是否支持拖拽。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------------------- | ------- | ----- | ---- | ------------ |
| dragable<sup>7+</sup> | boolean | false | 否 | 设置对话框是否支持拖拽。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
>
> - 弹窗类组件不支持focusable、click-effect属性。
> 弹窗类组件不支持focusable、click-effect属性。
## 样式
......@@ -37,29 +37,29 @@
不支持[通用事件](../arkui-js/js-components-common-events.md)，仅支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| cancel | - | 用户点击非dialog区域触发取消弹窗时触发的事件。 |
| show<sup>7+</sup> | - | 对话框弹出时触发该事件。 |
| close<sup>7+</sup> | - | 对话框关闭时触发该事件。 |
| 名称 | 参数 | 描述 |
| ------------------ | ---- | -------------------------- |
| cancel | - | 用户点击非dialog区域触发取消弹窗时触发的事件。 |
| show<sup>7+</sup> | - | 对话框弹出时触发该事件。 |
| close<sup>7+</sup> | - | 对话框关闭时触发该事件。 |
## 方法
不支持[通用方法](../arkui-js/js-components-common-methods.md)，仅支持如下方法。
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| show | - | 弹出对话框。 |
| close | - | 关闭对话框。 |
| 名称 | 参数 | 描述 |
| ----- | ---- | ------ |
| show | - | 弹出对话框。 |
| close | - | 关闭对话框。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> dialog属性、样式均不支持动态更新。
> **说明：**
> dialog属性、样式均不支持动态更新。
## 示例
```
```html
<!-- xxx.hml -->
<div class="doc-page">
<div class="btn-div">
......@@ -79,7 +79,7 @@
</div>
```
```
```css
/* xxx.css */
.doc-page {
flex-direction: column;
......@@ -128,7 +128,7 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-container-div.md
浏览文件 @ cdb6cf82
# div
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
基础容器，用作页面结构的根节点或将内容进行分组。
......@@ -24,24 +24,24 @@
除支持组件[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| flex-direction | string | row | 否 | flex容器主轴方向。可选项有：<br/>-&nbsp;column：垂直方向从上到下。<br/>-&nbsp;row：水平方向从左到右。 |
| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：<br/>-&nbsp;nowrap：不换行，单行显示。<br/>-&nbsp;wrap：换行，多行显示。 |
| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有：<br/>-&nbsp;flex-start：项目位于容器的开头。<br/>-&nbsp;flex-end：项目位于容器的结尾。<br/>-&nbsp;center：项目位于容器的中心。<br/>-&nbsp;space-between：项目位于各行之间留有空白的容器内。<br/>-&nbsp;space-around：项目位于各行之前、之间、之后都留有空白的容器内。<br/>-&nbsp;space-evenly<sup>5+</sup>:&nbsp;&nbsp;均匀排列每个元素，每个元素之间的间隔相等。 |
| align-items | string | stretch<br/> | 否 | flex容器当前行的交叉轴对齐格式，可选值为：<br/>-&nbsp;stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start：元素向交叉轴起点对齐。<br/>-&nbsp;flex-end：元素向交叉轴终点对齐。<br/>-&nbsp;center：元素在交叉轴居中。 |
| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时，多行内容对齐格式，可选值为：<br/>-&nbsp;flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。<br/>-&nbsp;flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。<br/>-&nbsp;center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。<br/>-&nbsp;space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。<br/>-&nbsp;space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 |
| display | string | flex | 否 | 确定该元素视图框的类型，该值暂不支持动态修改。可选值为：<br/>-&nbsp;flex：弹性布局<br/>-&nbsp;grid：网格布局<br/>-&nbsp;none：不渲染此元素<br />-inline-flex<sup>9+</sup>：当设置为inline-flex 时，同时具备flex样式和inline-block的效果 |
| grid-template-[columns\|rows] | string | 1行1列 | 否 | 用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。<br/>示例：如设置grid-template-columns为：<br/>-&nbsp;50px&nbsp;100px&nbsp;60px：分三列，第一列50px，第二列100px，第三列60px；<br/>-&nbsp;1fr&nbsp;1fr&nbsp;2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；<br/>-&nbsp;30%&nbsp;20%&nbsp;50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；<br/>-&nbsp;repeat(2,100px)：分两列，第一列100px，第二列100px；<br/>-&nbsp;repeat(auto-fill,100px)<sup>5+</sup>：按照每列100px的大小和交叉轴大小计算最大正整数重复次数，按照该重复次数布满交叉轴；<br/>-&nbsp;auto&nbsp;1fr&nbsp;1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。 |
| grid-[columns\|rows]-gap | &lt;length&gt; | 0 | 否 | 用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。 |
| grid-row-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
| grid-column-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
| grid-auto-flow<sup>5+</sup> | string | - | 否 | 使用框架自动布局算法进行网格的布局，可选值为：<br/>-&nbsp;row：逐行填充元素，如果行空间不够，则新增行；<br/>-&nbsp;column：逐列填充元素，如果列空间不够，则新增列。 |
| overflow<sup>6+</sup> | string | visible | 否 | 设置元素内容区超过元素本身大小时的表现形式。<br/>-&nbsp;visible：多个子元素内容超过元素大小时，显示在元素外面；<br/>-&nbsp;hidden：元素内容超过元素大小时，进行裁切显示；<br/>-&nbsp;scroll：元素内容超过元素大小时，进行滚动显示并展示滚动条（当前只支持纵向）。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>> overflow:&nbsp;scroll样式需要元素设置固定的大小，默认滚动方向与容器方向一致。 |
| align-items<sup>6+</sup> | string | - | 否 | 设置容器中元素交叉轴上的对齐方式：<br/>-&nbsp;stretch：Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度；<br/>-&nbsp;flex-start：Flex布局容器内元素向交叉轴起点对齐；<br/>-&nbsp;flex-end：Flex布局容器内元素向交叉轴终点对齐；<br/>-&nbsp;center：Flex布局容器内元素在交叉轴居中对齐；<br/>-&nbsp;baseline：如Flex布局纵向排列，则该值与'flex-start'等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 |
| scrollbar-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置滚动条的颜色。 |
| scrollbar-width<sup>6+</sup> | &lt;length&gt; | - | 否 | 设置滚动条的宽度。 |
| overscroll-effect<sup>6+</sup> | string | - | 否 | 设置滚动边缘效果，可选值为：<br/>-&nbsp;spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹；<br/>-&nbsp;fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化；<br/>-&nbsp;none：滑动到边缘后无效果 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------------------ | -------------- | ------------ | ---- | ---------------------------------------- |
| flex-direction | string | row | 否 | flex容器主轴方向。可选项有：<br/>-&nbsp;column：垂直方向从上到下。<br/>-&nbsp;row：水平方向从左到右。 |
| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：<br/>-&nbsp;nowrap：不换行，单行显示。<br/>-&nbsp;wrap：换行，多行显示。 |
| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有：<br/>-&nbsp;flex-start：项目位于容器的开头。<br/>-&nbsp;flex-end：项目位于容器的结尾。<br/>-&nbsp;center：项目位于容器的中心。<br/>-&nbsp;space-between：项目位于各行之间留有空白的容器内。<br/>-&nbsp;space-around：项目位于各行之前、之间、之后都留有空白的容器内。<br/>-&nbsp;space-evenly<sup>5+</sup>:&nbsp;&nbsp;均匀排列每个元素，每个元素之间的间隔相等。 |
| align-items | string | stretch<br/> | 否 | flex容器当前行的交叉轴对齐格式，可选值为：<br/>-&nbsp;stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start：元素向交叉轴起点对齐。<br/>-&nbsp;flex-end：元素向交叉轴终点对齐。<br/>-&nbsp;center：元素在交叉轴居中。 |
| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时，多行内容对齐格式，可选值为：<br/>-&nbsp;flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。<br/>-&nbsp;flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。<br/>-&nbsp;center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。<br/>-&nbsp;space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。<br/>-&nbsp;space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 |
| display | string | flex | 否 | 确定该元素视图框的类型，该值暂不支持动态修改。可选值为：<br/>-&nbsp;flex：弹性布局<br/>-&nbsp;grid：网格布局<br/>-&nbsp;none：不渲染此元素<br />-inline-flex<sup>9+</sup>：当设置为inline-flex 时，同时具备flex样式和inline-block的效果 |
| grid-template-[columns\|rows] | string | 1行1列 | 否 | 用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。<br/>示例：如设置grid-template-columns为：<br/>-&nbsp;50px&nbsp;100px&nbsp;60px：分三列，第一列50px，第二列100px，第三列60px；<br/>-&nbsp;1fr&nbsp;1fr&nbsp;2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；<br/>-&nbsp;30%&nbsp;20%&nbsp;50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；<br/>-&nbsp;repeat(2,100px)：分两列，第一列100px，第二列100px；<br/>-&nbsp;repeat(auto-fill,100px)<sup>5+</sup>：按照每列100px的大小和交叉轴大小计算最大正整数重复次数，按照该重复次数布满交叉轴；<br/>-&nbsp;auto&nbsp;1fr&nbsp;1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。 |
| grid-[columns\|rows]-gap | &lt;length&gt; | 0 | 否 | 用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。 |
| grid-row-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
| grid-column-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
| grid-auto-flow<sup>5+</sup> | string | - | 否 | 使用框架自动布局算法进行网格的布局，可选值为：<br/>-&nbsp;row：逐行填充元素，如果行空间不够，则新增行；<br/>-&nbsp;column：逐列填充元素，如果列空间不够，则新增列。 |
| overflow<sup>6+</sup> | string | visible | 否 | 设置元素内容区超过元素本身大小时的表现形式。<br/>-&nbsp;visible：多个子元素内容超过元素大小时，显示在元素外面；<br/>-&nbsp;hidden：元素内容超过元素大小时，进行裁切显示；<br/>-&nbsp;scroll：元素内容超过元素大小时，进行滚动显示并展示滚动条（当前只支持纵向）。<br/>overflow:&nbsp;scroll样式需要元素设置固定的大小，默认滚动方向与容器方向一致。 |
| align-items<sup>6+</sup> | string | - | 否 | 设置容器中元素交叉轴上的对齐方式：<br/>-&nbsp;stretch：Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度；<br/>-&nbsp;flex-start：Flex布局容器内元素向交叉轴起点对齐；<br/>-&nbsp;flex-end：Flex布局容器内元素向交叉轴终点对齐；<br/>-&nbsp;center：Flex布局容器内元素在交叉轴居中对齐；<br/>-&nbsp;baseline：如Flex布局纵向排列，则该值与'flex-start'等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 |
| scrollbar-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置滚动条的颜色。 |
| scrollbar-width<sup>6+</sup> | &lt;length&gt; | - | 否 | 设置滚动条的宽度。 |
| overscroll-effect<sup>6+</sup> | string | - | 否 | 设置滚动边缘效果，可选值为：<br/>-&nbsp;spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹；<br/>-&nbsp;fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化；<br/>-&nbsp;none：滑动到边缘后无效果 |
## 事件
......@@ -50,42 +50,42 @@
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| reachstart<sup>6+</sup> | - | 当页面滑动到最开始的点时触发的事件回调，当flex-direction:&nbsp;row时才会触发。 |
| reachend<sup>6+</sup> | - | 当页面滑动到最末尾的点时触发的事件回调，当flex-direction:&nbsp;row时才会触发。 |
| reachtop<sup>6+</sup> | - | 当页面滑动到最上部的点时触发的事件回调，当flex-direction:&nbsp;column时才会触发。 |
| reachbottom<sup>6+</sup> | - | 当页面滑动到最下部的点时触发的事件回调，当flex-direction:&nbsp;column时才会触发。 |
| 名称 | 参数 | 描述 |
| ------------------------ | ---- | ---------------------------------------- |
| reachstart<sup>6+</sup> | - | 当页面滑动到最开始的点时触发的事件回调，当flex-direction:&nbsp;row时才会触发。 |
| reachend<sup>6+</sup> | - | 当页面滑动到最末尾的点时触发的事件回调，当flex-direction:&nbsp;row时才会触发。 |
| reachtop<sup>6+</sup> | - | 当页面滑动到最上部的点时触发的事件回调，当flex-direction:&nbsp;column时才会触发。 |
| reachbottom<sup>6+</sup> | - | 当页面滑动到最下部的点时触发的事件回调，当flex-direction:&nbsp;column时才会触发。 |
## 方法
除支持[通用方法](js-components-common-methods.md)外，还支持如下方法：
| 名称 | 参数 | 返回值 | 描述 |
| -------- | -------- | -------- | -------- |
| getScrollOffset<sup>6+</sup> | - | ScrollOffset | 获取元素内容的滚动偏移。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-&nbsp;需要设置overflow样式为scroll。 |
| scrollBy<sup>6+</sup> | ScrollParam | - | 指定元素内容的滚动偏移。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-&nbsp;需要设置overflow样式为scroll。 |
| 名称 | 参数 | 返回值 | 描述 |
| ---------------------------- | ----------- | ------------ | --------------------------------------- |
| getScrollOffset<sup>6+</sup> | - | ScrollOffset | 获取元素内容的滚动偏移。<br/>需要设置overflow样式为scroll。 |
| scrollBy<sup>6+</sup> | ScrollParam | - | 指定元素内容的滚动偏移。<br/>需要设置overflow样式为scroll。 |
**表1** ScrollOffset<sup>6+</sup>
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| x | number | 在x轴方向的偏移，单位为px。 |
| y | number | 在y轴方向的偏移，单位为px。 |
| 名称 | 类型 | 描述 |
| ---- | ------ | --------------- |
| x | number | 在x轴方向的偏移，单位为px。 |
| y | number | 在y轴方向的偏移，单位为px。 |
**表2** ScrollParam<sup>6+</sup>
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| dx | number | 水平方向滑动的偏移量，单位px。 |
| dy | number | 垂直方向滑动的偏移量，单位px。 |
| smooth | boolean | 是否平滑处理。 |
| 名称 | 类型 | 描述 |
| ------ | ------- | ---------------- |
| dx | number | 水平方向滑动的偏移量，单位px。 |
| dy | number | 垂直方向滑动的偏移量，单位px。 |
| smooth | boolean | 是否平滑处理。 |
## 示例
1. Flex样式
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="flex-box">
......@@ -96,7 +96,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -131,7 +131,7 @@
![zh-cn_image_0000001127285076](figures/zh-cn_image_0000001127285076.png)
2. Flex Wrap样式
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="flex-box">
......@@ -142,7 +142,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -178,8 +178,8 @@
![zh-cn_image_0000001213396721](figures/zh-cn_image_0000001213396721.png)
3. Grid样式
```
```html
<!-- xxx.hml -->
<div class="common grid-parent">
<div class="grid-child grid-left-top"></div>
......@@ -188,8 +188,8 @@
<div class="grid-child grid-right-bottom"></div>
</div>
```
```
```css
/* xxx.css */
.common {
width: 400px;
......@@ -244,7 +244,7 @@
![zh-cn_image_0000001213276619](figures/zh-cn_image_0000001213276619.png)
4. 拖拽<sup>7+</sup>
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="content" ondragstart="dragstart" ondrag="drag" ondragend="dragend" style="position: absolute;left: {{left}};top:{{top}};">
......@@ -252,7 +252,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -264,7 +264,7 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -291,7 +291,7 @@
![zh-cn_image_0000001213284927](figures/zh-cn_image_0000001213284927.gif)
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="content" ondrag="drag" style="position: absolute;left: {{left}};top: {{top}};"></div>
......@@ -301,7 +301,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -317,7 +317,7 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -355,7 +355,7 @@
![zh-cn_image_0000001168005276](figures/zh-cn_image_0000001168005276.gif)
5. 手指捏合<sup>7+</sup>
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="content "onpinchstart="pinchstart" onpinchend="pinchend" onpinchupdate="pinchupdate"
......@@ -364,7 +364,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -380,7 +380,7 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-container-form.md
浏览文件 @ cdb6cf82
# form
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 6开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
表单容器，支持容器内input元素的内容提交和重置。
......@@ -49,7 +49,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<form onsubmit='onSubmit' onreset='onReset'>
<div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
......@@ -67,7 +67,7 @@
</form>
```
```
```js
// xxx.js
export default{
onSubmit(result) {
......
zh-cn/application-dev/reference/arkui-js/js-components-container-list-item-group.md
浏览文件 @ cdb6cf82
# list-item-group
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
&lt;[list](../arkui-js/js-components-container-list.md)&gt;的子组件，用来展示分组，宽度默认充满list组件。
......@@ -28,7 +28,7 @@
| ---- | ------ | ------- | ---- | ---------------------------------------- |
| type | string | default | 否 | list-item-group类型，同一list支持多种type的list-item-group，相同type的list-item-group需要确保渲染后的视图布局也完全相同，当type固定时，使用show属性代替if属性，确保视图布局不变。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
>
> - 通用属性中的id用来标识一个group。list中相关的函数的入参以及事件的信息皆以此标识一个唯一的group。
......@@ -61,7 +61,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="doc-page">
<list style="width: 100%;" id="mylist">
......@@ -93,7 +93,7 @@
</div>
```
```
```css
/* xxx.css */
.doc-page {
flex-direction: column;
......@@ -121,7 +121,7 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-container-list-item.md
浏览文件 @ cdb6cf82
# list-item
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
&lt;[list](../arkui-js/js-components-container-list.md)&gt;的子组件，用来展示列表具体item。由于父元素list组件的align-items默认样式为stretch，该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。
......
zh-cn/application-dev/reference/arkui-js/js-components-container-list.md
浏览文件 @ cdb6cf82
# list
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
......@@ -19,86 +19,86 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| scrollpage | boolean | false | 否 | 设置为true时，将&nbsp;list&nbsp;顶部页面中非&nbsp;list&nbsp;部分随&nbsp;list&nbsp;一起滑出可视区域，当list方向为row时，不支持此属性。 |
| cachedcount | number | 0 | 否 | 长列表延迟加载时list-item最少缓存数量。<br/>可视区域外缓存的list-item数量少于该值时，会触发requestitem事件。 |
| scrollbar | string | off | 否 | 侧边滑动栏的显示模式（当前只支持纵向）：<br/>-&nbsp;off：不显示。<br/>-&nbsp;auto：按需显示(触摸时显示，2s后消失)。<br/>-&nbsp;on：常驻显示。 |
| scrolleffect | string | spring | 否 | 滑动效果，目前支持如下滑动效果：<br/>-&nbsp;spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。<br/>-&nbsp;fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化。<br/>-&nbsp;no：滑动到边缘后无效果。 |
| indexer | boolean&nbsp;\|&nbsp;Array&lt;string&gt; | false | 否 | 是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时，索引栏会显示在列表右边界处。示例：<br/>"indexer"&nbsp;:&nbsp;"true"表示使用默认字母索引表。<br/>"indexer"&nbsp;:&nbsp;"false"表示无索引。<br/>"indexer"&nbsp;:&nbsp;['\#',‘1’,'2',‘3’,'4',‘5’,'6',‘7’,'8']表示自定义索引表。自定义时"\#"必须要存在。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-&nbsp;indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。<br/>>&nbsp;<br/>>&nbsp;-&nbsp;点击索引条进行列表项索引需要list-item子组件配合设置相应的[section属性](../arkui-js/js-components-container-list-item.md#属性)。 |
| indexercircle<sup>5+</sup> | boolean | - | 否 | 是否为环形索引。<br/>穿戴设备默认为true，其他为false。indexer为false时不生效。 |
| indexermulti<sup>5+</sup> | boolean | false | 否 | 是否开启索引条多语言功能。<br/>indexer为false时不生效。 |
| indexerbubble<sup>5+</sup> | boolean | true | 否 | 是否开启索引切换的气泡提示。<br/>indexer为false时不生效。 |
| divider<sup>5+</sup> | boolean | false | 否 | item是否自带分隔线。<br/>其样式参考样式列表的divider-color、divider-height、divider-length、divider-origin。 |
| shapemode | string | default | 否 | 侧边滑动栏的形状类型。<br/>-&nbsp;default：不指定，跟随主题；<br/>-&nbsp;rect：矩形；<br/>-&nbsp;round：圆形。 |
| updateeffect | boolean | false | 否 | 用于设置当list内部的item发生删除或新增时是否支持动效。<br/>-&nbsp;false：新增删除item时无过渡动效。<br/>-&nbsp;true：新增删除item时播放过程动效。 |
| chainanimation<sup>5+</sup> | boolean | false | 否 | 用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。<br/>-&nbsp;false：不启用链式联动<br/>-&nbsp;true：启用链式联动<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;-&nbsp;不支持动态修改。<br/>&nbsp;&nbsp;>&nbsp;-&nbsp;如同时配置了indexer，链式动效不生效。<br/>&nbsp;&nbsp;>&nbsp;-&nbsp;如配置了链式动效，list-item的sticky不生效。 |
| initialindex | number | 0 | 否 | 用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。当indexer为true或者scrollpage为true时，不生效。 |
| initialoffset | &lt;length&gt; | 0 | 否 | 用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。当indexer为true或者scrollpage为true时，不生效。 |
| selected<sup>5+</sup> | string | - | 否 | 指定当前列表中被选中激活的项，可选值为list-item的section属性值。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------------------------- | ---------------------------------------- | ------- | ---- | ---------------------------------------- |
| scrollpage | boolean | false | 否 | 设置为true时，将&nbsp;list&nbsp;顶部页面中非&nbsp;list&nbsp;部分随&nbsp;list&nbsp;一起滑出可视区域，当list方向为row时，不支持此属性。 |
| cachedcount | number | 0 | 否 | 长列表延迟加载时list-item最少缓存数量。<br/>可视区域外缓存的list-item数量少于该值时，会触发requestitem事件。 |
| scrollbar | string | off | 否 | 侧边滑动栏的显示模式（当前只支持纵向）：<br/>-&nbsp;off：不显示。<br/>-&nbsp;auto：按需显示(触摸时显示，2s后消失)。<br/>-&nbsp;on：常驻显示。 |
| scrolleffect | string | spring | 否 | 滑动效果，目前支持如下滑动效果：<br/>-&nbsp;spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。<br/>-&nbsp;fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化。<br/>-&nbsp;no：滑动到边缘后无效果。 |
| indexer | boolean&nbsp;\|&nbsp;Array&lt;string&gt; | false | 否 | 是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时，索引栏会显示在列表右边界处。示例：<br/>"indexer"&nbsp;:&nbsp;"true"表示使用默认字母索引表。<br/>"indexer"&nbsp;:&nbsp;"false"表示无索引。<br/>"indexer"&nbsp;:&nbsp;['\#',‘1’,'2',‘3’,'4',‘5’,'6',‘7’,'8']表示自定义索引表。自定义时"\#"必须要存在。<br/>indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。<br/>点击索引条进行列表项索引需要list-item子组件配合设置相应的[section属性](../arkui-js/js-components-container-list-item.md#属性)。 |
| indexercircle<sup>5+</sup> | boolean | - | 否 | 是否为环形索引。<br/>穿戴设备默认为true，其他为false。indexer为false时不生效。 |
| indexermulti<sup>5+</sup> | boolean | false | 否 | 是否开启索引条多语言功能。<br/>indexer为false时不生效。 |
| indexerbubble<sup>5+</sup> | boolean | true | 否 | 是否开启索引切换的气泡提示。<br/>indexer为false时不生效。 |
| divider<sup>5+</sup> | boolean | false | 否 | item是否自带分隔线。<br/>其样式参考样式列表的divider-color、divider-height、divider-length、divider-origin。 |
| shapemode | string | default | 否 | 侧边滑动栏的形状类型。<br/>-&nbsp;default：不指定，跟随主题；<br/>-&nbsp;rect：矩形；<br/>-&nbsp;round：圆形。 |
| updateeffect | boolean | false | 否 | 用于设置当list内部的item发生删除或新增时是否支持动效。<br/>-&nbsp;false：新增删除item时无过渡动效。<br/>-&nbsp;true：新增删除item时播放过程动效。 |
| chainanimation<sup>5+</sup> | boolean | false | 否 | 用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。<br/>-&nbsp;false：不启用链式联动<br/>-&nbsp;true：启用链式联动<br/>不支持动态修改。<br/>同时配置了indexer，链式动效不生效。<br/>如配置了链式动效，list-item的sticky不生效。 |
| initialindex | number | 0 | 否 | 用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。当indexer为true或者scrollpage为true时，不生效。 |
| initialoffset | &lt;length&gt; | 0 | 否 | 用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。当indexer为true或者scrollpage为true时，不生效。 |
| selected<sup>5+</sup> | string | - | 否 | 指定当前列表中被选中激活的项，可选值为list-item的section属性值。 |
## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| divider-color<sup>5+</sup> | &lt;color&gt; | transparent | 否 | item分隔线颜色，仅当list的divider属性为true时生效。 |
| divider-height<sup>5+</sup> | &lt;length&gt; | 1 | 否 | item分隔线高度，仅当list的divider属性为true时生效。 |
| divider-length<sup>5+</sup> | &lt;length&gt; | 主轴宽度 | 否 | item分隔线长度，不设置时最大长度为主轴宽度，具体长度取决于divider-origin，仅当list的divider属性为true时生效。 |
| divider-origin<sup>5+</sup> | &lt;length&gt; | 0 | 否 | item分隔线相对于item主轴起点位置的偏移量，仅当list的divider属性为true时生效。 |
| flex-direction | string | column | 否 | 设置flex容器主轴的方向，指定flex项如何放置在flex容器中，可选值为：<br/>-&nbsp;column：主轴为纵向。<br/>-&nbsp;row：主轴为横向。<br/>其他组件默认值为row，在list组件中默认值为column。 |
| columns | number | 1 | 否 | list交叉轴方向的显示列数，默认为1列。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;设置多列时，在list交叉轴上进行均分，每一列大小相同。 |
| align-items | string | stretch | 否 | list每一列交叉轴上的对齐格式，可选值为：<br/>-&nbsp;stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start：元素向交叉轴起点对齐。<br/>-&nbsp;flex-end：元素向交叉轴终点对齐。<br/>-&nbsp;center：元素在交叉轴居中。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;align-items样式作用在每一列的子元素上，列与列之间采用均分方式布局。 |
| item-extent | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 设置内部item为固定大小，设置为百分比格式时，指相对于list的视口主轴方向长度的百分比。 |
| fade-color | &lt;color&gt; | grey | 否 | 设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。 |
| scrollbar-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置滚动条的颜色。 |
| scrollbar-width<sup>6+</sup> | &lt;length&gt; | - | 否 | 设置滚动条的宽度。 |
| scrollbar-offset<sup>6+</sup> | &lt;length&gt; | 0 | 否 | 设置滚动条距离List默认位置的偏移量，只支持正数，默认位置在List右边缘，可以通过这个偏移量调整滚动条的水平位置，如果滚动条绘制在list外部，而list父组件有裁剪，会导致滚动条被裁剪。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------------------------- | ---------------------------------------- | ----------- | ---- | ---------------------------------------- |
| divider-color<sup>5+</sup> | &lt;color&gt; | transparent | 否 | item分隔线颜色，仅当list的divider属性为true时生效。 |
| divider-height<sup>5+</sup> | &lt;length&gt; | 1 | 否 | item分隔线高度，仅当list的divider属性为true时生效。 |
| divider-length<sup>5+</sup> | &lt;length&gt; | 主轴宽度 | 否 | item分隔线长度，不设置时最大长度为主轴宽度，具体长度取决于divider-origin，仅当list的divider属性为true时生效。 |
| divider-origin<sup>5+</sup> | &lt;length&gt; | 0 | 否 | item分隔线相对于item主轴起点位置的偏移量，仅当list的divider属性为true时生效。 |
| flex-direction | string | column | 否 | 设置flex容器主轴的方向，指定flex项如何放置在flex容器中，可选值为：<br/>-&nbsp;column：主轴为纵向。<br/>-&nbsp;row：主轴为横向。<br/>其他组件默认值为row，在list组件中默认值为column。 |
| columns | number | 1 | 否 | list交叉轴方向的显示列数，默认为1列。<br/>设置多列时，在list交叉轴上进行均分，每一列大小相同。 |
| align-items | string | stretch | 否 | list每一列交叉轴上的对齐格式，可选值为：<br/>-&nbsp;stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start：元素向交叉轴起点对齐。<br/>-&nbsp;flex-end：元素向交叉轴终点对齐。<br/>-&nbsp;center：元素在交叉轴居中。<br/>align-items样式作用在每一列的子元素上，列与列之间采用均分方式布局。 |
| item-extent | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 设置内部item为固定大小，设置为百分比格式时，指相对于list的视口主轴方向长度的百分比。 |
| fade-color | &lt;color&gt; | grey | 否 | 设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。 |
| scrollbar-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置滚动条的颜色。 |
| scrollbar-width<sup>6+</sup> | &lt;length&gt; | - | 否 | 设置滚动条的宽度。 |
| scrollbar-offset<sup>6+</sup> | &lt;length&gt; | 0 | 否 | 设置滚动条距离List默认位置的偏移量，只支持正数，默认位置在List右边缘，可以通过这个偏移量调整滚动条的水平位置，如果滚动条绘制在list外部，而list父组件有裁剪，会导致滚动条被裁剪。 |
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| indexerchange<sup>5+</sup> | {&nbsp;local:&nbsp;booleanValue&nbsp;} | 多语言索引条切换事件，仅当indexer属性为true，indexermulti为true时生效。booleanValue可能值为true或者false：<br/>-&nbsp;true:&nbsp;当前展示本地索引。<br/>-&nbsp;false:&nbsp;当前展示字母索引。 |
| scroll | {&nbsp;scrollX:&nbsp;scrollXValue,&nbsp;scrollY:&nbsp;scrollYValue,&nbsp;scrollState:&nbsp;stateValue&nbsp;} | 列表滑动的偏移量和状态回调。<br/>stateValue:&nbsp;0表示列表滑动已经停止。<br/>stateValue:&nbsp;1表示列表正在用户触摸状态下滑动。<br/>stateValue:&nbsp;2表示列表正在用户松手状态下滑动。 |
| scrollbottom | - | 当前列表已滑动到底部位置。 |
| scrolltop | - | 当前列表已滑动到顶部位置。 |
| scrollend | - | 列表滑动已经结束。 |
| scrolltouchup | - | 手指已经抬起且列表仍在惯性滑动。 |
| requestitem | - | 请求创建新的list-item。<br/>长列表延迟加载时，可视区域外缓存的list-item数量少于cachedcount时，会触发该事件。 |
| rotate<sup>7+</sup> | {&nbsp;rotateValue:&nbsp;number&nbsp;} | 返回表冠旋转角度增量值，仅智能穿戴支持。 |
| 名称 | 参数 | 描述 |
| -------------------------- | ---------------------------------------- | ---------------------------------------- |
| indexerchange<sup>5+</sup> | {&nbsp;local:&nbsp;booleanValue&nbsp;} | 多语言索引条切换事件，仅当indexer属性为true，indexermulti为true时生效。booleanValue可能值为true或者false：<br/>-&nbsp;true:&nbsp;当前展示本地索引。<br/>-&nbsp;false:&nbsp;当前展示字母索引。 |
| scroll | {&nbsp;scrollX:&nbsp;scrollXValue,&nbsp;scrollY:&nbsp;scrollYValue,&nbsp;scrollState:&nbsp;stateValue&nbsp;} | 列表滑动的偏移量和状态回调。<br/>stateValue:&nbsp;0表示列表滑动已经停止。<br/>stateValue:&nbsp;1表示列表正在用户触摸状态下滑动。<br/>stateValue:&nbsp;2表示列表正在用户松手状态下滑动。 |
| scrollbottom | - | 当前列表已滑动到底部位置。 |
| scrolltop | - | 当前列表已滑动到顶部位置。 |
| scrollend | - | 列表滑动已经结束。 |
| scrolltouchup | - | 手指已经抬起且列表仍在惯性滑动。 |
| requestitem | - | 请求创建新的list-item。<br/>长列表延迟加载时，可视区域外缓存的list-item数量少于cachedcount时，会触发该事件。 |
| rotate<sup>7+</sup> | {&nbsp;rotateValue:&nbsp;number&nbsp;} | 返回表冠旋转角度增量值，仅智能穿戴支持。 |
## 方法
支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| scrollTo | {&nbsp;index:&nbsp;number(指定位置)&nbsp;} | list滑动到指定index的item位置。 |
| scrollTop | {&nbsp;smooth:&nbsp;boolean&nbsp;} | smooth缺省为false，表示直接滚动到顶部。<br/>smooth为true，表示平滑滚动到顶部。 |
| scrollBottom | {&nbsp;smooth:&nbsp;boolean&nbsp;} | smooth缺省为false，表示直接滚动到底部。<br/>smooth为true，表示平滑滚动到底部。 |
| scrollPage | {&nbsp;reverse:&nbsp;boolean,&nbsp;smooth:&nbsp;boolean&nbsp;} | reverse缺省值为false，表示下一页，无完整页则滚动到底部。<br/>reverse为true，表示上一页，无完整页则滚动到顶部。<br/>smooth缺省值为false，表示直接滚动一页。<br/>smooth为true，表示平滑滚动一页。 |
| scrollArrow | {&nbsp;reverse:&nbsp;boolean,&nbsp;smooth:&nbsp;boolean&nbsp;} | reverse缺省值为false，表示向底部方向滑动一段距离，无足够距离则滚动到底部。<br/>reverse为true，表示向顶部方向滑动一段距离，无足够距离则滚动到顶部。<br/>smooth缺省值为false，表示直接滚动。<br/>smooth为true，表示平滑滚动。 |
| collapseGroup | {&nbsp;groupid:&nbsp;string&nbsp;} | 收拢指定的group。<br/>groupid：需要收拢的group的id。<br/>当groupid未指定时收拢所有的group。 |
| expandGroup | {&nbsp;groupid:&nbsp;string&nbsp;} | 展开指定的group。<br/>groupid：需要展开的group的id。<br/>当groupid未指定时展开所有的group。 |
| currentOffset | - | 返回当前滑动的偏移量。返回值类型是Object，返回值说明请见表 currentOffset返回对象属性说明。 |
| 名称 | 参数 | 描述 |
| ------------- | ---------------------------------------- | ---------------------------------------- |
| scrollTo | {&nbsp;index:&nbsp;number(指定位置)&nbsp;} | list滑动到指定index的item位置。 |
| scrollTop | {&nbsp;smooth:&nbsp;boolean&nbsp;} | smooth缺省为false，表示直接滚动到顶部。<br/>smooth为true，表示平滑滚动到顶部。 |
| scrollBottom | {&nbsp;smooth:&nbsp;boolean&nbsp;} | smooth缺省为false，表示直接滚动到底部。<br/>smooth为true，表示平滑滚动到底部。 |
| scrollPage | {&nbsp;reverse:&nbsp;boolean,&nbsp;smooth:&nbsp;boolean&nbsp;} | reverse缺省值为false，表示下一页，无完整页则滚动到底部。<br/>reverse为true，表示上一页，无完整页则滚动到顶部。<br/>smooth缺省值为false，表示直接滚动一页。<br/>smooth为true，表示平滑滚动一页。 |
| scrollArrow | {&nbsp;reverse:&nbsp;boolean,&nbsp;smooth:&nbsp;boolean&nbsp;} | reverse缺省值为false，表示向底部方向滑动一段距离，无足够距离则滚动到底部。<br/>reverse为true，表示向顶部方向滑动一段距离，无足够距离则滚动到顶部。<br/>smooth缺省值为false，表示直接滚动。<br/>smooth为true，表示平滑滚动。 |
| collapseGroup | {&nbsp;groupid:&nbsp;string&nbsp;} | 收拢指定的group。<br/>groupid：需要收拢的group的id。<br/>当groupid未指定时收拢所有的group。 |
| expandGroup | {&nbsp;groupid:&nbsp;string&nbsp;} | 展开指定的group。<br/>groupid：需要展开的group的id。<br/>当groupid未指定时展开所有的group。 |
| currentOffset | - | 返回当前滑动的偏移量。返回值类型是Object，返回值说明请见表 currentOffset返回对象属性说明。 |
**表1** currentOffset返回对象属性说明
| 名称 | 类型 | 备注 |
| -------- | -------- | -------- |
| x | number | 当前x轴滑动偏移量，单位为px。 |
| y | number | 当前y轴滑动偏移量，单位为px。 |
| 名称 | 类型 | 备注 |
| ---- | ------ | ---------------- |
| x | number | 当前x轴滑动偏移量，单位为px。 |
| y | number | 当前y轴滑动偏移量，单位为px。 |
## 示例
```
```html
<!-- index.hml -->
<div class="container">
<list class="todo-wrapper">
......@@ -112,7 +112,7 @@
</div>
```
```
```js
// index.js
export default {
data: {
......@@ -127,7 +127,7 @@ export default {
}
```
```
```css
/* index.css */
.container {
display: flex;
......
zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md
浏览文件 @ cdb6cf82
# panel
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
可滑动面板，提供一种轻量的内容展示窗口，在不同尺寸中切换，属于弹出式组件。
......@@ -15,74 +15,74 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| type | string | foldable | 是 | 设置可滑动面板类型，不可动态变更，可选值有：<br/>-&nbsp;minibar：提供minibar和类全屏展示切换效果。<br/>-&nbsp;foldable：内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。<br/>-&nbsp;temporary：内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。 |
| mode | string | full | 否 | 设置初始状态，mode参数可选值为：<br/>1.&nbsp;mini：类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。<br/>2.&nbsp;half:&nbsp;类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。<br/>3.&nbsp;full:&nbsp;类全屏状态。 |
| dragbar | boolean | true | 否 | 设置是否存在dragbar，true表示存在，false表示不存在。 |
| fullheight | &lt;length&gt; | - | 否 | 指定full状态下的高度，默认为屏幕尺寸&nbsp;-&nbsp;8px。 |
| halfheight | &lt;length&gt; | - | 否 | 指定half状态下的高度，默认为屏幕尺寸的一半。 |
| miniheight | &lt;length&gt; | - | 否 | 指定mini状态下的高度，默认为48px。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------- | -------------- | -------- | ---- | ---------------------------------------- |
| type | string | foldable | 是 | 设置可滑动面板类型，不可动态变更，可选值有：<br/>-&nbsp;minibar：提供minibar和类全屏展示切换效果。<br/>-&nbsp;foldable：内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。<br/>-&nbsp;temporary：内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。 |
| mode | string | full | 否 | 设置初始状态，mode参数可选值为：<br/>1.&nbsp;mini：类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。<br/>2.&nbsp;half:&nbsp;类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。<br/>3.&nbsp;full:&nbsp;类全屏状态。 |
| dragbar | boolean | true | 否 | 设置是否存在dragbar，true表示存在，false表示不存在。 |
| fullheight | &lt;length&gt; | - | 否 | 指定full状态下的高度，默认为屏幕尺寸&nbsp;-&nbsp;8px。 |
| halfheight | &lt;length&gt; | - | 否 | 指定half状态下的高度，默认为屏幕尺寸的一半。 |
| miniheight | &lt;length&gt; | - | 否 | 指定mini状态下的高度，默认为48px。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 不支持渲染属性，包括for、if和show。
>
> - 不支持focusable和disabled属性。
> **说明：**
> - 不支持渲染属性，包括for、if和show。
>
> - 不支持focusable和disabled属性。
## 样式
仅支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| padding | &lt;length&gt; | 0 | 否 | 该属性可以有1到4个值：<br/>-&nbsp;指定一个值时，该值指定四个边的内边距。<br/>-&nbsp;指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。<br/>-&nbsp;指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。<br/>-&nbsp;指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 |
| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | 否 | 设置左、上、右、下内边距属性。 |
| padding-[start\|end] | &lt;length&gt; | 0 | 否 | 设置起始和末端内边距属性。 |
| margin | &lt;length&gt; | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。<br/>-&nbsp;只有一个值时，这个值会被指定给全部的四个边。<br/>-&nbsp;两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。<br/>-&nbsp;三个值时，第一个值被匹配给上,&nbsp;第二个值被匹配给左和右，第三个值被匹配给下。<br/>-&nbsp;四个值时，会依次按上、右、下、左的顺序匹配&nbsp;(即顺时针顺序)。 |
| margin-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | 否 | 设置左、上、右、下外边距属性。 |
| margin-[start\|end] | &lt;length&gt; | 0 | 否 | 设置起始和末端外边距属性。 |
| border | - | 0 | 否 | 使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。 |
| border-style | string | solid | 否 | 使用简写属性设置所有边框的样式，可选值为：<br/>-&nbsp;dotted：显示为一系列圆点，圆点半径为border-width的一半。<br/>-&nbsp;dashed：显示为一系列短的方形虚线。<br/>-&nbsp;solid：显示为一条实线。 |
| border-[left\|top\|right\|bottom]-style | string | solid | 否 | 分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。 |
| border-[left\|top\|right\|bottom] | - | - | 否 | 使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。 |
| border-width | &lt;length&gt; | 0 | 否 | 使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。 |
| border-[left\|top\|right\|bottom]-width | &lt;length&gt; | 0 | 否 | 分别设置左、上、右、下四个边框的宽度。 |
| border-color | &lt;color&gt; | black | 否 | 使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。 |
| border-[left\|top\|right\|bottom]-color | &lt;color&gt; | black | 否 | 分别设置左、上、右、下四个边框的颜色。 |
| border-radius | &lt;length&gt; | - | 否 | border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left\|top\|right\|bottom]-width，border-[left\|top\|right\|bottom]-color&nbsp;，如果要设置color和width，需要将四个方向一起设置（border-width、border-color）。 |
| border-[top\|bottom]-[left\|right]-radius | &lt;length&gt; | - | 否 | 分别设置左上，右上，右下和左下四个角的圆角半径。 |
| background | &lt;linear-gradient&gt; | - | 否 | 仅支持设置[渐变样式](../arkui-js/js-components-common-gradient.md)，与background-color、background-image不兼容。 |
| background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 |
| background-image | string | - | 否 | 设置背景图片。与background-color、background不兼容；支持本地图片资源地址。 |
| background-size | -&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | auto | 否 | 设置背景图片的大小。<br/>-&nbsp;string可选值：<br/>&nbsp;&nbsp;-&nbsp;contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。<br/>&nbsp;&nbsp;-&nbsp;cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。<br/>&nbsp;&nbsp;-&nbsp;auto：保持原图的比例不变。<br/>-&nbsp;length值参数方式：<br/>&nbsp;&nbsp;设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。<br/>-&nbsp;百分比参数方式：<br/>&nbsp;&nbsp;以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。 |
| background-repeat | string | repeat | 否 | 针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。<br/>-&nbsp;repeat：在水平轴和竖直轴上同时重复绘制图片。<br/>-&nbsp;repeat-x：只在水平轴上重复绘制图片。<br/>-&nbsp;repeat-y：只在竖直轴上重复绘制图片。<br/>-&nbsp;no-repeat：不会重复绘制图片。 |
| background-position | -&nbsp;string&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | 0px&nbsp;0px | 否 | -&nbsp;关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。<br/>&nbsp;&nbsp;-&nbsp;left：水平方向上最左侧。<br/>&nbsp;&nbsp;-&nbsp;right：水平方向上最右侧。<br/>&nbsp;&nbsp;-&nbsp;top：竖直方向上最顶部。<br/>&nbsp;&nbsp;-&nbsp;bottom：竖直方向上最底部。<br/>&nbsp;&nbsp;-&nbsp;center：水平方向或竖直方向上中间位置。<br/>-&nbsp;length值参数方式：第一个值是水平位置，第二个值是垂直位置。&nbsp;左上角是&nbsp;0&nbsp;0。单位是像素&nbsp;(0px&nbsp;0px)&nbsp;&nbsp;。如果仅规定了一个值，另外一个值将是50%。<br/>-&nbsp;百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是&nbsp;0%&nbsp;0%。右下角是&nbsp;100%&nbsp;100%。如果仅规定了一个值，另外一个值为50%。<br/>-&nbsp;可以混合使用&lt;percentage&gt;和&lt;length&gt; |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------------------------------- | ---------------------------------------- | ------------ | ---- | ---------------------------------------- |
| padding | &lt;length&gt; | 0 | 否 | 该属性可以有1到4个值：<br/>-&nbsp;指定一个值时，该值指定四个边的内边距。<br/>-&nbsp;指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。<br/>-&nbsp;指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。<br/>-&nbsp;指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 |
| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | 否 | 设置左、上、右、下内边距属性。 |
| padding-[start\|end] | &lt;length&gt; | 0 | 否 | 设置起始和末端内边距属性。 |
| margin | &lt;length&gt; | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。<br/>-&nbsp;只有一个值时，这个值会被指定给全部的四个边。<br/>-&nbsp;两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。<br/>-&nbsp;三个值时，第一个值被匹配给上,&nbsp;第二个值被匹配给左和右，第三个值被匹配给下。<br/>-&nbsp;四个值时，会依次按上、右、下、左的顺序匹配&nbsp;(即顺时针顺序)。 |
| margin-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | 否 | 设置左、上、右、下外边距属性。 |
| margin-[start\|end] | &lt;length&gt; | 0 | 否 | 设置起始和末端外边距属性。 |
| border | - | 0 | 否 | 使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。 |
| border-style | string | solid | 否 | 使用简写属性设置所有边框的样式，可选值为：<br/>-&nbsp;dotted：显示为一系列圆点，圆点半径为border-width的一半。<br/>-&nbsp;dashed：显示为一系列短的方形虚线。<br/>-&nbsp;solid：显示为一条实线。 |
| border-[left\|top\|right\|bottom]-style | string | solid | 否 | 分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。 |
| border-[left\|top\|right\|bottom] | - | - | 否 | 使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。 |
| border-width | &lt;length&gt; | 0 | 否 | 使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。 |
| border-[left\|top\|right\|bottom]-width | &lt;length&gt; | 0 | 否 | 分别设置左、上、右、下四个边框的宽度。 |
| border-color | &lt;color&gt; | black | 否 | 使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。 |
| border-[left\|top\|right\|bottom]-color | &lt;color&gt; | black | 否 | 分别设置左、上、右、下四个边框的颜色。 |
| border-radius | &lt;length&gt; | - | 否 | border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left\|top\|right\|bottom]-width，border-[left\|top\|right\|bottom]-color&nbsp;，如果要设置color和width，需要将四个方向一起设置（border-width、border-color）。 |
| border-[top\|bottom]-[left\|right]-radius | &lt;length&gt; | - | 否 | 分别设置左上，右上，右下和左下四个角的圆角半径。 |
| background | &lt;linear-gradient&gt; | - | 否 | 仅支持设置[渐变样式](../arkui-js/js-components-common-gradient.md)，与background-color、background-image不兼容。 |
| background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 |
| background-image | string | - | 否 | 设置背景图片。与background-color、background不兼容；支持本地图片资源地址。 |
| background-size | -&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | auto | 否 | 设置背景图片的大小。<br/>-&nbsp;string可选值：<br/>&nbsp;&nbsp;-&nbsp;contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。<br/>&nbsp;&nbsp;-&nbsp;cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。<br/>&nbsp;&nbsp;-&nbsp;auto：保持原图的比例不变。<br/>-&nbsp;length值参数方式：<br/>&nbsp;&nbsp;设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。<br/>-&nbsp;百分比参数方式：<br/>&nbsp;&nbsp;以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。 |
| background-repeat | string | repeat | 否 | 针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。<br/>-&nbsp;repeat：在水平轴和竖直轴上同时重复绘制图片。<br/>-&nbsp;repeat-x：只在水平轴上重复绘制图片。<br/>-&nbsp;repeat-y：只在竖直轴上重复绘制图片。<br/>-&nbsp;no-repeat：不会重复绘制图片。 |
| background-position | -&nbsp;string&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | 0px&nbsp;0px | 否 | -&nbsp;关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。<br/>&nbsp;&nbsp;-&nbsp;left：水平方向上最左侧。<br/>&nbsp;&nbsp;-&nbsp;right：水平方向上最右侧。<br/>&nbsp;&nbsp;-&nbsp;top：竖直方向上最顶部。<br/>&nbsp;&nbsp;-&nbsp;bottom：竖直方向上最底部。<br/>&nbsp;&nbsp;-&nbsp;center：水平方向或竖直方向上中间位置。<br/>-&nbsp;length值参数方式：第一个值是水平位置，第二个值是垂直位置。&nbsp;左上角是&nbsp;0&nbsp;0。单位是像素&nbsp;(0px&nbsp;0px)&nbsp;&nbsp;。如果仅规定了一个值，另外一个值将是50%。<br/>-&nbsp;百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是&nbsp;0%&nbsp;0%。右下角是&nbsp;100%&nbsp;100%。如果仅规定了一个值，另外一个值为50%。<br/>-&nbsp;可以混合使用&lt;percentage&gt;和&lt;length&gt; |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
## 事件
仅支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| sizechange | {&nbsp;size:&nbsp;{&nbsp;height:&nbsp;heightLength,&nbsp;width:&nbsp;widthLength&nbsp;},&nbsp;mode:&nbsp;modeStr&nbsp;} | 当可滑动面板发生状态变化时触发，mode参数可选值为：<br/>1.&nbsp;mini：类型为minibar和foldable时，处于最小状态；<br/>2.&nbsp;half:&nbsp;类型为foldable时，处于类半屏状态；<br/>3.&nbsp;full:&nbsp;类全屏状态。<br/>&nbsp;&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;&nbsp;>&nbsp;返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。 |
| 名称 | 参数 | 描述 |
| ---------- | ---------------------------------------- | ---------------------------------------- |
| sizechange | {&nbsp;size:&nbsp;{&nbsp;height:&nbsp;heightLength,&nbsp;width:&nbsp;widthLength&nbsp;},&nbsp;mode:&nbsp;modeStr&nbsp;} | 当可滑动面板发生状态变化时触发，mode参数可选值为：<br/>- &nbsp;mini：类型为minibar和foldable时，处于最小状态；<br/>- &nbsp;half:&nbsp;类型为foldable时，处于类半屏状态；<br/>- &nbsp;full:&nbsp;类全屏状态。<br/>返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。 |
## 方法
仅支持如下方法：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| show | - | 弹出panel可滑动面板。 |
| close | - | 关闭panel可滑动面板。 |
| 名称 | 参数 | 描述 |
| ----- | ---- | ------------- |
| show | - | 弹出panel可滑动面板。 |
| close | - | 关闭panel可滑动面板。 |
## 示例
```
```html
<!-- xxx.hml -->
<div class="doc-page">
<div class="btn-div">
......@@ -101,7 +101,7 @@
</div>
```
```
```css
/* xxx.css */
.doc-page {
flex-direction: column;
......@@ -140,7 +140,7 @@
}
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md
浏览文件 @ cdb6cf82
# popup
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
气泡指示。在点击绑定的控件后会弹出相应的气泡提示来引导用户进行操作。
......@@ -27,7 +27,7 @@
| clickable<sup>5+</sup> | boolean | true | 否 | popup是否使用点击弹窗，当设置为false时，只支持方法调用显示。 |
| arrowoffset<sup>5+</sup> | &lt;length&gt; | 0 | 否 | popup箭头在弹窗处的偏移，默认居中，正值按照语言方向进行偏移，负值相反。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
>
> - 不支持focusable属性。
......@@ -40,7 +40,7 @@
| -------- | -------- | -------- | -------- | -------- |
| mask-color | &lt;color&gt; | - | 否 | 遮罩层的颜色，默认值为全透明。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
>
> - 不支持position相关样式。
......@@ -63,7 +63,7 @@
| show<sup>5+</sup> | - | 弹出气泡提示。 |
| hide<sup>5+</sup> | - | 取消气泡提示。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 1. popup气泡弹窗属性、样式均不支持动态更新。
>
> 2. popup气泡弹窗的margin样式是相对于target元素进行生效的，如popup在target元素下方，此时只生效margin-top样式，popup在target元素左上方，此时只生效margin-bottom和margin-right样式。
......@@ -75,7 +75,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<text id="text">Click to show the pop-up</text>
......@@ -88,7 +88,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -108,7 +108,7 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt'
export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md
浏览文件 @ cdb6cf82
# refresh
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
下拉刷新容器。
......@@ -56,7 +56,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<refresh refreshing="{{fresh}}" onrefresh="refresh">
......@@ -71,7 +71,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -104,7 +104,7 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-container-stack.md
浏览文件 @ cdb6cf82
# stack
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。
......@@ -36,7 +36,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<stack class="stack-parent">
<div class="back-child bd-radius"></div>
......@@ -45,7 +45,7 @@
</stack>
```
```
```css
/* xxx.css */
.stack-parent {
width: 400px;
......
zh-cn/application-dev/reference/arkui-js/js-components-container-stepper-item.md
浏览文件 @ cdb6cf82
# stepper-item
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
步骤导航器子组件，作为步骤导航器某一个步骤的内容展示组件。
......@@ -47,7 +47,7 @@
| text-decoration | string | none | 否 | 文本修饰，可选值为：<br/>-&nbsp;underline:&nbsp;文本下划线修饰。<br/>-&nbsp;line-through:&nbsp;穿过文本的修饰线。<br/>-&nbsp;none:&nbsp;标准文本。 |
| font-family | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> - 不支持长宽样式，宽和父容器stepper一样，高是父容器stepper减去底部导航按钮的高度。
>
> - 不支持posit样式。
......
zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md
浏览文件 @ cdb6cf82
# stepper
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
步骤导航器。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。
......@@ -15,52 +15,52 @@
仅支持&lt;stepper-item&gt;子组件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 步骤导航器内的步骤顺序按照子组件&lt;stepper-item&gt;的顺序进行排序。
> **说明：**
> 步骤导航器内的步骤顺序按照子组件&lt;stepper-item&gt;的顺序进行排序。
## 属性
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| index | number | - | 设置步骤导航器步骤显示第几个stepper-item子组件。 |
| 名称 | 类型 | 默认值 | 描述 |
| ----- | ------ | ---- | ------------------------------ |
| index | number | - | 设置步骤导航器步骤显示第几个stepper-item子组件。 |
## 样式
支持[通用样式](../arkui-js/js-components-common-styles.md)。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> stepper组件默认占满父容器大小，建议父组件使用应用窗口大小（或者父组件为根节点）来优化体验。
> **说明：**
> stepper组件默认占满父容器大小，建议父组件使用应用窗口大小（或者父组件为根节点）来优化体验。
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| finish | 无 | 当步骤导航器最后一个步骤完成时触发该事件。 |
| skip | 无 | 当通过setNextButtonStatus方法设置当前步骤导航器可跳过时，点击右侧跳过按钮触发该事件。 |
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | ---------------------------------------- |
| finish | 无 | 当步骤导航器最后一个步骤完成时触发该事件。 |
| skip | 无 | 当通过setNextButtonStatus方法设置当前步骤导航器可跳过时，点击右侧跳过按钮触发该事件。 |
| change | {&nbsp;prevIndex：prevIndex,&nbsp;index:&nbsp;index} | 当步骤导航器点击左边或者右边文本按钮进行步骤切换时触发该事件，prevIndex表示老步骤的序号，index表示新步骤的序号。 |
| next | {&nbsp;index：index,&nbsp;pendingIndex:&nbsp;pendingIndex&nbsp;} | 当用户点击下一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为：{&nbsp;pendingIndex：pendingIndex&nbsp;}，可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。 |
| back | {&nbsp;index：index,&nbsp;pendingIndex:&nbsp;pendingIndex&nbsp;} | 当用户点击上一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为Object：{&nbsp;pendingIndex：pendingIndex&nbsp;}，可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。 |
| next | {&nbsp;index：index,&nbsp;pendingIndex:&nbsp;pendingIndex&nbsp;} | 当用户点击下一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为：{&nbsp;pendingIndex：pendingIndex&nbsp;}，可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。 |
| back | {&nbsp;index：index,&nbsp;pendingIndex:&nbsp;pendingIndex&nbsp;} | 当用户点击上一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为Object：{&nbsp;pendingIndex：pendingIndex&nbsp;}，可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。 |
## 方法
除支持[通用方法](../arkui-js/js-components-common-methods.md)外，支持如下方法：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| setNextButtonStatus | {&nbsp;status:&nbsp;string,&nbsp;label:&nbsp;label&nbsp;} | 设置当前步骤导航器下一步文本按钮的状态，参数中status类型为string，可选值为：<br/>1.&nbsp;normal：正常状态，下一步文本按钮正常显示，可点击进入下一个步骤；<br/>2.&nbsp;disabled：不可用状态，下一步文本按钮灰度显示，不可点击进入下一个步骤；<br/>3.&nbsp;waiting：等待状态，下一步文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。<br/>4.&nbsp;skip：跳过状态，下一步文本按钮显示跳过按钮，点击时会跳过剩下步骤。 |
| 名称 | 参数 | 描述 |
| ------------------- | ---------------------------------------- | ---------------------------------------- |
| setNextButtonStatus | {&nbsp;status:&nbsp;string,&nbsp;label:&nbsp;label&nbsp;} | 设置当前步骤导航器下一步文本按钮的状态，参数中status类型为string，可选值为：<br/>-&nbsp;normal：正常状态，下一步文本按钮正常显示，可点击进入下一个步骤；<br/>-&nbsp;disabled：不可用状态，下一步文本按钮灰度显示，不可点击进入下一个步骤；<br/>-&nbsp;waiting：等待状态，下一步文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。<br/>-&nbsp;skip：跳过状态，下一步文本按钮显示跳过按钮，点击时会跳过剩下步骤。 |
## 示例
```
```html
<!-- xxx.hml -->
<div class = "container">
<stepper class="stepper" id="mystepper" index="0" onnext="nextclick" onback="backclick">
......@@ -86,7 +86,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
margin-top: 20px;
......@@ -110,7 +110,7 @@
}
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md
浏览文件 @ cdb6cf82
# swiper
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
滑动容器，提供切换子组件显示的能力。
......@@ -19,59 +19,59 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| index | number | 0 | 否 | 当前在容器中显示的子组件的索引值。 |
| autoplay | boolean | false | 否 | 子组件是否自动播放，自动播放状态下，导航点不可操作<sup>5+</sup>。 |
| interval | number | 3000 | 否 | 使用自动播放时播放的时间间隔，单位为ms。 |
| indicator | boolean | true | 否 | 是否启用导航点指示器，默认true。 |
| digital<sup>5+</sup> | boolean | false | 否 | 是否启用数字导航点，默认为false。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;必须设置indicator时才能生效数字导航点。 |
| indicatordisabled<sup>5+</sup> | boolean | false | 否 | 指示器是否禁止用户手势操作，设置为true时，指示器不会响应用户的点击拖拽。 |
| loop | boolean | true | 否 | 是否开启循环滑动。 |
| duration | number | - | 否 | 子组件切换的动画时长。 |
| vertical | boolean | false | 否 | 是否为纵向滑动，纵向滑动时采用纵向的指示器。 |
| cachedsize<sup>7+</sup> | number | -1 | 否 | swiper延迟加载时item最少缓存数量。-1表示全部缓存。 |
| scrolleffect<sup>7+</sup> | string | spring | 否 | 滑动效果。目前支持如下：<br/>-&nbsp;spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。<br/>-&nbsp;fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化<br/>-&nbsp;none：滑动到边缘后无效果。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;该属性仅在loop属性为false时生效。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------------------ | ------- | ------ | ---- | ---------------------------------------- |
| index | number | 0 | 否 | 当前在容器中显示的子组件的索引值。 |
| autoplay | boolean | false | 否 | 子组件是否自动播放，自动播放状态下，导航点不可操作<sup>5+</sup>。 |
| interval | number | 3000 | 否 | 使用自动播放时播放的时间间隔，单位为ms。 |
| indicator | boolean | true | 否 | 是否启用导航点指示器，默认true。 |
| digital<sup>5+</sup> | boolean | false | 否 | 是否启用数字导航点，默认为false。<br/>必须设置indicator时才能生效数字导航点。 |
| indicatordisabled<sup>5+</sup> | boolean | false | 否 | 指示器是否禁止用户手势操作，设置为true时，指示器不会响应用户的点击拖拽。 |
| loop | boolean | true | 否 | 是否开启循环滑动。 |
| duration | number | - | 否 | 子组件切换的动画时长。 |
| vertical | boolean | false | 否 | 是否为纵向滑动，纵向滑动时采用纵向的指示器。 |
| cachedsize<sup>7+</sup> | number | -1 | 否 | swiper延迟加载时item最少缓存数量。-1表示全部缓存。 |
| scrolleffect<sup>7+</sup> | string | spring | 否 | 滑动效果。目前支持如下：<br/>-&nbsp;spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。<br/>-&nbsp;fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化<br/>-&nbsp;none：滑动到边缘后无效果。<br/>该属性仅在loop属性为false时生效。 |
## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| indicator-color | &lt;color&gt; | - | 否 | 导航点指示器的填充颜色。 |
| indicator-selected-color | &lt;color&gt; | \#ff007dff | 否 | 导航点指示器选中的颜色。 |
| indicator-size | &lt;length&gt; | 4px | 否 | 导航点指示器的直径大小。 |
| indicator-top\|left\|right\|bottom | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 导航点指示器在swiper中的相对位置。 |
| next-margin<sup>7+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 后边距，用于露出后一项的一小部分。 |
| previous-margin<sup>7+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 前边距，用于露出前一项的一小部分。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------------------------- | ---------------------------------------- | ---------- | ---- | -------------------- |
| indicator-color | &lt;color&gt; | - | 否 | 导航点指示器的填充颜色。 |
| indicator-selected-color | &lt;color&gt; | \#ff007dff | 否 | 导航点指示器选中的颜色。 |
| indicator-size | &lt;length&gt; | 4px | 否 | 导航点指示器的直径大小。 |
| indicator-top\|left\|right\|bottom | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 导航点指示器在swiper中的相对位置。 |
| next-margin<sup>7+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 后边距，用于露出后一项的一小部分。 |
| previous-margin<sup>7+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 前边距，用于露出前一项的一小部分。 |
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| change | {&nbsp;index:&nbsp;currentIndex&nbsp;} | 当前显示的组件索引变化时触发该事件。 |
| rotation | {&nbsp;value:&nbsp;rotationValue&nbsp;} | 智能穿戴表冠旋转事件触发时的回调。 |
| animationfinish<sup>7+</sup> | - | 动画结束时触发该事件。 |
| 名称 | 参数 | 描述 |
| ---------------------------- | --------------------------------------- | ------------------ |
| change | {&nbsp;index:&nbsp;currentIndex&nbsp;} | 当前显示的组件索引变化时触发该事件。 |
| rotation | {&nbsp;value:&nbsp;rotationValue&nbsp;} | 智能穿戴表冠旋转事件触发时的回调。 |
| animationfinish<sup>7+</sup> | - | 动画结束时触发该事件。 |
## 方法
除支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| swipeTo | {&nbsp;index:&nbsp;number(指定位置)&nbsp;} | 切换到index位置的子组件。 |
| showNext | 无 | 显示下一个子组件。 |
| showPrevious | 无 | 显示上一个子组件。 |
| 名称 | 参数 | 描述 |
| ------------ | -------------------------------------- | --------------- |
| swipeTo | {&nbsp;index:&nbsp;number(指定位置)&nbsp;} | 切换到index位置的子组件。 |
| showNext | 无 | 显示下一个子组件。 |
| showPrevious | 无 | 显示上一个子组件。 |
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<swiper class="swiper" id="swiper" index="0" indicator="true" loop="true" digital="false" cachedsize="-1"
......@@ -92,7 +92,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -139,7 +139,7 @@
}
```
```
```js
// xxx.js
export default {
swipeTo() {
......
zh-cn/application-dev/reference/arkui-js/js-components-container-tab-bar.md
浏览文件 @ cdb6cf82
# tab-bar
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
&lt;[tabs](../arkui-js/js-components-container-tabs.md)&gt;的子组件，用来展示tab的标签区，子组件排列方式为横向排列。
......
zh-cn/application-dev/reference/arkui-js/js-components-container-tab-content.md
浏览文件 @ cdb6cf82
# tab-content
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
&lt;[tabs](../arkui-js/js-components-container-tabs.md)&gt;的子组件，用来展示tab的内容区，高度默认充满tabs剩余空间，子组件排列方式为横向排列，当作为容器组件的子元素时在主轴方向需要设置tab-content的确定长度，否则无法显示。
......
zh-cn/application-dev/reference/arkui-js/js-components-container-tabs.md
浏览文件 @ cdb6cf82
# tabs
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
tab页签容器。
......@@ -19,10 +19,10 @@ tab页签容器。
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| index | number | 0 | 否 | 当前处于激活态的tab索引。 |
| vertical | boolean | false | 否 | 是否为纵向的tab，默认为false，可选值为：<br/>-&nbsp;false：tabbar和tabcontent上下排列。<br/>-&nbsp;true：tabbar和tabcontent左右排列。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------- | ----- | ---- | ---------------------------------------- |
| index | number | 0 | 否 | 当前处于激活态的tab索引。 |
| vertical | boolean | false | 否 | 是否为纵向的tab，默认为false，可选值为：<br/>-&nbsp;false：tabbar和tabcontent上下排列。<br/>-&nbsp;true：tabbar和tabcontent左右排列。 |
## 样式
......@@ -34,14 +34,14 @@ tab页签容器。
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| change | {&nbsp;index:&nbsp;indexValue&nbsp;} | tab页签切换后触发。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;动态修改index值不会触发该回调。 |
| 名称 | 参数 | 描述 |
| ------ | ------------------------------------ | ----------------------------- |
| change | {&nbsp;index:&nbsp;indexValue&nbsp;} | tab页签切换后触发，动态修改index值不会触发该回调。 |
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<tabs class = "tabs" index="0" vertical="false" onchange="change">
......@@ -65,7 +65,7 @@ tab页签容器。
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -99,7 +99,7 @@ tab页签容器。
}
```
```
```js
// xxx.js
export default {
change: function(e) {
......
zh-cn/application-dev/reference/arkui-js/js-components-custom-basic-usage.md
浏览文件 @ cdb6cf82
# 基本用法
自定义组件是用户根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，从而提高代码的可读性。自定义组件通过element引入到宿主页面，使用方法如下：
```
```html
<element name='comp' src='../../common/component/comp.hml'></element>
<div>
<comp prop1='xxxx' @child1="bindParentVmMethod"></comp>
......@@ -10,7 +10,7 @@
结合if-else使用自定义组件的示例：
```
```html
<element name='comp1' src='../../common/component/comp1/comp1.hml'></element>
<element name='comp2' src='../../common/component/comp2/comp2.hml'></element>
<div>
......@@ -23,13 +23,13 @@
- name属性指自定义组件名称(非必填)，组件名称对大小写不敏感，默认使用小写。src属性指自定义组件hml文件路径(必填)，若没有设置name属性，则默认使用hml文件名作为组件名。
- 事件绑定：自定义组件中绑定子组件事件使用(on|@)child1语法，子组件中通过this.$emit('child1', { params: '传递参数' })触发事件并进行传值，父组件执行bindParentVmMethod方法并接收子组件传递的参数。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 子组件中使用驼峰命名法命名的事件，在父组件中绑定时需要使用短横线分隔命名形式，例如：\@children-event表示绑定子组件的childrenEvent事件，如 \@children-event="bindParentVmMethod"。
> **说明：**
> 子组件中使用驼峰命名法命名的事件，在父组件中绑定时需要使用短横线分隔命名形式，例如：\@children-event表示绑定子组件的childrenEvent事件，如 \@children-event="bindParentVmMethod"。
**表1** 对象
| 属性 | 类型 | 描述 |
| -------- | -------- | -------- |
| data | Object/Function | 页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for,&nbsp;if,&nbsp;show,&nbsp;tid。<br/>data与private和public不能重合使用。(Rich) |
| props | Array/Object | props用于组件之间的通信，可以通过&lt;tag&nbsp;xxxx='value'&gt;方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for,&nbsp;if,&nbsp;show,&nbsp;tid。目前props的数据类型不支持Function。 |
| computed | Object | 计算属性，用于在读取或设置时，进行预先处理，其结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。 |
| 属性 | 类型 | 描述 |
| -------- | --------------- | ---------------------------------------- |
| data | Object/Function | 页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for,&nbsp;if,&nbsp;show,&nbsp;tid。<br/>data与private和public不能重合使用。(Rich) |
| props | Array/Object | props用于组件之间的通信，可以通过&lt;tag&nbsp;xxxx='value'&gt;方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for,&nbsp;if,&nbsp;show,&nbsp;tid。目前props的数据类型不支持Function。 |
| computed | Object | 计算属性，用于在读取或设置时，进行预先处理，其结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。 |
zh-cn/application-dev/reference/arkui-js/js-components-custom-event-parameter.md
浏览文件 @ cdb6cf82
......@@ -3,7 +3,7 @@
子组件也可以通过绑定的事件向上传递参数，在自定义事件上添加传递参数的示例如下：
```
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style" onclick="childClicked">点击这里查看隐藏文本</text>
......@@ -12,7 +12,7 @@
```
```
```js
// comp.js
export default {
childClicked () {
......@@ -26,7 +26,7 @@ export default {
子组件向上传递参数text，父组件接收时通过e.detail来获取参数：
```
```html
<!-- xxx.hml -->
<div class="container">
<text>父组件：{{text}}</text>
......@@ -35,7 +35,7 @@ export default {
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-custom-events.md
浏览文件 @ cdb6cf82
......@@ -3,7 +3,7 @@
子组件comp定义如下：
```
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style" onclick="childClicked">点击这里查看隐藏文本</text>
......@@ -12,7 +12,7 @@
```
```
```css
/* comp.css */
.item {
width: 700px;
......@@ -29,7 +29,7 @@
```
```
```js
// comp.js
export default {
data: {
......@@ -46,7 +46,7 @@ export default {
引入子组件的示例如下：
```
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp.hml'></element>
<div class="container">
......@@ -55,7 +55,7 @@ export default {
```
```
```css
/* xxx.css */
.container {
background-color: #f8f8ff;
......@@ -66,7 +66,7 @@ export default {
```
```
```js
// xxx.js
export default {
textClicked () {},
......
zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md
浏览文件 @ cdb6cf82
# 生命周期定义
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API Version 5 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API Version 5 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
我们为自定义组件提供了一系列生命周期回调方法，便于开发者管理自定义组件的内部逻辑。生命周期主要包括：onInit，onAttached，onDetached，onLayoutReady，onDestroy，onPageShow和onPageHide。下面我们依次介绍一下各个生命周期回调的时机。
| 属性 | 类型 | 描述 | 触发时机 |
| -------- | -------- | -------- | -------- |
| onInit | Function | 初始化自定义组件 | 自定义组件初始化生命周期回调，当自定义组件创建时，触发该回调，主要用于自定义组件中必须使用的数据初始化，该回调只会触发一次调用。 |
| onAttached | Function | 自定义组件装载 | 自定义组件被创建后，加入到Page组件树时，触发该回调，该回调触发时，表示组件将被进行显示，该生命周期可用于初始化显示相关数据，通常用于加载图片资源、开始执行动画等场景。 |
| onLayoutReady | Function | 自定义组件布局完成 | 自定义组件插入Page组件树后，将会对自定义组件进行布局计算，调整其内容元素尺寸与位置，当布局计算结束后触发该回调。 |
| onDetached | Function | 自定义组件摘除 | 自定义组件摘除时，触发该回调，常用于停止动画或异步逻辑停止执行的场景。 |
| onDestroy | Function | 自定义组件销毁 | 自定义组件销毁时，触发该回调，常用于资源释放。 |
| onPageShow | Function | 自定义组件Page显示 | 自定义组件所在Page显示后，触发该回调。 |
| onPageHide | Function | 自定义组件Page隐藏 | 自定义组件所在Page隐藏后，触发该回调。 |
| 属性 | 类型 | 描述 | 触发时机 |
| ------------- | -------- | ----------- | ---------------------------------------- |
| onInit | Function | 初始化自定义组件 | 自定义组件初始化生命周期回调，当自定义组件创建时，触发该回调，主要用于自定义组件中必须使用的数据初始化，该回调只会触发一次调用。 |
| onAttached | Function | 自定义组件装载 | 自定义组件被创建后，加入到Page组件树时，触发该回调，该回调触发时，表示组件将被进行显示，该生命周期可用于初始化显示相关数据，通常用于加载图片资源、开始执行动画等场景。 |
| onLayoutReady | Function | 自定义组件布局完成 | 自定义组件插入Page组件树后，将会对自定义组件进行布局计算，调整其内容元素尺寸与位置，当布局计算结束后触发该回调。 |
| onDetached | Function | 自定义组件摘除 | 自定义组件摘除时，触发该回调，常用于停止动画或异步逻辑停止执行的场景。 |
| onDestroy | Function | 自定义组件销毁 | 自定义组件销毁时，触发该回调，常用于资源释放。 |
| onPageShow | Function | 自定义组件Page显示 | 自定义组件所在Page显示后，触发该回调。 |
| onPageHide | Function | 自定义组件Page隐藏 | 自定义组件所在Page隐藏后，触发该回调。 |
## 示例
```
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style">{{value}}</text>
</div>
```
```
```js
//comp.js
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-custom-props.md
浏览文件 @ cdb6cf82
......@@ -3,7 +3,7 @@
自定义组件可以通过props声明属性，父组件通过设置属性向子组件传递参数，props支持类型包括：String，Number，Boolean，Array，Object，Function。camelCase (驼峰命名法) 的 prop 名，在外部父组件传递参数时需要使用 kebab-case (短横线分隔命名) 形式，即当属性compProp在父组件引用时需要转换为comp-prop。给自定义组件添加props，通过父组件向下传递参数的示例如下：
```
```html
<!-- comp.hml -->
<div class="item">
<text class="title-style">{{compProp}}</text>
......@@ -11,7 +11,7 @@
```
```
```js
// comp.js
export default {
props: ['compProp'],
......@@ -19,7 +19,7 @@ export default {
```
```
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp/comp.hml'></element>
<div class="container">
......@@ -28,22 +28,22 @@ export default {
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 自定义属性命名时禁止以on、@、on:、grab: 等保留关键字为开头。
> **说明：**
> 自定义属性命名时禁止以on、@、on:、grab: 等保留关键字为开头。
## 添加默认值
子组件可以通过固定值default设置默认值，当父组件没有设置该属性时，将使用其默认值。此情况下props属性必须为对象形式，不能用数组形式，示例如下：
```
```html
<!-- comp.hml -->
<div class="item">
<text class="title-style">{{title}}</text>
</div>
```
```
```js
// comp.js
export default {
props: {
......@@ -56,7 +56,7 @@ export default {
本示例中加入了一个text组件显示标题，标题的内容是一个自定义属性，显示用户设置的标题内容，当用户没有设置时显示默认值title。在引用该组件时添加该属性的设置：
```
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp/comp.hml'></element>
<div class="container">
......@@ -69,7 +69,7 @@ export default {
父子组件之间数据的传递是单向的，只能从父组件传递给子组件，子组件不能直接修改父组件传递下来的值，可以将props传入的值用data接收后作为默认值，再对data的值进行修改。
```
```js
// comp.js
export default {
props: ['defaultCount'],
......@@ -89,7 +89,7 @@ export default {
如果需要观察组件中属性变化，可以通过$watch方法增加属性变化回调。使用方法如下：
```
```js
// comp.js
export default {
props: ['title'],
......@@ -107,7 +107,7 @@ export default {
自定义组件中经常需要在读取或设置某个属性时进行预先处理，提高开发效率，此种情况就需要使用computed字段。computed字段中可通过设置属性的getter和setter方法在属性读写的时候进行触发，使用方式如下：
```
```js
// comp.js
export default {
props: ['title'],
......
zh-cn/application-dev/reference/arkui-js/js-components-custom-slot.md
浏览文件 @ cdb6cf82
# slot插槽
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API Version 7 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API Version 7 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 默认插槽
自定义组件中通过slot标签来承载父组件中定义的内容，使用slot标签可以更加灵活的控制自定义组件的内容元素，使用方式如下：
```
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style">下面使用父组件定义的内容</text>
......@@ -17,7 +17,7 @@
```
引用该自定义组件方式如下：
```
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp.hml'></element>
<div class="container">
......@@ -32,7 +32,7 @@
当自定义组件中需要使用多个插槽时，可通过对插槽命名的方式进行区分，当填充插槽内容时，通过声明插槽名称，将内容加到对应的插槽中。
```
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style">下面使用父组件定义的内容</text>
......@@ -42,7 +42,7 @@
```
引用该自定义组件方式如下：
```
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp.hml'></element>
<div class="container">
......@@ -53,5 +53,5 @@
</div>
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> name 和 slot 属性不支持绑定动态数据。
> **说明：**
> name 和 slot 属性不支持绑定动态数据。
zh-cn/application-dev/reference/arkui-js/js-components-custom-style.md
浏览文件 @ cdb6cf82
......@@ -4,9 +4,9 @@
自定义组件具有inherit-class属性，定义如下：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------ | ------ | ------ | ---- | ------------------------------------------------------ |
| inherit-class | string | - | 否 | 从父组件继承的class样式，多个class样式之间用空格分隔。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------- | ------ | ---- | ---- | -------------------------------- |
| inherit-class | string | - | 否 | 从父组件继承的class样式，多个class样式之间用空格分隔。 |
可以通过设置inherit-calss属性来继承父组件的样式。
......@@ -21,8 +21,8 @@
```
父页面的css文件
```html
// xxx.css
```css
/* xxx.css */
.parent-class1 {
background-color:red;
border:2px;
......
zh-cn/application-dev/reference/arkui-js/js-components-grid-col.md
浏览文件 @ cdb6cf82
# grid-col
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
grid-col是栅格布局容器grid-row的子容器组件。
......@@ -19,35 +19,35 @@ grid-col是栅格布局容器grid-row的子容器组件。
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| xs | number\|object | - | 否 | 在分辨率为xs模式下，设置该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span":&nbsp;1,&nbsp;"offset":&nbsp;0} |
| sm | number\|object | - | 否 | 在分辨率为sm模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span":&nbsp;1,&nbsp;"offset":&nbsp;0} |
| md | number\|object | - | 否 | 在分辨率为md模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span":&nbsp;1,&nbsp;"offset":&nbsp;0} |
| lg | number\|object | - | 否 | 在分辨率为lg模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span":&nbsp;1,&nbsp;"offset":&nbsp;0} |
| span | number | 1 | 否 | 在未设置明确断点时，默认占用列数 |
| offset | number | 0 | 否 | 未设置具体分辨率模式下偏移时，当前元素延容器布局方向，默认偏移的列数 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------ | -------------- | ---- | ---- | ---------------------------------------- |
| xs | number\|object | - | 否 | 在分辨率为xs模式下，设置该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如<br>`{"span": 1, "offset": 0}` |
| sm | number\|object | - | 否 | 在分辨率为sm模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数。如<br>`{"span": 1, "offset": 0}` |
| md | number\|object | - | 否 | 在分辨率为md模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数。如<br>`{"span": 1, "offset": 0}` |
| lg | number\|object | - | 否 | 在分辨率为lg模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数。如<br>`{"span": 1, "offset": 0}` |
| span | number | 1 | 否 | 在未设置明确断点时，默认占用列数 |
| offset | number | 0 | 否 | 未设置具体分辨率模式下偏移时，当前元素延容器布局方向，默认偏移的列数 |
## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| flex-direction | string | row | 否 | flex容器主轴方向。可选项有：<br/>-&nbsp;column：垂直方向从上到下<br/>-&nbsp;row：水平方向从左到右 |
| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：<br/>-&nbsp;nowrap：不换行，单行显示。<br/>-&nbsp;wrap：换行，多行显示。 |
| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有：<br/>-&nbsp;flex-start：项目位于容器的开头。<br/>-&nbsp;flex-end：项目位于容器的结尾。<br/>-&nbsp;center：项目位于容器的中心。<br/>-&nbsp;space-between：项目位于各行之间留有空白的容器内。<br/>-&nbsp;space-around：项目位于各行之前、之间、之后都留有空白的容器内。 |
| align-items | string | stretch | 否 | flex容器当前行的交叉轴对齐格式，可选值为：<br/>-&nbsp;stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start：元素向交叉轴起点对齐。<br/>-&nbsp;flex-end：元素向交叉轴终点对齐。<br/>-&nbsp;center：元素在交叉轴居中。 |
| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时，多行内容对齐格式，可选值为：<br/>-&nbsp;flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。<br/>-&nbsp;flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。<br/>-&nbsp;center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。<br/>-&nbsp;space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。<br/>-&nbsp;space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 |
| display | string | flex | 否 | 确定该元素视图框的类型，该值暂不支持动态修改。可选值为：<br/>-&nbsp;flex：弹性布局<br/>-&nbsp;grid：网格布局<br/>-&nbsp;none：不渲染此元素 |
| grid-template-[columns\|rows] | string | 1行1列 | 否 | 用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。<br/>示例：如设置grid-template-columns为：<br/>(1)&nbsp;50px&nbsp;100px&nbsp;60px：分三列，第一列50px，第二列100px，第三列60px；<br/>(2)&nbsp;1fr&nbsp;1fr&nbsp;2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；<br/>(3)&nbsp;30%&nbsp;20%&nbsp;50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；<br/>(4)&nbsp;repeat(2,100px)：分两列，第一列100px，第二列100px；<br/>(5)&nbsp;auto&nbsp;1fr&nbsp;1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。 |
| grid-[columns\|rows]-gap | &lt;length&gt; | 0 | 否 | 用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。 |
| grid-row-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
| grid-column-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------------------------- | -------------- | ---------- | ---- | ---------------------------------------- |
| flex-direction | string | row | 否 | flex容器主轴方向。可选项有：<br/>-&nbsp;column：垂直方向从上到下<br/>-&nbsp;row：水平方向从左到右 |
| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：<br/>-&nbsp;nowrap：不换行，单行显示。<br/>-&nbsp;wrap：换行，多行显示。 |
| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有：<br/>-&nbsp;flex-start：项目位于容器的开头。<br/>-&nbsp;flex-end：项目位于容器的结尾。<br/>-&nbsp;center：项目位于容器的中心。<br/>-&nbsp;space-between：项目位于各行之间留有空白的容器内。<br/>-&nbsp;space-around：项目位于各行之前、之间、之后都留有空白的容器内。 |
| align-items | string | stretch | 否 | flex容器当前行的交叉轴对齐格式，可选值为：<br/>-&nbsp;stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start：元素向交叉轴起点对齐。<br/>-&nbsp;flex-end：元素向交叉轴终点对齐。<br/>-&nbsp;center：元素在交叉轴居中。 |
| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时，多行内容对齐格式，可选值为：<br/>-&nbsp;flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。<br/>-&nbsp;flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。<br/>-&nbsp;center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。<br/>-&nbsp;space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。<br/>-&nbsp;space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 |
| display | string | flex | 否 | 确定该元素视图框的类型，该值暂不支持动态修改。可选值为：<br/>-&nbsp;flex：弹性布局<br/>-&nbsp;grid：网格布局<br/>-&nbsp;none：不渲染此元素 |
| grid-template-[columns\|rows] | string | 1行1列 | 否 | 用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。<br/>示例：如设置grid-template-columns为：<br/>- 50px&nbsp;100px&nbsp;60px：分三列，第一列50px，第二列100px，第三列60px；<br/>- 1fr&nbsp;1fr&nbsp;2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；<br/>- 30%&nbsp;20%&nbsp;50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；<br/>- repeat(2,100px)：分两列，第一列100px，第二列100px；<br/>- auto&nbsp;1fr&nbsp;1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。 |
| grid-[columns\|rows]-gap | &lt;length&gt; | 0 | 否 | 用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。 |
| grid-row-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
| grid-column-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 不支持宽度相关样式。
> **说明：**
> 不支持宽度相关样式。
## 事件
......@@ -62,7 +62,7 @@ grid-col是栅格布局容器grid-row的子容器组件。
## 示例
```
```html
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
......@@ -82,7 +82,7 @@ grid-col是栅格布局容器grid-row的子容器组件。
</div>
```
```
```css
/* index.css */
.container {
flex-direction: column;
......@@ -90,7 +90,7 @@ grid-col是栅格布局容器grid-row的子容器组件。
}
```
```
```js
// index.js
import prompt from '@system.prompt';
export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-grid-container.md
浏览文件 @ cdb6cf82
# grid-container
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
栅格布局容器根节点，使用grid-row与grid-col进行栅格布局。
......@@ -38,7 +38,7 @@
| | | md | 8 |32|12|
| | | lg | 12 |48|12|
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
>
> 本章中px单位是在js标签中配置了autoDesignWidth为true。<sup>6+</sup>
......
zh-cn/application-dev/reference/arkui-js/js-components-grid-row.md
浏览文件 @ cdb6cf82
# grid-row
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
grid-row是栅格布局容器grid-container的子容器组件，使用flex横向布局，排列每个grid-col容器，justify-content与align-items默认为flex-start，支持折行显示。
......@@ -31,7 +31,7 @@ grid-row是栅格布局容器grid-container的子容器组件，使用flex横向
| align-items | string | flex-start | 否 | flex容器当前行的交叉轴对齐格式，可选值为：<br/>-&nbsp;stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start：元素向交叉轴起点对齐。<br/>-&nbsp;flex-end：元素向交叉轴终点对齐。<br/>-&nbsp;center：元素在交叉轴居中。 |
| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时，多行内容对齐格式，可选值为：<br/>-&nbsp;flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。<br/>-&nbsp;flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。<br/>-&nbsp;center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。<br/>-&nbsp;space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。<br/>-&nbsp;space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 不支持宽度相关样式。
......
zh-cn/application-dev/reference/arkui-js/js-components-media-video.md
浏览文件 @ cdb6cf82
# video
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
>
> - 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
......@@ -76,12 +76,12 @@
| pause | - | 请求暂停播放视频。 |
| setCurrentTime | {&nbsp;currenttime:&nbsp;value&nbsp;} | 指定视频播放的进度位置，单位为s。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 在attached组件生命周期回调后，可以调用上述组件方法。
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<video id='videoId' src='/common/myDeram.mp4' muted='false' autoplay='false'
......@@ -95,7 +95,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
justify-content: center;
......@@ -103,7 +103,7 @@
}
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-animate.md
浏览文件 @ cdb6cf82
# animate
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
设置svg组件的属性动画。
......@@ -38,7 +38,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400">
......@@ -54,7 +54,7 @@
![zh-cn_image_0000001173324703](figures/zh-cn_image_0000001173324703.gif)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400">
......@@ -70,7 +70,7 @@
![zh-cn_image_0000001167662852](figures/zh-cn_image_0000001167662852.gif)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400">
......@@ -85,7 +85,7 @@
![zh-cn_image_0000001127284938](figures/zh-cn_image_0000001127284938.gif)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="600" height="600">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md
浏览文件 @ cdb6cf82
# animateMotion
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
路径动效。
......@@ -29,7 +29,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md
浏览文件 @ cdb6cf82
# animateTransform
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
transform动效，支持的组件范围：
......@@ -30,7 +30,7 @@ transform动效，支持的组件范围：
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="back_container">
......@@ -71,7 +71,7 @@ transform动效，支持的组件范围：
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -96,7 +96,7 @@ transform动效，支持的组件范围：
动画叠加
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="back_container">
......@@ -131,7 +131,7 @@ transform动效，支持的组件范围：
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -155,7 +155,7 @@ transform动效，支持的组件范围：
涉及组件示例
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="back_container">
......@@ -202,7 +202,7 @@ transform动效，支持的组件范围：
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-circle.md
浏览文件 @ cdb6cf82
# circle
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
圆形形状。
......@@ -30,7 +30,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-common-attributes.md
浏览文件 @ cdb6cf82
# 通用属性
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-ellipse.md
浏览文件 @ cdb6cf82
# ellipse
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
椭圆形状。
......@@ -31,7 +31,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-line.md
浏览文件 @ cdb6cf82
# line
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制线条。
......@@ -31,7 +31,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-path.md
浏览文件 @ cdb6cf82
# path
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制路径。
......@@ -28,7 +28,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-polygon.md
浏览文件 @ cdb6cf82
# polygon
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制多边形。
......@@ -28,7 +28,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" stroke="blue" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-polyline.md
浏览文件 @ cdb6cf82
# polyline
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制折线。
......@@ -28,7 +28,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" stroke="blue" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-rect.md
浏览文件 @ cdb6cf82
# rect
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
用于绘制矩形、圆角矩形。
......@@ -33,7 +33,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md
浏览文件 @ cdb6cf82
......@@ -3,14 +3,14 @@
文本，用于呈现一段信息。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 文本的展示内容需要写在元素标签内，可嵌套tspan子元素标签分段，可嵌套textPath子元素标签按指定路径绘制。
>
> - 只支持被父元素标签svg嵌套。
>
> - 只支持默认字体sans-serif。
> **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 文本的展示内容需要写在元素标签内，可嵌套tspan子元素标签分段，可嵌套textPath子元素标签按指定路径绘制。
>
> - 只支持被父元素标签svg嵌套。
>
> - 只支持默认字体sans-serif。
## 权限列表
......@@ -26,26 +26,26 @@
支持以下表格中的属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| id | string | - | 否 | 组件的唯一标识。 |
| x | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角x轴坐标 |
| y | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角y轴坐标 |
| dx | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本x轴偏移 |
| dy | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本y轴偏移 |
| rotate | number | 0 | 否 | 字体以左下角为圆心旋转角度，正数顺时针，负数逆时针 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| fill | &lt;color&gt; | black | 否 | 字体填充颜色 |
| fill-opacity | number | 1.0 | 否 | 字体填充透明度 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
| stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色 |
| stroke-width | number | 1px | 否 | 字体边框宽度 |
| stroke-opacity | number | 1.0 | 否 | 字体边框透明度 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- |
| id | string | - | 否 | 组件的唯一标识。 |
| x | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角x轴坐标 |
| y | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角y轴坐标 |
| dx | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本x轴偏移 |
| dy | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本y轴偏移 |
| rotate | number | 0 | 否 | 字体以左下角为圆心旋转角度，正数顺时针，负数逆时针 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| fill | &lt;color&gt; | black | 否 | 字体填充颜色 |
| fill-opacity | number | 1.0 | 否 | 字体填充透明度 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
| stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色 |
| stroke-width | number | 1px | 否 | 字体边框宽度 |
| stroke-opacity | number | 1.0 | 否 | 字体边框透明度 |
## 示例
```
```css
/* xxx.css */
.container {
flex-direction: row;
......@@ -56,7 +56,7 @@
}
```
```
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......@@ -78,7 +78,7 @@
属性动画示例
```
```css
/* xxx.css */
.container {
flex-direction: row;
......@@ -89,7 +89,7 @@
}
```
```
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......@@ -105,7 +105,7 @@
![zh-cn_image_0000001173324699](figures/zh-cn_image_0000001173324699.gif)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......@@ -120,7 +120,7 @@
![zh-cn_image_0000001173164783](figures/zh-cn_image_0000001173164783.gif)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md
浏览文件 @ cdb6cf82
......@@ -3,12 +3,12 @@
沿路径绘制文本。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 按指定的路径绘制文本，可嵌套子标签tspan分段。
>
> - 只支持被父元素标签text嵌套。
> **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 按指定的路径绘制文本，可嵌套子标签tspan分段。
>
> - 只支持被父元素标签text嵌套。
## 权限列表
......@@ -26,37 +26,26 @@ tspan。
支持以下表格中的属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| id | string | - | 否 | 组件的唯一标识。 |
| path | string | 0 | 是 | 设置路径的形状。<br/>字母指令表示的意义如下：<br/>-&nbsp;M&nbsp;=&nbsp;moveto<br/>-&nbsp;L&nbsp;=&nbsp;lineto<br/>-&nbsp;H&nbsp;=&nbsp;horizontal&nbsp;lineto<br/>-&nbsp;V&nbsp;=&nbsp;vertical&nbsp;lineto<br/>-&nbsp;C&nbsp;=&nbsp;curveto<br/>-&nbsp;S&nbsp;=&nbsp;smooth&nbsp;curveto<br/>-&nbsp;Q&nbsp;=&nbsp;quadratic&nbsp;Belzier&nbsp;curve<br/>-&nbsp;T&nbsp;=&nbsp;smooth&nbsp;quadratic&nbsp;Belzier&nbsp;curveto<br/>-&nbsp;A&nbsp;=&nbsp;elliptical&nbsp;Arc<br/>-&nbsp;Z&nbsp;=&nbsp;closepath |
| startOffset | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本沿path绘制的起始偏移。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| fill | &lt;color&gt; | black | 否 | 字体填充颜色 |
| by | number | - | 否 | 相对被指定动画的属性偏移值，from默认为原属性值。 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
| fill-opacity | number | 1.0 | 否 | 字体填充透明度 |
| stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色 |
| stroke-width | number | 1px | 否 | 字体边框宽度 |
| stroke-opacity | number | 1.0 | 否 | 字体边框透明度 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- |
| id | string | - | 否 | 组件的唯一标识。 |
| path | string | 0 | 是 | 设置路径的形状。<br/>字母指令表示的意义如下：<br/>-&nbsp;M&nbsp;=&nbsp;moveto<br/>-&nbsp;L&nbsp;=&nbsp;lineto<br/>-&nbsp;H&nbsp;=&nbsp;horizontal&nbsp;lineto<br/>-&nbsp;V&nbsp;=&nbsp;vertical&nbsp;lineto<br/>-&nbsp;C&nbsp;=&nbsp;curveto<br/>-&nbsp;S&nbsp;=&nbsp;smooth&nbsp;curveto<br/>-&nbsp;Q&nbsp;=&nbsp;quadratic&nbsp;Belzier&nbsp;curve<br/>-&nbsp;T&nbsp;=&nbsp;smooth&nbsp;quadratic&nbsp;Belzier&nbsp;curveto<br/>-&nbsp;A&nbsp;=&nbsp;elliptical&nbsp;Arc<br/>-&nbsp;Z&nbsp;=&nbsp;closepath |
| startOffset | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本沿path绘制的起始偏移。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| fill | &lt;color&gt; | black | 否 | 字体填充颜色 |
| by | number | - | 否 | 相对被指定动画的属性偏移值，from默认为原属性值。 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
| fill-opacity | number | 1.0 | 否 | 字体填充透明度 |
| stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色 |
| stroke-width | number | 1px | 否 | 字体边框宽度 |
| stroke-opacity | number | 1.0 | 否 | 字体边框透明度 |
## 示例
textspan属性示例，textpath文本内容沿着属性path中的路径绘制文本，起点偏移20%的path长度。（绘制的元素&lt;path&gt;曲线仅做参照）
```
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1200px;
width: 600px;
}
```
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="50">
......@@ -70,11 +59,23 @@ textspan属性示例，textpath文本内容沿着属性path中的路径绘制文
</div>
```
```css
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1200px;
width: 600px;
}
```
![zh-cn_image_0000001173164775](figures/zh-cn_image_0000001173164775.png)
textpath与tspan组合示例与效果图
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="50">
......@@ -92,7 +93,7 @@ textpath与tspan组合示例与效果图
![zh-cn_image_0000001173324691](figures/zh-cn_image_0000001173324691.png)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="50">
......@@ -112,7 +113,7 @@ textpath与tspan组合示例与效果图
![zh-cn_image_0000001173324689](figures/zh-cn_image_0000001173324689.png)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="50">
......@@ -135,7 +136,7 @@ textpath与tspan组合示例与效果图
startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘制超出path长度范围的文本。
```
```css
/* xxx.css */
.container {
flex-direction: row;
......@@ -146,7 +147,7 @@ startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘
}
```
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
......@@ -167,7 +168,7 @@ startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘
textpath与tspan组合属性动画与效果图
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
......@@ -204,7 +205,7 @@ textpath与tspan组合属性动画与效果图
textpath与tspan组合属性动画与效果图
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
......@@ -242,7 +243,7 @@ textpath与tspan组合属性动画与效果图
textpath与tspan组合属性动画与效果图
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-tspan.md
浏览文件 @ cdb6cf82
......@@ -3,12 +3,12 @@
添加文本样式。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 文本的展示内容需要写在元素标签内，可嵌套子元素标签tspan分段。
>
> - 文本分段，只支持被父元素标签svg嵌套。
> **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 文本的展示内容需要写在元素标签内，可嵌套子元素标签tspan分段。
>
> - 文本分段，只支持被父元素标签svg嵌套。
## 权限列表
......@@ -23,37 +23,25 @@
支持以下表格中的属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| id | string | - | 否 | 组件的唯一标识。 |
| x | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角x轴坐标。 |
| y | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角y轴坐标。作为textpath子组件时失效。 |
| dx | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本x轴偏移。 |
| dy | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本y轴偏移。作为textpath子组件时失效。 |
| rotate | number | 0 | 否 | 字体以左下角为圆心旋转角度，正数顺时针，负数逆时针。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| fill | &lt;color&gt; | black | 否 | 字体填充颜色。 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
| fill-opacity | number | 1.0 | 否 | 字体填充透明度。 |
| stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色。 |
| stroke-width | number | 1px | 否 | 字体边框宽度。 |
| stroke-opacity | number | 1.0 | 否 | 字体边框透明度。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- |
| id | string | - | 否 | 组件的唯一标识。 |
| x | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角x轴坐标。 |
| y | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角y轴坐标。作为textpath子组件时失效。 |
| dx | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本x轴偏移。 |
| dy | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本y轴偏移。作为textpath子组件时失效。 |
| rotate | number | 0 | 否 | 字体以左下角为圆心旋转角度，正数顺时针，负数逆时针。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| fill | &lt;color&gt; | black | 否 | 字体填充颜色。 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
| fill-opacity | number | 1.0 | 否 | 字体填充透明度。 |
| stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色。 |
| stroke-width | number | 1px | 否 | 字体边框宽度。 |
| stroke-opacity | number | 1.0 | 否 | 字体边框透明度。 |
## 示例
```
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1000px;
width: 1080px;
}
```
```
```html
<!-- xxx.hml -->
<div class="container">
<svg >
......@@ -73,22 +61,22 @@
</div>
```
![zh-cn_image_0000001127125196](figures/zh-cn_image_0000001127125196.png)
属性动画示例
```
```css
/* xxx.css */
.container {
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 3000px;
height: 1000px;
width: 1080px;
}
```
```
![zh-cn_image_0000001127125196](figures/zh-cn_image_0000001127125196.png)
属性动画示例
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......@@ -111,9 +99,20 @@
</div>
```
```css
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 3000px;
width: 1080px;
}
```
![zh-cn_image_0000001127285008](figures/zh-cn_image_0000001127285008.gif)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......@@ -130,7 +129,7 @@
![zh-cn_image_0000001127125198](figures/zh-cn_image_0000001127125198.gif)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......@@ -146,7 +145,7 @@
![zh-cn_image_0000001173164863](figures/zh-cn_image_0000001173164863.gif)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......
zh-cn/application-dev/reference/arkui-js/js-components-svg.md
浏览文件 @ cdb6cf82
......@@ -3,7 +3,7 @@
基础容器，主要作为svg的根节点使用，也可以在svg中嵌套使用。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - svg父组件或者svg组件需要定义宽高值，否则不进行绘制。
......@@ -34,7 +34,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
浏览文件 @ cdb6cf82
# OffscreenCanvasRenderingContext2D对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
使用OffscreenCanvasRenderingContext2D在offscreen canvas上进行绘制，绘制对象可以是矩形、文本、图片等
......@@ -11,65 +11,62 @@
除支持与CanvasRenderingContext2D对象相同的属性外，还支持如下属性：
| 属性 | 类型 | 描述 |
| -------- | -------- | -------- |
| 属性 | 类型 | 描述 |
| ------ | ------ | ---------------------------------------- |
| filter | string | 设置图像的滤镜。<br/>支持的滤镜效果如下：<br/>-&nbsp;blur：给图像设置高斯模糊<br/>-&nbsp;brightness：给图片应用一种线性乘法，使其看起来更亮或更暗<br/>-&nbsp;contrast：调整图像的对比度<br/>-&nbsp;drop-shadow：给图像设置一个阴影效果<br/>-&nbsp;grayscale：将图像转换为灰度图像<br/>-&nbsp;hue-rotate：给图像应用色相旋转<br/>-&nbsp;invert：反转输入图像<br/>-&nbsp;opacity：转化图像的透明程度<br/>-&nbsp;saturate：转换图像饱和度<br/>-&nbsp;sepia：将图像转换为深褐色 |
- 示例
```
<!-- xxx.hml -->
<div style="width: 180px; height: 60px;">
<canvas ref="canvasId" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
```
//xxx.js
export default {
onShow(){
var ctx = this.$refs.canvasId.getContext('2d');
var offscreen = new OffscreenCanvas(360, 500);
var offCanvas2 = offscreen.getContext("2d");
var img = new Image();
img.src = 'common/images/flower.jpg';
offCanvas2.drawImage(img, 0, 0, 100, 100);
offCanvas2.filter = 'blur(5px)';
offCanvas2.drawImage(img, 100, 0, 100, 100);
offCanvas2.filter = 'grayscale(50%)';
offCanvas2.drawImage(img, 200, 0, 100, 100);
offCanvas2.filter = 'hue-rotate(90deg)';
offCanvas2.drawImage(img, 0, 100, 100, 100);
offCanvas2.filter = 'invert(100%)';
offCanvas2.drawImage(img, 100, 100, 100, 100);
offCanvas2.filter = 'drop-shadow(8px 8px 10px green)';
offCanvas2.drawImage(img, 200, 100, 100, 100);
offCanvas2.filter = 'brightness(0.4)';
offCanvas2.drawImage(img, 0, 200, 100, 100);
offCanvas2.filter = 'opacity(25%)';
offCanvas2.drawImage(img, 100, 200, 100, 100);
offCanvas2.filter = 'saturate(30%)';
offCanvas2.drawImage(img, 200, 200, 100, 100);
offCanvas2.filter = 'sepia(60%)';
offCanvas2.drawImage(img, 0, 300, 100, 100);
offCanvas2.filter = 'contrast(200%)';
offCanvas2.drawImage(img, 100, 300, 100, 100);
var bitmap = offscreen.transferToImageBitmap();
ctx.transferFromImageBitmap(bitmap);
}
**示例：**
```html
<!-- xxx.hml -->
<div style="width: 180px; height: 60px;">
<canvas ref="canvasId" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
```js
// xxx.js
export default {
onShow(){
var ctx = this.$refs.canvasId.getContext('2d');
var offscreen = new OffscreenCanvas(360, 500);
var offCanvas2 = offscreen.getContext("2d");
var img = new Image();
img.src = 'common/images/flower.jpg';
offCanvas2.drawImage(img, 0, 0, 100, 100);
offCanvas2.filter = 'blur(5px)';
offCanvas2.drawImage(img, 100, 0, 100, 100);
offCanvas2.filter = 'grayscale(50%)';
offCanvas2.drawImage(img, 200, 0, 100, 100);
offCanvas2.filter = 'hue-rotate(90deg)';
offCanvas2.drawImage(img, 0, 100, 100, 100);
offCanvas2.filter = 'invert(100%)';
offCanvas2.drawImage(img, 100, 100, 100, 100);
offCanvas2.filter = 'drop-shadow(8px 8px 10px green)';
offCanvas2.drawImage(img, 200, 100, 100, 100);
offCanvas2.filter = 'brightness(0.4)';
offCanvas2.drawImage(img, 0, 200, 100, 100);
offCanvas2.filter = 'opacity(25%)';
offCanvas2.drawImage(img, 100, 200, 100, 100);
offCanvas2.filter = 'saturate(30%)';
offCanvas2.drawImage(img, 200, 200, 100, 100);
offCanvas2.filter = 'sepia(60%)';
offCanvas2.drawImage(img, 0, 300, 100, 100);
offCanvas2.filter = 'contrast(200%)';
offCanvas2.drawImage(img, 100, 300, 100, 100);
var bitmap = offscreen.transferToImageBitmap();
ctx.transferFromImageBitmap(bitmap);
}
```
}
```
## 方法
......@@ -82,50 +79,49 @@ isPointInPath(path?: Path2D, x: number, y: number): boolean
判断指定点是否在路径的区域内。
- 参数
| 参数名 | 参数类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| path | Path2D | 否 | 可选对象，指定用来判断的路径。若没有设置，则使用当前路径。 |
| x | number | 是 | 待判断点的x轴坐标。 |
| y | number | 是 | 待判断点的y轴坐标。 |
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| boolean | 指定点是否在路径的区域内。 |
- 示例
```
<!-- xxx.hml -->
<div style="width: 180px; height: 60px;">
<text>In path:{{textValue}}</text>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
```
// xxx.js
export default {
data: {
textValue: 0
},
onShow(){
var canvas = this.$refs.canvas.getContext('2d');
var offscreen = new OffscreenCanvas(500,500);
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.rect(10, 10, 100, 100);
offscreenCanvasCtx.fill();
this.textValue = offscreenCanvasCtx.isPointInPath(30, 70);
var bitmap = offscreen.transferToImageBitmap();
canvas.transferFromImageBitmap(bitmap);
}
**参数：**
| 参数名 | 参数类型 | 必填 | 描述 |
| ---- | ------ | ---- | ----------------------------- |
| path | Path2D | 否 | 可选对象，指定用来判断的路径。若没有设置，则使用当前路径。 |
| x | number | 是 | 待判断点的x轴坐标。 |
| y | number | 是 | 待判断点的y轴坐标。 |
**返回值：**
| 类型 | 说明 |
| ------- | ------------- |
| boolean | 指定点是否在路径的区域内。 |
**示例：**
```html
<!-- xxx.hml -->
<div style="width: 180px; height: 60px;">
<text>In path:{{textValue}}</text>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
```js
// xxx.js
export default {
data: {
textValue: 0
},
onShow(){
var canvas = this.$refs.canvas.getContext('2d');
var offscreen = new OffscreenCanvas(500,500);
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.rect(10, 10, 100, 100);
offscreenCanvasCtx.fill();
this.textValue = offscreenCanvasCtx.isPointInPath(30, 70);
var bitmap = offscreen.transferToImageBitmap();
canvas.transferFromImageBitmap(bitmap);
}
```
![zh-cn_image_0000001224354967](figures/zh-cn_image_0000001224354967.png)
}
```
![zh-cn_image_0000001224354967](figures/zh-cn_image_0000001224354967.png)
### isPointInStroke
......@@ -133,91 +129,89 @@ isPointInStroke(path?: Path2D, x: number, y: number): boolean
判断指定点是否在路径的边缘线上。
- 参数
| 参数名 | 参数类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| path | Path2D | 否 | 可选对象，指定用来判断的路径。若没有设置，则使用当前路径。 |
| x | number | 是 | 待判断点的x轴坐标。 |
| y | number | 是 | 待判断点的y轴坐标。 |
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| boolean | 指定点是否在路径的区域内。 |
- 示例
```
<!-- xxx.hml -->
<div style="width: 180px; height: 60px;">
<text>In path:{{textValue}}</text>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
```
// xxx.js
export default {
data: {
textValue: 0
},
onShow(){
var canvas = this.$refs.canvas.getContext('2d');
var offscreen = new OffscreenCanvas(500,500);
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.rect(10, 10, 100, 100);
offscreenCanvasCtx.stroke();
this.textValue = offscreenCanvasCtx.isPointInStroke(50, 10);
var bitmap = offscreen.transferToImageBitmap();
canvas.transferFromImageBitmap(bitmap);
}
**参数：**
| 参数名 | 参数类型 | 必填 | 描述 |
| ---- | ------ | ---- | ----------------------------- |
| path | Path2D | 否 | 可选对象，指定用来判断的路径。若没有设置，则使用当前路径。 |
| x | number | 是 | 待判断点的x轴坐标。 |
| y | number | 是 | 待判断点的y轴坐标。 |
**返回值：**
| 类型 | 说明 |
| ------- | ------------- |
| boolean | 指定点是否在路径的区域内。 |
**示例：**
```html
<!-- xxx.hml -->
<div style="width: 180px; height: 60px;">
<text>In path:{{textValue}}</text>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
```js
// xxx.js
export default {
data: {
textValue: 0
},
onShow(){
var canvas = this.$refs.canvas.getContext('2d');
var offscreen = new OffscreenCanvas(500,500);
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.rect(10, 10, 100, 100);
offscreenCanvasCtx.stroke();
this.textValue = offscreenCanvasCtx.isPointInStroke(50, 10);
var bitmap = offscreen.transferToImageBitmap();
canvas.transferFromImageBitmap(bitmap);
}
```
![zh-cn_image_0000001178875308](figures/zh-cn_image_0000001178875308.png)
}
```
![zh-cn_image_0000001178875308](figures/zh-cn_image_0000001178875308.png)
### resetTransform
resetTransform(): void
- 示例
```
<!-- xxx.hml -->
<div style="width: 180px; height: 60px;">
<text>In path:{{textValue}}</text>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
```
//xxx.js
export default {
data:{
textValue:0
},
onShow(){
var canvas = this.$refs.canvas.getContext('2d');
var offscreen = new OffscreenCanvas(500,500);
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0);
offscreenCanvasCtx.fillStyle = 'gray';
offscreenCanvasCtx.fillRect(40, 40, 50, 20);
offscreenCanvasCtx.fillRect(40, 90, 50, 20);
// Non-skewed rectangles
offscreenCanvasCtx.resetTransform();
offscreenCanvasCtx.fillStyle = 'red';
offscreenCanvasCtx.fillRect(40, 40, 50, 20);
offscreenCanvasCtx.fillRect(40, 90, 50, 20);
var bitmap = offscreen.transferToImageBitmap();
canvas.transferFromImageBitmap(bitmap);
}
}
```
![zh-cn_image_0000001179035242](figures/zh-cn_image_0000001179035242.png)
**示例：**
```html
<!-- xxx.hml -->
<div style="width: 180px; height: 60px;">
<text>In path:{{textValue}}</text>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
```js
// xxx.js
export default {
data:{
textValue:0
},
onShow(){
var canvas = this.$refs.canvas.getContext('2d');
var offscreen = new OffscreenCanvas(500,500);
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0);
offscreenCanvasCtx.fillStyle = 'gray';
offscreenCanvasCtx.fillRect(40, 40, 50, 20);
offscreenCanvasCtx.fillRect(40, 90, 50, 20);
// Non-skewed rectangles
offscreenCanvasCtx.resetTransform();
offscreenCanvasCtx.fillStyle = 'red';
offscreenCanvasCtx.fillRect(40, 40, 50, 20);
offscreenCanvasCtx.fillRect(40, 90, 50, 20);
var bitmap = offscreen.transferToImageBitmap();
canvas.transferFromImageBitmap(bitmap);
}
}
```
![zh-cn_image_0000001179035242](figures/zh-cn_image_0000001179035242.png)
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或