diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md index 6901f5234f9c9e765f2d470db93e19b0389085fd..b372976e717b88fdeceec526c44f1b5c928f615e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -28,6 +28,8 @@ Swiper(value:{controller?: SwiperController}) ## 属性 +不支持[Menu控制](ts-universal-attributes-menu.md)。 + | 名称 | 参数类型 | 默认值 | 描述 | | --------------------------- | ---------------------------------------- | ---------- | ---------------------------------------- | | index | number | 0 | 设置当前在容器中显示的子组件的索引值。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md index dbb474ba4289020a0c0676bb040b5ae2ff6ee529..7e7546c1f80be69e9c2ea8db06d8ba2c19f7e5fc 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md @@ -1,7 +1,7 @@ # 图像效果 > **说明:** -> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 ## 权限列表 @@ -12,23 +12,24 @@ ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| blur | number | - | 为当前组件添加内容模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。 | -| backdropBlur | number | - | 为当前组件添加背景模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。 | -| shadow | {
radius: number,
color?: Color,
offsetX?: number,
offsetY?: number
} | - | 为当前组件添加阴影效果,入参为模糊半径(必填)、阴影的颜色(可选,默认为灰色)、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 8+ | Color | - | 为当前组件添加颜色叠加效果,入参为叠加的颜色。 | -| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的,值为0图像无变化。 (百分比) | -| hueRotate | number \| string | '0deg' | 为当前组件添加色相旋转效果,入参为旋转的角度值,0deg时图像无变化。入参没有最大值,超过360deg时相当于又绕一圈,即,370deg和10deg的色相旋转效果相同。 | - +| 名称 | 参数类型 | 默认值 | 描述 | +| ----------------------------- | ---------------------------------------- | ------ | ---------------------------------------- | +| blur | number | - | 为当前组件添加内容模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。 | +| backdropBlur | number | - | 为当前组件添加背景模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。 | +| shadow | {
radius: number,
color?: Color,
offsetX?: number,
offsetY?: number
} | - | 为当前组件添加阴影效果,入参为模糊半径(必填)、阴影的颜色(可选,默认为灰色)、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 8+ | Color | - | 为当前组件添加颜色叠加效果,入参为叠加的颜色。 | +| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的,值为0图像无变化。 (百分比) | +| hueRotate | number \| string | '0deg' | 为当前组件添加色相旋转效果,入参为旋转的角度值,0deg时图像无变化。入参没有最大值,超过360deg时相当于又绕一圈,即,370deg和10deg的色相旋转效果相同。 | ## 示例 +示例效果请以真机运行为准,当前IDE预览器不支持 + ```ts // xxx.ets @Entry diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/figures/#000000.png b/zh-cn/application-dev/reference/js-service-widget-ui/figures/000000.png similarity index 100% rename from zh-cn/application-dev/reference/js-service-widget-ui/figures/#000000.png rename to zh-cn/application-dev/reference/js-service-widget-ui/figures/000000.png diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-appendix-types.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-appendix-types.md index 20831e6b5b303b205ed2f3f00d8bdfbe7dd8e894..08c065f7f4d262099dc388ece98ca5ac60513854 100644 --- a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-appendix-types.md +++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-appendix-types.md @@ -6,166 +6,166 @@ ## 长度类型 -| 名称 | 类型定义 | 描述 | -| -------- | -------- | -------- | -| length | string \| number | 用于描述尺寸单位,输入为number类型时,使用px单位。输入为string类型时,需要显式指定像素单位,当前支持的像素单位有:
- px:逻辑尺寸单位。
- fp:字体尺寸单位,随系统字体大小设置发生变化,仅支持文本类组件设置相应的字体大小。 | -| percentage | string | 百分比尺寸单位,如“50%”。 | +| 名称 | 类型定义 | 描述 | +| ---------- | -------------------------- | ---------------------------------------- | +| length | string \| number | 用于描述尺寸单位,输入为number类型时,使用px单位。输入为string类型时,需要显式指定像素单位,当前支持的像素单位有:
- px:逻辑尺寸单位。
- fp:字体尺寸单位,随系统字体大小设置发生变化,仅支持文本类组件设置相应的字体大小。 | +| percentage | string | 百分比尺寸单位,如“50%”。 | ## 颜色类型 -| 名称 | 类型定义 | 描述 | -| -------- | -------- | -------- | +| 名称 | 类型定义 | 描述 | +| ----- | ------------------ | ---------------------------------------- | | color | string \|颜色枚举 | 用于描述颜色信息。
  字符串格式如下:
- 'rgb(255, 255, 255)'。
- 'rgba(255, 255, 255, 1.0)'。
- HEX格式:'\#rrggbb','\#aarrggbb'。
- 枚举格式:'black','white'。
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) | diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-calendar.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-calendar.md index 7ca6a7d90daa1d207561476477a681d653c234f9..3ded3025dd3d9fb93a59bcdcbd20c428aa10f0e7 100644 --- a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-calendar.md +++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-calendar.md @@ -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 | 表示工作日。
- “work”:工作日。
- “off”:休息日。 | -| dayMarkValue | string | 表示具体需要显示的“班”、“休”信息。 | +| 名称 | 类型 | 描述 | +| -------------- | ------ | --------------------------------------- | +| index | int | 数据的索引,表示第几个日期。 | +| day | int | 表示具体哪一天。 | +| month | int | 表示月份。 | +| year | int | 表示年份。 | +| isFirstOfLuanr | bool | 表示是否是农历的第一天,在农历第一天的数据下绘制横线。 | +| hasSchedule | bool | 表示是否有日程,在有日程的日期数据上绘制圆。 | +| markLunarDay | bool | 表示节假日,农历数据会变成蓝色。 | +| lunarDay | string | 农历日期。 | +| lunarMonth | string | 农历月份。 | +| dayMark | string | 表示工作日。
- “work”:工作日。
- “off”:休息日。 | +| dayMarkValue | string | 表示具体需要显示的“班”、“休”信息。 | calendardata示例: -```json +``` { "year":2021, "month":1, @@ -93,33 +93,33 @@ calendardata示例: ## 样式 -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| background-color | <color> | - | 否 | 设置背景颜色。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ---------------- | ------------- | ---- | ---- | ------- | +| background-color | <color> | - | 否 | 设置背景颜色。 | ## 事件 -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | -| 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": "", diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-chart.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-chart.md index d557aec5cd055d2510eacf4db4381a515d91d601..195a0335ffead56efc6f440115b1758a733a93ba 100644 --- a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-chart.md +++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-chart.md @@ -16,132 +16,132 @@ 除支持[通用属性](js-service-widget-common-attributes.md)外,还支持如下属性: -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| type | string | line | 否 | 设置图表类型(不支持动态修改),可选项有:
- bar:柱状图。
- line:线形图。
- gauge:量规图。
- progress:进度类圆形图表。
- loading:加载类圆形图表。
- rainbow:占比类圆形图表。 | -| options | ChartOptions | - | 否 | 图表参数设置,柱状图和线形图必须设置参数设置,量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示,线条宽度、是否平滑等。(不支持动态修改) | -| datasets | Array\ | - | 否 | 数据集合,柱状图和线形图必须设置数据集合,量规图不生效。可以设置多条数据集及其背景色。 | -| segments | DataSegment \| Array\ | | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。
DataSegment针对进度类和加载类圆形图表使用,Array\针对占比类图标使用,DataSegment最多9个。 | -| effects | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 | -| animationduration | number | 3000 | 否 | 设置占比类圆形图表展开动画时长,单位为ms。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ----------------- | ---------------------------------- | ---- | ---- | ---------------------------------------- | +| type | string | line | 否 | 设置图表类型(不支持动态修改),可选项有:
- bar:柱状图。
- line:线形图。
- gauge:量规图。
- progress:进度类圆形图表。
- loading:加载类圆形图表。
- rainbow:占比类圆形图表。 | +| options | ChartOptions | - | 否 | 图表参数设置,柱状图和线形图必须设置参数设置,量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示,线条宽度、是否平滑等。(不支持动态修改) | +| datasets | Array\ | - | 否 | 数据集合,柱状图和线形图必须设置数据集合,量规图不生效。可以设置多条数据集及其背景色。 | +| segments | DataSegment \| Array\ | | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。
DataSegment针对进度类和加载类圆形图表使用,Array\针对占比类图标使用,DataSegment最多9个。 | +| effects | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 | +| animationduration | number | 3000 | 否 | 设置占比类圆形图表展开动画时长,单位为ms。 | **表1** ChartOptions -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| xAxis | ChartAxis | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 | -| yAxis | ChartAxis | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 | -| series | ChartAxis | - | 否 | 数据序列参数设置,仅线形图支持。可以设置:
- 线的样式,如线宽、是否平滑。
- 线最前端位置白点的样式和大小。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------ | --------- | ---- | ---- | ---------------------------------------- | +| xAxis | ChartAxis | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 | +| yAxis | ChartAxis | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 | +| series | ChartAxis | - | 否 | 数据序列参数设置,仅线形图支持。可以设置:
- 线的样式,如线宽、是否平滑。
- 线最前端位置白点的样式和大小。 | **表2** ChartDataset -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| strokeColor | <color> | \#ff6384 | 否 | 线条颜色,仅线形图支持。 | -| fillColor | <color> | \#ff6384 | 否 | 填充颜色,线形图表示填充的渐变颜色。 | -| data | Array<number> \| Array\仅支持1~20,且具体显示的效果与如下计算值有关(图的宽度所占的像素/(max-min))。在柱状图中,每组数据显示的柱子数量与刻度数量一致,且柱子显示在刻度处。 | -| display | boolean | false | 否 | 是否显示轴。 | -| color | <color> | \#c0c0c0 | 否 | 轴颜色。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | ------------- | -------- | ---- | ---------------------------------------- | +| min | number | 0 | 否 | 轴的最小值,不支持负数,仅线形图支持。 | +| max | number | 100 | 否 | 轴的最大值,不支持负数,仅线形图支持。 | +| axisTick | number | 10 | 否 | 轴显示的刻度数量。
仅支持1~20,且具体显示的效果与如下计算值有关(图的宽度所占的像素/(max-min))。在柱状图中,每组数据显示的柱子数量与刻度数量一致,且柱子显示在刻度处。 | +| display | boolean | false | 否 | 是否显示轴。 | +| color | <color> | \#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 | <length> | 1px | 否 | 线宽设置。 | -| smooth | boolean | false | 否 | 是否平滑。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------ | -------------- | ----- | ---- | ----- | +| width | <length> | 1px | 否 | 线宽设置。 | +| smooth | boolean | false | 否 | 是否平滑。 | **表6** PointStyle -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| shape | string | circle | 否 | 高亮点的形状。可选值为:
- circle:圆形。
- square:方形。
- triangle:三角形。 | -| size | <length> | 5px | 否 | 高亮点的大小。 | -| strokeWidth | <length> | 1px | 否 | 边框宽度。 | -| strokeColor | <color> | \#ff0000 | 否 | 边框颜色。 | -| fillColor | <color> | \#ff0000 | 否 | 填充颜色。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ----------- | -------------- | -------- | ---- | ---------------------------------------- | +| shape | string | circle | 否 | 高亮点的形状。可选值为:
- circle:圆形。
- square:方形。
- triangle:三角形。 | +| size | <length> | 5px | 否 | 高亮点的大小。 | +| strokeWidth | <length> | 1px | 否 | 边框宽度。 | +| strokeColor | <color> | \#ff0000 | 否 | 边框颜色。 | +| fillColor | <color> | \#ff0000 | 否 | 填充颜色。 | **表7** ChartLoop -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| margin | <length> | 1 | 否 | 擦除点的个数(最新绘制的点与最老的点之间的横向距离)。
margin和topPoint/bottomPoint/headPoint同时使用时,有概率出现point正好位于擦除区域的情况,导致point不可见,因此不建议同时使用。 | -| gradient | boolean | false | 否 | 是否需要渐变擦除。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------------- | ----- | ---- | ---------------------------------------- | +| margin | <length> | 1 | 否 | 擦除点的个数(最新绘制的点与最老的点之间的横向距离)。
margin和topPoint/bottomPoint/headPoint同时使用时,有概率出现point正好位于擦除区域的情况,导致point不可见,因此不建议同时使用。 | +| gradient | boolean | false | 否 | 是否需要渐变擦除。 | **表8** Point -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| value | number | 0 | 是 | 表示绘制点的Y轴坐标。 | -| pointStyle | PointStyle | - | 否 | 表示当前数据点的绘制样式。 | -| description | string | - | 否 | 表示当前点的注释内容。 | -| textLocation | string | - | 否 | 可选值为:
- "top":注释的绘制位置位于点的上方。
- "bottom":注释的绘制位置位于点的下方。
- "none":不绘制。 | -| textColor | <color> | \#000000 | 否 | 表示注释文字的颜色。 | -| lineDash | string | solid | 否 | 表示绘制当前线段虚线的样式。
- "dashed, 5, 5":表示纯虚线,绘制5px的实线后留5px的空白。
- “solid”:表示绘制实线。 | -| lineColor | <color> | \#000000 | 否 | 表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------------ | ------------- | -------- | ---- | ---------------------------------------- | +| value | number | 0 | 是 | 表示绘制点的Y轴坐标。 | +| pointStyle | PointStyle | - | 否 | 表示当前数据点的绘制样式。 | +| description | string | - | 否 | 表示当前点的注释内容。 | +| textLocation | string | - | 否 | 可选值为:
- "top":注释的绘制位置位于点的上方。
- "bottom":注释的绘制位置位于点的下方。
- "none":不绘制。 | +| textColor | <color> | \#000000 | 否 | 表示注释文字的颜色。 | +| lineDash | string | solid | 否 | 表示绘制当前线段虚线的样式。
- "dashed, 5, 5":表示纯虚线,绘制5px的实线后留5px的空白。
- “solid”:表示绘制实线。 | +| lineColor | <color> | \#000000 | 否 | 表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。 | **表9** DataSegment -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| startColor | Color | - | 否 | 起始位置的颜色,设置startColor必须设置endColor。不设置startColor时,会使用系统默认预置的颜色数组,具体颜色值见下表。 | -| endColor | Color | - | 否 | 终止位置的颜色,设置endColor必须设置startColor。
不设置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。
不设置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 | <length> | 32px(量规)
24px(占比类圆形图表) | 否 | 量规、占比类圆形图表组件刻度条的宽度。 | -| start-angle | <deg> | 240(量规)
0(占比类圆形图表) | 否 | 量规、占比类圆形图表组件刻度条起始角度,以时钟0点为基线。范围为0到360。 | -| total-angle | <deg> | 240(量规)
360(占比类圆形图表) | 否 | 量规、占比类圆形图表组件刻度条总长度,范围为-360到360,负数标识起点到终点为逆时针。 | -| center-x | <length> | - | 否 | 量规组件刻度条中心位置,该样式优先于通用样式的position样式,仅量规图支持。
该样式需要和center-y和radius一起配置才能生效。 | -| center-y | <length> | - | 否 | 量规组件刻度条中心位置,该样式优先于通用样式的position样式,仅量规图支持。
该样式需要和center-x和radius一起配置才能生效。 | -| radius | <length> | - | 否 | 量规组件刻度条半径,该样式优先于通用样式的width和height样式,仅量规图支持。
该样式需要和center-x和center-y一起配置才能生效。 | -| colors | Array | - | 否 | 量规组件刻度条每一个区段的颜色,仅量规图支持。
如:colors: \#ff0000, \#00ff00。 | -| weights | Array | - | 否 | 量规组件刻度条每一个区段的权重,仅量规图支持。
如:weights: 2, 2。 | -| font-family | Array | - | 否 | 表示绘制注释的字体样式,支持[自定义字体](js-service-widget-common-customizing-font.md)。 | -| font-size | <length> | - | 否 | 表示绘制注释的字体的大小。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------------ | -------------- | -------------------------- | ---- | ---------------------------------------- | +| stroke-width | <length> | 32px(量规)
24px(占比类圆形图表) | 否 | 量规、占比类圆形图表组件刻度条的宽度。 | +| start-angle | <deg> | 240(量规)
0(占比类圆形图表) | 否 | 量规、占比类圆形图表组件刻度条起始角度,以时钟0点为基线。范围为0到360。 | +| total-angle | <deg> | 240(量规)
360(占比类圆形图表) | 否 | 量规、占比类圆形图表组件刻度条总长度,范围为-360到360,负数标识起点到终点为逆时针。 | +| center-x | <length> | - | 否 | 量规组件刻度条中心位置,该样式优先于通用样式的position样式,仅量规图支持。
该样式需要和center-y和radius一起配置才能生效。 | +| center-y | <length> | - | 否 | 量规组件刻度条中心位置,该样式优先于通用样式的position样式,仅量规图支持。
该样式需要和center-x和radius一起配置才能生效。 | +| radius | <length> | - | 否 | 量规组件刻度条半径,该样式优先于通用样式的width和height样式,仅量规图支持。
该样式需要和center-x和center-y一起配置才能生效。 | +| colors | Array | - | 否 | 量规组件刻度条每一个区段的颜色,仅量规图支持。
如:colors: \#ff0000, \#00ff00。 | +| weights | Array | - | 否 | 量规组件刻度条每一个区段的权重,仅量规图支持。
如:weights: 2, 2。 | +| font-family | Array | - | 否 | 表示绘制注释的字体样式,支持[自定义字体](js-service-widget-common-customizing-font.md)。 | +| font-size | <length> | - | 否 | 表示绘制注释的字体的大小。 | ## 事件 @@ -152,7 +152,7 @@ ## 示例 1. 线形图 - + ```html
@@ -163,7 +163,7 @@
``` - + ```css /* xxx.css */ .container { @@ -184,9 +184,8 @@ } ``` - + ```json - // xxx.json { "data": { "lineData": [ @@ -251,12 +250,12 @@ } } ``` -**4*4卡片** + **4*4卡片** ![zh-cn_image_0000001185652902](figures/zh-cn_image_0000001185652902.png) 2. 柱状图 - + ```html
@@ -267,7 +266,7 @@
``` - + ```css /* xxx.css */ .container { @@ -288,9 +287,8 @@ } ``` - + ```json - // xxx.json { "data": { "barData": [ @@ -323,13 +321,13 @@ } } ``` -**4*4卡片** + **4*4卡片** ![barchart](figures/barchart.PNG) 3. 量规图 - - + + ```html
@@ -338,8 +336,8 @@
``` - - + + ```css /* xxx.css */ .container { @@ -356,6 +354,6 @@ weights: 4, 2, 1; } ``` -**4*4卡片** + **4*4卡片** ![gauge](figures/gauge.PNG) diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-clock.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-clock.md index cdf548653480d3cd219c7be37b9b4e14f00a6cf8..0d9a0cec0d088e7da90e5a2e025a6107a93a912e 100644 --- a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-clock.md +++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-clock.md @@ -16,28 +16,28 @@ 除支持[通用属性](js-service-widget-common-attributes.md)外,还支持如下属性: -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| clockconfig | ClockConfig | - | 是 | Clock的图片资源和样式设置,包括日间时段(6:00-18:00)和夜间时段(18:00-次日6:00)两套资源和样式设置。
其中每套资源和样式包括表盘资源、时针指针资源、分针指针资源、秒针指针资源四张图和相应时间段的表盘数字颜色。
日间资源为必填项。夜间资源可不填,不填时默认会复用日间资源用作夜间时段的显示。
仅支持动态更新整个Object,不支持动态更新Object里的内容。
建议使用PNG资源作为Clock组件的图片资源。
不支持使用SVG资源作为Clock组件的图片资源。 | -| showdigit | boolean | true | 否 | 是否由Clock组件绘制表盘数字。
该属性为true时,请留意clockconfig中digitRadiusRatio和digitSizeRatio参数与表盘的匹配情况。
由Clock组件绘制的表盘数字支持国际化。 | -| hourswest | number | - | 否 | 时钟的时区偏移值,时区为标准时区减去hourswest。
有效范围为[-12, 12],其中负值范围表示东时区,比如东八区对应的是-8。不设置默认采用系统时间所在的时区。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ----------- | ----------- | ---- | ---- | ---------------------------------------- | +| clockconfig | ClockConfig | - | 是 | Clock的图片资源和样式设置,包括日间时段(6:00-18:00)和夜间时段(18:00-次日6:00)两套资源和样式设置。
其中每套资源和样式包括表盘资源、时针指针资源、分针指针资源、秒针指针资源四张图和相应时间段的表盘数字颜色。
日间资源为必填项。夜间资源可不填,不填时默认会复用日间资源用作夜间时段的显示。
仅支持动态更新整个Object,不支持动态更新Object里的内容。
建议使用PNG资源作为Clock组件的图片资源。
不支持使用SVG资源作为Clock组件的图片资源。 | +| showdigit | boolean | true | 否 | 是否由Clock组件绘制表盘数字。
该属性为true时,请留意clockconfig中digitRadiusRatio和digitSizeRatio参数与表盘的匹配情况。
由Clock组件绘制的表盘数字支持国际化。 | +| hourswest | number | - | 否 | 时钟的时区偏移值,时区为标准时区减去hourswest。
有效范围为[-12, 12],其中负值范围表示东时区,比如东八区对应的是-8。不设置默认采用系统时间所在的时区。 | **表1** ClockConfig -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| face | <string> | - | 是 | 日间时段的表盘资源路径。
表盘资源须为包含时钟刻度的正方形图片,表盘区域(圆形)为该图片的内切圆或内切圆的同心圆。如果表盘区域为表盘资源内切圆的同心圆的话,请相应调整digitRadiusRatio和digitSizeRatio参数。 | -| hourHand | <string> | - | 是 | 日间时段的时针资源路径。
- 时针图片的高度须与表盘资源高度相同。
- 时针图片的宽高比建议在0.062。
- 时针图片上指针的旋转中心须处于时针图片的中心(对角线交点)。
- 夜间时段的时针资源请调整hourHandNight参数。 | -| minuteHand | <string> | - | 是 | 日间时段的分针资源路径。
- 分针图片的高度须与表盘资源高度相同。
- 分针图片的宽高比建议在0.062。
- 分针图片上指针的旋转中心须处于分针图片的中心(对角线交点)。
- 夜间时段的分针资源请调整minuteHandNight参数。 | -| secondHand | <string> | - | 是 | 日间时段的秒针资源路径。
-  秒针图片的高度须与表盘资源高度相同。
- 秒针图片的宽高比建议在0.062。
- 秒针图片上指针的旋转中心须处于秒针图片的中心(对角线交点)。
- 夜间时段的秒针资源请调整secondHandNightSrc参数。 | -| digitColor | <color> | \#FF000000 | 否 | 日间时段(6:00-18:00)的表盘文本颜色。 | -| digitColorNight | <color> | 与digitColor保持一致 | 否 | 夜间时段(18:00-次日6:00)的表盘文本颜色。
- 该属性未设置时,取digitColor的值作为digitColorNight的值(digitColor被设置时,取digitColor被设置的值)。
- 请注意缺省状态下使用digitClor的值作为digitColorNight的值时,夜间时段表盘文本颜色与夜间时段表盘背景(faceNight)的颜色配合问题。 | -| faceNight | <string> | - | 否 | 夜间时段的表盘资源路径。
未设置时使用face的资源路径作为夜间时段的表盘资源路径。 | -| hourHandNight | <string> | - | 否 | 夜间时段的时针资源路径。
未设置时使用hourHand的资源路径作为夜间时段的时针资源路径。 | -| minuteHandNight | <string> | - | 否 | 夜间时段的分针资源路径。
设置时使用minuteHand的资源路径作为夜间时段的分针资源路径。 | -| secondHandNight | <string> | - | 否 | 夜间时段的秒针资源路径。
未设置时使用secondHand的资源路径作为夜间时段的秒针资源路径。 | -| digitRadiusRatio | number | 0.7 | 否 | 表盘数字中心到表盘中心距离 / 表盘资源边长的一半。
- 有效范围为(0, 1]。
- 该参数用于计算表盘数字在表盘上距离圆心的位置。
- 该参数可以保证同一套表盘资源在不同组件尺寸下都有同样的相对位置,而不需要针对每个组件尺寸都重新调整数字位置。
- 该参数设为1时数字会有部分区域超出表盘,建议结合表盘区域合理设置digitRadiusRatio。 | -| digitSizeRatio | number | 0.08 | 否 | 表盘数字尺寸/表盘资源边长。
- 有效范围为(0, 0.142]。
- 该参数用于计算表盘数字相对表盘尺寸的大小。
- 该参数可以保证同一套表盘资源在不同组件尺寸下都有同样的相对大小,而不需要针对每个组件尺寸都重新调整字号。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ---------------- | -------------- | --------------- | ---- | ---------------------------------------- | +| face | <string> | - | 是 | 日间时段的表盘资源路径。
表盘资源须为包含时钟刻度的正方形图片,表盘区域(圆形)为该图片的内切圆或内切圆的同心圆。如果表盘区域为表盘资源内切圆的同心圆的话,请相应调整digitRadiusRatio和digitSizeRatio参数。 | +| hourHand | <string> | - | 是 | 日间时段的时针资源路径。
- 时针图片的高度须与表盘资源高度相同。
- 时针图片的宽高比建议在0.062。
- 时针图片上指针的旋转中心须处于时针图片的中心(对角线交点)。
- 夜间时段的时针资源请调整hourHandNight参数。 | +| minuteHand | <string> | - | 是 | 日间时段的分针资源路径。
- 分针图片的高度须与表盘资源高度相同。
- 分针图片的宽高比建议在0.062。
- 分针图片上指针的旋转中心须处于分针图片的中心(对角线交点)。
- 夜间时段的分针资源请调整minuteHandNight参数。 | +| secondHand | <string> | - | 是 | 日间时段的秒针资源路径。
-  秒针图片的高度须与表盘资源高度相同。
- 秒针图片的宽高比建议在0.062。
- 秒针图片上指针的旋转中心须处于秒针图片的中心(对角线交点)。
- 夜间时段的秒针资源请调整secondHandNightSrc参数。 | +| digitColor | <color> | \#FF000000 | 否 | 日间时段(6:00-18:00)的表盘文本颜色。 | +| digitColorNight | <color> | 与digitColor保持一致 | 否 | 夜间时段(18:00-次日6:00)的表盘文本颜色。
- 该属性未设置时,取digitColor的值作为digitColorNight的值(digitColor被设置时,取digitColor被设置的值)。
- 请注意缺省状态下使用digitClor的值作为digitColorNight的值时,夜间时段表盘文本颜色与夜间时段表盘背景(faceNight)的颜色配合问题。 | +| faceNight | <string> | - | 否 | 夜间时段的表盘资源路径。
未设置时使用face的资源路径作为夜间时段的表盘资源路径。 | +| hourHandNight | <string> | - | 否 | 夜间时段的时针资源路径。
未设置时使用hourHand的资源路径作为夜间时段的时针资源路径。 | +| minuteHandNight | <string> | - | 否 | 夜间时段的分针资源路径。
设置时使用minuteHand的资源路径作为夜间时段的分针资源路径。 | +| secondHandNight | <string> | - | 否 | 夜间时段的秒针资源路径。
未设置时使用secondHand的资源路径作为夜间时段的秒针资源路径。 | +| digitRadiusRatio | number | 0.7 | 否 | 表盘数字中心到表盘中心距离 / 表盘资源边长的一半。
- 有效范围为(0, 1]。
- 该参数用于计算表盘数字在表盘上距离圆心的位置。
- 该参数可以保证同一套表盘资源在不同组件尺寸下都有同样的相对位置,而不需要针对每个组件尺寸都重新调整数字位置。
- 该参数设为1时数字会有部分区域超出表盘,建议结合表盘区域合理设置digitRadiusRatio。 | +| digitSizeRatio | number | 0.08 | 否 | 表盘数字尺寸/表盘资源边长。
- 有效范围为(0, 0.142]。
- 该参数用于计算表盘数字相对表盘尺寸的大小。
- 该参数可以保证同一套表盘资源在不同组件尺寸下都有同样的相对大小,而不需要针对每个组件尺寸都重新调整字号。 | ![clock](figures/clock.png) @@ -46,19 +46,19 @@ 除支持[通用样式](js-service-widget-common-styles.md)之外,还支持如下样式: -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| font-family | <string> | sans-serif | 否 | 表盘数字的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过2.1.6 自定义字体样式指定的字体,会被选中作为文本的字体。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ----------- | -------------- | ---------- | ---- | ---------------------------------------- | +| font-family | <string> | sans-serif | 否 | 表盘数字的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过2.1.6 自定义字体样式指定的字体,会被选中作为文本的字体。 | > **说明:** > -> clock组件会保持显示区域的宽高比为1,最终正方形显示区域的边长为min(width, height),在width \* height的组件区域中居中显示。 +> clock组件会保持显示区域的宽高比为1,最终正方形显示区域的边长为min(width, height),在width \* height的组件区域中居中显示。 ## 事件 -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | +| 名称 | 参数 | 描述 | +| ---- | ------------------- | --------- | | hour | {hour: number} | 每个整点触发该事件 | @@ -101,7 +101,6 @@ ```json -// xxx.json { "data": { "clockconfig": { diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-input.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-input.md index 7c007fc11083395de42273d3c26fd7f3b9b7be0d..b00211058a23dbeeb9068eac9ce5ad81fd1864aa 100644 --- a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-input.md +++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-input.md @@ -11,12 +11,12 @@ 除支持[通用属性](js-service-widget-common-attributes.md)外,还支持如下属性: -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| type | string | radio | 是 | input组件类型,当前仅支持radio类型:
- "radio":定义单选按钮,允许在多个拥有相同name值的选项中选中其中一个; | -| checked | boolean | false | 否 | 当前组件是否选中。 | -| name | string | - | 否 | input组件的名称。 | -| value | string | - | 否 | input组件的value值,类型为radio时必填且相同name值的选项该值唯一。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------- | ------- | ----- | ---- | ---------------------------------------- | +| type | string | radio | 是 | input组件类型,当前仅支持radio类型:
- "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":{ diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md index 09c9dd4160f9ac5dedf8849f71e68535f9b5db0c..66c7d73703a3ed5afdb4cffe5ab27bd49e8db131 100644 --- a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md +++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md @@ -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 <side-or-corner>  <side-or-corner> = [left \| right] \|\| [top \| bottom] | to bottom (由上到下渐变) | 否 | 指定过渡方向,如:to left (从右向左渐变)  ,或者to bottom right (从左上角到右下角)。 | - | angle | <deg> | 180deg | 否 | 指定过渡方向,以元素几何中心为坐标原点,水平方向为X轴,angle指定了渐变线与Y轴的夹角(顺时针方向)。 | - | color | <color> [<length>\|<percentage>] | - | 是 | 定义使用渐变样式区域内颜色的渐变效果。 | + | 名称 | 类型 | 默认值 | 必填 | 描述 | + | --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- | + | direction | to <side-or-corner>  <side-or-corner> = [left \| right] \|\| [top \| bottom] | to bottom (由上到下渐变) | 否 | 指定过渡方向,如:to left (从右向左渐变)  ,或者to bottom right (从左上角到右下角)。 | + | angle | <deg> | 180deg | 否 | 指定过渡方向,以元素几何中心为坐标原点,水平方向为X轴,angle指定了渐变线与Y轴的夹角(顺时针方向)。 | + | color | <color> [<length>\|<percentage>] | - | 是 | 定义使用渐变样式区域内颜色的渐变效果。 | - 示例 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) diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-config-file.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-config-file.md index cb7360a3d1ae0f9f227f35d869ebbeba1e7cc66e..82867f64408b16b9a82a1d43a786ace97e4f12fa 100644 --- a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-config-file.md +++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-config-file.md @@ -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物理像素。 > **说明:** > - 组件样式中<length>类型的默认值,按屏幕密度进行计算和绘制,如:在屏幕密度为2(以160dpi为基准)的设备上,默认<length>为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用于定义与显示窗口相关的配置。对于卡片尺寸适配问 } ... } - ``` ## 示例 diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-events.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-events.md index c1b03b177da3a3ff2c88f4e84a90f982cab2f9f2..0b6f00fc67ea6ba7f1d92774ac0594cc2c329804 100644 --- a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-events.md +++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-events.md @@ -6,7 +6,7 @@ > **说明:** > -> 事件名不支持大写字母。 +> 事件名不支持大写字母。 ## 子组件comp示例: @@ -43,7 +43,6 @@ ```json -// comp.json { "data": { }, @@ -84,7 +83,6 @@ ```json -// xxx.json { "data": { }, diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-props.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-props.md index 347e6479bfc7604779cc803544faa58e5ac9dc65..9d3a1fbf02c4de67afe52a6172f7cf265c30e3f0 100644 --- a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-props.md +++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-props.md @@ -35,7 +35,6 @@ ```json -// comp.json { "data": { "progress": { diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-syntax-hml.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-syntax-hml.md index 3270a6fd6a9ed892a310406e55067adc81639505..e98100c1fd0131d9c6627c15c600e819d9fa525d 100644 --- a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-syntax-hml.md +++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-syntax-hml.md @@ -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,16 +69,16 @@ HML(OpenHarmony Markup Language)是一套类HTML的标记语言,通过组 卡片仅支持click通用事件,事件的定义只能是直接命令式,事件定义必须包含action字段,用以说明事件类型。卡片支持两种事件类型:跳转事件(router)和消息事件(message)。跳转事件可以跳转到卡片提供方的OpenHarmony应用,消息事件可以将开发者自定义信息传递给卡片提供方。事件参数支持变量,变量以"{{}}"修饰。跳转事件中若定义了params字段,则在被拉起应用的onStart的intent中,可用"params"作为key将跳转事件定义的params字段的值取到。 - 跳转事件格式 - + 通过定义ability名称和携带的参数字段params直接跳转,可用"params"作为key提取到跳转事件定义的params字段值。 - - | 选择器 | 样例 | 默认值 | 样例描述 | - | -------- | -------- | -------- | -------- | - | action | string | "router" | 事件类型。
- "router":用于应用跳转。
- "message":自定义点击事件。 | - | abilityName | string | - | 跳转ability名。 | - | params | Object | - | 跳转应用携带的额外参数。 | - - + + | 选择器 | 样例 | 默认值 | 样例描述 | + | ----------- | ------ | -------- | ---------------------------------------- | + | action | string | "router" | 事件类型。
- "router":用于应用跳转。
- "message":自定义点击事件。 | + | abilityName | string | - | 跳转ability名。 | + | params | Object | - | 跳转应用携带的额外参数。 | + + ```json // xxx.json { @@ -95,28 +94,28 @@ HML(OpenHarmony Markup Language)是一套类HTML的标记语言,通过组 } } ``` - + 也可以使用want格式绑定参数跳转到目标应用,want定义了ability名称、包名、携带的参数字段等。 - - | 选择器 | 类型 | 默认值 | 样例描述 | - | ------ | ------ | -------- | ------------------------------------------------------------ | + + | 选择器 | 类型 | 默认值 | 样例描述 | + | ------ | ------ | -------- | ---------------------------------------- | | action | string | "router" | 事件类型。
- "router":用于应用跳转。
- "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\ | - | 类别,用于指定Intent的操作类别。 | - | parameters | {[key: string]: any} | - | 表示WantParams描述。 | - - + | entities | Array\ | - | 类别,用于指定Intent的操作类别。 | + | parameters | {[key: string]: any} | - | 表示WantParams描述。 | + + ```json // xxx.json { @@ -141,17 +140,17 @@ 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 { @@ -165,7 +164,7 @@ HML(OpenHarmony Markup Language)是一套类HTML的标记语言,通过组 ``` - 绑定路由事件和消息事件 - + ```html
@@ -221,15 +220,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类型混合写在一个数组中。 ## 条件渲染 diff --git a/zh-cn/application-dev/ui/js-framework-syntax-css.md b/zh-cn/application-dev/ui/js-framework-syntax-css.md index 73d8b70981cf92b74fde766fa071cfdad635cafb..9da60fc817b3e830b6159545cfde4b80b6362b4a 100644 --- a/zh-cn/application-dev/ui/js-framework-syntax-css.md +++ b/zh-cn/application-dev/ui/js-framework-syntax-css.md @@ -57,12 +57,12 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认 css选择器用于选择需要添加样式的元素,支持的选择器如下表所示: -| 选择器 | 样例 | 样例描述 | -| -------- | -------- | -------- | -| .class | .container | 用于选择class="container"的组件。 | -| \#id | \#titleId | 用于选择id="titleId"的组件。 | -| tag | text | 用于选择text组件。 | -| , | .title, .content | 用于选择class="title"和class="content"的组件。 | +| 选择器 | 样例 | 样例描述 | +| ------------------------- | ------------------------------------- | ---------------------------------------- | +| .class | .container | 用于选择class="container"的组件。 | +| \#id | \#titleId | 用于选择id="titleId"的组件。 | +| tag | text | 用于选择text组件。 | +| , | .title, .content | 用于选择class="title"和class="content"的组件。 | | \#id .class tag | \#containerId .content text | 非严格父子关系的后代选择器,选择具有id="containerId"作为祖先元素,class="content"作为次级祖先元素的所有text组件。如需使用严格的父子关系,可以使用“>”代替空格,如:\#containerId>.content。 | 示例: @@ -79,7 +79,7 @@ css选择器用于选择需要添加样式的元素,支持的选择器如下 ``` /* 页面样式xxx.css */ -/\* 对所有div组件设置样式 \*/ +/* 对所有div组件设置样式 */ div { flex-direction: column; } @@ -95,13 +95,13 @@ div { .title, .content { padding: 5px; } -/\* 对class="container"的组件下的所有text设置样式 \*/ +/* 对class="container"的组件下的所有text设置样式 */ .container text { - color: \#007dff; + color: #007dff; } -/\* 对class="container"的组件下的直接后代text设置样式 \*/ +/* 对class="container"的组件下的直接后代text设置样式 */ .container > text { - color: \#fa2a2d; + color: #fa2a2d; } ``` @@ -124,12 +124,12 @@ css伪类是选择器中的关键字,用于指定要选择元素的特殊状 除了单个伪类之外,还支持伪类的组合,例如,:focus:checked状态可以用来设置元素的focus属性和checked属性同时为true时的样式。支持的单个伪类如下表所示,按照优先级降序排列: -| 名称 | 支持组件 | 描述 | -| -------- | -------- | -------- | -| :disabled | 支持disabled属性的组件 | 表示disabled属性变为true时的元素(不支持动画样式的设置)。 | -| :active | 支持click事件的组件
| 表示被用户激活的元素,如:被用户按下的按钮、被激活的tab-bar页签(不支持动画样式的设置)。 | -| :waiting | button | 表示waiting属性为true的元素(不支持动画样式的设置)。 | -| :checked | input[type="checkbox"、type="radio"]、 switch | 表示checked属性为true的元素(不支持动画样式的设置)。 | +| 名称 | 支持组件 | 描述 | +| --------- | ---------------------------------------- | ---------------------------------------- | +| :disabled | 支持disabled属性的组件 | 表示disabled属性变为true时的元素(不支持动画样式的设置)。 | +| :active | 支持click事件的组件
| 表示被用户激活的元素,如:被用户按下的按钮、被激活的tab-bar页签(不支持动画样式的设置)。 | +| :waiting | button | 表示waiting属性为true的元素(不支持动画样式的设置)。 | +| :checked | input[type="checkbox"、type="radio"]、 switch | 表示checked属性为true的元素(不支持动画样式的设置)。 | 伪类示例如下,设置按钮的:active伪类可以控制被用户按下时的样式: diff --git a/zh-cn/application-dev/ui/ts-resource-access.md b/zh-cn/application-dev/ui/ts-resource-access.md index b71591bbdca383c1302b4e10bb3f216e7abe1851..a804d024efad2b63cf011fe54719c50583a8fd7a 100644 --- a/zh-cn/application-dev/ui/ts-resource-access.md +++ b/zh-cn/application-dev/ui/ts-resource-access.md @@ -8,7 +8,10 @@ 引用rawfile下资源时使用```"$rawfile('filename')"```的形式,当前$rawfile仅支持Image控件引用图片资源,filename需要表示为rawfile目录下的文件相对路径,文件名需要包含后缀,路径开头不可以以"/"开头。 > **说明:** +> > 资源描述符不能拼接使用,仅支持普通字符串如`'app.type.name'`。 +> +> `$r`返回值为Resource对象,可通过[getString](../../reference/apis/js-apis-resource-manager.md#getstring) 方法获取对应的字符串。 在xxx.ets文件中,可以使用在resources目录中定义的资源。 diff --git a/zh-cn/application-dev/ui/ui-js-components-switch.md b/zh-cn/application-dev/ui/ui-js-components-switch.md index aa7e7e71cb4f1e7d7e9a1b850fa5cff7c533bc46..db7de720074c4d18f4277ef7619014dcc3b5e157 100644 --- a/zh-cn/application-dev/ui/ui-js-components-switch.md +++ b/zh-cn/application-dev/ui/ui-js-components-switch.md @@ -52,9 +52,7 @@ Switch为开关选择器,切换开启或关闭状态。具体用法请参考[S background-color: #F1F3F5; } switch{ - // 选中时的字体颜色 texton-color: #002aff; - // 未选中时的字体颜色 textoff-color: silver; text-padding: 20px; font-size: 50px; diff --git a/zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md b/zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md index 8f704f9f69a725690f39e855e38a51477c6cfe1e..a162017315d13a063d7d5e7cb5fa0f7369af8d5f 100644 --- a/zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md +++ b/zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md @@ -75,7 +75,7 @@ base目录与限定词目录下面可以创建资源组目录(包括element、 | ------- | ---------------------------------------- | ---------------------------------------- | | element | 表示元素资源,以下每一类数据都采用相应的JSON文件来表征。
- boolean,布尔型
- color,颜色
- float,浮点型
- intarray,整型数组
- integer,整型
- pattern,样式
- plural,复数形式
- strarray,字符串数组
- string,字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。
- boolean.json
- color.json
- float.json
- intarray.json
- integer.json
- pattern.json
- plural.json
- strarray.json
- string.json | | media | 表示媒体资源,包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义,例如:icon.png。 | -| profile | 表示其他类型文件,以原始文件形式保存。 | 文件名可自定义。 | +| rawfile | 表示其他类型文件,在应用构建为hap包后,以原始文件形式保存,不会被集成到resources.index文件中。 | 文件名可自定义。 | ### 媒体资源类型说明