Skip to content

D
Docs

OpenHarmony / Docs
接近 2 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 ef9856b9 编写于 作者: H HelloCrease
浏览文件
操作

update docs 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 c2f0d634
隐藏空白更改
内联 并排
Showing with 495 addition and 504 deletion
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
浏览文件 @ ef9856b9
# XComponent
> **说明：**
> 该组件从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> 该组件从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
可用于EGL/OpenGLES和媒体数据写入，并显示在XComponent组件。
......@@ -84,7 +84,9 @@ getXComponentContext(): Object
## 示例
提供surface类型XComponent，支持相机预览等能力。
示例效果请以真机运行为准，当前IDE预览器不支持。
```ts
// xxx.ets
import camera from '@ohos.multimedia.camera';
......
zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @ ef9856b9
......@@ -29,6 +29,8 @@ Swiper(value:{controller?: SwiperController})
## 属性
不支持[Menu控制](ts-universal-attributes-menu.md)。
| 名称 | 参数类型 | 默认值 | 描述 |
| --------------------------- | ---------------------------------------- | ---------- | ---------------------------------------- |
| index | number | 0 | 设置当前在容器中显示的子组件的索引值。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ ef9856b9
......@@ -3,7 +3,7 @@
例如背景模糊、内容模糊和灰度效果等。
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -14,23 +14,24 @@
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| blur | number | - | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 |
| backdropBlur | number | - | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 |
| shadow | {<br/>radius:&nbsp;number,<br/>color?:&nbsp;Color&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>offsetX?:&nbsp;number,<br/>offsetY?:&nbsp;number<br/>} | - | 为当前组件添加阴影效果，入参为模糊半径(必填)、阴影的颜色(可选，默认为灰色)、X轴的偏移量(可选，默认为0)，Y轴的偏移量(可选，默认为0)，偏移量单位为px。 |
| grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比) |
| brightness | number | 1.0 | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑；大于1时亮度增加，数值越大亮度越大。 |
| saturate | number | 1.0 | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大；小于1时消色成分越大，饱和度越小。（百分比） |
| contrast | number | 1.0 | 为当前组件添加对比度效果，入参为对比度的值，值为1时，显示原图；大于1时，值越大对比度越高，图像越清晰醒目；小于1时，值越小对比度越低；当对比度为0时，图像变为全灰。（百分比） |
| invert | number | 0 | 反转输入的图像。入参为图像反转的比例。值为1时完全反转。值为0则图像无变化。（百分比） |
| colorBlend&nbsp;<sup>8+</sup> | Color&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型)| | - | 为当前组件添加颜色叠加效果，入参为叠加的颜色。 |
| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的，值为0图像无变化。&nbsp;（百分比） |
| hueRotate | number | string | '0deg' | 为当前组件添加色相旋转效果，入参为旋转的角度值，0deg时图像无变化。入参没有最大值，超过360deg时相当于又绕一圈，即，370deg和10deg的色相旋转效果相同。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------------------- | ---------------------------------------- | ------ | ---------------------------------------- |
| blur | number | - | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 |
| backdropBlur | number | - | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 |
| shadow | {<br/>radius:&nbsp;number,<br/>color?:&nbsp;Color&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>offsetX?:&nbsp;number,<br/>offsetY?:&nbsp;number<br/>} | - | 为当前组件添加阴影效果，入参为模糊半径(必填)、阴影的颜色(可选，默认为灰色)、X轴的偏移量(可选，默认为0)，Y轴的偏移量(可选，默认为0)，偏移量单位为px。 |
| grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比) |
| brightness | number | 1.0 | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑；大于1时亮度增加，数值越大亮度越大。 |
| saturate | number | 1.0 | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大；小于1时消色成分越大，饱和度越小。（百分比） |
| contrast | number | 1.0 | 为当前组件添加对比度效果，入参为对比度的值，值为1时，显示原图；大于1时，值越大对比度越高，图像越清晰醒目；小于1时，值越小对比度越低；当对比度为0时，图像变为全灰。（百分比） |
| invert | number | 0 | 反转输入的图像。入参为图像反转的比例。值为1时完全反转。值为0则图像无变化。（百分比） |
| colorBlend&nbsp;<sup>8+</sup> | Color&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | | - |
| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的，值为0图像无变化。&nbsp;（百分比） |
| hueRotate | number | string | '0deg' |
## 示例
示例效果请以真机运行为准，当前IDE预览器不支持。
```ts
// xxx.ets
@Entry
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-appendix-types.md
浏览文件 @ ef9856b9
......@@ -6,166 +6,166 @@
## 长度类型
| 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- |
| length | string&nbsp;\|&nbsp;number | 用于描述尺寸单位，输入为number类型时，使用px单位。输入为string类型时，需要显式指定像素单位，当前支持的像素单位有：<br/>-&nbsp;px：逻辑尺寸单位。<br/>-&nbsp;fp：字体尺寸单位，随系统字体大小设置发生变化，仅支持文本类组件设置相应的字体大小。 |
| percentage | string | 百分比尺寸单位，如“50%”。 |
| 名称 | 类型定义 | 描述 |
| ---------- | -------------------------- | ---------------------------------------- |
| length | string&nbsp;\|&nbsp;number | 用于描述尺寸单位，输入为number类型时，使用px单位。输入为string类型时，需要显式指定像素单位，当前支持的像素单位有：<br/>-&nbsp;px：逻辑尺寸单位。<br/>-&nbsp;fp：字体尺寸单位，随系统字体大小设置发生变化，仅支持文本类组件设置相应的字体大小。 |
| percentage | string | 百分比尺寸单位，如“50%”。 |
## 颜色类型
| 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- |
| 名称 | 类型定义 | 描述 |
| ----- | ------------------ | ---------------------------------------- |
| color | string&nbsp;\|颜色枚举 | 用于描述颜色信息。<br/>&nbsp;&nbsp;字符串格式如下：<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/>JS脚本中不支持颜色枚举格式。 |
**表1** 当前支持的颜色枚举
| 枚举名称 | 对应颜色 | 颜色 |
| -------- | -------- | -------- |
| aliceblue | \#f0f8ff | ![aliceblue](figures/aliceblue.png) |
| antiquewhite | \#faebd7 | ![antiquewhite](figures/antiquewhite.png) |
| aqua | \#00ffff | ![aqua](figures/aqua.png) |
| aquamarine | \#7fffd4 | ![aquamarine](figures/aquamarine.png) |
| azure | \#f0ffff | ![azure](figures/azure.png) |
| beige | \#f5f5dc | ![beige](figures/beige.png) |
| bisque | \#ffe4c4 | ![bisque](figures/bisque.png) |
| black | \#000000 | ![#000000](figures/#000000.png) |
| blanchedalmond | \#ffebcd | ![blanchedalmond](figures/blanchedalmond.png) |
| blue | \#0000ff | ![blue](figures/blue.png) |
| blueviolet | \#8a2be2 | ![blueviolet](figures/blueviolet.png) |
| brown | \#a52a2a | ![brown](figures/brown.png) |
| burlywood | \#deB887 | ![burlywood](figures/burlywood.png) |
| cadetblue | \#5f9ea0 | ![cadetblue](figures/cadetblue.png) |
| chartreuse | \#7fff00 | ![chartreuse](figures/chartreuse.png) |
| chocolate | \#d2691e | ![chocolate](figures/chocolate.png) |
| coral | \#ff7f50 | ![coral](figures/coral.png) |
| cornflowerblue | \#6495ed | ![cornflowerblue](figures/cornflowerblue.png) |
| cornsilk | \#fff8dc | ![cornsilk](figures/cornsilk.png) |
| crimson | \#dc143c | ![crimson](figures/crimson.png) |
| cyan | \#00ffff | ![cyan](figures/cyan.png) |
| darkblue | \#00008b | ![darkblue](figures/darkblue.png) |
| darkcyan | \#008b8b | ![darkcyan](figures/darkcyan.png) |
| darkgoldenrod | \#b8860b | ![darkgoldenrod](figures/darkgoldenrod.png) |
| darkgray | \#a9a9a9 | ![darkgray](figures/darkgray.png) |
| darkgreen | \#006400 | ![darkgreen](figures/darkgreen.png) |
| darkgrey | \#a9a9a9 | ![darkgrey](figures/darkgrey.png) |
| darkkhaki | \#bdb76b | ![darkkhaki](figures/darkkhaki.png) |
| darkmagenta | \#8b008b | ![darkmagenta](figures/darkmagenta.png) |
| darkolivegreen | \#556b2f | ![darkolivegreen](figures/darkolivegreen.png) |
| darkorange | \#ff8c00 | ![darkorange](figures/darkorange.png) |
| darkorchid | \#9932cc | ![darkorchid](figures/darkorchid.png) |
| darkred | \#8b0000 | ![darkred](figures/darkred.png) |
| darksalmon | \#e9967a | ![darksalmon](figures/darksalmon.png) |
| darkseagreen | \#8fbc8f | ![darkseagreen](figures/darkseagreen.png) |
| darkslateblue | \#483d8b | ![darkslateblue](figures/darkslateblue.png) |
| darkslategray | \#2f4f4f | ![darkslategray](figures/darkslategray.png) |
| darkslategrey | \#2f4f4f | ![darkslategrey](figures/darkslategrey.png) |
| darkturquoise | \#00ced1 | ![darkturquoise](figures/darkturquoise.png) |
| darkviolet | \#9400d3 | ![darkviolet](figures/darkviolet.png) |
| deeppink | \#ff1493 | ![deeppink](figures/deeppink.png) |
| deepskyblue | \#00bfff | ![deepskyblue](figures/deepskyblue.png) |
| dimgray | \#696969 | ![dimgray](figures/dimgray.png) |
| dimgrey | \#696969 | ![dimgrey](figures/dimgrey.png) |
| dodgerblue | \#1e90ff | ![dodgerblue](figures/dodgerblue.png) |
| firebrick | \#b22222 | ![firebrick](figures/firebrick.png) |
| floralwhite | \#fffaf0 | ![floralwhite](figures/floralwhite.png) |
| forestgreen | \#228b22 | ![forestgreen](figures/forestgreen.png) |
| fuchsia | \#ff00ff | ![fuchsia](figures/fuchsia.png) |
| gainsboro | \#dcdcdc | ![gainsboro](figures/gainsboro.png) |
| ghostwhite | \#f8f8ff | ![ghostwhite](figures/ghostwhite.png) |
| gold | \#ffd700 | ![gold](figures/gold.png) |
| goldenrod | \#daa520 | ![goldenrod](figures/goldenrod.png) |
| gray | \#808080 | ![gray](figures/gray.png) |
| green | \#008000 | ![green](figures/green.png) |
| greenyellow | \#adff2f | ![greenyellow](figures/greenyellow.png) |
| grey | \#808080 | ![grey](figures/grey.png) |
| honeydew | \#f0fff0 | ![honeydew](figures/honeydew.png) |
| hotpink | \#ff69b4 | ![hotpink](figures/hotpink.png) |
| indianred | \#cd5c5c | ![indianred](figures/indianred.png) |
| indigo | \#4b0082 | ![indigo](figures/indigo.png) |
| ivory | \#fffff0 | ![ivory](figures/ivory.png) |
| khaki | \#f0e68c | ![khaki](figures/khaki.png) |
| lavender | \#e6e6fa | ![lavender](figures/lavender.png) |
| lavenderblush | \#fff0f5 | ![lavenderblush](figures/lavenderblush.png) |
| lawngreen | \#7cfc00 | ![lawngreen](figures/lawngreen.png) |
| lemonchiffon | \#fffacd | ![lemonchiffon](figures/lemonchiffon.png) |
| lightblue | \#add8e6 | ![lightblue](figures/lightblue.png) |
| lightcoral | \#f08080 | ![lightcoral](figures/lightcoral.png) |
| lightcyan | \#e0ffff | ![lightcyan](figures/lightcyan.png) |
| 枚举名称 | 对应颜色 | 颜色 |
| -------------------- | -------- | ---------------------------------------- |
| aliceblue | \#f0f8ff | ![aliceblue](figures/aliceblue.png) |
| antiquewhite | \#faebd7 | ![antiquewhite](figures/antiquewhite.png) |
| aqua | \#00ffff | ![aqua](figures/aqua.png) |
| aquamarine | \#7fffd4 | ![aquamarine](figures/aquamarine.png) |
| azure | \#f0ffff | ![azure](figures/azure.png) |
| beige | \#f5f5dc | ![beige](figures/beige.png) |
| bisque | \#ffe4c4 | ![bisque](figures/bisque.png) |
| black | \#000000 | ![#000000](figures/000000.png) |
| blanchedalmond | \#ffebcd | ![blanchedalmond](figures/blanchedalmond.png) |
| blue | \#0000ff | ![blue](figures/blue.png) |
| blueviolet | \#8a2be2 | ![blueviolet](figures/blueviolet.png) |
| brown | \#a52a2a | ![brown](figures/brown.png) |
| burlywood | \#deB887 | ![burlywood](figures/burlywood.png) |
| cadetblue | \#5f9ea0 | ![cadetblue](figures/cadetblue.png) |
| chartreuse | \#7fff00 | ![chartreuse](figures/chartreuse.png) |
| chocolate | \#d2691e | ![chocolate](figures/chocolate.png) |
| coral | \#ff7f50 | ![coral](figures/coral.png) |
| cornflowerblue | \#6495ed | ![cornflowerblue](figures/cornflowerblue.png) |
| cornsilk | \#fff8dc | ![cornsilk](figures/cornsilk.png) |
| crimson | \#dc143c | ![crimson](figures/crimson.png) |
| cyan | \#00ffff | ![cyan](figures/cyan.png) |
| darkblue | \#00008b | ![darkblue](figures/darkblue.png) |
| darkcyan | \#008b8b | ![darkcyan](figures/darkcyan.png) |
| darkgoldenrod | \#b8860b | ![darkgoldenrod](figures/darkgoldenrod.png) |
| darkgray | \#a9a9a9 | ![darkgray](figures/darkgray.png) |
| darkgreen | \#006400 | ![darkgreen](figures/darkgreen.png) |
| darkgrey | \#a9a9a9 | ![darkgrey](figures/darkgrey.png) |
| darkkhaki | \#bdb76b | ![darkkhaki](figures/darkkhaki.png) |
| darkmagenta | \#8b008b | ![darkmagenta](figures/darkmagenta.png) |
| darkolivegreen | \#556b2f | ![darkolivegreen](figures/darkolivegreen.png) |
| darkorange | \#ff8c00 | ![darkorange](figures/darkorange.png) |
| darkorchid | \#9932cc | ![darkorchid](figures/darkorchid.png) |
| darkred | \#8b0000 | ![darkred](figures/darkred.png) |
| darksalmon | \#e9967a | ![darksalmon](figures/darksalmon.png) |
| darkseagreen | \#8fbc8f | ![darkseagreen](figures/darkseagreen.png) |
| darkslateblue | \#483d8b | ![darkslateblue](figures/darkslateblue.png) |
| darkslategray | \#2f4f4f | ![darkslategray](figures/darkslategray.png) |
| darkslategrey | \#2f4f4f | ![darkslategrey](figures/darkslategrey.png) |
| darkturquoise | \#00ced1 | ![darkturquoise](figures/darkturquoise.png) |
| darkviolet | \#9400d3 | ![darkviolet](figures/darkviolet.png) |
| deeppink | \#ff1493 | ![deeppink](figures/deeppink.png) |
| deepskyblue | \#00bfff | ![deepskyblue](figures/deepskyblue.png) |
| dimgray | \#696969 | ![dimgray](figures/dimgray.png) |
| dimgrey | \#696969 | ![dimgrey](figures/dimgrey.png) |
| dodgerblue | \#1e90ff | ![dodgerblue](figures/dodgerblue.png) |
| firebrick | \#b22222 | ![firebrick](figures/firebrick.png) |
| floralwhite | \#fffaf0 | ![floralwhite](figures/floralwhite.png) |
| forestgreen | \#228b22 | ![forestgreen](figures/forestgreen.png) |
| fuchsia | \#ff00ff | ![fuchsia](figures/fuchsia.png) |
| gainsboro | \#dcdcdc | ![gainsboro](figures/gainsboro.png) |
| ghostwhite | \#f8f8ff | ![ghostwhite](figures/ghostwhite.png) |
| gold | \#ffd700 | ![gold](figures/gold.png) |
| goldenrod | \#daa520 | ![goldenrod](figures/goldenrod.png) |
| gray | \#808080 | ![gray](figures/gray.png) |
| green | \#008000 | ![green](figures/green.png) |
| greenyellow | \#adff2f | ![greenyellow](figures/greenyellow.png) |
| grey | \#808080 | ![grey](figures/grey.png) |
| honeydew | \#f0fff0 | ![honeydew](figures/honeydew.png) |
| hotpink | \#ff69b4 | ![hotpink](figures/hotpink.png) |
| indianred | \#cd5c5c | ![indianred](figures/indianred.png) |
| indigo | \#4b0082 | ![indigo](figures/indigo.png) |
| ivory | \#fffff0 | ![ivory](figures/ivory.png) |
| khaki | \#f0e68c | ![khaki](figures/khaki.png) |
| lavender | \#e6e6fa | ![lavender](figures/lavender.png) |
| lavenderblush | \#fff0f5 | ![lavenderblush](figures/lavenderblush.png) |
| lawngreen | \#7cfc00 | ![lawngreen](figures/lawngreen.png) |
| lemonchiffon | \#fffacd | ![lemonchiffon](figures/lemonchiffon.png) |
| lightblue | \#add8e6 | ![lightblue](figures/lightblue.png) |
| lightcoral | \#f08080 | ![lightcoral](figures/lightcoral.png) |
| lightcyan | \#e0ffff | ![lightcyan](figures/lightcyan.png) |
| lightgoldenrodyellow | \#fafad2 | ![lightgoldenrodyellow](figures/lightgoldenrodyellow.png) |
| lightgray | \#d3d3d3 | ![lightgray](figures/lightgray.png) |
| lightgreen | \#90ee90 | ![lightgreen](figures/lightgreen.png) |
| lightpink | \#ffb6c1 | ![lightpink](figures/lightpink.png) |
| lightsalmon | \#ffa07a | ![lightsalmon](figures/lightsalmon.png) |
| lightseagreen | \#20b2aa | ![lightseagreen](figures/lightseagreen.png) |
| lightskyblue | \#87cefa | ![lightskyblue](figures/lightskyblue.png) |
| lightslategray | \#778899 | ![lightslategray](figures/lightslategray.png) |
| lightslategrey | \#778899 | ![lightslategrey](figures/lightslategrey.png) |
| lightsteelblue | \#b0c4de | ![lightsteelblue](figures/lightsteelblue.png) |
| lightyellow | \#ffffe0 | ![lightyellow](figures/lightyellow.png) |
| lime | \#00ff00 | ![lime](figures/lime.png) |
| limegreen | \#32cd32 | ![limegreen](figures/limegreen.png) |
| linen | \#faf0e6 | ![linen](figures/linen.png) |
| magenta | \#ff00ff | ![magenta](figures/magenta.png) |
| maroon | \#800000 | ![maroon](figures/maroon.png) |
| mediumaquamarine | \#66cdaa | ![mediumaquamarine](figures/mediumaquamarine.png) |
| mediumblue | \#0000cd | ![mediumblue](figures/mediumblue.png) |
| mediumorchid | \#ba55d3 | ![mediumorchid](figures/mediumorchid.png) |
| mediumpurple | \#9370db | ![mediumpurple](figures/mediumpurple.png) |
| mediumseagreen | \#3cb371 | ![mediumseagreen](figures/mediumseagreen.png) |
| mediumslateblue | \#7b68ee | ![mediumslateblue](figures/mediumslateblue.png) |
| mediumspringgreen | \#00fa9a | ![mediumspringgreen](figures/mediumspringgreen.png) |
| mediumturquoise | \#48d1cc | ![mediumturquoise](figures/mediumturquoise.png) |
| mediumvioletred | \#c71585 | ![mediumvioletred](figures/mediumvioletred.png) |
| midnightblue | \#191970 | ![midnightblue](figures/midnightblue.png) |
| mintcream | \#f5fffa | ![mintcream](figures/mintcream.png) |
| mistyrose | \#ffe4e1 | ![mistyrose](figures/mistyrose.png) |
| moccasin | \#ffe4b5 | ![moccasin](figures/moccasin.png) |
| navajowhite | \#ffdead | ![navajowhite](figures/navajowhite.png) |
| navy | \#000080 | ![navy](figures/navy.png) |
| oldlace | \#fdf5e6 | ![oldlace](figures/oldlace.png) |
| olive | \#808000 | ![olive](figures/olive.png) |
| olivedrab | \#6b8e23 | ![olivedrab](figures/olivedrab.png) |
| orange | \#ffa500 | ![orange](figures/orange.png) |
| orangered | \#ff4500 | ![orangered](figures/orangered.png) |
| orchid | \#da70d6 | ![orchid](figures/orchid.png) |
| palegoldenrod | \#eee8aa | ![palegoldenrod](figures/palegoldenrod.png) |
| palegreen | \#98fb98 | ![palegreen](figures/palegreen.png) |
| paleturquoise | \#afeeee | ![paleturquoise](figures/paleturquoise.png) |
| palevioletred | \#db7093 | ![palevioletred](figures/palevioletred.png) |
| papayawhip | \#ffefd5 | ![papayawhip](figures/papayawhip.png) |
| peachpuff | \#ffdab9 | ![peachpuff](figures/peachpuff.png) |
| peru | \#cd853f | ![peru](figures/peru.png) |
| pink | \#ffc0cb | ![pink](figures/pink.png) |
| plum | \#dda0dd | ![plum](figures/plum.png) |
| powderblue | \#b0e0e6 | ![powderblue](figures/powderblue.png) |
| purple | \#800080 | ![purple](figures/purple.png) |
| rebeccapurple | \#663399 | ![rebeccapurple](figures/rebeccapurple.png) |
| red | \#ff0000 | ![red](figures/red.png) |
| rosybrown | \#bc8f8f | ![rosybrown](figures/rosybrown.png) |
| royalblue | \#4169e1 | ![royalblue](figures/royalblue.png) |
| saddlebrown | \#8b4513 | ![saddlebrown](figures/saddlebrown.png) |
| salmon | \#fa8072 | ![salmon](figures/salmon.png) |
| sandybrown | \#f4a460 | ![sandybrown](figures/sandybrown.png) |
| seagreen | \#2e8b57 | ![seagreen](figures/seagreen.png) |
| seashell | \#fff5ee | ![seashell](figures/seashell.png) |
| sienna | \#a0522d | ![sienna](figures/sienna.png) |
| silver | \#c0c0c0 | ![silver](figures/silver.png) |
| skyblue | \#87ceeb | ![skyblue](figures/skyblue.png) |
| slateblue | \#6a5acd | ![slateblue](figures/slateblue.png) |
| slategray | \#708090 | ![slategray](figures/slategray.png) |
| slategrey | \#708090 | ![slategray](figures/slategray.png) |
| snow | \#fffafa | ![snow](figures/snow.png) |
| springgreen | \#00ff7f | ![springgreen](figures/springgreen.png) |
| steelblue | \#4682b4 | ![steelblue](figures/steelblue.png) |
| tan | \#d2b48c | ![tan](figures/tan.png) |
| teal | \#008080 | ![teal](figures/teal.png) |
| thistle | \#d8Bfd8 | ![thistle](figures/thistle.png) |
| tomato | \#ff6347 | ![tomato](figures/tomato.png) |
| turquoise | \#40e0d0 | ![turquoise](figures/turquoise.png) |
| violet | \#ee82ee | ![violet](figures/violet.png) |
| wheat | \#f5deb3 | ![wheat](figures/wheat.png) |
| white | \#ffffff | ![white](figures/white.png) |
| whitesmoke | \#f5f5f5 | ![whitesmoke](figures/whitesmoke.png) |
| yellow | \#ffff00 | ![yellow](figures/yellow.png) |
| yellowgreen | \#9acd32 | ![yellowgreen](figures/yellowgreen.png) |
| lightgray | \#d3d3d3 | ![lightgray](figures/lightgray.png) |
| lightgreen | \#90ee90 | ![lightgreen](figures/lightgreen.png) |
| lightpink | \#ffb6c1 | ![lightpink](figures/lightpink.png) |
| lightsalmon | \#ffa07a | ![lightsalmon](figures/lightsalmon.png) |
| lightseagreen | \#20b2aa | ![lightseagreen](figures/lightseagreen.png) |
| lightskyblue | \#87cefa | ![lightskyblue](figures/lightskyblue.png) |
| lightslategray | \#778899 | ![lightslategray](figures/lightslategray.png) |
| lightslategrey | \#778899 | ![lightslategrey](figures/lightslategrey.png) |
| lightsteelblue | \#b0c4de | ![lightsteelblue](figures/lightsteelblue.png) |
| lightyellow | \#ffffe0 | ![lightyellow](figures/lightyellow.png) |
| lime | \#00ff00 | ![lime](figures/lime.png) |
| limegreen | \#32cd32 | ![limegreen](figures/limegreen.png) |
| linen | \#faf0e6 | ![linen](figures/linen.png) |
| magenta | \#ff00ff | ![magenta](figures/magenta.png) |
| maroon | \#800000 | ![maroon](figures/maroon.png) |
| mediumaquamarine | \#66cdaa | ![mediumaquamarine](figures/mediumaquamarine.png) |
| mediumblue | \#0000cd | ![mediumblue](figures/mediumblue.png) |
| mediumorchid | \#ba55d3 | ![mediumorchid](figures/mediumorchid.png) |
| mediumpurple | \#9370db | ![mediumpurple](figures/mediumpurple.png) |
| mediumseagreen | \#3cb371 | ![mediumseagreen](figures/mediumseagreen.png) |
| mediumslateblue | \#7b68ee | ![mediumslateblue](figures/mediumslateblue.png) |
| mediumspringgreen | \#00fa9a | ![mediumspringgreen](figures/mediumspringgreen.png) |
| mediumturquoise | \#48d1cc | ![mediumturquoise](figures/mediumturquoise.png) |
| mediumvioletred | \#c71585 | ![mediumvioletred](figures/mediumvioletred.png) |
| midnightblue | \#191970 | ![midnightblue](figures/midnightblue.png) |
| mintcream | \#f5fffa | ![mintcream](figures/mintcream.png) |
| mistyrose | \#ffe4e1 | ![mistyrose](figures/mistyrose.png) |
| moccasin | \#ffe4b5 | ![moccasin](figures/moccasin.png) |
| navajowhite | \#ffdead | ![navajowhite](figures/navajowhite.png) |
| navy | \#000080 | ![navy](figures/navy.png) |
| oldlace | \#fdf5e6 | ![oldlace](figures/oldlace.png) |
| olive | \#808000 | ![olive](figures/olive.png) |
| olivedrab | \#6b8e23 | ![olivedrab](figures/olivedrab.png) |
| orange | \#ffa500 | ![orange](figures/orange.png) |
| orangered | \#ff4500 | ![orangered](figures/orangered.png) |
| orchid | \#da70d6 | ![orchid](figures/orchid.png) |
| palegoldenrod | \#eee8aa | ![palegoldenrod](figures/palegoldenrod.png) |
| palegreen | \#98fb98 | ![palegreen](figures/palegreen.png) |
| paleturquoise | \#afeeee | ![paleturquoise](figures/paleturquoise.png) |
| palevioletred | \#db7093 | ![palevioletred](figures/palevioletred.png) |
| papayawhip | \#ffefd5 | ![papayawhip](figures/papayawhip.png) |
| peachpuff | \#ffdab9 | ![peachpuff](figures/peachpuff.png) |
| peru | \#cd853f | ![peru](figures/peru.png) |
| pink | \#ffc0cb | ![pink](figures/pink.png) |
| plum | \#dda0dd | ![plum](figures/plum.png) |
| powderblue | \#b0e0e6 | ![powderblue](figures/powderblue.png) |
| purple | \#800080 | ![purple](figures/purple.png) |
| rebeccapurple | \#663399 | ![rebeccapurple](figures/rebeccapurple.png) |
| red | \#ff0000 | ![red](figures/red.png) |
| rosybrown | \#bc8f8f | ![rosybrown](figures/rosybrown.png) |
| royalblue | \#4169e1 | ![royalblue](figures/royalblue.png) |
| saddlebrown | \#8b4513 | ![saddlebrown](figures/saddlebrown.png) |
| salmon | \#fa8072 | ![salmon](figures/salmon.png) |
| sandybrown | \#f4a460 | ![sandybrown](figures/sandybrown.png) |
| seagreen | \#2e8b57 | ![seagreen](figures/seagreen.png) |
| seashell | \#fff5ee | ![seashell](figures/seashell.png) |
| sienna | \#a0522d | ![sienna](figures/sienna.png) |
| silver | \#c0c0c0 | ![silver](figures/silver.png) |
| skyblue | \#87ceeb | ![skyblue](figures/skyblue.png) |
| slateblue | \#6a5acd | ![slateblue](figures/slateblue.png) |
| slategray | \#708090 | ![slategray](figures/slategray.png) |
| slategrey | \#708090 | ![slategray](figures/slategray.png) |
| snow | \#fffafa | ![snow](figures/snow.png) |
| springgreen | \#00ff7f | ![springgreen](figures/springgreen.png) |
| steelblue | \#4682b4 | ![steelblue](figures/steelblue.png) |
| tan | \#d2b48c | ![tan](figures/tan.png) |
| teal | \#008080 | ![teal](figures/teal.png) |
| thistle | \#d8Bfd8 | ![thistle](figures/thistle.png) |
| tomato | \#ff6347 | ![tomato](figures/tomato.png) |
| turquoise | \#40e0d0 | ![turquoise](figures/turquoise.png) |
| violet | \#ee82ee | ![violet](figures/violet.png) |
| wheat | \#f5deb3 | ![wheat](figures/wheat.png) |
| white | \#ffffff | ![white](figures/white.png) |
| whitesmoke | \#f5f5f5 | ![whitesmoke](figures/whitesmoke.png) |
| yellow | \#ffff00 | ![yellow](figures/yellow.png) |
| yellowgreen | \#9acd32 | ![yellowgreen](figures/yellowgreen.png) |
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-calendar.md
浏览文件 @ ef9856b9
......@@ -16,34 +16,34 @@
支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| date | string | 当前日期 | 否 | 当前页面选中的日期，默认是当前日期，格式为年-月-日，如"2019-11-22"。 |
| cardcalendar | bool | false | 否 | 标识当前日历是否为卡片日历。 |
| startdayofweek | int | 6 | 否 | 标识卡片显示的起始天，默认是星期天（取值范围：0-6）。 |
| offdays | string | 5，6 | 否 | 标识卡片显示的休息日，默认是星期六、星期天（取值范围：0-6）。 |
| calendardata | string | - | 是 | 卡片需要显示的月视图数据信息，包括5\*7或者6\*7格的日数据信息，格式为JSON字符串。"data"标签属性信息见**表1** calendardata的日属性。 |
| showholiday | bool | true | 否 | 标识当前是否显示节假日信息。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------------- | ------ | ----- | ---- | ---------------------------------------- |
| date | string | 当前日期 | 否 | 当前页面选中的日期，默认是当前日期，格式为年-月-日，如"2019-11-22"。 |
| cardcalendar | bool | false | 否 | 标识当前日历是否为卡片日历。 |
| startdayofweek | int | 6 | 否 | 标识卡片显示的起始天，默认是星期天（取值范围：0-6）。 |
| offdays | string | 5，6 | 否 | 标识卡片显示的休息日，默认是星期六、星期天（取值范围：0-6）。 |
| calendardata | string | - | 是 | 卡片需要显示的月视图数据信息，包括5\*7或者6\*7格的日数据信息，格式为JSON字符串。"data"标签属性信息见**表1** calendardata的日属性。 |
| showholiday | bool | true | 否 | 标识当前是否显示节假日信息。 |
**表1** calendardata的日属性
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| index | int | 数据的索引，表示第几个日期。 |
| day | int | 表示具体哪一天。 |
| month | int | 表示月份。 |
| year | int | 表示年份。 |
| isFirstOfLuanr | bool | 表示是否是农历的第一天，在农历第一天的数据下绘制横线。 |
| hasSchedule | bool | 表示是否有日程，在有日程的日期数据上绘制圆。 |
| markLunarDay | bool | 表示节假日，农历数据会变成蓝色。 |
| lunarDay | string | 农历日期。 |
| lunarMonth | string | 农历月份。 |
| dayMark | string | 表示工作日。<br>- “work”：工作日。<br>- “off”：休息日。 |
| dayMarkValue | string | 表示具体需要显示的“班”、“休”信息。 |
| 名称 | 类型 | 描述 |
| -------------- | ------ | --------------------------------------- |
| index | int | 数据的索引，表示第几个日期。 |
| day | int | 表示具体哪一天。 |
| month | int | 表示月份。 |
| year | int | 表示年份。 |
| isFirstOfLuanr | bool | 表示是否是农历的第一天，在农历第一天的数据下绘制横线。 |
| hasSchedule | bool | 表示是否有日程，在有日程的日期数据上绘制圆。 |
| markLunarDay | bool | 表示节假日，农历数据会变成蓝色。 |
| lunarDay | string | 农历日期。 |
| lunarMonth | string | 农历月份。 |
| dayMark | string | 表示工作日。<br>- “work”：工作日。<br>- “off”：休息日。 |
| dayMarkValue | string | 表示具体需要显示的“班”、“休”信息。 |
calendardata示例：
```json
```
{
"year":2021,
"month":1,
......@@ -93,33 +93,33 @@ calendardata示例：
## 样式
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------- | ------------- | ---- | ---- | ------- |
| background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 |
## 事件
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| selectedchange | changeEvent | 在点击日期和上下月跳转时触发。 |
| requestdata | requestEvent | 请求日期时触发。 |
| 名称 | 参数 | 描述 |
| -------------- | ------------ | --------------- |
| selectedchange | changeEvent | 在点击日期和上下月跳转时触发。 |
| requestdata | requestEvent | 请求日期时触发。 |
**表2** changeEvent
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| $event.day | string | 选择的日期。 |
| 名称 | 类型 | 描述 |
| ------------ | ------ | ------ |
| $event.day | string | 选择的日期。 |
| $event.month | string | 选择的月份。 |
| $event.year | string | 选择的年份。 |
| $event.year | string | 选择的年份。 |
**表3** requestEvent
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| $event.month | string | 请求的月份。 |
| $event.year | string | 请求的年份。 |
| $event.currentYear | string | 当前显示的年份。 |
| 名称 | 类型 | 描述 |
| ------------------- | ------ | -------- |
| $event.month | string | 请求的月份。 |
| $event.year | string | 请求的年份。 |
| $event.currentYear | string | 当前显示的年份。 |
| $event.currentMonth | string | 当前显示的月份。 |
......@@ -160,7 +160,6 @@ calendardata示例：
```json
// xxx.json
{
"data": {
"currentDate": "",
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-chart.md
浏览文件 @ ef9856b9
......@@ -16,132 +16,132 @@
除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| type | string | line | 否 | 设置图表类型（不支持动态修改），可选项有：<br/>-&nbsp;bar：柱状图。<br/>-&nbsp;line：线形图。<br/>-&nbsp;gauge：量规图。<br/>-&nbsp;progress：进度类圆形图表。<br/>-&nbsp;loading：加载类圆形图表。<br/>-&nbsp;rainbow：占比类圆形图表。 |
| options | ChartOptions | - | 否 | 图表参数设置，柱状图和线形图必须设置参数设置，量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改） |
| datasets | Array\<ChartDataset> | - | 否 | 数据集合，柱状图和线形图必须设置数据集合，量规图不生效。可以设置多条数据集及其背景色。 |
| segments | DataSegment \| Array\<DataSegment> | | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。<br/>DataSegment针对进度类和加载类圆形图表使用，Array\<DataSegment>针对占比类图标使用，DataSegment最多9个。 |
| effects | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 |
| animationduration | number | 3000 | 否 | 设置占比类圆形图表展开动画时长，单位为ms。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------------- | ---------------------------------- | ---- | ---- | ---------------------------------------- |
| type | string | line | 否 | 设置图表类型（不支持动态修改），可选项有：<br/>-&nbsp;bar：柱状图。<br/>-&nbsp;line：线形图。<br/>-&nbsp;gauge：量规图。<br/>-&nbsp;progress：进度类圆形图表。<br/>-&nbsp;loading：加载类圆形图表。<br/>-&nbsp;rainbow：占比类圆形图表。 |
| options | ChartOptions | - | 否 | 图表参数设置，柱状图和线形图必须设置参数设置，量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改） |
| datasets | Array\<ChartDataset> | - | 否 | 数据集合，柱状图和线形图必须设置数据集合，量规图不生效。可以设置多条数据集及其背景色。 |
| segments | DataSegment \| Array\<DataSegment> | | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。<br/>DataSegment针对进度类和加载类圆形图表使用，Array\<DataSegment>针对占比类图标使用，DataSegment最多9个。 |
| effects | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 |
| animationduration | number | 3000 | 否 | 设置占比类圆形图表展开动画时长，单位为ms。 |
**表1** ChartOptions
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| xAxis | ChartAxis | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 |
| yAxis | ChartAxis | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 |
| series | ChartAxis | - | 否 | 数据序列参数设置，仅线形图支持。可以设置：<br>- 线的样式，如线宽、是否平滑。<br>- 线最前端位置白点的样式和大小。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------ | --------- | ---- | ---- | ---------------------------------------- |
| xAxis | ChartAxis | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 |
| yAxis | ChartAxis | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 |
| series | ChartAxis | - | 否 | 数据序列参数设置，仅线形图支持。可以设置：<br>- 线的样式，如线宽、是否平滑。<br>- 线最前端位置白点的样式和大小。 |
**表2** ChartDataset
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| strokeColor | &lt;color&gt; | \#ff6384 | 否 | 线条颜色，仅线形图支持。 |
| fillColor | &lt;color&gt; | \#ff6384 | 否 | 填充颜色，线形图表示填充的渐变颜色。 |
| data | Array&lt;number&gt;&nbsp;\|&nbsp;Array\<Point&gt; | - | 是 | 设置绘制线或柱中的点集。 |
| gradient | boolean | false | 否 | 设置是否显示填充渐变颜色，仅线形图支持。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------- | ---------------------------------------- | -------- | ---- | -------------------- |
| strokeColor | &lt;color&gt; | \#ff6384 | 否 | 线条颜色，仅线形图支持。 |
| fillColor | &lt;color&gt; | \#ff6384 | 否 | 填充颜色，线形图表示填充的渐变颜色。 |
| data | Array&lt;number&gt;&nbsp;\|&nbsp;Array\<Point&gt; | - | 是 | 设置绘制线或柱中的点集。 |
| gradient | boolean | false | 否 | 设置是否显示填充渐变颜色，仅线形图支持。 |
**表3** ChartAxis
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| min | number | 0 | 否 | 轴的最小值，不支持负数，仅线形图支持。 |
| max | number | 100 | 否 | 轴的最大值，不支持负数，仅线形图支持。 |
| axisTick | number | 10 | 否 | 轴显示的刻度数量。<br/>仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 |
| display | boolean | false | 否 | 是否显示轴。 |
| color | &lt;color&gt; | \#c0c0c0 | 否 | 轴颜色。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------------- | -------- | ---- | ---------------------------------------- |
| min | number | 0 | 否 | 轴的最小值，不支持负数，仅线形图支持。 |
| max | number | 100 | 否 | 轴的最大值，不支持负数，仅线形图支持。 |
| axisTick | number | 10 | 否 | 轴显示的刻度数量。<br/>仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 |
| 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 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。<br>margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 |
| gradient | boolean | false | 否 | 是否需要渐变擦除。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------------- | ----- | ---- | ---------------------------------------- |
| margin | &lt;length&gt; | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。<br>margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 |
| gradient | boolean | false | 否 | 是否需要渐变擦除。 |
**表8** Point
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | number | 0 | 是 | 表示绘制点的Y轴坐标。 |
| pointStyle | PointStyle | - | 否 | 表示当前数据点的绘制样式。 |
| description | string | - | 否 | 表示当前点的注释内容。 |
| textLocation | string | - | 否 | 可选值为：<br>- "top"：注释的绘制位置位于点的上方。<br>- "bottom"：注释的绘制位置位于点的下方。<br>- "none"：不绘制。 |
| textColor | &lt;color&gt; | \#000000 | 否 | 表示注释文字的颜色。 |
| lineDash | string | solid | 否 | 表示绘制当前线段虚线的样式。<br>- "dashed，&nbsp;5，&nbsp;5"：表示纯虚线，绘制5px的实线后留5px的空白。<br>- “solid”：表示绘制实线。 |
| lineColor | &lt;color&gt; | \#000000 | 否 | 表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------ | ------------- | -------- | ---- | ---------------------------------------- |
| value | number | 0 | 是 | 表示绘制点的Y轴坐标。 |
| pointStyle | PointStyle | - | 否 | 表示当前数据点的绘制样式。 |
| description | string | - | 否 | 表示当前点的注释内容。 |
| textLocation | string | - | 否 | 可选值为：<br>- "top"：注释的绘制位置位于点的上方。<br>- "bottom"：注释的绘制位置位于点的下方。<br>- "none"：不绘制。 |
| textColor | &lt;color&gt; | \#000000 | 否 | 表示注释文字的颜色。 |
| lineDash | string | solid | 否 | 表示绘制当前线段虚线的样式。<br>- "dashed，&nbsp;5，&nbsp;5"：表示纯虚线，绘制5px的实线后留5px的空白。<br>- “solid”：表示绘制实线。 |
| lineColor | &lt;color&gt; | \#000000 | 否 | 表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。 |
**表9** DataSegment
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| 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。 |
## 样式
除支持[通用样式](js-service-widget-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样式，仅量规图支持。<br>该样式需要和center-y和radius一起配置才能生效。 |
| center-y | &lt;length&gt; | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式，仅量规图支持。<br>该样式需要和center-x和radius一起配置才能生效。 |
| radius | &lt;length&gt; | - | 否 | 量规组件刻度条半径，该样式优先于通用样式的width和height样式，仅量规图支持。<br>该样式需要和center-x和center-y一起配置才能生效。 |
| colors | Array | - | 否 | 量规组件刻度条每一个区段的颜色，仅量规图支持。<br/>如：colors:&nbsp;\#ff0000,&nbsp;\#00ff00。 |
| weights | Array | - | 否 | 量规组件刻度条每一个区段的权重，仅量规图支持。<br/>如：weights:&nbsp;2,&nbsp;2。 |
| font-family | Array | - | 否 | 表示绘制注释的字体样式，支持[自定义字体](js-service-widget-common-customizing-font.md)。 |
| font-size | &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样式，仅量规图支持。<br>该样式需要和center-y和radius一起配置才能生效。 |
| center-y | &lt;length&gt; | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式，仅量规图支持。<br>该样式需要和center-x和radius一起配置才能生效。 |
| radius | &lt;length&gt; | - | 否 | 量规组件刻度条半径，该样式优先于通用样式的width和height样式，仅量规图支持。<br>该样式需要和center-x和center-y一起配置才能生效。 |
| colors | Array | - | 否 | 量规组件刻度条每一个区段的颜色，仅量规图支持。<br/>如：colors:&nbsp;\#ff0000,&nbsp;\#00ff00。 |
| weights | Array | - | 否 | 量规组件刻度条每一个区段的权重，仅量规图支持。<br/>如：weights:&nbsp;2,&nbsp;2。 |
| font-family | Array | - | 否 | 表示绘制注释的字体样式，支持[自定义字体](js-service-widget-common-customizing-font.md)。 |
| font-size | &lt;length&gt; | - | 否 | 表示绘制注释的字体的大小。 |
## 事件
......@@ -152,7 +152,7 @@
## 示例
1. 线形图
```html
<!-- xxx.hml -->
<div class="container">
......@@ -163,7 +163,7 @@
</div>
```
```css
/* xxx.css */
.container {
......@@ -184,7 +184,7 @@
}
```
```json
// xxx.json
{
......@@ -251,12 +251,12 @@
}
}
```
**4*4卡片**
**4*4卡片**
![zh-cn_image_0000001185652902](figures/zh-cn_image_0000001185652902.png)
2. 柱状图
```html
<!-- xxx.hml -->
<div class="container">
......@@ -267,7 +267,7 @@
</div>
```
```css
/* xxx.css */
.container {
......@@ -288,9 +288,8 @@
}
```
```json
// xxx.json
{
"data": {
"barData": [
......@@ -323,13 +322,13 @@
}
}
```
**4*4卡片**
**4*4卡片**
![barchart](figures/barchart.PNG)
3. 量规图
```html
<!-- xxx.hml -->
<div class="container">
......@@ -338,8 +337,8 @@
</div>
</div>
```
```css
/* xxx.css */
.container {
......@@ -356,6 +355,6 @@
weights: 4, 2, 1;
}
```
**4*4卡片**
**4*4卡片**
![gauge](figures/gauge.PNG)
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-clock.md
浏览文件 @ ef9856b9
......@@ -16,28 +16,28 @@
除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| clockconfig | ClockConfig | - | 是 | Clock的图片资源和样式设置，包括日间时段（6:00-18:00）和夜间时段（18:00-次日6:00）两套资源和样式设置。<br/>其中每套资源和样式包括表盘资源、时针指针资源、分针指针资源、秒针指针资源四张图和相应时间段的表盘数字颜色。<br/>日间资源为必填项。夜间资源可不填，不填时默认会复用日间资源用作夜间时段的显示。<br/>仅支持动态更新整个Object，不支持动态更新Object里的内容。<br/>建议使用PNG资源作为Clock组件的图片资源。<br/>不支持使用SVG资源作为Clock组件的图片资源。 |
| showdigit | boolean | true | 否 | 是否由Clock组件绘制表盘数字。<br/>该属性为true时，请留意clockconfig中digitRadiusRatio和digitSizeRatio参数与表盘的匹配情况。<br/>由Clock组件绘制的表盘数字支持国际化。 |
| hourswest | number | - | 否 | 时钟的时区偏移值，时区为标准时区减去hourswest。<br/>有效范围为[-12,&nbsp;12]，其中负值范围表示东时区，比如东八区对应的是-8。不设置默认采用系统时间所在的时区。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------- | ----------- | ---- | ---- | ---------------------------------------- |
| clockconfig | ClockConfig | - | 是 | Clock的图片资源和样式设置，包括日间时段（6:00-18:00）和夜间时段（18:00-次日6:00）两套资源和样式设置。<br/>其中每套资源和样式包括表盘资源、时针指针资源、分针指针资源、秒针指针资源四张图和相应时间段的表盘数字颜色。<br/>日间资源为必填项。夜间资源可不填，不填时默认会复用日间资源用作夜间时段的显示。<br/>仅支持动态更新整个Object，不支持动态更新Object里的内容。<br/>建议使用PNG资源作为Clock组件的图片资源。<br/>不支持使用SVG资源作为Clock组件的图片资源。 |
| showdigit | boolean | true | 否 | 是否由Clock组件绘制表盘数字。<br/>该属性为true时，请留意clockconfig中digitRadiusRatio和digitSizeRatio参数与表盘的匹配情况。<br/>由Clock组件绘制的表盘数字支持国际化。 |
| hourswest | number | - | 否 | 时钟的时区偏移值，时区为标准时区减去hourswest。<br/>有效范围为[-12,&nbsp;12]，其中负值范围表示东时区，比如东八区对应的是-8。不设置默认采用系统时间所在的时区。 |
**表1** ClockConfig
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| face | &lt;string&gt; | - | 是 | 日间时段的表盘资源路径。<br/>表盘资源须为包含时钟刻度的正方形图片，表盘区域（圆形）为该图片的内切圆或内切圆的同心圆。如果表盘区域为表盘资源内切圆的同心圆的话，请相应调整digitRadiusRatio和digitSizeRatio参数。 |
| hourHand | &lt;string&gt; | - | 是 | 日间时段的时针资源路径。<br/>- 时针图片的高度须与表盘资源高度相同。<br/>- 时针图片的宽高比建议在0.062。<br/>- 时针图片上指针的旋转中心须处于时针图片的中心（对角线交点）。<br/>- 夜间时段的时针资源请调整hourHandNight参数。 |
| minuteHand | &lt;string&gt; | - | 是 | 日间时段的分针资源路径。<br/>- 分针图片的高度须与表盘资源高度相同。<br/>- 分针图片的宽高比建议在0.062。<br/>- 分针图片上指针的旋转中心须处于分针图片的中心（对角线交点）。<br/>-&nbsp;夜间时段的分针资源请调整minuteHandNight参数。 |
| secondHand | &lt;string&gt; | - | 是 | 日间时段的秒针资源路径。<br/>- &nbsp;秒针图片的高度须与表盘资源高度相同。<br/>-&nbsp;秒针图片的宽高比建议在0.062。<br/>-&nbsp;秒针图片上指针的旋转中心须处于秒针图片的中心（对角线交点）。<br/>- 夜间时段的秒针资源请调整secondHandNightSrc参数。 |
| digitColor | &lt;color&gt; | \#FF000000 | 否 | 日间时段（6:00-18:00）的表盘文本颜色。 |
| digitColorNight | &lt;color&gt; | 与digitColor保持一致 | 否 | 夜间时段（18:00-次日6:00）的表盘文本颜色。<br/>- 该属性未设置时，取digitColor的值作为digitColorNight的值（digitColor被设置时，取digitColor被设置的值）。<br/>- 请注意缺省状态下使用digitClor的值作为digitColorNight的值时，夜间时段表盘文本颜色与夜间时段表盘背景（faceNight）的颜色配合问题。 |
| faceNight | &lt;string&gt; | - | 否 | 夜间时段的表盘资源路径。<br/>未设置时使用face的资源路径作为夜间时段的表盘资源路径。 |
| hourHandNight | &lt;string&gt; | - | 否 | 夜间时段的时针资源路径。<br/>未设置时使用hourHand的资源路径作为夜间时段的时针资源路径。 |
| minuteHandNight | &lt;string&gt; | - | 否 | 夜间时段的分针资源路径。<br/>设置时使用minuteHand的资源路径作为夜间时段的分针资源路径。 |
| secondHandNight | &lt;string&gt; | - | 否 | 夜间时段的秒针资源路径。<br/>未设置时使用secondHand的资源路径作为夜间时段的秒针资源路径。 |
| digitRadiusRatio | number | 0.7 | 否 | 表盘数字中心到表盘中心距离&nbsp;/&nbsp;表盘资源边长的一半。<br/>- 有效范围为(0,&nbsp;1]。<br/>- 该参数用于计算表盘数字在表盘上距离圆心的位置。<br/>- 该参数可以保证同一套表盘资源在不同组件尺寸下都有同样的相对位置，而不需要针对每个组件尺寸都重新调整数字位置。<br/>- 该参数设为1时数字会有部分区域超出表盘，建议结合表盘区域合理设置digitRadiusRatio。 |
| digitSizeRatio | number | 0.08 | 否 | 表盘数字尺寸/表盘资源边长。<br/>- 有效范围为(0,&nbsp;0.142]。<br/>- 该参数用于计算表盘数字相对表盘尺寸的大小。<br/>- 该参数可以保证同一套表盘资源在不同组件尺寸下都有同样的相对大小，而不需要针对每个组件尺寸都重新调整字号。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------- | -------------- | --------------- | ---- | ---------------------------------------- |
| face | &lt;string&gt; | - | 是 | 日间时段的表盘资源路径。<br/>表盘资源须为包含时钟刻度的正方形图片，表盘区域（圆形）为该图片的内切圆或内切圆的同心圆。如果表盘区域为表盘资源内切圆的同心圆的话，请相应调整digitRadiusRatio和digitSizeRatio参数。 |
| hourHand | &lt;string&gt; | - | 是 | 日间时段的时针资源路径。<br/>- 时针图片的高度须与表盘资源高度相同。<br/>- 时针图片的宽高比建议在0.062。<br/>- 时针图片上指针的旋转中心须处于时针图片的中心（对角线交点）。<br/>- 夜间时段的时针资源请调整hourHandNight参数。 |
| minuteHand | &lt;string&gt; | - | 是 | 日间时段的分针资源路径。<br/>- 分针图片的高度须与表盘资源高度相同。<br/>- 分针图片的宽高比建议在0.062。<br/>- 分针图片上指针的旋转中心须处于分针图片的中心（对角线交点）。<br/>-&nbsp;夜间时段的分针资源请调整minuteHandNight参数。 |
| secondHand | &lt;string&gt; | - | 是 | 日间时段的秒针资源路径。<br/>- &nbsp;秒针图片的高度须与表盘资源高度相同。<br/>-&nbsp;秒针图片的宽高比建议在0.062。<br/>-&nbsp;秒针图片上指针的旋转中心须处于秒针图片的中心（对角线交点）。<br/>- 夜间时段的秒针资源请调整secondHandNightSrc参数。 |
| digitColor | &lt;color&gt; | \#FF000000 | 否 | 日间时段（6:00-18:00）的表盘文本颜色。 |
| digitColorNight | &lt;color&gt; | 与digitColor保持一致 | 否 | 夜间时段（18:00-次日6:00）的表盘文本颜色。<br/>- 该属性未设置时，取digitColor的值作为digitColorNight的值（digitColor被设置时，取digitColor被设置的值）。<br/>- 请注意缺省状态下使用digitClor的值作为digitColorNight的值时，夜间时段表盘文本颜色与夜间时段表盘背景（faceNight）的颜色配合问题。 |
| faceNight | &lt;string&gt; | - | 否 | 夜间时段的表盘资源路径。<br/>未设置时使用face的资源路径作为夜间时段的表盘资源路径。 |
| hourHandNight | &lt;string&gt; | - | 否 | 夜间时段的时针资源路径。<br/>未设置时使用hourHand的资源路径作为夜间时段的时针资源路径。 |
| minuteHandNight | &lt;string&gt; | - | 否 | 夜间时段的分针资源路径。<br/>设置时使用minuteHand的资源路径作为夜间时段的分针资源路径。 |
| secondHandNight | &lt;string&gt; | - | 否 | 夜间时段的秒针资源路径。<br/>未设置时使用secondHand的资源路径作为夜间时段的秒针资源路径。 |
| digitRadiusRatio | number | 0.7 | 否 | 表盘数字中心到表盘中心距离&nbsp;/&nbsp;表盘资源边长的一半。<br/>- 有效范围为(0,&nbsp;1]。<br/>- 该参数用于计算表盘数字在表盘上距离圆心的位置。<br/>- 该参数可以保证同一套表盘资源在不同组件尺寸下都有同样的相对位置，而不需要针对每个组件尺寸都重新调整数字位置。<br/>- 该参数设为1时数字会有部分区域超出表盘，建议结合表盘区域合理设置digitRadiusRatio。 |
| digitSizeRatio | number | 0.08 | 否 | 表盘数字尺寸/表盘资源边长。<br/>- 有效范围为(0,&nbsp;0.142]。<br/>- 该参数用于计算表盘数字相对表盘尺寸的大小。<br/>- 该参数可以保证同一套表盘资源在不同组件尺寸下都有同样的相对大小，而不需要针对每个组件尺寸都重新调整字号。 |
![clock](figures/clock.png)
......@@ -46,19 +46,19 @@
除支持[通用样式](js-service-widget-common-styles.md)之外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| font-family | &lt;string&gt; | sans-serif | 否 | 表盘数字的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过2.1.6&nbsp;自定义字体样式指定的字体，会被选中作为文本的字体。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------- | -------------- | ---------- | ---- | ---------------------------------------- |
| font-family | &lt;string&gt; | sans-serif | 否 | 表盘数字的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过2.1.6&nbsp;自定义字体样式指定的字体，会被选中作为文本的字体。 |
> **说明：**
>
> clock组件会保持显示区域的宽高比为1，最终正方形显示区域的边长为min(width, height)，在width \* height的组件区域中居中显示。
> clock组件会保持显示区域的宽高比为1，最终正方形显示区域的边长为min(width, height)，在width \* height的组件区域中居中显示。
## 事件
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| 名称 | 参数 | 描述 |
| ---- | ------------------- | --------- |
| hour | {hour:&nbsp;number} | 每个整点触发该事件 |
......@@ -101,7 +101,6 @@
```json
// xxx.json
{
"data": {
"clockconfig": {
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-input.md
浏览文件 @ ef9856b9
......@@ -11,12 +11,12 @@
除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| type | string | radio | 是 | input组件类型，当前仅支持radio类型：<br/>-&nbsp;"radio"：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个； |
| checked | boolean | false | 否 | 当前组件是否选中。 |
| name | string | - | 否 | input组件的名称。 |
| value | string | - | 否 | input组件的value值，类型为radio时必填且相同name值的选项该值唯一。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------- | ------- | ----- | ---- | ---------------------------------------- |
| type | string | radio | 是 | input组件类型，当前仅支持radio类型：<br/>-&nbsp;"radio"：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个； |
| checked | boolean | false | 否 | 当前组件是否选中。 |
| name | string | - | 否 | input组件的名称。 |
| value | string | - | 否 | input组件的value值，类型为radio时必填且相同name值的选项该值唯一。 |
## 样式
......@@ -26,10 +26,10 @@
## 事件
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| 名称 | 参数 | 描述 |
| ------ | ------------------ | ---------------------------------------- |
| change | $event.checkedItem | radio单选框的checked状态发生变化时触发该事件，返回选中的组件value值。 |
| click | - | 点击动作触发该事件。 |
| click | - | 点击动作触发该事件。 |
## 示例
......@@ -57,7 +57,6 @@
```json
// xxx.json
{
"actions": {
"onRadioChange":{
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md
浏览文件 @ ef9856b9
......@@ -4,7 +4,7 @@
> **说明：**
>
>从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
开发框架支持线性渐变 (linear-gradient)和重复线性渐变 (repeating-linear-gradient)两种渐变效果。
......@@ -22,7 +22,7 @@
- angle：进行角度渐变。
```css
background: linear-gradient(direction/angle, color, color, ...);
background: repeating-linear-gradient(direction/angle, color, color, ...);
......@@ -35,16 +35,16 @@ background: repeating-linear-gradient(direction/angle, color, color, ...);
- 参数
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| 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;，或者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;，或者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. 默认渐变方向为从上向下渐变。
```css
#gradient {
height: 300px;
......@@ -52,27 +52,27 @@ background: repeating-linear-gradient(direction/angle, color, color, ...);
/* 从顶部开始向底部由红色向绿色渐变 */
background: linear-gradient(red, #00ff00);
}
```
```
![111](figures/111.PNG)
2. 45度夹角渐变。
```css
/* 45度夹角，从红色渐变到绿色 */
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
```
![222](figures/222.PNG)
3. 设置方向从左向右渐变。
```css
/* 从左向右渐变，在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
```
![333](figures/333.PNG)
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-config-file.md
浏览文件 @ ef9856b9
......@@ -4,11 +4,11 @@
js标签中包含了实例名称、窗口样式和卡片页面信息。
| 标签 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| name | String | default | 是 | 标识JS实例的名字。 |
| pages | Array | - | 是 | 路由信息，详见“[pages](#pages)”。 |
| window | Object | - | 否 | 窗口信息，详见“[window](#window)”。 |
| 标签 | 类型 | 默认值 | 必填 | 描述 |
| ------ | ------ | ------- | ---- | --------------------------- |
| name | String | default | 是 | 标识JS实例的名字。 |
| pages | Array | - | 是 | 路由信息，详见“[pages](#pages)”。 |
| window | Object | - | 否 | 窗口信息，详见“[window](#window)”。 |
> **说明：**
> name、pages、window等标签配置需在[配置文件]()中的“js”标签中完成设置。
......@@ -29,9 +29,9 @@ js标签中包含了实例名称、窗口样式和卡片页面信息。
> **说明：**
> - pages列表中仅包含一个页面。
>
> - 页面文件名不能使用组件名称，比如：text.hml、button.hml等。
> - pages列表中仅包含一个页面。
>
> - 页面文件名不能使用组件名称，比如：text.hml、button.hml等。
## window
......@@ -43,16 +43,15 @@ window用于定义与显示窗口相关的配置。对于卡片尺寸适配问
- 设置autoDesignWidth为true，此时designWidth字段将会被忽略，渲染组件和布局时按屏幕密度进行缩放。屏幕逻辑宽度由设备宽度和屏幕密度自动计算得出，在不同设备上可能不同，请使用相对布局来适配多种设备。例如：在466\*466分辨率，320dpi的设备上，屏幕密度为2（以160dpi为基准），1px等于渲染出的2物理像素。
> **说明：**
> - 组件样式中&lt;length&gt;类型的默认值，按屏幕密度进行计算和绘制，如：在屏幕密度为2（以160dpi为基准）的设备上，默认&lt;length&gt;为1px时，设备上实际渲染出2物理像素。
>
>
> - autoDesignWidth、designWidth的设置不影响默认值计算方式和绘制结果。
| 属性 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| designWidth | number | 否 | 150px | 页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。 |
| autoDesignWidth | boolean | 否 | false | 页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。 |
| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --------------- | ------- | ---- | ----- | ---------------------------------------- |
| designWidth | number | 否 | 150px | 页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。 |
| autoDesignWidth | boolean | 否 | false | 页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。 |
示例如下：
```
{
...
"window": {
......@@ -60,7 +59,6 @@ window用于定义与显示窗口相关的配置。对于卡片尺寸适配问
}
...
}
```
## 示例
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-list.md
浏览文件 @ ef9856b9
......@@ -21,37 +21,37 @@
除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| cachedcount | number | 0 | 否 | 长列表延迟加载时list-item最少缓存数量。 |
| 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：滑动到边缘后无效果。 |
| divider | 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时播放过程动效。 |
| initialindex | number | 0 | 否 | 用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。 |
| initialoffset | &lt;length&gt; | 0 | 否 | 用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。 |
| selected | string | - | 否 | 指定当前列表中被选中激活的项，可选值为list-item的section属性值。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------- | -------------- | ------- | ---- | ---------------------------------------- |
| cachedcount | number | 0 | 否 | 长列表延迟加载时list-item最少缓存数量。 |
| 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：滑动到边缘后无效果。 |
| divider | 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时播放过程动效。 |
| initialindex | number | 0 | 否 | 用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。 |
| initialoffset | &lt;length&gt; | 0 | 否 | 用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。 |
| selected | string | - | 否 | 指定当前列表中被选中激活的项，可选值为list-item的section属性值。 |
## 样式
除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| divider-color | &lt;color&gt; | transparent | 否 | item分隔线颜色，仅当list的divider属性为true时生效。 |
| divider-height | &lt;length&gt; | 1 | 否 | item分隔线高度，仅当list的divider属性为true时生效。 |
| divider-length | &lt;length&gt; | 主轴宽度 | 否 | item分隔线长度，不设置时最大长度为主轴宽度，具体长度取决于divider-origin，仅当list的divider属性为true时生效。 |
| divider-origin | &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/>&nbsp;align-items样式作用在每一列的子元素上，列与列之间采用均分方式布局。 |
| item-extent | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 设置内部item为固定大小，设置为百分比格式时，指相对于list的视口主轴方向长度的百分比。 |
| fade-color | &lt;color&gt; | grey | 否 | 设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。 |
| scrollbar-color | &lt;color&gt; | - | 否 | 设置滚动条的颜色。 |
| scrollbar-width | &lt;length&gt; | - | 否 | 设置滚动条的宽度。 |
| scrollbar-offset | &lt;length&gt; | 0 | 否 | 设置滚动条距离List默认位置的偏移量，只支持正数，默认位置在List右边缘，可以通过这个偏移量调整滚动条的水平位置，如果滚动条绘制在list外部，而list父组件有裁剪，会导致滚动条被裁剪。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------- | ---------------------------------------- | ----------- | ---- | ---------------------------------------- |
| divider-color | &lt;color&gt; | transparent | 否 | item分隔线颜色，仅当list的divider属性为true时生效。 |
| divider-height | &lt;length&gt; | 1 | 否 | item分隔线高度，仅当list的divider属性为true时生效。 |
| divider-length | &lt;length&gt; | 主轴宽度 | 否 | item分隔线长度，不设置时最大长度为主轴宽度，具体长度取决于divider-origin，仅当list的divider属性为true时生效。 |
| divider-origin | &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/>&nbsp;align-items样式作用在每一列的子元素上，列与列之间采用均分方式布局。 |
| item-extent | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 设置内部item为固定大小，设置为百分比格式时，指相对于list的视口主轴方向长度的百分比。 |
| fade-color | &lt;color&gt; | grey | 否 | 设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。 |
| scrollbar-color | &lt;color&gt; | - | 否 | 设置滚动条的颜色。 |
| scrollbar-width | &lt;length&gt; | - | 否 | 设置滚动条的宽度。 |
| scrollbar-offset | &lt;length&gt; | 0 | 否 | 设置滚动条距离List默认位置的偏移量，只支持正数，默认位置在List右边缘，可以通过这个偏移量调整滚动条的水平位置，如果滚动条绘制在list外部，而list父组件有裁剪，会导致滚动条被裁剪。 |
## 事件
......@@ -76,7 +76,6 @@
```json
// xxx.json
{
"data": {
"todolist": [{
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-swiper.md
浏览文件 @ ef9856b9
......@@ -6,7 +6,7 @@
> **说明：**
>
>从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -14,26 +14,26 @@
除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| index | number | 0 | 否 | 当前在容器中显示的子组件的索引值。 |
| indicator | boolean | true | 否 | 是否启用导航点指示器，默认true。 |
| digital | boolean | false | 否 | 是否启用数字导航点，默认为false。<br/>必须设置indicator时才能生效数字导航点。 |
| loop | boolean | true | 否 | 是否开启循环滑动。 |
| duration | number | - | 否 | 子组件切换的动画时长。 |
| vertical | boolean | false | 否 | 是否为纵向滑动，纵向滑动时采用纵向的指示器。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------- | ------- | ----- | ---- | ---------------------------------------- |
| index | number | 0 | 否 | 当前在容器中显示的子组件的索引值。 |
| indicator | boolean | true | 否 | 是否启用导航点指示器，默认true。 |
| digital | boolean | false | 否 | 是否启用数字导航点，默认为false。<br/>必须设置indicator时才能生效数字导航点。 |
| loop | boolean | true | 否 | 是否开启循环滑动。 |
| duration | number | - | 否 | 子组件切换的动画时长。 |
| vertical | boolean | false | 否 | 是否为纵向滑动，纵向滑动时采用纵向的指示器。 |
## 样式
除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| indicator-color | &lt;color&gt; | - | 否 | 导航点指示器的填充颜色。 |
| indicator-selected-color | &lt;color&gt; | - | 否 | 导航点指示器选中的颜色。 |
| indicator-size | &lt;length&gt; | 4px | 否 | 导航点指示器的直径大小。 |
| indicator-top\|left\|right\|bottom | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 导航点指示器在swiper中的相对位置。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------------------------- | ---------------------------------------- | ---- | ---- | -------------------- |
| indicator-color | &lt;color&gt; | - | 否 | 导航点指示器的填充颜色。 |
| indicator-selected-color | &lt;color&gt; | - | 否 | 导航点指示器选中的颜色。 |
| indicator-size | &lt;length&gt; | 4px | 否 | 导航点指示器的直径大小。 |
| indicator-top\|left\|right\|bottom | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 导航点指示器在swiper中的相对位置。 |
## 事件
......@@ -87,7 +87,6 @@
```json
// xxx.json
{
"data": {
"index": 1
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-events.md
浏览文件 @ ef9856b9
......@@ -6,7 +6,7 @@
> **说明：**
>
> 事件名不支持大写字母。
> 事件名不支持大写字母。
## 子组件comp示例：
......@@ -43,7 +43,6 @@
```json
// comp.json
{
"data": {
},
......@@ -83,8 +82,7 @@
```json
// xxx.json
```j&#39;so
{
"data": {
},
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-props.md
浏览文件 @ ef9856b9
......@@ -35,7 +35,6 @@
```json
// comp.json
{
"data": {
"progress": {
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-multiple-languages.md
浏览文件 @ ef9856b9
......@@ -15,7 +15,7 @@
由于不同语言针对单复数有不同的匹配规则，在资源文件中的使用“zero”“one”“two”“few”“many”“other”定义不同单复数场景下的词条内容。例如中文不区分单复数仅存在“other”场景；英文存在“one”、“other”场景；阿拉伯语存在上述6种场景。
以en-US.json和ar-AE.json为例，资源文件内容格式如下：
以en-US.json和ar-AE.json为例，资源文件内容格式如下：
```json
{
......@@ -59,19 +59,19 @@
在应用中使用$t方法引用资源，$t既可以在hml中使用，也可以在js中使用。系统将根据当前语言环境和指定的资源路径（通过$t的path参数设置），显示对应语言的资源文件中的内容。
**表1** 简单格式化
| 属性 | 类型 | 参数 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| $t | Function | 请见$t参数说明 | 是 | 根据系统语言完成简单的替换：this.$t('strings.hello') |
| 属性 | 类型 | 参数 | 必填 | 描述 |
| ---- | -------- | -------- | ---- | -------------------------------------- |
| $t | Function | 请见$t参数说明 | 是 | 根据系统语言完成简单的替换：this.$t('strings.hello') |
**表2** $t参数说明
| 参数 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| path | string | 是 | 资源路径 |
| 参数 | 类型 | 必填 | 描述 |
| ---- | ------ | ---- | ---- |
| path | string | 是 | 资源路径 |
- 简单格式化示例代码
```html
<!-- xxx.hml -->
<div>
......@@ -81,21 +81,22 @@
```
- 单复数格式化方法
**表3** 单复数格式化
| 属性 | 类型 | 参数 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| $tc | Function | 请见$tc参数说明 | 是 | 根据系统语言完成单复数替换：this.$tc('strings.plurals')<br/>定义资源的内容通过json格式的key为“zero”、“one”、“two”、“few”、“many”和“other”区分。 |
**表4** $tc参数说明
| 参数 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| path | string | 是 | 资源路径 |
| count | number | 是 | 要表达的值 |
**表3** 单复数格式化
| 属性 | 类型 | 参数 | 必填 | 描述 |
| ---- | -------- | --------- | ---- | ---------------------------------------- |
| $tc | Function | 请见$tc参数说明 | 是 | 根据系统语言完成单复数替换：this.$tc('strings.plurals')<br/>定义资源的内容通过json格式的key为“zero”、“one”、“two”、“few”、“many”和“other”区分。 |
**表4** $tc参数说明
| 参数 | 类型 | 必填 | 描述 |
| ----- | ------ | ---- | ----- |
| path | string | 是 | 资源路径 |
| count | number | 是 | 要表达的值 |
- 单复数格式化示例代码
```html
<!--xxx.hml-->
<div>
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-syntax-hml.md
浏览文件 @ ef9856b9
......@@ -35,7 +35,6 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
```json
// xxx.json
{
"data": {
"content": "Hello World!",
......@@ -49,9 +48,9 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
> **说明：**
> - key值支持对象操作符和数组操作符，如{{key.value}}、{{key[0]}}。
>
> - 从 API Version 6 开始支持字符串拼接、逻辑运算和三元表达式。
> - key值支持对象操作符和数组操作符，如{{key.value}}、{{key[0]}}。
>
> - 从 API Version 6 开始支持字符串拼接、逻辑运算和三元表达式。
> - 字符串拼接：
> - 支持变量跟变量：{{key1}}{{key2}}等
> - 支持常量跟变量： "my name is {{name}}， i am from {{city}}." "key1 {{key1}}"
......@@ -70,18 +69,17 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
卡片仅支持click通用事件，事件的定义只能是直接命令式，事件定义必须包含action字段，用以说明事件类型。卡片支持两种事件类型：跳转事件(router)和消息事件(message)。跳转事件可以跳转到卡片提供方的OpenHarmony应用，消息事件可以将开发者自定义信息传递给卡片提供方。事件参数支持变量，变量以"{{}}"修饰。跳转事件中若定义了params字段，则在被拉起应用的onStart的intent中，可用"params"作为key将跳转事件定义的params字段的值取到。
- 跳转事件格式
通过定义ability名称和携带的参数字段params直接跳转，可用"params"作为key提取到跳转事件定义的params字段值。
| 选择器 | 样例 | 默认值 | 样例描述 |
| -------- | -------- | -------- | -------- |
| action | string | "router" | 事件类型。<br/>- "router"：用于应用跳转。<br/>- "message"：自定义点击事件。 |
| abilityName | string | - | 跳转ability名。 |
| params | Object | - | 跳转应用携带的额外参数。 |
| 选择器 | 样例 | 默认值 | 样例描述 |
| ----------- | ------ | -------- | ---------------------------------------- |
| action | string | "router" | 事件类型。<br/>- "router"：用于应用跳转。<br/>- "message"：自定义点击事件。 |
| abilityName | string | - | 跳转ability名。 |
| params | Object | - | 跳转应用携带的额外参数。 |
```json
// xxx.json
{
"data": {
"mainAbility": "xxx.xxx.xxx"
......@@ -95,31 +93,30 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
}
}
```
也可以使用want格式绑定参数跳转到目标应用，want定义了ability名称、包名、携带的参数字段等。
| 选择器 | 类型 | 默认值 | 样例描述 |
| ------ | ------ | -------- | ------------------------------------------------------------ |
| 选择器 | 类型 | 默认值 | 样例描述 |
| ------ | ------ | -------- | ---------------------------------------- |
| action | string | "router" | 事件类型。<br>- "router"：用于应用跳转。<br>- "message"：自定义点击事件。 |
| want | Object | - | 跳转目标应用的信息，参考want格式表。 |
| want | Object | - | 跳转目标应用的信息，参考want格式表。 |
**表1** want格式
| 选择器 | 类型 | 默认值 | 样例描述 |
| ----------- | -------------------- | ------------ | ------------------------------------------------------------ |
| 选择器 | 类型 | 默认值 | 样例描述 |
| ----------- | -------------------- | ------------ | ---------------------------------------- |
| bundleName | string | - | 表示包描述。如果在Want中同时指定了BundleName和AbilityName，则Want可以直接匹配到指定的Ability。 |
| abilityName | string | - | 表示待启动的Ability名称。 |
| action | string | - | 表示action选项描述。 |
| abilityName | string | - | 表示待启动的Ability名称。 |
| action | string | - | 表示action选项描述。 |
| uri | string | - | 表示Uri描述。如果在Want中指定了Uri，则Want将匹配指定的Uri信息，包括scheme, schemeSpecificPart, authority和path信息。 |
| type | string | "text/plain" | 表示MIME type类型描述，比如："text/plain" 、 "image/*"等。 |
| type | string | "text/plain" | 表示MIME type类型描述，比如："text/plain" 、 "image/*"等。 |
| flags | number | - | 表示处理Want的方式。默认传数字，具体参考[flags说明](../apis/js-apis-featureAbility.md#flags说明)。 |
| entities | Array\<string> | - | 类别，用于指定Intent的操作类别。 |
| parameters | {[key: string]: any} | - | 表示WantParams描述。 |
| entities | Array\<string> | - | 类别，用于指定Intent的操作类别。 |
| parameters | {[key: string]: any} | - | 表示WantParams描述。 |
```json
// xxx.json
{
{
"data": {
"mainAbility": "xxx.xxx.xxx"
},
......@@ -141,19 +138,18 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
}
}
```
在API Version 8，want参数需要在app.js或app.ets文件的onCreate方法中调用[featureAbility.getWant](../apis/js-apis-featureAbility.md#featureabilitygetwant-1)接口接收相关参数。
- 消息事件格式
| 选择器 | 样例 | 默认值 | 样例描述 |
| -------- | -------- | -------- | -------- |
| action | string | message | 表示事件类型。 |
| params | Object | - | 跳转应用携带的额外参数。 |
| 选择器 | 样例 | 默认值 | 样例描述 |
| ------ | ------ | ------- | ------------ |
| action | string | message | 表示事件类型。 |
| params | Object | - | 跳转应用携带的额外参数。 |
```json
// xxx.json
{
"actions": {
"activeEvent": {
......@@ -165,7 +161,7 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
```
- 绑定路由事件和消息事件
```html
<!-- xxx.hml -->
<div>
......@@ -201,7 +197,6 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
```json
// xxx.json
{
"data": {
"array": [
......@@ -221,15 +216,15 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
- for="(i, v) in array"：其中元素索引为i，元素变量为v，遍历数组对象array。
> **说明：**
> - 数组中的每个元素必须存在tid指定的数据属性，否则运行时可能会导致异常。
>
> - 数组中被tid指定的属性要保证唯一性，如果不是则会造成性能损耗。比如，示例中只有id和name可以作为tid字段，因为它们属于唯一字段。
>
> - tid不支持表达式。
>
> - 不支持for嵌套使用。
>
> - for对应的变量数组，当前要求数组中的object是相同类型，不支持多种object类型混合写在一个数组中。
> - 数组中的每个元素必须存在tid指定的数据属性，否则运行时可能会导致异常。
>
> - 数组中被tid指定的属性要保证唯一性，如果不是则会造成性能损耗。比如，示例中只有id和name可以作为tid字段，因为它们属于唯一字段。
>
> - tid不支持表达式。
>
> - 不支持for嵌套使用。
>
> - for对应的变量数组，当前要求数组中的object是相同类型，不支持多种object类型混合写在一个数组中。
## 条件渲染
......@@ -250,7 +245,6 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
```json
// xxx.json
{
"data": {
"show": false,
......@@ -269,7 +263,6 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
```json
// xxx.json
{
"data": {
"visible": false
......@@ -295,7 +288,6 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
```json
// xxx.json
{
"data": {
"show": true
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-version-compatibility.md
浏览文件 @ ef9856b9
......@@ -5,7 +5,8 @@
> **说明：**
> 低版本兼容能力从 API Version 6 开始支持。
>
> 低版本兼容能力从 API Version 6 开始支持。
开发者可以通过JSON配置文件配置前向兼容能力。该文件提供了apiVersion属性用于兼容版本，该字段和卡片配置文件的数据字段data、事件字段actions同级。在apiVersion标签下定义的内容会基于当前运行版本信息，覆盖原始的data标签内容。
......
zh-cn/application-dev/ui/ts-resource-access.md
浏览文件 @ ef9856b9
......@@ -8,7 +8,10 @@
引用rawfile下资源时使用```"$rawfile('filename')"```的形式，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。
> **说明：**
>
> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。
>
> `$r`返回值为Resource对象，可通过[getString](../../reference/apis/js-apis-resource-manager.md#getstring) 方法将获取对应的字符串。
在xxx.ets文件中，可以使用在resources目录中定义的资源。
......
zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md
浏览文件 @ ef9856b9
......@@ -75,7 +75,7 @@ base目录与限定词目录下面可以创建资源组目录（包括element、
| ------- | ---------------------------------------- | ---------------------------------------- |
| element | 表示元素资源，以下每一类数据都采用相应的JSON文件来表征。<br/>-&nbsp;boolean，布尔型<br/>-&nbsp;color，颜色<br/>-&nbsp;float，浮点型<br/>-&nbsp;intarray，整型数组<br/>-&nbsp;integer，整型<br/>-&nbsp;pattern，样式<br/>-&nbsp;plural，复数形式<br/>-&nbsp;strarray，字符串数组<br/>-&nbsp;string，字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。<br/>-&nbsp;boolean.json<br/>-&nbsp;color.json<br/>-&nbsp;float.json<br/>-&nbsp;intarray.json<br/>-&nbsp;integer.json<br/>-&nbsp;pattern.json<br/>-&nbsp;plural.json<br/>-&nbsp;strarray.json<br/>-&nbsp;string.json |
| media | 表示媒体资源，包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义，例如：icon.png。 |
| profile | 表示其他类型文件，以原始文件形式保存。 | 文件名可自定义。 |
| rawfile | 表示其他类型文件，在应用构建为hap包后，以原始文件形式保存，不会被集成到resources.index文件中。 | 文件名可自定义。 |
### 媒体资源类型说明
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或