Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
“18183a491ab7017c4a8c7c344d80bdf8f526cab8”上不存在“test/com/sun/git@gitcode.net:openanolis/dragonwell8_jdk.git”
提交 000558b9 编写于 作者: H HelloCrease
浏览文件
操作

update docs 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 b0a21408
隐藏空白更改
内联 并排
Showing with 658 addition and 680 deletion
zh-cn/application-dev/reference/apis/js-apis-router.md
浏览文件 @ 000558b9
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
> **说明** > **说明**
> >
> - 本模块首批接口从API version 8开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 > - 本模块首批接口从API version 8开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
> >
> - 页面路由需要在页面渲染完成之后才能调用，在onInit和onReady生命周期中页面还处于渲染阶段，禁止调用页面路由方法。 > - 页面路由需要在页面渲染完成之后才能调用，在onInit和onReady生命周期中页面还处于渲染阶段，禁止调用页面路由方法。
## 导入模块 ## 导入模块
...@@ -23,9 +23,9 @@ push(options: RouterOptions): void ...@@ -23,9 +23,9 @@ push(options: RouterOptions): void
**系统能力：** SystemCapability.ArkUI.ArkUI.Full **系统能力：** SystemCapability.ArkUI.ArkUI.Full
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ------- | ------------------------------- | ---- | ------------------ | | ------- | ------------------------------- | ---- | --------- |
| options | [RouterOptions](#routeroptions) | 是 | 跳转页面描述信息。 | | options | [RouterOptions](#routeroptions) | 是 | 跳转页面描述信息。 |
**示例：** **示例：**
...@@ -49,10 +49,10 @@ push(options: RouterOptions, mode: RouterMode): void ...@@ -49,10 +49,10 @@ push(options: RouterOptions, mode: RouterMode): void
**系统能力：** SystemCapability.ArkUI.ArkUI.Full **系统能力：** SystemCapability.ArkUI.ArkUI.Full
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ----------------- | ------------------------------- | ---- | -------------------- | | ------- | ------------------------------- | ---- | ---------- |
| options | [RouterOptions](#routeroptions) | 是 | 跳转页面描述信息。 | | options | [RouterOptions](#routeroptions) | 是 | 跳转页面描述信息。 |
| mode<sup>9+</sup> | [RouterMode](#routermode9) | 是 | 跳转页面使用的模式。 | | mode | [RouterMode](#routermode9) | 是 | 跳转页面使用的模式。 |
**示例：** **示例：**
...@@ -77,9 +77,9 @@ replace(options: RouterOptions): void ...@@ -77,9 +77,9 @@ replace(options: RouterOptions): void
**系统能力：** SystemCapability.ArkUI.ArkUI.Full **系统能力：** SystemCapability.ArkUI.ArkUI.Full
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ------- | ------------------------------- | ---- | ------------------ | | ------- | ------------------------------- | ---- | --------- |
| options | [RouterOptions](#routeroptions) | 是 | 替换页面描述信息。 | | options | [RouterOptions](#routeroptions) | 是 | 替换页面描述信息。 |
**示例：** **示例：**
...@@ -101,10 +101,10 @@ replace(options: RouterOptions, mode: RouterMode): void ...@@ -101,10 +101,10 @@ replace(options: RouterOptions, mode: RouterMode): void
**系统能力：** SystemCapability.ArkUI.ArkUI.Full **系统能力：** SystemCapability.ArkUI.ArkUI.Full
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ----------------- | ------------------------------- | ---- | -------------------- | | ------- | ------------------------------- | ---- | ---------- |
| options | [RouterOptions](#routeroptions) | 是 | 替换页面描述信息。 | | options | [RouterOptions](#routeroptions) | 是 | 替换页面描述信息。 |
| mode<sup>9+</sup> | [RouterMode](#routermode9) | 是 | 跳转页面使用的模式。 | | mode | [RouterMode](#routermode9) | 是 | 跳转页面使用的模式。 |
**示例：** **示例：**
...@@ -126,9 +126,9 @@ back(options?: RouterOptions ): void ...@@ -126,9 +126,9 @@ back(options?: RouterOptions ): void
**系统能力：** SystemCapability.ArkUI.ArkUI.Full **系统能力：** SystemCapability.ArkUI.ArkUI.Full
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ------- | ------------------------------- | ---- | ------------------------------------------------------------ | | ------- | ------------------------------- | ---- | ---------------------------------------- |
| options | [RouterOptions](#routeroptions) | 否 | 返回页面描述信息，其中参数url指路由跳转时会返回到指定url的界面，如果页面栈上没有url页面，则不响应该情况。如果url未设置，则返回上一页。 | | options | [RouterOptions](#routeroptions) | 否 | 返回页面描述信息，其中参数url指路由跳转时会返回到指定url的界面，如果页面栈上没有url页面，则不响应该情况。如果url未设置，则返回上一页。 |
**示例：** **示例：**
...@@ -159,8 +159,8 @@ getLength(): string ...@@ -159,8 +159,8 @@ getLength(): string
**系统能力：** SystemCapability.ArkUI.ArkUI.Full **系统能力：** SystemCapability.ArkUI.ArkUI.Full
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | ---------------------------------- | | ------ | ------------------ |
| string | 页面数量，页面栈支持最大数值是32。 | | string | 页面数量，页面栈支持最大数值是32。 |
**示例：** **示例：**
...@@ -179,8 +179,8 @@ getState(): RouterState ...@@ -179,8 +179,8 @@ getState(): RouterState
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| --------------------------- | -------------- | | --------------------------- | ------- |
| [RouterState](#routerstate) | 页面状态信息。 | | [RouterState](#routerstate) | 页面状态信息。 |
**示例：** **示例：**
...@@ -197,11 +197,11 @@ console.log('current path = ' + page.path); ...@@ -197,11 +197,11 @@ console.log('current path = ' + page.path);
**系统能力：** SystemCapability.ArkUI.ArkUI.Full。 **系统能力：** SystemCapability.ArkUI.ArkUI.Full。
| 名称 | 类型 | 说明 | | 名称 | 类型 | 说明 |
| ----- | ------ | ------------------------------------------------------------ | | ----- | ------ | ---------------------------------- |
| index | number | 表示当前页面在页面栈中的索引。从栈底到栈顶，index从1开始递增。 | | index | number | 表示当前页面在页面栈中的索引。从栈底到栈顶，index从1开始递增。 |
| name | string | 表示当前页面的名称，即对应文件名。 | | name | string | 表示当前页面的名称，即对应文件名。 |
| path | string | 表示当前页面的路径。 | | path | string | 表示当前页面的路径。 |
## router.enableAlertBeforeBackPage ## router.enableAlertBeforeBackPage
...@@ -212,9 +212,9 @@ enableAlertBeforeBackPage(options: EnableAlertOptions): void ...@@ -212,9 +212,9 @@ enableAlertBeforeBackPage(options: EnableAlertOptions): void
**系统能力：** SystemCapability.ArkUI.ArkUI.Full **系统能力：** SystemCapability.ArkUI.ArkUI.Full
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ------- | ----------------------------------------- | ---- | ------------------ | | ------- | ---------------------------------------- | ---- | --------- |
| options | [EnableAlertOptions](#enablealertoptions) | 是 | 文本弹窗信息描述。 | | options | [EnableAlertOptions](#enablealertoptions) | 是 | 文本弹窗信息描述。 |
**示例：** **示例：**
...@@ -229,9 +229,9 @@ enableAlertBeforeBackPage(options: EnableAlertOptions): void ...@@ -229,9 +229,9 @@ enableAlertBeforeBackPage(options: EnableAlertOptions): void
**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。 **系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
| 名称 | 类型 | 必填 | 说明 | | 名称 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- | ---------------- | | ------- | ------ | ---- | -------- |
| message | string | 是 | 询问对话框内容。 | | message | string | 是 | 询问对话框内容。 |
## router.disableAlertBeforeBackPage ## router.disableAlertBeforeBackPage
...@@ -256,8 +256,8 @@ getParams(): Object ...@@ -256,8 +256,8 @@ getParams(): Object
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | ---------------------------------- | | ------ | ----------------- |
| Object | 发起跳转的页面往当前页传入的参数。 | | Object | 发起跳转的页面往当前页传入的参数。 |
**示例：** **示例：**
...@@ -272,10 +272,10 @@ router.getParams(); ...@@ -272,10 +272,10 @@ router.getParams();
**系统能力：** SystemCapability.ArkUI.ArkUI.Lite。 **系统能力：** SystemCapability.ArkUI.ArkUI.Lite。
| 名称 | 类型 | 必填 | 说明 | | 名称 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | ------------------------------------------------------------ | | ------ | ------ | ---- | ---------------------------------------- |
| url | string | 是 | 表示目标页面的uri，可以用以下两种格式：<br/>-&nbsp;页面绝对路径，由配置文件中pages列表提供，例如：<br/>&nbsp;&nbsp;-&nbsp;pages/index/index<br/>&nbsp;&nbsp;-&nbsp;pages/detail/detail<br/>-&nbsp;特殊值，如果uri的值是"/"，则跳转到首页。 | | url | string | 是 | 表示目标页面的uri，可以用以下两种格式：<br/>-&nbsp;页面绝对路径，由配置文件中pages列表提供，例如：<br/>&nbsp;&nbsp;-&nbsp;pages/index/index<br/>&nbsp;&nbsp;-&nbsp;pages/detail/detail<br/>-&nbsp;特殊值，如果uri的值是"/"，则跳转到首页。 |
| params | Object | 否 | 跳转时要同时传递到目标页面的数据，跳转到目标页面后，参数可以在页面中直接使用，如this.data1(data1为跳转时params参数中的key值)。如果目标页面中已有该字段，则其值会被传入的字段值覆盖。 | | params | Object | 否 | 跳转时要同时传递到目标页面的数据，跳转到目标页面后，参数可以在页面中直接使用，如this.data1(data1为跳转时params参数中的key值)。如果目标页面中已有该字段，则其值会被传入的字段值覆盖。 |
> **说明：** > **说明：**
...@@ -287,9 +287,9 @@ router.getParams(); ...@@ -287,9 +287,9 @@ router.getParams();
**系统能力：** SystemCapability.ArkUI.ArkUI.Full。 **系统能力：** SystemCapability.ArkUI.ArkUI.Full。
| 名称 | 描述 | | 名称 | 描述 |
| -------- | ------------------------------------------------------------ | | -------- | ---------------------------------------- |
| Standard | 标准模式。 | | Standard | 标准模式。 |
| Single | 单实例模式。<br/>如果目标页面的url在页面栈中已经存在同url页面，离栈顶最近的页面会被移动到栈顶，移动后的页面为新建页。<br/>如目标页面的url在页面栈中不存在同url页面，按标准模式跳转。 | | Single | 单实例模式。<br/>如果目标页面的url在页面栈中已经存在同url页面，离栈顶最近的页面会被移动到栈顶，移动后的页面为新建页。<br/>如目标页面的url在页面栈中不存在同url页面，按标准模式跳转。 |
## 完整示例 ## 完整示例
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ 000558b9
# CanvasGradient对象 # CanvasGradient对象
> **说明：** > **说明：**
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
渐变对象。 渐变对象。
...@@ -14,20 +14,20 @@ addColorStop(offset: number, color: string): void ...@@ -14,20 +14,20 @@ addColorStop(offset: number, color: string): void
设置渐变断点值，包括偏移和颜色。 设置渐变断点值，包括偏移和颜色。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | --------- | ---------------------------- |
| offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 | | offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
| color | string | 是 | '#ffffff' | 设置渐变的颜色。 | | color | string | 是 | '#ffffff' | 设置渐变的颜色。 |
- 示例 - 示例
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct Page45 { struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-appendix-types.md
浏览文件 @ 000558b9
...@@ -6,166 +6,166 @@ ...@@ -6,166 +6,166 @@
## 长度类型 ## 长度类型
| 名称 | 类型定义 | 描述 | | 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- | | ---------- | -------------------------- | ---------------------------------------- |
| length | string&nbsp;\|&nbsp;number | 用于描述尺寸单位，输入为number类型时，使用px单位。输入为string类型时，需要显式指定像素单位，当前支持的像素单位有：<br/>-&nbsp;px：逻辑尺寸单位。<br/>-&nbsp;fp：字体尺寸单位，随系统字体大小设置发生变化，仅支持文本类组件设置相应的字体大小。 | | length | string&nbsp;\|&nbsp;number | 用于描述尺寸单位，输入为number类型时，使用px单位。输入为string类型时，需要显式指定像素单位，当前支持的像素单位有：<br/>-&nbsp;px：逻辑尺寸单位。<br/>-&nbsp;fp：字体尺寸单位，随系统字体大小设置发生变化，仅支持文本类组件设置相应的字体大小。 |
| percentage | string | 百分比尺寸单位，如“50%”。 | | 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脚本中不支持颜色枚举格式。 | | 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** 当前支持的颜色枚举 **表1** 当前支持的颜色枚举
| 枚举名称 | 对应颜色 | 颜色 | | 枚举名称 | 对应颜色 | 颜色 |
| -------- | -------- | -------- | | -------------------- | -------- | ---------------------------------------- |
| aliceblue | \#f0f8ff | ![aliceblue](figures/aliceblue.png) | | aliceblue | \#f0f8ff | ![aliceblue](figures/aliceblue.png) |
| antiquewhite | \#faebd7 | ![antiquewhite](figures/antiquewhite.png) | | antiquewhite | \#faebd7 | ![antiquewhite](figures/antiquewhite.png) |
| aqua | \#00ffff | ![aqua](figures/aqua.png) | | aqua | \#00ffff | ![aqua](figures/aqua.png) |
| aquamarine | \#7fffd4 | ![aquamarine](figures/aquamarine.png) | | aquamarine | \#7fffd4 | ![aquamarine](figures/aquamarine.png) |
| azure | \#f0ffff | ![azure](figures/azure.png) | | azure | \#f0ffff | ![azure](figures/azure.png) |
| beige | \#f5f5dc | ![beige](figures/beige.png) | | beige | \#f5f5dc | ![beige](figures/beige.png) |
| bisque | \#ffe4c4 | ![bisque](figures/bisque.png) | | bisque | \#ffe4c4 | ![bisque](figures/bisque.png) |
| black | \#000000 | ![#000000](figures/#000000.png) | | black | \#000000 | ![000000](figures/000000.png) |
| blanchedalmond | \#ffebcd | ![blanchedalmond](figures/blanchedalmond.png) | | blanchedalmond | \#ffebcd | ![blanchedalmond](figures/blanchedalmond.png) |
| blue | \#0000ff | ![blue](figures/blue.png) | | blue | \#0000ff | ![blue](figures/blue.png) |
| blueviolet | \#8a2be2 | ![blueviolet](figures/blueviolet.png) | | blueviolet | \#8a2be2 | ![blueviolet](figures/blueviolet.png) |
| brown | \#a52a2a | ![brown](figures/brown.png) | | brown | \#a52a2a | ![brown](figures/brown.png) |
| burlywood | \#deB887 | ![burlywood](figures/burlywood.png) | | burlywood | \#deB887 | ![burlywood](figures/burlywood.png) |
| cadetblue | \#5f9ea0 | ![cadetblue](figures/cadetblue.png) | | cadetblue | \#5f9ea0 | ![cadetblue](figures/cadetblue.png) |
| chartreuse | \#7fff00 | ![chartreuse](figures/chartreuse.png) | | chartreuse | \#7fff00 | ![chartreuse](figures/chartreuse.png) |
| chocolate | \#d2691e | ![chocolate](figures/chocolate.png) | | chocolate | \#d2691e | ![chocolate](figures/chocolate.png) |
| coral | \#ff7f50 | ![coral](figures/coral.png) | | coral | \#ff7f50 | ![coral](figures/coral.png) |
| cornflowerblue | \#6495ed | ![cornflowerblue](figures/cornflowerblue.png) | | cornflowerblue | \#6495ed | ![cornflowerblue](figures/cornflowerblue.png) |
| cornsilk | \#fff8dc | ![cornsilk](figures/cornsilk.png) | | cornsilk | \#fff8dc | ![cornsilk](figures/cornsilk.png) |
| crimson | \#dc143c | ![crimson](figures/crimson.png) | | crimson | \#dc143c | ![crimson](figures/crimson.png) |
| cyan | \#00ffff | ![cyan](figures/cyan.png) | | cyan | \#00ffff | ![cyan](figures/cyan.png) |
| darkblue | \#00008b | ![darkblue](figures/darkblue.png) | | darkblue | \#00008b | ![darkblue](figures/darkblue.png) |
| darkcyan | \#008b8b | ![darkcyan](figures/darkcyan.png) | | darkcyan | \#008b8b | ![darkcyan](figures/darkcyan.png) |
| darkgoldenrod | \#b8860b | ![darkgoldenrod](figures/darkgoldenrod.png) | | darkgoldenrod | \#b8860b | ![darkgoldenrod](figures/darkgoldenrod.png) |
| darkgray | \#a9a9a9 | ![darkgray](figures/darkgray.png) | | darkgray | \#a9a9a9 | ![darkgray](figures/darkgray.png) |
| darkgreen | \#006400 | ![darkgreen](figures/darkgreen.png) | | darkgreen | \#006400 | ![darkgreen](figures/darkgreen.png) |
| darkgrey | \#a9a9a9 | ![darkgrey](figures/darkgrey.png) | | darkgrey | \#a9a9a9 | ![darkgrey](figures/darkgrey.png) |
| darkkhaki | \#bdb76b | ![darkkhaki](figures/darkkhaki.png) | | darkkhaki | \#bdb76b | ![darkkhaki](figures/darkkhaki.png) |
| darkmagenta | \#8b008b | ![darkmagenta](figures/darkmagenta.png) | | darkmagenta | \#8b008b | ![darkmagenta](figures/darkmagenta.png) |
| darkolivegreen | \#556b2f | ![darkolivegreen](figures/darkolivegreen.png) | | darkolivegreen | \#556b2f | ![darkolivegreen](figures/darkolivegreen.png) |
| darkorange | \#ff8c00 | ![darkorange](figures/darkorange.png) | | darkorange | \#ff8c00 | ![darkorange](figures/darkorange.png) |
| darkorchid | \#9932cc | ![darkorchid](figures/darkorchid.png) | | darkorchid | \#9932cc | ![darkorchid](figures/darkorchid.png) |
| darkred | \#8b0000 | ![darkred](figures/darkred.png) | | darkred | \#8b0000 | ![darkred](figures/darkred.png) |
| darksalmon | \#e9967a | ![darksalmon](figures/darksalmon.png) | | darksalmon | \#e9967a | ![darksalmon](figures/darksalmon.png) |
| darkseagreen | \#8fbc8f | ![darkseagreen](figures/darkseagreen.png) | | darkseagreen | \#8fbc8f | ![darkseagreen](figures/darkseagreen.png) |
| darkslateblue | \#483d8b | ![darkslateblue](figures/darkslateblue.png) | | darkslateblue | \#483d8b | ![darkslateblue](figures/darkslateblue.png) |
| darkslategray | \#2f4f4f | ![darkslategray](figures/darkslategray.png) | | darkslategray | \#2f4f4f | ![darkslategray](figures/darkslategray.png) |
| darkslategrey | \#2f4f4f | ![darkslategrey](figures/darkslategrey.png) | | darkslategrey | \#2f4f4f | ![darkslategrey](figures/darkslategrey.png) |
| darkturquoise | \#00ced1 | ![darkturquoise](figures/darkturquoise.png) | | darkturquoise | \#00ced1 | ![darkturquoise](figures/darkturquoise.png) |
| darkviolet | \#9400d3 | ![darkviolet](figures/darkviolet.png) | | darkviolet | \#9400d3 | ![darkviolet](figures/darkviolet.png) |
| deeppink | \#ff1493 | ![deeppink](figures/deeppink.png) | | deeppink | \#ff1493 | ![deeppink](figures/deeppink.png) |
| deepskyblue | \#00bfff | ![deepskyblue](figures/deepskyblue.png) | | deepskyblue | \#00bfff | ![deepskyblue](figures/deepskyblue.png) |
| dimgray | \#696969 | ![dimgray](figures/dimgray.png) | | dimgray | \#696969 | ![dimgray](figures/dimgray.png) |
| dimgrey | \#696969 | ![dimgrey](figures/dimgrey.png) | | dimgrey | \#696969 | ![dimgrey](figures/dimgrey.png) |
| dodgerblue | \#1e90ff | ![dodgerblue](figures/dodgerblue.png) | | dodgerblue | \#1e90ff | ![dodgerblue](figures/dodgerblue.png) |
| firebrick | \#b22222 | ![firebrick](figures/firebrick.png) | | firebrick | \#b22222 | ![firebrick](figures/firebrick.png) |
| floralwhite | \#fffaf0 | ![floralwhite](figures/floralwhite.png) | | floralwhite | \#fffaf0 | ![floralwhite](figures/floralwhite.png) |
| forestgreen | \#228b22 | ![forestgreen](figures/forestgreen.png) | | forestgreen | \#228b22 | ![forestgreen](figures/forestgreen.png) |
| fuchsia | \#ff00ff | ![fuchsia](figures/fuchsia.png) | | fuchsia | \#ff00ff | ![fuchsia](figures/fuchsia.png) |
| gainsboro | \#dcdcdc | ![gainsboro](figures/gainsboro.png) | | gainsboro | \#dcdcdc | ![gainsboro](figures/gainsboro.png) |
| ghostwhite | \#f8f8ff | ![ghostwhite](figures/ghostwhite.png) | | ghostwhite | \#f8f8ff | ![ghostwhite](figures/ghostwhite.png) |
| gold | \#ffd700 | ![gold](figures/gold.png) | | gold | \#ffd700 | ![gold](figures/gold.png) |
| goldenrod | \#daa520 | ![goldenrod](figures/goldenrod.png) | | goldenrod | \#daa520 | ![goldenrod](figures/goldenrod.png) |
| gray | \#808080 | ![gray](figures/gray.png) | | gray | \#808080 | ![gray](figures/gray.png) |
| green | \#008000 | ![green](figures/green.png) | | green | \#008000 | ![green](figures/green.png) |
| greenyellow | \#adff2f | ![greenyellow](figures/greenyellow.png) | | greenyellow | \#adff2f | ![greenyellow](figures/greenyellow.png) |
| grey | \#808080 | ![grey](figures/grey.png) | | grey | \#808080 | ![grey](figures/grey.png) |
| honeydew | \#f0fff0 | ![honeydew](figures/honeydew.png) | | honeydew | \#f0fff0 | ![honeydew](figures/honeydew.png) |
| hotpink | \#ff69b4 | ![hotpink](figures/hotpink.png) | | hotpink | \#ff69b4 | ![hotpink](figures/hotpink.png) |
| indianred | \#cd5c5c | ![indianred](figures/indianred.png) | | indianred | \#cd5c5c | ![indianred](figures/indianred.png) |
| indigo | \#4b0082 | ![indigo](figures/indigo.png) | | indigo | \#4b0082 | ![indigo](figures/indigo.png) |
| ivory | \#fffff0 | ![ivory](figures/ivory.png) | | ivory | \#fffff0 | ![ivory](figures/ivory.png) |
| khaki | \#f0e68c | ![khaki](figures/khaki.png) | | khaki | \#f0e68c | ![khaki](figures/khaki.png) |
| lavender | \#e6e6fa | ![lavender](figures/lavender.png) | | lavender | \#e6e6fa | ![lavender](figures/lavender.png) |
| lavenderblush | \#fff0f5 | ![lavenderblush](figures/lavenderblush.png) | | lavenderblush | \#fff0f5 | ![lavenderblush](figures/lavenderblush.png) |
| lawngreen | \#7cfc00 | ![lawngreen](figures/lawngreen.png) | | lawngreen | \#7cfc00 | ![lawngreen](figures/lawngreen.png) |
| lemonchiffon | \#fffacd | ![lemonchiffon](figures/lemonchiffon.png) | | lemonchiffon | \#fffacd | ![lemonchiffon](figures/lemonchiffon.png) |
| lightblue | \#add8e6 | ![lightblue](figures/lightblue.png) | | lightblue | \#add8e6 | ![lightblue](figures/lightblue.png) |
| lightcoral | \#f08080 | ![lightcoral](figures/lightcoral.png) | | lightcoral | \#f08080 | ![lightcoral](figures/lightcoral.png) |
| lightcyan | \#e0ffff | ![lightcyan](figures/lightcyan.png) | | lightcyan | \#e0ffff | ![lightcyan](figures/lightcyan.png) |
| lightgoldenrodyellow | \#fafad2 | ![lightgoldenrodyellow](figures/lightgoldenrodyellow.png) | | lightgoldenrodyellow | \#fafad2 | ![lightgoldenrodyellow](figures/lightgoldenrodyellow.png) |
| lightgray | \#d3d3d3 | ![lightgray](figures/lightgray.png) | | lightgray | \#d3d3d3 | ![lightgray](figures/lightgray.png) |
| lightgreen | \#90ee90 | ![lightgreen](figures/lightgreen.png) | | lightgreen | \#90ee90 | ![lightgreen](figures/lightgreen.png) |
| lightpink | \#ffb6c1 | ![lightpink](figures/lightpink.png) | | lightpink | \#ffb6c1 | ![lightpink](figures/lightpink.png) |
| lightsalmon | \#ffa07a | ![lightsalmon](figures/lightsalmon.png) | | lightsalmon | \#ffa07a | ![lightsalmon](figures/lightsalmon.png) |
| lightseagreen | \#20b2aa | ![lightseagreen](figures/lightseagreen.png) | | lightseagreen | \#20b2aa | ![lightseagreen](figures/lightseagreen.png) |
| lightskyblue | \#87cefa | ![lightskyblue](figures/lightskyblue.png) | | lightskyblue | \#87cefa | ![lightskyblue](figures/lightskyblue.png) |
| lightslategray | \#778899 | ![lightslategray](figures/lightslategray.png) | | lightslategray | \#778899 | ![lightslategray](figures/lightslategray.png) |
| lightslategrey | \#778899 | ![lightslategrey](figures/lightslategrey.png) | | lightslategrey | \#778899 | ![lightslategrey](figures/lightslategrey.png) |
| lightsteelblue | \#b0c4de | ![lightsteelblue](figures/lightsteelblue.png) | | lightsteelblue | \#b0c4de | ![lightsteelblue](figures/lightsteelblue.png) |
| lightyellow | \#ffffe0 | ![lightyellow](figures/lightyellow.png) | | lightyellow | \#ffffe0 | ![lightyellow](figures/lightyellow.png) |
| lime | \#00ff00 | ![lime](figures/lime.png) | | lime | \#00ff00 | ![lime](figures/lime.png) |
| limegreen | \#32cd32 | ![limegreen](figures/limegreen.png) | | limegreen | \#32cd32 | ![limegreen](figures/limegreen.png) |
| linen | \#faf0e6 | ![linen](figures/linen.png) | | linen | \#faf0e6 | ![linen](figures/linen.png) |
| magenta | \#ff00ff | ![magenta](figures/magenta.png) | | magenta | \#ff00ff | ![magenta](figures/magenta.png) |
| maroon | \#800000 | ![maroon](figures/maroon.png) | | maroon | \#800000 | ![maroon](figures/maroon.png) |
| mediumaquamarine | \#66cdaa | ![mediumaquamarine](figures/mediumaquamarine.png) | | mediumaquamarine | \#66cdaa | ![mediumaquamarine](figures/mediumaquamarine.png) |
| mediumblue | \#0000cd | ![mediumblue](figures/mediumblue.png) | | mediumblue | \#0000cd | ![mediumblue](figures/mediumblue.png) |
| mediumorchid | \#ba55d3 | ![mediumorchid](figures/mediumorchid.png) | | mediumorchid | \#ba55d3 | ![mediumorchid](figures/mediumorchid.png) |
| mediumpurple | \#9370db | ![mediumpurple](figures/mediumpurple.png) | | mediumpurple | \#9370db | ![mediumpurple](figures/mediumpurple.png) |
| mediumseagreen | \#3cb371 | ![mediumseagreen](figures/mediumseagreen.png) | | mediumseagreen | \#3cb371 | ![mediumseagreen](figures/mediumseagreen.png) |
| mediumslateblue | \#7b68ee | ![mediumslateblue](figures/mediumslateblue.png) | | mediumslateblue | \#7b68ee | ![mediumslateblue](figures/mediumslateblue.png) |
| mediumspringgreen | \#00fa9a | ![mediumspringgreen](figures/mediumspringgreen.png) | | mediumspringgreen | \#00fa9a | ![mediumspringgreen](figures/mediumspringgreen.png) |
| mediumturquoise | \#48d1cc | ![mediumturquoise](figures/mediumturquoise.png) | | mediumturquoise | \#48d1cc | ![mediumturquoise](figures/mediumturquoise.png) |
| mediumvioletred | \#c71585 | ![mediumvioletred](figures/mediumvioletred.png) | | mediumvioletred | \#c71585 | ![mediumvioletred](figures/mediumvioletred.png) |
| midnightblue | \#191970 | ![midnightblue](figures/midnightblue.png) | | midnightblue | \#191970 | ![midnightblue](figures/midnightblue.png) |
| mintcream | \#f5fffa | ![mintcream](figures/mintcream.png) | | mintcream | \#f5fffa | ![mintcream](figures/mintcream.png) |
| mistyrose | \#ffe4e1 | ![mistyrose](figures/mistyrose.png) | | mistyrose | \#ffe4e1 | ![mistyrose](figures/mistyrose.png) |
| moccasin | \#ffe4b5 | ![moccasin](figures/moccasin.png) | | moccasin | \#ffe4b5 | ![moccasin](figures/moccasin.png) |
| navajowhite | \#ffdead | ![navajowhite](figures/navajowhite.png) | | navajowhite | \#ffdead | ![navajowhite](figures/navajowhite.png) |
| navy | \#000080 | ![navy](figures/navy.png) | | navy | \#000080 | ![navy](figures/navy.png) |
| oldlace | \#fdf5e6 | ![oldlace](figures/oldlace.png) | | oldlace | \#fdf5e6 | ![oldlace](figures/oldlace.png) |
| olive | \#808000 | ![olive](figures/olive.png) | | olive | \#808000 | ![olive](figures/olive.png) |
| olivedrab | \#6b8e23 | ![olivedrab](figures/olivedrab.png) | | olivedrab | \#6b8e23 | ![olivedrab](figures/olivedrab.png) |
| orange | \#ffa500 | ![orange](figures/orange.png) | | orange | \#ffa500 | ![orange](figures/orange.png) |
| orangered | \#ff4500 | ![orangered](figures/orangered.png) | | orangered | \#ff4500 | ![orangered](figures/orangered.png) |
| orchid | \#da70d6 | ![orchid](figures/orchid.png) | | orchid | \#da70d6 | ![orchid](figures/orchid.png) |
| palegoldenrod | \#eee8aa | ![palegoldenrod](figures/palegoldenrod.png) | | palegoldenrod | \#eee8aa | ![palegoldenrod](figures/palegoldenrod.png) |
| palegreen | \#98fb98 | ![palegreen](figures/palegreen.png) | | palegreen | \#98fb98 | ![palegreen](figures/palegreen.png) |
| paleturquoise | \#afeeee | ![paleturquoise](figures/paleturquoise.png) | | paleturquoise | \#afeeee | ![paleturquoise](figures/paleturquoise.png) |
| palevioletred | \#db7093 | ![palevioletred](figures/palevioletred.png) | | palevioletred | \#db7093 | ![palevioletred](figures/palevioletred.png) |
| papayawhip | \#ffefd5 | ![papayawhip](figures/papayawhip.png) | | papayawhip | \#ffefd5 | ![papayawhip](figures/papayawhip.png) |
| peachpuff | \#ffdab9 | ![peachpuff](figures/peachpuff.png) | | peachpuff | \#ffdab9 | ![peachpuff](figures/peachpuff.png) |
| peru | \#cd853f | ![peru](figures/peru.png) | | peru | \#cd853f | ![peru](figures/peru.png) |
| pink | \#ffc0cb | ![pink](figures/pink.png) | | pink | \#ffc0cb | ![pink](figures/pink.png) |
| plum | \#dda0dd | ![plum](figures/plum.png) | | plum | \#dda0dd | ![plum](figures/plum.png) |
| powderblue | \#b0e0e6 | ![powderblue](figures/powderblue.png) | | powderblue | \#b0e0e6 | ![powderblue](figures/powderblue.png) |
| purple | \#800080 | ![purple](figures/purple.png) | | purple | \#800080 | ![purple](figures/purple.png) |
| rebeccapurple | \#663399 | ![rebeccapurple](figures/rebeccapurple.png) | | rebeccapurple | \#663399 | ![rebeccapurple](figures/rebeccapurple.png) |
| red | \#ff0000 | ![red](figures/red.png) | | red | \#ff0000 | ![red](figures/red.png) |
| rosybrown | \#bc8f8f | ![rosybrown](figures/rosybrown.png) | | rosybrown | \#bc8f8f | ![rosybrown](figures/rosybrown.png) |
| royalblue | \#4169e1 | ![royalblue](figures/royalblue.png) | | royalblue | \#4169e1 | ![royalblue](figures/royalblue.png) |
| saddlebrown | \#8b4513 | ![saddlebrown](figures/saddlebrown.png) | | saddlebrown | \#8b4513 | ![saddlebrown](figures/saddlebrown.png) |
| salmon | \#fa8072 | ![salmon](figures/salmon.png) | | salmon | \#fa8072 | ![salmon](figures/salmon.png) |
| sandybrown | \#f4a460 | ![sandybrown](figures/sandybrown.png) | | sandybrown | \#f4a460 | ![sandybrown](figures/sandybrown.png) |
| seagreen | \#2e8b57 | ![seagreen](figures/seagreen.png) | | seagreen | \#2e8b57 | ![seagreen](figures/seagreen.png) |
| seashell | \#fff5ee | ![seashell](figures/seashell.png) | | seashell | \#fff5ee | ![seashell](figures/seashell.png) |
| sienna | \#a0522d | ![sienna](figures/sienna.png) | | sienna | \#a0522d | ![sienna](figures/sienna.png) |
| silver | \#c0c0c0 | ![silver](figures/silver.png) | | silver | \#c0c0c0 | ![silver](figures/silver.png) |
| skyblue | \#87ceeb | ![skyblue](figures/skyblue.png) | | skyblue | \#87ceeb | ![skyblue](figures/skyblue.png) |
| slateblue | \#6a5acd | ![slateblue](figures/slateblue.png) | | slateblue | \#6a5acd | ![slateblue](figures/slateblue.png) |
| slategray | \#708090 | ![slategray](figures/slategray.png) | | slategray | \#708090 | ![slategray](figures/slategray.png) |
| slategrey | \#708090 | ![slategray](figures/slategray.png) | | slategrey | \#708090 | ![slategray](figures/slategray.png) |
| snow | \#fffafa | ![snow](figures/snow.png) | | snow | \#fffafa | ![snow](figures/snow.png) |
| springgreen | \#00ff7f | ![springgreen](figures/springgreen.png) | | springgreen | \#00ff7f | ![springgreen](figures/springgreen.png) |
| steelblue | \#4682b4 | ![steelblue](figures/steelblue.png) | | steelblue | \#4682b4 | ![steelblue](figures/steelblue.png) |
| tan | \#d2b48c | ![tan](figures/tan.png) | | tan | \#d2b48c | ![tan](figures/tan.png) |
| teal | \#008080 | ![teal](figures/teal.png) | | teal | \#008080 | ![teal](figures/teal.png) |
| thistle | \#d8Bfd8 | ![thistle](figures/thistle.png) | | thistle | \#d8Bfd8 | ![thistle](figures/thistle.png) |
| tomato | \#ff6347 | ![tomato](figures/tomato.png) | | tomato | \#ff6347 | ![tomato](figures/tomato.png) |
| turquoise | \#40e0d0 | ![turquoise](figures/turquoise.png) | | turquoise | \#40e0d0 | ![turquoise](figures/turquoise.png) |
| violet | \#ee82ee | ![violet](figures/violet.png) | | violet | \#ee82ee | ![violet](figures/violet.png) |
| wheat | \#f5deb3 | ![wheat](figures/wheat.png) | | wheat | \#f5deb3 | ![wheat](figures/wheat.png) |
| white | \#ffffff | ![white](figures/white.png) | | white | \#ffffff | ![white](figures/white.png) |
| whitesmoke | \#f5f5f5 | ![whitesmoke](figures/whitesmoke.png) | | whitesmoke | \#f5f5f5 | ![whitesmoke](figures/whitesmoke.png) |
| yellow | \#ffff00 | ![yellow](figures/yellow.png) | | yellow | \#ffff00 | ![yellow](figures/yellow.png) |
| yellowgreen | \#9acd32 | ![yellowgreen](figures/yellowgreen.png) | | yellowgreen | \#9acd32 | ![yellowgreen](figures/yellowgreen.png) |
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-calendar.md
浏览文件 @ 000558b9
...@@ -16,30 +16,30 @@ ...@@ -16,30 +16,30 @@
支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性： 支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------------- | ------ | ----- | ---- | ---------------------------------------- |
| date | string | 当前日期 | 否 | 当前页面选中的日期，默认是当前日期，格式为年-月-日，如"2019-11-22"。 | | date | string | 当前日期 | 否 | 当前页面选中的日期，默认是当前日期，格式为年-月-日，如"2019-11-22"。 |
| cardcalendar | bool | false | 否 | 标识当前日历是否为卡片日历。 | | cardcalendar | bool | false | 否 | 标识当前日历是否为卡片日历。 |
| startdayofweek | int | 6 | 否 | 标识卡片显示的起始天，默认是星期天（取值范围：0-6）。 | | startdayofweek | int | 6 | 否 | 标识卡片显示的起始天，默认是星期天（取值范围：0-6）。 |
| offdays | string | 5，6 | 否 | 标识卡片显示的休息日，默认是星期六、星期天（取值范围：0-6）。 | | offdays | string | 5，6 | 否 | 标识卡片显示的休息日，默认是星期六、星期天（取值范围：0-6）。 |
| calendardata | string | - | 是 | 卡片需要显示的月视图数据信息，包括5\*7或者6\*7格的日数据信息，格式为JSON字符串。"data"标签属性信息见**表1** calendardata的日属性。 | | calendardata | string | - | 是 | 卡片需要显示的月视图数据信息，包括5\*7或者6\*7格的日数据信息，格式为JSON字符串。"data"标签属性信息见**表1** calendardata的日属性。 |
| showholiday | bool | true | 否 | 标识当前是否显示节假日信息。 | | showholiday | bool | true | 否 | 标识当前是否显示节假日信息。 |
**表1** calendardata的日属性 **表1** calendardata的日属性
| 名称 | 类型 | 描述 | | 名称 | 类型 | 描述 |
| -------- | -------- | -------- | | -------------- | ------ | --------------------------------------- |
| index | int | 数据的索引，表示第几个日期。 | | index | int | 数据的索引，表示第几个日期。 |
| day | int | 表示具体哪一天。 | | day | int | 表示具体哪一天。 |
| month | int | 表示月份。 | | month | int | 表示月份。 |
| year | int | 表示年份。 | | year | int | 表示年份。 |
| isFirstOfLuanr | bool | 表示是否是农历的第一天，在农历第一天的数据下绘制横线。 | | isFirstOfLuanr | bool | 表示是否是农历的第一天，在农历第一天的数据下绘制横线。 |
| hasSchedule | bool | 表示是否有日程，在有日程的日期数据上绘制圆。 | | hasSchedule | bool | 表示是否有日程，在有日程的日期数据上绘制圆。 |
| markLunarDay | bool | 表示节假日，农历数据会变成蓝色。 | | markLunarDay | bool | 表示节假日，农历数据会变成蓝色。 |
| lunarDay | string | 农历日期。 | | lunarDay | string | 农历日期。 |
| lunarMonth | string | 农历月份。 | | lunarMonth | string | 农历月份。 |
| dayMark | string | 表示工作日。<br>- “work”：工作日。<br>- “off”：休息日。 | | dayMark | string | 表示工作日。<br>- “work”：工作日。<br>- “off”：休息日。 |
| dayMarkValue | string | 表示具体需要显示的“班”、“休”信息。 | | dayMarkValue | string | 表示具体需要显示的“班”、“休”信息。 |
calendardata示例： calendardata示例：
...@@ -93,33 +93,33 @@ calendardata示例： ...@@ -93,33 +93,33 @@ calendardata示例：
## 样式 ## 样式
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------- | ------------- | ---- | ---- | ------- |
| background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 | | background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 |
## 事件 ## 事件
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | -------------- | ------------ | --------------- |
| selectedchange | changeEvent | 在点击日期和上下月跳转时触发。 | | selectedchange | changeEvent | 在点击日期和上下月跳转时触发。 |
| requestdata | requestEvent | 请求日期时触发。 | | requestdata | requestEvent | 请求日期时触发。 |
**表2** changeEvent **表2** changeEvent
| 名称 | 类型 | 描述 | | 名称 | 类型 | 描述 |
| -------- | -------- | -------- | | ------------ | ------ | ------ |
| $event.day | string | 选择的日期。 | | $event.day | string | 选择的日期。 |
| $event.month | string | 选择的月份。 | | $event.month | string | 选择的月份。 |
| $event.year | string | 选择的年份。 | | $event.year | string | 选择的年份。 |
**表3** requestEvent **表3** requestEvent
| 名称 | 类型 | 描述 | | 名称 | 类型 | 描述 |
| -------- | -------- | -------- | | ------------------- | ------ | -------- |
| $event.month | string | 请求的月份。 | | $event.month | string | 请求的月份。 |
| $event.year | string | 请求的年份。 | | $event.year | string | 请求的年份。 |
| $event.currentYear | string | 当前显示的年份。 | | $event.currentYear | string | 当前显示的年份。 |
| $event.currentMonth | string | 当前显示的月份。 | | $event.currentMonth | string | 当前显示的月份。 |
...@@ -160,7 +160,6 @@ calendardata示例： ...@@ -160,7 +160,6 @@ calendardata示例：
```json ```json
// xxx.json
{ {
"data": { "data": {
"currentDate": "", "currentDate": "",
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-chart.md
浏览文件 @ 000558b9
...@@ -16,132 +16,132 @@ ...@@ -16,132 +16,132 @@
除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性： 除支持[通用属性](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：占比类圆形图表。 | | 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轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改） | | options | ChartOptions | - | 否 | 图表参数设置，柱状图和线形图必须设置参数设置，量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改） |
| datasets | Array\<ChartDataset> | - | 否 | 数据集合，柱状图和线形图必须设置数据集合，量规图不生效。可以设置多条数据集及其背景色。 | | datasets | Array\<ChartDataset> | - | 否 | 数据集合，柱状图和线形图必须设置数据集合，量规图不生效。可以设置多条数据集及其背景色。 |
| segments | DataSegment \| Array\<DataSegment> | | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。<br/>DataSegment针对进度类和加载类圆形图表使用，Array\<DataSegment>针对占比类图标使用，DataSegment最多9个。 | | segments | DataSegment \| Array\<DataSegment> | | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。<br/>DataSegment针对进度类和加载类圆形图表使用，Array\<DataSegment>针对占比类图标使用，DataSegment最多9个。 |
| effects | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 | | effects | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 |
| animationduration | number | 3000 | 否 | 设置占比类圆形图表展开动画时长，单位为ms。 | | animationduration | number | 3000 | 否 | 设置占比类圆形图表展开动画时长，单位为ms。 |
**表1** ChartOptions **表1** ChartOptions
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | --------- | ---- | ---- | ---------------------------------------- |
| xAxis | ChartAxis | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 | | xAxis | ChartAxis | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 |
| yAxis | ChartAxis | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 | | yAxis | ChartAxis | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 |
| series | ChartAxis | - | 否 | 数据序列参数设置，仅线形图支持。可以设置：<br>- 线的样式，如线宽、是否平滑。<br>- 线最前端位置白点的样式和大小。 | | series | ChartAxis | - | 否 | 数据序列参数设置，仅线形图支持。可以设置：<br>- 线的样式，如线宽、是否平滑。<br>- 线最前端位置白点的样式和大小。 |
**表2** ChartDataset **表2** ChartDataset
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------- | ---------------------------------------- | -------- | ---- | -------------------- |
| strokeColor | &lt;color&gt; | \#ff6384 | 否 | 线条颜色，仅线形图支持。 | | strokeColor | &lt;color&gt; | \#ff6384 | 否 | 线条颜色，仅线形图支持。 |
| fillColor | &lt;color&gt; | \#ff6384 | 否 | 填充颜色，线形图表示填充的渐变颜色。 | | fillColor | &lt;color&gt; | \#ff6384 | 否 | 填充颜色，线形图表示填充的渐变颜色。 |
| data | Array&lt;number&gt;&nbsp;\|&nbsp;Array\<Point&gt; | - | 是 | 设置绘制线或柱中的点集。 | | data | Array&lt;number&gt;&nbsp;\|&nbsp;Array\<Point&gt; | - | 是 | 设置绘制线或柱中的点集。 |
| gradient | boolean | false | 否 | 设置是否显示填充渐变颜色，仅线形图支持。 | | gradient | boolean | false | 否 | 设置是否显示填充渐变颜色，仅线形图支持。 |
**表3** ChartAxis **表3** ChartAxis
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | ------------- | -------- | ---- | ---------------------------------------- |
| min | number | 0 | 否 | 轴的最小值，不支持负数，仅线形图支持。 | | min | number | 0 | 否 | 轴的最小值，不支持负数，仅线形图支持。 |
| max | number | 100 | 否 | 轴的最大值，不支持负数，仅线形图支持。 | | max | number | 100 | 否 | 轴的最大值，不支持负数，仅线形图支持。 |
| axisTick | number | 10 | 否 | 轴显示的刻度数量。<br/>仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 | | axisTick | number | 10 | 否 | 轴显示的刻度数量。<br/>仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 |
| display | boolean | false | 否 | 是否显示轴。 | | display | boolean | false | 否 | 是否显示轴。 |
| color | &lt;color&gt; | \#c0c0c0 | 否 | 轴颜色。 | | color | &lt;color&gt; | \#c0c0c0 | 否 | 轴颜色。 |
**表4** ChartSeries **表4** ChartSeries
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------- | -------------- | ---- | ---- | -------------------- |
| lineStyle | ChartLineStyle | - | 否 | 线样式设置，如线宽、是否平滑。 | | lineStyle | ChartLineStyle | - | 否 | 线样式设置，如线宽、是否平滑。 |
| headPoint | PointStyle | - | 否 | 线最前端位置白点的样式和大小。 | | headPoint | PointStyle | - | 否 | 线最前端位置白点的样式和大小。 |
| topPoint | PointStyle | - | 否 | 最高点的样式和大小。 | | topPoint | PointStyle | - | 否 | 最高点的样式和大小。 |
| bottomPoint | PointStyle | - | 否 | 最低点的样式和大小。 | | bottomPoint | PointStyle | - | 否 | 最低点的样式和大小。 |
| loop | ChartLoop | - | 否 | 设置屏幕显示满时，是否需要重头开始绘制。 | | loop | ChartLoop | - | 否 | 设置屏幕显示满时，是否需要重头开始绘制。 |
**表5** ChartLineStyle **表5** ChartLineStyle
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | -------------- | ----- | ---- | ----- |
| width | &lt;length&gt; | 1px | 否 | 线宽设置。 | | width | &lt;length&gt; | 1px | 否 | 线宽设置。 |
| smooth | boolean | false | 否 | 是否平滑。 | | smooth | boolean | false | 否 | 是否平滑。 |
**表6** PointStyle **表6** PointStyle
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------- | -------------- | -------- | ---- | ---------------------------------------- |
| shape | string | circle | 否 | 高亮点的形状。可选值为：<br/>-&nbsp;circle：圆形。<br/>-&nbsp;square：方形。<br/>-&nbsp;triangle：三角形。 | | shape | string | circle | 否 | 高亮点的形状。可选值为：<br/>-&nbsp;circle：圆形。<br/>-&nbsp;square：方形。<br/>-&nbsp;triangle：三角形。 |
| size | &lt;length&gt; | 5px | 否 | 高亮点的大小。 | | size | &lt;length&gt; | 5px | 否 | 高亮点的大小。 |
| strokeWidth | &lt;length&gt; | 1px | 否 | 边框宽度。 | | strokeWidth | &lt;length&gt; | 1px | 否 | 边框宽度。 |
| strokeColor | &lt;color&gt; | \#ff0000 | 否 | 边框颜色。 | | strokeColor | &lt;color&gt; | \#ff0000 | 否 | 边框颜色。 |
| fillColor | &lt;color&gt; | \#ff0000 | 否 | 填充颜色。 | | fillColor | &lt;color&gt; | \#ff0000 | 否 | 填充颜色。 |
**表7** ChartLoop **表7** ChartLoop
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------------- | ----- | ---- | ---------------------------------------- |
| margin | &lt;length&gt; | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。<br>margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 | | margin | &lt;length&gt; | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。<br>margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 |
| gradient | boolean | false | 否 | 是否需要渐变擦除。 | | gradient | boolean | false | 否 | 是否需要渐变擦除。 |
**表8** Point **表8** Point
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------ | ------------- | -------- | ---- | ---------------------------------------- |
| value | number | 0 | 是 | 表示绘制点的Y轴坐标。 | | value | number | 0 | 是 | 表示绘制点的Y轴坐标。 |
| pointStyle | PointStyle | - | 否 | 表示当前数据点的绘制样式。 | | pointStyle | PointStyle | - | 否 | 表示当前数据点的绘制样式。 |
| description | string | - | 否 | 表示当前点的注释内容。 | | description | string | - | 否 | 表示当前点的注释内容。 |
| textLocation | string | - | 否 | 可选值为：<br>- "top"：注释的绘制位置位于点的上方。<br>- "bottom"：注释的绘制位置位于点的下方。<br>- "none"：不绘制。 | | textLocation | string | - | 否 | 可选值为：<br>- "top"：注释的绘制位置位于点的上方。<br>- "bottom"：注释的绘制位置位于点的下方。<br>- "none"：不绘制。 |
| textColor | &lt;color&gt; | \#000000 | 否 | 表示注释文字的颜色。 | | textColor | &lt;color&gt; | \#000000 | 否 | 表示注释文字的颜色。 |
| lineDash | string | solid | 否 | 表示绘制当前线段虚线的样式。<br>- "dashed，&nbsp;5，&nbsp;5"：表示纯虚线，绘制5px的实线后留5px的空白。<br>- “solid”：表示绘制实线。 | | lineDash | string | solid | 否 | 表示绘制当前线段虚线的样式。<br>- "dashed，&nbsp;5，&nbsp;5"：表示纯虚线，绘制5px的实线后留5px的空白。<br>- “solid”：表示绘制实线。 |
| lineColor | &lt;color&gt; | \#000000 | 否 | 表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。 | | lineColor | &lt;color&gt; | \#000000 | 否 | 表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。 |
**表9** DataSegment **表9** DataSegment
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ------ | ---- | ---- | ---------------------------------------- |
| startColor | Color | - | 否 | 起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会使用系统默认预置的颜色数组，具体颜色值见下表。 | | startColor | Color | - | 否 | 起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会使用系统默认预置的颜色数组，具体颜色值见下表。 |
| endColor | Color | - | 否 | 终止位置的颜色，设置endColor必须设置startColor。<br/>不设置startColor时，会使用系统默认预置的颜色数组。 | | endColor | Color | - | 否 | 终止位置的颜色，设置endColor必须设置startColor。<br/>不设置startColor时，会使用系统默认预置的颜色数组。 |
| value | number | 0 | 是 | 占比数据的所占份额，最大100。 | | value | number | 0 | 是 | 占比数据的所占份额，最大100。 |
| name | string | - | 否 | 此类数据的名称。 | | name | string | - | 否 | 此类数据的名称。 |
| 数据组 | 主题 | 深色主题 | | 数据组 | 主题 | 深色主题 |
| -------- | -------- | -------- | | ---- | --------------------------- | --------------------------- |
| 0 | 起始颜色：\#f7ce00，结束颜色：\#f99b11 | 起始颜色：\#d1a738，结束颜色：\#eb933d | | 0 | 起始颜色：\#f7ce00，结束颜色：\#f99b11 | 起始颜色：\#d1a738，结束颜色：\#eb933d |
| 1 | 起始颜色：\#f76223，结束颜色：\#f2400a | 起始颜色：\#e67d50，结束颜色：\#d9542b | | 1 | 起始颜色：\#f76223，结束颜色：\#f2400a | 起始颜色：\#e67d50，结束颜色：\#d9542b |
| 2 | 起始颜色：\#f772ac，结束颜色：\#e65392 | 起始颜色：\#d5749e，结束颜色：\#d6568d | | 2 | 起始颜色：\#f772ac，结束颜色：\#e65392 | 起始颜色：\#d5749e，结束颜色：\#d6568d |
| 3 | 起始颜色：\#a575eb，结束颜色：\#a12df7 | 起始颜色：\#9973d1，结束颜色：\#5552d9 | | 3 | 起始颜色：\#a575eb，结束颜色：\#a12df7 | 起始颜色：\#9973d1，结束颜色：\#5552d9 |
| 4 | 起始颜色：\#7b79f7，结束颜色：\#4b48f7 | 起始颜色：\#7977d9，结束颜色：\#f99b11 | | 4 | 起始颜色：\#7b79f7，结束颜色：\#4b48f7 | 起始颜色：\#7977d9，结束颜色：\#f99b11 |
| 5 | 起始颜色：\#4b8af3，结束颜色：\#007dff | 起始颜色：\#4c81d9，结束颜色：\#217bd9 | | 5 | 起始颜色：\#4b8af3，结束颜色：\#007dff | 起始颜色：\#4c81d9，结束颜色：\#217bd9 |
| 6 | 起始颜色：\#73c1e6，结束颜色：\#4fb4e3 | 起始颜色：\#5ea6d1，结束颜色：\#4895c2 | | 6 | 起始颜色：\#73c1e6，结束颜色：\#4fb4e3 | 起始颜色：\#5ea6d1，结束颜色：\#4895c2 |
| 7 | 起始颜色：\#a5d61d，结束颜色：\#69d14f | 起始颜色：\#91c23a，结束颜色：\#70ba5d | | 7 | 起始颜色：\#a5d61d，结束颜色：\#69d14f | 起始颜色：\#91c23a，结束颜色：\#70ba5d |
| 8 | 起始颜色：\#a2a2b0，结束颜色：\#8e8e93 | 起始颜色：\#8c8c99，结束颜色：\#6b6b76 | | 8 | 起始颜色：\#a2a2b0，结束颜色：\#8e8e93 | 起始颜色：\#8c8c99，结束颜色：\#6b6b76 |
当类型为量规图时，还支持如下属性： 当类型为量规图时，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------- | ------ | ---- | ---- | ---------------------- |
| percent | number | 0 | 否 | 当前值占整体的百分比，取值范围为0-100。 | | percent | number | 0 | 否 | 当前值占整体的百分比，取值范围为0-100。 |
## 样式 ## 样式
除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式： 除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------ | -------------- | -------------------------- | ---- | ---------------------------------------- |
| stroke-width | &lt;length&gt; | 32px（量规）<br/>24px（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条的宽度。 | | stroke-width | &lt;length&gt; | 32px（量规）<br/>24px（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条的宽度。 |
| start-angle | &lt;deg&gt; | 240（量规）<br/>0（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条起始角度，以时钟0点为基线。范围为0到360。 | | start-angle | &lt;deg&gt; | 240（量规）<br/>0（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条起始角度，以时钟0点为基线。范围为0到360。 |
| total-angle | &lt;deg&gt; | 240（量规）<br/>360（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 | | total-angle | &lt;deg&gt; | 240（量规）<br/>360（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 |
| center-x | &lt;length&gt; | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式，仅量规图支持。<br>该样式需要和center-y和radius一起配置才能生效。 | | center-x | &lt;length&gt; | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式，仅量规图支持。<br>该样式需要和center-y和radius一起配置才能生效。 |
| center-y | &lt;length&gt; | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式，仅量规图支持。<br>该样式需要和center-x和radius一起配置才能生效。 | | center-y | &lt;length&gt; | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式，仅量规图支持。<br>该样式需要和center-x和radius一起配置才能生效。 |
| radius | &lt;length&gt; | - | 否 | 量规组件刻度条半径，该样式优先于通用样式的width和height样式，仅量规图支持。<br>该样式需要和center-x和center-y一起配置才能生效。 | | radius | &lt;length&gt; | - | 否 | 量规组件刻度条半径，该样式优先于通用样式的width和height样式，仅量规图支持。<br>该样式需要和center-x和center-y一起配置才能生效。 |
| colors | Array | - | 否 | 量规组件刻度条每一个区段的颜色，仅量规图支持。<br/>如：colors:&nbsp;\#ff0000,&nbsp;\#00ff00。 | | colors | Array | - | 否 | 量规组件刻度条每一个区段的颜色，仅量规图支持。<br/>如：colors:&nbsp;\#ff0000,&nbsp;\#00ff00。 |
| weights | Array | - | 否 | 量规组件刻度条每一个区段的权重，仅量规图支持。<br/>如：weights:&nbsp;2,&nbsp;2。 | | weights | Array | - | 否 | 量规组件刻度条每一个区段的权重，仅量规图支持。<br/>如：weights:&nbsp;2,&nbsp;2。 |
| font-family | Array | - | 否 | 表示绘制注释的字体样式，支持[自定义字体](js-service-widget-common-customizing-font.md)。 | | font-family | Array | - | 否 | 表示绘制注释的字体样式，支持[自定义字体](js-service-widget-common-customizing-font.md)。 |
| font-size | &lt;length&gt; | - | 否 | 表示绘制注释的字体的大小。 | | font-size | &lt;length&gt; | - | 否 | 表示绘制注释的字体的大小。 |
## 事件 ## 事件
...@@ -152,7 +152,7 @@ ...@@ -152,7 +152,7 @@
## 示例 ## 示例
1. 线形图 1. 线形图
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
...@@ -162,101 +162,99 @@ ...@@ -162,101 +162,99 @@
</stack> </stack>
</div> </div>
``` ```
```css ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.chart-region { .chart-region {
height: 400px; height: 400px;
width: 700px; width: 700px;
} }
.chart-background { .chart-background {
object-fit: fill; object-fit: fill;
} }
.chart-data { .chart-data {
width: 700px; width: 700px;
height: 600px; height: 600px;
} }
``` ```
```json ```json
// xxx.json {
{ "data": {
"data": { "lineData": [
"lineData": [ {
{ "strokeColor": "#0081ff",
"strokeColor": "#0081ff", "fillColor": "#cce5ff",
"fillColor": "#cce5ff", "data": [
"data": [ 763,
763, 550,
550, 551,
551, 554,
554, 731,
731, 654,
654, 525,
525, 696,
696, 595,
595, 628,
628, 791,
791, 505,
505, 613,
613, 575,
575, 475,
475, 553,
553, 491,
491, 680,
680, 657,
657, 716
716 ],
], "gradient": true
"gradient": true }
} ],
], "lineOps": {
"lineOps": { "xAxis": {
"xAxis": { "min": 0,
"min": 0, "max": 20,
"max": 20, "display": false
"display": false },
}, "yAxis": {
"yAxis": { "min": 0,
"min": 0, "max": 1000,
"max": 1000, "display": false
"display": false },
}, "series": {
"series": { "lineStyle": {
"lineStyle": { "width": "5px",
"width": "5px", "smooth": true
"smooth": true },
}, "headPoint": {
"headPoint": { "shape": "circle",
"shape": "circle", "size": 20,
"size": 20, "strokeWidth": 5,
"strokeWidth": 5, "fillColor": "#ffffff",
"fillColor": "#ffffff", "strokeColor": "#007aff",
"strokeColor": "#007aff", "display": true
"display": true },
}, "loop": {
"loop": { "margin": 2,
"margin": 2, "gradient": true
"gradient": true }
} }
} }
} }
} }
}
``` ```
**4*4卡片**
​ **4*4卡片**
![zh-cn_image_0000001185652902](figures/zh-cn_image_0000001185652902.png) ![zh-cn_image_0000001185652902](figures/zh-cn_image_0000001185652902.png)
2. 柱状图 2. 柱状图
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
...@@ -266,96 +264,93 @@ ...@@ -266,96 +264,93 @@
</stack> </stack>
</div> </div>
``` ```
```css ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.data-region { .data-region {
height: 400px; height: 400px;
width: 700px; width: 700px;
} }
.data-background { .data-background {
object-fit: fill; object-fit: fill;
} }
.data-bar { .data-bar {
width: 700px; width: 700px;
height: 400px; height: 400px;
} }
``` ```
```json ```json
// xxx.json
{ {
"data": { "data": {
"barData": [ "barData": [
{ {
"fillColor": "#f07826", "fillColor": "#f07826",
"data": [763, 550, 551, 554, 731, 654, 525, 696, 595, 628] "data": [763, 550, 551, 554, 731, 654, 525, 696, 595, 628]
}, },
{ {
"fillColor": "#cce5ff", "fillColor": "#cce5ff",
"data": [535, 776, 615, 444, 694, 785, 677, 609, 562, 410] "data": [535, 776, 615, 444, 694, 785, 677, 609, 562, 410]
}, },
{ {
"fillColor": "#ff88bb", "fillColor": "#ff88bb",
"data": [673, 500, 574, 483, 702, 583, 437, 506, 693, 657] "data": [673, 500, 574, 483, 702, 583, 437, 506, 693, 657]
} }
], ],
"barOps": { "barOps": {
"xAxis": { "xAxis": {
"min": 0, "min": 0,
"max": 20, "max": 20,
"display": false, "display": false,
"axisTick": 10 "axisTick": 10
}, },
"yAxis": { "yAxis": {
"min": 0, "min": 0,
"max": 1000, "max": 1000,
"display": false "display": false
} }
} }
} }
} }
``` ```
**4*4卡片**
​ **4*4卡片**
![barchart](figures/barchart.PNG) ![barchart](figures/barchart.PNG)
3. 量规图 3. 量规图
```html ```html
<!-- xxx.hml --> <div class="container">
<div class="container"> <div class="gauge-region">
<div class="gauge-region"> <chart class="data-gauge" type="gauge" percent = "50"></chart>
<chart class="data-gauge" type="gauge" percent = "50"></chart> </div>
</div> </div>
</div>
``` ```
```css ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.gauge-region { .gauge-region {
height: 400px; height: 400px;
width: 400px; width: 400px;
} }
.data-gauge { .data-gauge {
colors: #83f115, #fd3636, #3bf8ff; colors: #83f115, #fd3636, #3bf8ff;
weights: 4, 2, 1; weights: 4, 2, 1;
} }
``` ```
**4*4卡片**
​ **4*4卡片**
![gauge](figures/gauge.PNG) ![gauge](figures/gauge.PNG)
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-clock.md
浏览文件 @ 000558b9
...@@ -16,28 +16,28 @@ ...@@ -16,28 +16,28 @@
除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性： 除支持[通用属性](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组件的图片资源。 | | 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组件绘制的表盘数字支持国际化。 | | showdigit | boolean | true | 否 | 是否由Clock组件绘制表盘数字。<br/>该属性为true时，请留意clockconfig中digitRadiusRatio和digitSizeRatio参数与表盘的匹配情况。<br/>由Clock组件绘制的表盘数字支持国际化。 |
| hourswest | number | - | 否 | 时钟的时区偏移值，时区为标准时区减去hourswest。<br/>有效范围为[-12,&nbsp;12]，其中负值范围表示东时区，比如东八区对应的是-8。不设置默认采用系统时间所在的时区。 | | hourswest | number | - | 否 | 时钟的时区偏移值，时区为标准时区减去hourswest。<br/>有效范围为[-12,&nbsp;12]，其中负值范围表示东时区，比如东八区对应的是-8。不设置默认采用系统时间所在的时区。 |
**表1** ClockConfig **表1** ClockConfig
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------- | -------------- | --------------- | ---- | ---------------------------------------- |
| face | &lt;string&gt; | - | 是 | 日间时段的表盘资源路径。<br/>表盘资源须为包含时钟刻度的正方形图片，表盘区域（圆形）为该图片的内切圆或内切圆的同心圆。如果表盘区域为表盘资源内切圆的同心圆的话，请相应调整digitRadiusRatio和digitSizeRatio参数。 | | face | &lt;string&gt; | - | 是 | 日间时段的表盘资源路径。<br/>表盘资源须为包含时钟刻度的正方形图片，表盘区域（圆形）为该图片的内切圆或内切圆的同心圆。如果表盘区域为表盘资源内切圆的同心圆的话，请相应调整digitRadiusRatio和digitSizeRatio参数。 |
| hourHand | &lt;string&gt; | - | 是 | 日间时段的时针资源路径。<br/>- 时针图片的高度须与表盘资源高度相同。<br/>- 时针图片的宽高比建议在0.062。<br/>- 时针图片上指针的旋转中心须处于时针图片的中心（对角线交点）。<br/>- 夜间时段的时针资源请调整hourHandNight参数。 | | hourHand | &lt;string&gt; | - | 是 | 日间时段的时针资源路径。<br/>- 时针图片的高度须与表盘资源高度相同。<br/>- 时针图片的宽高比建议在0.062。<br/>- 时针图片上指针的旋转中心须处于时针图片的中心（对角线交点）。<br/>- 夜间时段的时针资源请调整hourHandNight参数。 |
| minuteHand | &lt;string&gt; | - | 是 | 日间时段的分针资源路径。<br/>- 分针图片的高度须与表盘资源高度相同。<br/>- 分针图片的宽高比建议在0.062。<br/>- 分针图片上指针的旋转中心须处于分针图片的中心（对角线交点）。<br/>-&nbsp;夜间时段的分针资源请调整minuteHandNight参数。 | | 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参数。 | | secondHand | &lt;string&gt; | - | 是 | 日间时段的秒针资源路径。<br/>- &nbsp;秒针图片的高度须与表盘资源高度相同。<br/>-&nbsp;秒针图片的宽高比建议在0.062。<br/>-&nbsp;秒针图片上指针的旋转中心须处于秒针图片的中心（对角线交点）。<br/>- 夜间时段的秒针资源请调整secondHandNightSrc参数。 |
| digitColor | &lt;color&gt; | \#FF000000 | 否 | 日间时段（6:00-18:00）的表盘文本颜色。 | | 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）的颜色配合问题。 | | digitColorNight | &lt;color&gt; | 与digitColor保持一致 | 否 | 夜间时段（18:00-次日6:00）的表盘文本颜色。<br/>- 该属性未设置时，取digitColor的值作为digitColorNight的值（digitColor被设置时，取digitColor被设置的值）。<br/>- 请注意缺省状态下使用digitClor的值作为digitColorNight的值时，夜间时段表盘文本颜色与夜间时段表盘背景（faceNight）的颜色配合问题。 |
| faceNight | &lt;string&gt; | - | 否 | 夜间时段的表盘资源路径。<br/>未设置时使用face的资源路径作为夜间时段的表盘资源路径。 | | faceNight | &lt;string&gt; | - | 否 | 夜间时段的表盘资源路径。<br/>未设置时使用face的资源路径作为夜间时段的表盘资源路径。 |
| hourHandNight | &lt;string&gt; | - | 否 | 夜间时段的时针资源路径。<br/>未设置时使用hourHand的资源路径作为夜间时段的时针资源路径。 | | hourHandNight | &lt;string&gt; | - | 否 | 夜间时段的时针资源路径。<br/>未设置时使用hourHand的资源路径作为夜间时段的时针资源路径。 |
| minuteHandNight | &lt;string&gt; | - | 否 | 夜间时段的分针资源路径。<br/>设置时使用minuteHand的资源路径作为夜间时段的分针资源路径。 | | minuteHandNight | &lt;string&gt; | - | 否 | 夜间时段的分针资源路径。<br/>设置时使用minuteHand的资源路径作为夜间时段的分针资源路径。 |
| secondHandNight | &lt;string&gt; | - | 否 | 夜间时段的秒针资源路径。<br/>未设置时使用secondHand的资源路径作为夜间时段的秒针资源路径。 | | secondHandNight | &lt;string&gt; | - | 否 | 夜间时段的秒针资源路径。<br/>未设置时使用secondHand的资源路径作为夜间时段的秒针资源路径。 |
| digitRadiusRatio | number | 0.7 | 否 | 表盘数字中心到表盘中心距离&nbsp;/&nbsp;表盘资源边长的一半。<br/>- 有效范围为(0,&nbsp;1]。<br/>- 该参数用于计算表盘数字在表盘上距离圆心的位置。<br/>- 该参数可以保证同一套表盘资源在不同组件尺寸下都有同样的相对位置，而不需要针对每个组件尺寸都重新调整数字位置。<br/>- 该参数设为1时数字会有部分区域超出表盘，建议结合表盘区域合理设置digitRadiusRatio。 | | 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/>- 该参数可以保证同一套表盘资源在不同组件尺寸下都有同样的相对大小，而不需要针对每个组件尺寸都重新调整字号。 | | digitSizeRatio | number | 0.08 | 否 | 表盘数字尺寸/表盘资源边长。<br/>- 有效范围为(0,&nbsp;0.142]。<br/>- 该参数用于计算表盘数字相对表盘尺寸的大小。<br/>- 该参数可以保证同一套表盘资源在不同组件尺寸下都有同样的相对大小，而不需要针对每个组件尺寸都重新调整字号。 |
![clock](figures/clock.png) ![clock](figures/clock.png)
...@@ -46,19 +46,19 @@ ...@@ -46,19 +46,19 @@
除支持[通用样式](js-service-widget-common-styles.md)之外，还支持如下样式： 除支持[通用样式](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} | 每个整点触发该事件 | | hour | {hour:&nbsp;number} | 每个整点触发该事件 |
...@@ -101,7 +101,6 @@ ...@@ -101,7 +101,6 @@
```json ```json
// xxx.json
{ {
"data": { "data": {
"clockconfig": { "clockconfig": {
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-input.md
浏览文件 @ 000558b9
...@@ -11,12 +11,12 @@ ...@@ -11,12 +11,12 @@
除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性： 除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------- | ------- | ----- | ---- | ---------------------------------------- |
| type | string | radio | 是 | input组件类型，当前仅支持radio类型：<br/>-&nbsp;"radio"：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个； | | type | string | radio | 是 | input组件类型，当前仅支持radio类型：<br/>-&nbsp;"radio"：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个； |
| checked | boolean | false | 否 | 当前组件是否选中。 | | checked | boolean | false | 否 | 当前组件是否选中。 |
| name | string | - | 否 | input组件的名称。 | | name | string | - | 否 | input组件的名称。 |
| value | string | - | 否 | input组件的value值，类型为radio时必填且相同name值的选项该值唯一。 | | value | string | - | 否 | input组件的value值，类型为radio时必填且相同name值的选项该值唯一。 |
## 样式 ## 样式
...@@ -26,10 +26,10 @@ ...@@ -26,10 +26,10 @@
## 事件 ## 事件
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------ | ------------------ | ---------------------------------------- |
| change | $event.checkedItem | radio单选框的checked状态发生变化时触发该事件，返回选中的组件value值。 | | change | $event.checkedItem | radio单选框的checked状态发生变化时触发该事件，返回选中的组件value值。 |
| click | - | 点击动作触发该事件。 | | click | - | 点击动作触发该事件。 |
## 示例 ## 示例
...@@ -57,7 +57,6 @@ ...@@ -57,7 +57,6 @@
```json ```json
// xxx.json
{ {
"actions": { "actions": {
"onRadioChange":{ "onRadioChange":{
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-config-file.md
浏览文件 @ 000558b9
...@@ -4,11 +4,11 @@ ...@@ -4,11 +4,11 @@
js标签中包含了实例名称、窗口样式和卡片页面信息。 js标签中包含了实例名称、窗口样式和卡片页面信息。
| 标签 | 类型 | 默认值 | 必填 | 描述 | | 标签 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ------- | ---- | --------------------------- |
| name | String | default | 是 | 标识JS实例的名字。 | | name | String | default | 是 | 标识JS实例的名字。 |
| pages | Array | - | 是 | 路由信息，详见“[pages](#pages)”。 | | pages | Array | - | 是 | 路由信息，详见“[pages](#pages)”。 |
| window | Object | - | 否 | 窗口信息，详见“[window](#window)”。 | | window | Object | - | 否 | 窗口信息，详见“[window](#window)”。 |
> **说明：** > **说明：**
> name、pages、window等标签配置需在[配置文件]()中的“js”标签中完成设置。 > name、pages、window等标签配置需在[配置文件]()中的“js”标签中完成设置。
...@@ -29,9 +29,9 @@ js标签中包含了实例名称、窗口样式和卡片页面信息。 ...@@ -29,9 +29,9 @@ js标签中包含了实例名称、窗口样式和卡片页面信息。
> **说明：** > **说明：**
> - pages列表中仅包含一个页面。 > - pages列表中仅包含一个页面。
> >
> - 页面文件名不能使用组件名称，比如：text.hml、button.hml等。 > - 页面文件名不能使用组件名称，比如：text.hml、button.hml等。
## window ## window
...@@ -43,16 +43,15 @@ window用于定义与显示窗口相关的配置。对于卡片尺寸适配问 ...@@ -43,16 +43,15 @@ window用于定义与显示窗口相关的配置。对于卡片尺寸适配问
- 设置autoDesignWidth为true，此时designWidth字段将会被忽略，渲染组件和布局时按屏幕密度进行缩放。屏幕逻辑宽度由设备宽度和屏幕密度自动计算得出，在不同设备上可能不同，请使用相对布局来适配多种设备。例如：在466\*466分辨率，320dpi的设备上，屏幕密度为2（以160dpi为基准），1px等于渲染出的2物理像素。 - 设置autoDesignWidth为true，此时designWidth字段将会被忽略，渲染组件和布局时按屏幕密度进行缩放。屏幕逻辑宽度由设备宽度和屏幕密度自动计算得出，在不同设备上可能不同，请使用相对布局来适配多种设备。例如：在466\*466分辨率，320dpi的设备上，屏幕密度为2（以160dpi为基准），1px等于渲染出的2物理像素。
> **说明：** > **说明：**
> - 组件样式中&lt;length&gt;类型的默认值，按屏幕密度进行计算和绘制，如：在屏幕密度为2（以160dpi为基准）的设备上，默认&lt;length&gt;为1px时，设备上实际渲染出2物理像素。 > - 组件样式中&lt;length&gt;类型的默认值，按屏幕密度进行计算和绘制，如：在屏幕密度为2（以160dpi为基准）的设备上，默认&lt;length&gt;为1px时，设备上实际渲染出2物理像素。
> >
> - autoDesignWidth、designWidth的设置不影响默认值计算方式和绘制结果。 > - autoDesignWidth、designWidth的设置不影响默认值计算方式和绘制结果。
| 属性 | 类型 | 必填 | 默认值 | 描述 | | 属性 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | --------------- | ------- | ---- | ----- | ---------------------------------------- |
| designWidth | number | 否 | 150px | 页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。 | | designWidth | number | 否 | 150px | 页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。 |
| autoDesignWidth | boolean | 否 | false | 页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。 | | autoDesignWidth | boolean | 否 | false | 页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。 |
示例如下： 示例如下：
```
{ {
... ...
"window": { "window": {
...@@ -60,7 +59,6 @@ window用于定义与显示窗口相关的配置。对于卡片尺寸适配问 ...@@ -60,7 +59,6 @@ window用于定义与显示窗口相关的配置。对于卡片尺寸适配问
} }
... ...
} }
```
## 示例 ## 示例
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-list.md
浏览文件 @ 000558b9
...@@ -21,37 +21,37 @@ ...@@ -21,37 +21,37 @@
除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性： 除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------- | -------------- | ------- | ---- | ---------------------------------------- |
| cachedcount | number | 0 | 否 | 长列表延迟加载时list-item最少缓存数量。 | | cachedcount | number | 0 | 否 | 长列表延迟加载时list-item最少缓存数量。 |
| scrollbar | string | off | 否 | 侧边滑动栏的显示模式（当前只支持纵向）：<br/>-&nbsp;off：不显示。<br/>-&nbsp;auto：按需显示(触摸时显示，2s后消失)。<br/>-&nbsp;on：常驻显示。 | | 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：滑动到边缘后无效果。 | | 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。 | | 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：圆形。 | | 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时播放过程动效。 | | updateeffect | boolean | false | 否 | 用于设置当list内部的item发生删除或新增时是否支持动效。<br/>-&nbsp;false：新增删除item时无过渡动效。<br/>-&nbsp;true：新增删除item时播放过程动效。 |
| initialindex | number | 0 | 否 | 用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。 | | initialindex | number | 0 | 否 | 用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。 |
| initialoffset | &lt;length&gt; | 0 | 否 | 用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。 | | initialoffset | &lt;length&gt; | 0 | 否 | 用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。 |
| selected | string | - | 否 | 指定当前列表中被选中激活的项，可选值为list-item的section属性值。 | | selected | string | - | 否 | 指定当前列表中被选中激活的项，可选值为list-item的section属性值。 |
## 样式 ## 样式
除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式： 除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------- | ---------------------------------------- | ----------- | ---- | ---------------------------------------- |
| divider-color | &lt;color&gt; | transparent | 否 | item分隔线颜色，仅当list的divider属性为true时生效。 | | divider-color | &lt;color&gt; | transparent | 否 | item分隔线颜色，仅当list的divider属性为true时生效。 |
| divider-height | &lt;length&gt; | 1 | 否 | 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-length | &lt;length&gt; | 主轴宽度 | 否 | item分隔线长度，不设置时最大长度为主轴宽度，具体长度取决于divider-origin，仅当list的divider属性为true时生效。 |
| divider-origin | &lt;length&gt; | 0 | 否 | item分隔线相对于item主轴起点位置的偏移量，仅当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。 | | flex-direction | string | column | 否 | 设置flex容器主轴的方向，指定flex项如何放置在flex容器中，可选值为：<br/>-&nbsp;column：主轴为纵向。<br/>-&nbsp;row：主轴为横向。<br/>其他组件默认值为row，在list组件中默认值为column。 |
| columns | number | 1 | 否 | list交叉轴方向的显示列数，默认为1列。<br/>设置多列时，在list交叉轴上进行均分，每一列大小相同。 | | 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样式作用在每一列的子元素上，列与列之间采用均分方式布局。 | | 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的视口主轴方向长度的百分比。 | | item-extent | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 设置内部item为固定大小，设置为百分比格式时，指相对于list的视口主轴方向长度的百分比。 |
| fade-color | &lt;color&gt; | grey | 否 | 设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。 | | fade-color | &lt;color&gt; | grey | 否 | 设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。 |
| scrollbar-color | &lt;color&gt; | - | 否 | 设置滚动条的颜色。 | | scrollbar-color | &lt;color&gt; | - | 否 | 设置滚动条的颜色。 |
| scrollbar-width | &lt;length&gt; | - | 否 | 设置滚动条的宽度。 | | scrollbar-width | &lt;length&gt; | - | 否 | 设置滚动条的宽度。 |
| scrollbar-offset | &lt;length&gt; | 0 | 否 | 设置滚动条距离List默认位置的偏移量，只支持正数，默认位置在List右边缘，可以通过这个偏移量调整滚动条的水平位置，如果滚动条绘制在list外部，而list父组件有裁剪，会导致滚动条被裁剪。 | | scrollbar-offset | &lt;length&gt; | 0 | 否 | 设置滚动条距离List默认位置的偏移量，只支持正数，默认位置在List右边缘，可以通过这个偏移量调整滚动条的水平位置，如果滚动条绘制在list外部，而list父组件有裁剪，会导致滚动条被裁剪。 |
## 事件 ## 事件
...@@ -76,7 +76,6 @@ ...@@ -76,7 +76,6 @@
```json ```json
// xxx.json
{ {
"data": { "data": {
"todolist": [{ "todolist": [{
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-swiper.md
浏览文件 @ 000558b9
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
> **说明：** > **说明：**
> >
>从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
...@@ -14,26 +14,26 @@ ...@@ -14,26 +14,26 @@
除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性： 除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | --------- | ------- | ----- | ---- | ---------------------------------------- |
| index | number | 0 | 否 | 当前在容器中显示的子组件的索引值。 | | index | number | 0 | 否 | 当前在容器中显示的子组件的索引值。 |
| indicator | boolean | true | 否 | 是否启用导航点指示器，默认true。 | | indicator | boolean | true | 否 | 是否启用导航点指示器，默认true。 |
| digital | boolean | false | 否 | 是否启用数字导航点，默认为false。<br/>必须设置indicator时才能生效数字导航点。 | | digital | boolean | false | 否 | 是否启用数字导航点，默认为false。<br/>必须设置indicator时才能生效数字导航点。 |
| loop | boolean | true | 否 | 是否开启循环滑动。 | | loop | boolean | true | 否 | 是否开启循环滑动。 |
| duration | number | - | 否 | 子组件切换的动画时长。 | | duration | number | - | 否 | 子组件切换的动画时长。 |
| vertical | boolean | false | 否 | 是否为纵向滑动，纵向滑动时采用纵向的指示器。 | | vertical | boolean | false | 否 | 是否为纵向滑动，纵向滑动时采用纵向的指示器。 |
## 样式 ## 样式
除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式： 除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------------------------- | ---------------------------------------- | ---- | ---- | -------------------- |
| indicator-color | &lt;color&gt; | - | 否 | 导航点指示器的填充颜色。 | | indicator-color | &lt;color&gt; | - | 否 | 导航点指示器的填充颜色。 |
| indicator-selected-color | &lt;color&gt; | - | 否 | 导航点指示器选中的颜色。 | | indicator-selected-color | &lt;color&gt; | - | 否 | 导航点指示器选中的颜色。 |
| indicator-size | &lt;length&gt; | 4px | 否 | 导航点指示器的直径大小。 | | indicator-size | &lt;length&gt; | 4px | 否 | 导航点指示器的直径大小。 |
| indicator-top\|left\|right\|bottom | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 导航点指示器在swiper中的相对位置。 | | indicator-top\|left\|right\|bottom | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 导航点指示器在swiper中的相对位置。 |
## 事件 ## 事件
...@@ -87,7 +87,6 @@ ...@@ -87,7 +87,6 @@
```json ```json
// xxx.json
{ {
"data": { "data": {
"index": 1 "index": 1
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-events.md
浏览文件 @ 000558b9
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
> **说明：** > **说明：**
> >
> 事件名不支持大写字母。 > 事件名不支持大写字母。
## 子组件comp示例： ## 子组件comp示例：
...@@ -43,7 +43,6 @@ ...@@ -43,7 +43,6 @@
```json ```json
// comp.json
{ {
"data": { "data": {
}, },
...@@ -84,7 +83,6 @@ ...@@ -84,7 +83,6 @@
```json ```json
// xxx.json
{ {
"data": { "data": {
}, },
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-props.md
浏览文件 @ 000558b9
...@@ -35,7 +35,6 @@ ...@@ -35,7 +35,6 @@
```json ```json
// comp.json
{ {
"data": { "data": {
"progress": { "progress": {
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-multiple-languages.md
浏览文件 @ 000558b9
...@@ -59,19 +59,19 @@ ...@@ -59,19 +59,19 @@
在应用中使用$t方法引用资源，$t既可以在hml中使用，也可以在js中使用。系统将根据当前语言环境和指定的资源路径（通过$t的path参数设置），显示对应语言的资源文件中的内容。 在应用中使用$t方法引用资源，$t既可以在hml中使用，也可以在js中使用。系统将根据当前语言环境和指定的资源路径（通过$t的path参数设置），显示对应语言的资源文件中的内容。
**表1** 简单格式化 **表1** 简单格式化
| 属性 | 类型 | 参数 | 必填 | 描述 | | 属性 | 类型 | 参数 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | -------- | -------- | ---- | -------------------------------------- |
| $t | Function | 请见$t参数说明 | 是 | 根据系统语言完成简单的替换：this.$t('strings.hello') | | $t | Function | 请见$t参数说明 | 是 | 根据系统语言完成简单的替换：this.$t('strings.hello') |
**表2** $t参数说明 **表2** $t参数说明
| 参数 | 类型 | 必填 | 描述 | | 参数 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- |
| path | string | 是 | 资源路径 | | path | string | 是 | 资源路径 |
- 简单格式化示例代码 - 简单格式化示例代码
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -81,21 +81,22 @@ ...@@ -81,21 +81,22 @@
``` ```
- 单复数格式化方法 - 单复数格式化方法
**表3** 单复数格式化
**表3** 单复数格式化
| 属性 | 类型 | 参数 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | 属性 | 类型 | 参数 | 必填 | 描述 |
| $tc | Function | 请见$tc参数说明 | 是 | 根据系统语言完成单复数替换：this.$tc('strings.plurals')<br/>定义资源的内容通过json格式的key为“zero”、“one”、“two”、“few”、“many”和“other”区分。 | | ---- | -------- | --------- | ---- | ---------------------------------------- |
| $tc | Function | 请见$tc参数说明 | 是 | 根据系统语言完成单复数替换：this.$tc('strings.plurals')<br/>定义资源的内容通过json格式的key为“zero”、“one”、“two”、“few”、“many”和“other”区分。 |
**表4** $tc参数说明
**表4** $tc参数说明
| 参数 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | | 参数 | 类型 | 必填 | 描述 |
| path | string | 是 | 资源路径 | | ----- | ------ | ---- | ----- |
| count | number | 是 | 要表达的值 | | path | string | 是 | 资源路径 |
| count | number | 是 | 要表达的值 |
- 单复数格式化示例代码 - 单复数格式化示例代码
```html ```html
<!--xxx.hml--> <!--xxx.hml-->
<div> <div>
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-syntax-hml.md
浏览文件 @ 000558b9
...@@ -35,7 +35,6 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组 ...@@ -35,7 +35,6 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
```json ```json
// xxx.json
{ {
"data": { "data": {
"content": "Hello World!", "content": "Hello World!",
...@@ -49,9 +48,9 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组 ...@@ -49,9 +48,9 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
> **说明：** > **说明：**
> - key值支持对象操作符和数组操作符，如{{key.value}}、{{key[0]}}。 > - key值支持对象操作符和数组操作符，如{{key.value}}、{{key[0]}}。
> >
> - 从 API Version 6 开始支持字符串拼接、逻辑运算和三元表达式。 > - 从 API Version 6 开始支持字符串拼接、逻辑运算和三元表达式。
> - 字符串拼接： > - 字符串拼接：
> - 支持变量跟变量：{{key1}}{{key2}}等 > - 支持变量跟变量：{{key1}}{{key2}}等
> - 支持常量跟变量： "my name is {{name}}， i am from {{city}}." "key1 {{key1}}" > - 支持常量跟变量： "my name is {{name}}， i am from {{city}}." "key1 {{key1}}"
...@@ -70,18 +69,17 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组 ...@@ -70,18 +69,17 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
卡片仅支持click通用事件，事件的定义只能是直接命令式，事件定义必须包含action字段，用以说明事件类型。卡片支持两种事件类型：跳转事件(router)和消息事件(message)。跳转事件可以跳转到卡片提供方的OpenHarmony应用，消息事件可以将开发者自定义信息传递给卡片提供方。事件参数支持变量，变量以"{{}}"修饰。跳转事件中若定义了params字段，则在被拉起应用的onStart的intent中，可用"params"作为key将跳转事件定义的params字段的值取到。 卡片仅支持click通用事件，事件的定义只能是直接命令式，事件定义必须包含action字段，用以说明事件类型。卡片支持两种事件类型：跳转事件(router)和消息事件(message)。跳转事件可以跳转到卡片提供方的OpenHarmony应用，消息事件可以将开发者自定义信息传递给卡片提供方。事件参数支持变量，变量以"{{}}"修饰。跳转事件中若定义了params字段，则在被拉起应用的onStart的intent中，可用"params"作为key将跳转事件定义的params字段的值取到。
- 跳转事件格式 - 跳转事件格式
通过定义ability名称和携带的参数字段params直接跳转，可用"params"作为key提取到跳转事件定义的params字段值。 通过定义ability名称和携带的参数字段params直接跳转，可用"params"作为key提取到跳转事件定义的params字段值。
| 选择器 | 样例 | 默认值 | 样例描述 | | 选择器 | 样例 | 默认值 | 样例描述 |
| -------- | -------- | -------- | -------- | | ----------- | ------ | -------- | ---------------------------------------- |
| action | string | "router" | 事件类型。<br/>- "router"：用于应用跳转。<br/>- "message"：自定义点击事件。 | | action | string | "router" | 事件类型。<br/>- "router"：用于应用跳转。<br/>- "message"：自定义点击事件。 |
| abilityName | string | - | 跳转ability名。 | | abilityName | string | - | 跳转ability名。 |
| params | Object | - | 跳转应用携带的额外参数。 | | params | Object | - | 跳转应用携带的额外参数。 |
```json ```json
// xxx.json
{ {
"data": { "data": {
"mainAbility": "xxx.xxx.xxx" "mainAbility": "xxx.xxx.xxx"
...@@ -95,30 +93,29 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组 ...@@ -95,30 +93,29 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
} }
} }
``` ```
也可以使用want格式绑定参数跳转到目标应用，want定义了ability名称、包名、携带的参数字段等。 也可以使用want格式绑定参数跳转到目标应用，want定义了ability名称、包名、携带的参数字段等。
| 选择器 | 类型 | 默认值 | 样例描述 | | 选择器 | 类型 | 默认值 | 样例描述 |
| ------ | ------ | -------- | ------------------------------------------------------------ | | ------ | ------ | -------- | ---------------------------------------- |
| action | string | "router" | 事件类型。<br>- "router"：用于应用跳转。<br>- "message"：自定义点击事件。 | | action | string | "router" | 事件类型。<br>- "router"：用于应用跳转。<br>- "message"：自定义点击事件。 |
| want | Object | - | 跳转目标应用的信息，参考want格式表。 | | want | Object | - | 跳转目标应用的信息，参考want格式表。 |
**表1** want格式 **表1** want格式
| 选择器 | 类型 | 默认值 | 样例描述 | | 选择器 | 类型 | 默认值 | 样例描述 |
| ----------- | -------------------- | ------------ | ------------------------------------------------------------ | | ----------- | -------------------- | ------------ | ---------------------------------------- |
| bundleName | string | - | 表示包描述。如果在Want中同时指定了BundleName和AbilityName，则Want可以直接匹配到指定的Ability。 | | bundleName | string | - | 表示包描述。如果在Want中同时指定了BundleName和AbilityName，则Want可以直接匹配到指定的Ability。 |
| abilityName | string | - | 表示待启动的Ability名称。 | | abilityName | string | - | 表示待启动的Ability名称。 |
| action | string | - | 表示action选项描述。 | | action | string | - | 表示action选项描述。 |
| uri | string | - | 表示Uri描述。如果在Want中指定了Uri，则Want将匹配指定的Uri信息，包括scheme, schemeSpecificPart, authority和path信息。 | | 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说明)。 | | flags | number | - | 表示处理Want的方式。默认传数字，具体参考[flags说明](../apis/js-apis-featureAbility.md#flags说明)。 |
| entities | Array\<string> | - | 类别，用于指定Intent的操作类别。 | | entities | Array\<string> | - | 类别，用于指定Intent的操作类别。 |
| parameters | {[key: string]: any} | - | 表示WantParams描述。 | | parameters | {[key: string]: any} | - | 表示WantParams描述。 |
```json ```json
// xxx.json
{ {
"data": { "data": {
"mainAbility": "xxx.xxx.xxx" "mainAbility": "xxx.xxx.xxx"
...@@ -141,19 +138,18 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组 ...@@ -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)接口接收相关参数。 在API Version 8，want参数需要在app.js或app.ets文件的onCreate方法中调用[featureAbility.getWant](../apis/js-apis-featureAbility.md#featureabilitygetwant-1)接口接收相关参数。
- 消息事件格式 - 消息事件格式
| 选择器 | 样例 | 默认值 | 样例描述 | | 选择器 | 样例 | 默认值 | 样例描述 |
| -------- | -------- | -------- | -------- | | ------ | ------ | ------- | ------------ |
| action | string | message | 表示事件类型。 | | action | string | message | 表示事件类型。 |
| params | Object | - | 跳转应用携带的额外参数。 | | params | Object | - | 跳转应用携带的额外参数。 |
```json ```json
// xxx.json
{ {
"actions": { "actions": {
"activeEvent": { "activeEvent": {
...@@ -165,7 +161,7 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组 ...@@ -165,7 +161,7 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
``` ```
- 绑定路由事件和消息事件 - 绑定路由事件和消息事件
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -201,7 +197,6 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组 ...@@ -201,7 +197,6 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
```json ```json
// xxx.json
{ {
"data": { "data": {
"array": [ "array": [
...@@ -221,15 +216,15 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有 ...@@ -221,15 +216,15 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
- for="(i, v) in array"：其中元素索引为i，元素变量为v，遍历数组对象array。 - for="(i, v) in array"：其中元素索引为i，元素变量为v，遍历数组对象array。
> **说明：** > **说明：**
> - 数组中的每个元素必须存在tid指定的数据属性，否则运行时可能会导致异常。 > - 数组中的每个元素必须存在tid指定的数据属性，否则运行时可能会导致异常。
> >
> - 数组中被tid指定的属性要保证唯一性，如果不是则会造成性能损耗。比如，示例中只有id和name可以作为tid字段，因为它们属于唯一字段。 > - 数组中被tid指定的属性要保证唯一性，如果不是则会造成性能损耗。比如，示例中只有id和name可以作为tid字段，因为它们属于唯一字段。
> >
> - tid不支持表达式。 > - tid不支持表达式。
> >
> - 不支持for嵌套使用。 > - 不支持for嵌套使用。
> >
> - for对应的变量数组，当前要求数组中的object是相同类型，不支持多种object类型混合写在一个数组中。 > - for对应的变量数组，当前要求数组中的object是相同类型，不支持多种object类型混合写在一个数组中。
## 条件渲染 ## 条件渲染
...@@ -250,7 +245,6 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有 ...@@ -250,7 +245,6 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
```json ```json
// xxx.json
{ {
"data": { "data": {
"show": false, "show": false,
...@@ -269,7 +263,6 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有 ...@@ -269,7 +263,6 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
```json ```json
// xxx.json
{ {
"data": { "data": {
"visible": false "visible": false
...@@ -295,7 +288,6 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有 ...@@ -295,7 +288,6 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
```json ```json
// xxx.json
{ {
"data": { "data": {
"show": true "show": true
......
zh-cn/application-dev/ui/ui-ts-basic-components-button.md
浏览文件 @ 000558b9
...@@ -167,26 +167,26 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) ...@@ -167,26 +167,26 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
``` ```
![zh-cn_image_0000001235626467](figures/zh-cn_image_0000001235626467.png) ​ ![zh-cn_image_0000001235626467](figures/zh-cn_image_0000001235626467.png)
- 用于表单的提交 - 用于表单的提交
在用户登录/注册页面，用户的登录或注册的提交操作会用按钮。 在用户登录/注册页面，用户的登录或注册的提交操作会用按钮。
```ts ```ts
// xxx.js // xxx.js
@Entry @Entry
@Component @Component
struct ButtonCase2 { struct ButtonCase2 {
build() { build() {
Column() { Column() {
TextInput({ placeholder: 'input your username' }).margin({ top: 20 }) TextInput({ placeholder: 'input your username' }).margin({ top: 20 })
TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 }) TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 })
Button('Register').width(300).margin({ top: 20 }) Button('Register').width(300).margin({ top: 20 })
}.padding(20) }.padding(20)
}
} }
}
``` ```
![zh-cn_image_0000001190466492](figures/zh-cn_image_0000001190466492.png)
​ ![zh-cn_image_0000001190466492](figures/zh-cn_image_0000001190466492.png)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或