未验证 提交 a956ace9 编写于 作者: O openharmony_ci 提交者: Gitee

!15308 文档中标注ArkTS卡片所支持的API

Merge pull request !15308 from sunbees/arktsCard
......@@ -2,6 +2,8 @@
## Color
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 颜色名称 | 颜色值 | 颜色示意 |
| ------------------------ | -------- | ------------------------------------------------------------ |
| Black | 0x000000 | ![zh-cn_image_0000001219864153](figures/zh-cn_image_0000001219864153.png) |
......@@ -19,6 +21,8 @@
## ImageFit
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| --------- | ------------------------------------------------------------ |
| Contain | 保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内。 |
......@@ -30,6 +34,8 @@
## BorderStyle
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------ | ----------------------------------------------- |
| Dotted | 显示为一系列圆点,圆点半径为borderWidth的一半。 |
......@@ -38,6 +44,8 @@
## LineJoinStyle
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ----- | -------------------- |
| Bevel | 使用斜角连接路径段。 |
......@@ -46,6 +54,8 @@
## TouchType
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------ | ------------------------------ |
| Down | 手指按下时触发。 |
......@@ -55,6 +65,8 @@
## MouseButton
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------- | ---------------- |
| Left | 鼠标左键。 |
......@@ -66,6 +78,8 @@
## MouseAction
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------- | -------------- |
| Press | 鼠标按键按下。 |
......@@ -75,6 +89,8 @@
## Curve
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------------------- | ------------------------------------------------------------ |
| Linear | 表示动画从头到尾的速度都是相同的。 |
......@@ -93,6 +109,8 @@
## AnimationStatus
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------- | ------------------ |
| Initial | 动画初始状态。 |
......@@ -102,6 +120,8 @@
## FillMode
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| --------- | ------------------------------------------------------------ |
| None | 动画未执行时不会将任何样式应用于目标,动画播放完成之后恢复初始默认状态。 |
......@@ -111,6 +131,8 @@
## PlayMode
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ---------------- | ------------------------------------------------------------ |
| Normal | 动画按正常播放。 |
......@@ -120,6 +142,8 @@
## KeyType
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ---- | ---------- |
| Down | 按键按下。 |
......@@ -127,6 +151,8 @@
## KeySource
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| -------- | -------------------- |
| Unknown | 输入设备类型未知。 |
......@@ -136,16 +162,18 @@
| 名称 | 描述 |
| -------- | ---------------------- |
| Top | 竖直方向上边缘 |
| Center<sup>(deprecated) </sup> | 竖直方向居中位置<br/> 从API version 9开始废弃 |
| Bottom | 竖直方向下边缘 |
| Top | 竖直方向上边缘<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| Center<sup>(deprecated) </sup> | 竖直方向居中位置<br/> 从API version 9开始废弃 |
| Bottom | 竖直方向下边缘<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| Baseline<sup>(deprecated) </sup> | 交叉轴方向文本基线位置<br/> 从API version 9开始废弃 |
| Start | 水平方向起始位置 |
| Middle<sup>(deprecated) </sup> | 水平方向居中位置<br/> 从API version 9开始废弃 |
| End | 水平方向末尾位置 |
| Start | 水平方向起始位置<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| Middle<sup>(deprecated) </sup> | 水平方向居中位置<br/> 从API version 9开始废弃 |
| End | 水平方向末尾位置<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## Week
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| -------- | ---------------------- |
| Mon | 星期一 |
......@@ -158,6 +186,8 @@
## Direction
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ---- | ---------------------- |
| Ltr | 元素从左到右布局。 |
......@@ -166,6 +196,8 @@
## BarState
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ---- | -------------------------------- |
| Off | 不显示。 |
......@@ -174,6 +206,8 @@
## EdgeEffect
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------ | ------------------------------------------------------------ |
| Spring | 弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹。 |
......@@ -182,6 +216,8 @@
## Alignment
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ----------- | ---------------- |
| TopStart | 顶部起始端。 |
......@@ -196,6 +232,8 @@
## TransitionType
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------ | -------------------------------------------------- |
| All | 指定当前的Transition动效生效在组件的所有变化场景。 |
......@@ -204,6 +242,8 @@
## RelateType
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------ | ------------------------------- |
| FILL | 缩放当前子组件以填充满父组件 |
......@@ -211,6 +251,8 @@
## Visibility
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------- | -------------------------------- |
| Hidden | 隐藏,但参与布局进行占位。 |
......@@ -219,6 +261,8 @@
## LineCapStyle
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------ | -------------------- |
| Butt | 线条两端为平行线,不额外扩展。 |
......@@ -227,6 +271,8 @@
## Axis
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ---------- | ------------ |
| Vertical | 方向为纵向。 |
......@@ -234,6 +280,8 @@
## HorizontalAlign
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------ | ------------------------ |
| Start | 按照语言方向起始端对齐。 |
......@@ -242,6 +290,8 @@
## FlexAlign
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------------ | ------------------------------------------------------------ |
| Start | 元素在主轴方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐。 |
......@@ -253,6 +303,8 @@
## ItemAlign
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| -------- | ------------------------------------------------------------ |
| Auto | 使用Flex容器中默认配置。 |
......@@ -264,6 +316,8 @@
## FlexDirection
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------------- | ------------------------------ |
| Row | 主轴与行方向一致作为布局模式。 |
......@@ -273,6 +327,8 @@
## FlexWrap
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ----------- | ------------------------------------------------- |
| NoWrap | Flex容器的元素单行/列布局,子项不允许超出容器。 |
......@@ -281,6 +337,8 @@
## VerticalAlign
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------ | ------------------------ |
| Top | 顶部对齐。 |
......@@ -289,6 +347,8 @@
## ImageRepeat
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| -------- | -------------------------- |
| X | 只在水平轴上重复绘制图片。 |
......@@ -298,6 +358,8 @@
## ImageSize
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 类型 | 描述 |
| ------- | ------------------------------------------------------------ |
| Cover | 默认值,保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。 |
......@@ -306,6 +368,8 @@
## GradientDirection
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ----------- | ---------- |
| Left | 从右向左。 |
......@@ -320,6 +384,8 @@
## SharedTransitionEffectType
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ----------- | ---------- |
| Static | 目标页面元素的位置保持不变,可以配置透明度动画。目前,只有为重定向到目标页面而配置的静态效果才会生效。 |
......@@ -327,6 +393,8 @@
## FontStyle
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------ | ---------------- |
| Normal | 标准的字体样式。 |
......@@ -334,6 +402,8 @@
## FontWeight
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------- | -------------- |
| Lighter | 字体较细。 |
......@@ -345,6 +415,8 @@
## TextAlign
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------ | -------------- |
| Start | 水平对齐首部。 |
......@@ -353,6 +425,8 @@
## TextOverflow
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| -------- | -------------------------------------- |
| Clip | 文本超长时进行裁剪显示。 |
......@@ -361,6 +435,8 @@
## TextDecorationType
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ----------- | ------------------ |
| Underline | 文字下划线修饰。 |
......@@ -370,6 +446,8 @@
## TextCase
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| --------- | -------------------- |
| Normal | 保持文本原有大小写。 |
......@@ -378,6 +456,8 @@
## ResponseType<sup>8+</sup>
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ---------- | -------------------------- |
| LongPress | 通过长按触发菜单弹出。 |
......@@ -385,6 +465,8 @@
## HoverEffect<sup>8+</sup>
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| --------- | ---------------------------- |
| Auto | 使用组件的系统默认悬浮效果。 |
......@@ -394,6 +476,8 @@
## Placement<sup>8+</sup>
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------------- | ------------------------------------------------------------ |
| Left | 气泡提示位于组件左侧,与组件左侧中心对齐。 |
......@@ -411,6 +495,8 @@
## CopyOptions<sup>9+</sup>
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ----------- | -------------------- |
| None | 不支持复制。 |
......@@ -419,6 +505,8 @@
## HitTestMode<sup>9+</sup>
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ----------- | -------------------- |
| Default | 自身节点和子节点都响应触摸事件的命中测试,但会阻止被该节点屏蔽的其他节点的命中测试。 |
......
......@@ -16,6 +16,8 @@
Blank(min?: number&nbsp;|&nbsp;string)
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
......@@ -28,7 +30,7 @@ Blank(min?: number&nbsp;|&nbsp;string)
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| color | [ResourceColor](ts-types.md#resourcecolor) | 设置空白填充的填充颜色。 |
| color | [ResourceColor](ts-types.md#resourcecolor) | 设置空白填充的填充颜色。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## 示例
......
......@@ -16,6 +16,8 @@
**方法1:** Button(options?: {type?: ButtonType, stateEffect?: boolean})
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
......@@ -28,6 +30,8 @@
使用文本内容创建相应的按钮组件,此时Button无法包含子组件。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
......@@ -40,10 +44,13 @@
| 名称 | 参数类型 | 描述 |
| ----------- | ----------- | --------------------------------- |
| type | ButtonType | 设置Button样式。<br/>默认值:ButtonType.Capsule |
| stateEffect | boolean | 按钮按下时是否开启按压态显示效果,当设置为false时,按压效果关闭。<br/>默认值:true |
| type | ButtonType | 设置Button样式。<br/>默认值:ButtonType.Capsule<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| stateEffect | boolean | 按钮按下时是否开启按压态显示效果,当设置为false时,按压效果关闭。<br/>默认值:true<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## ButtonType枚举说明
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------- | ------------------ |
| Capsule | 胶囊型按钮(圆角默认为高度的一半)。 |
......
......@@ -14,6 +14,8 @@
Checkbox(options?:&nbsp;{name?: string, group?: string })
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
......@@ -28,16 +30,16 @@ Checkbox(options?:&nbsp;{name?: string, group?: string })
| 名称 | 参数类型 | 描述 |
| ------------- | ------- | -------- |
| select | boolean | 设置多选框是否选中。<br/>默认值:false |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置多选框选中状态颜色。 |
| select | boolean | 设置多选框是否选中。<br/>默认值:false<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置多选框选中状态颜色。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## 事件
支持[通用事件](ts-universal-events-click.md)外,还支持以下事件:
| 名称 | 功能描述 |
| ----------| -------- |
|onChange(callback: (value: boolean) => void) | 当选中状态发生变化时,触发该回调。(只有手动触发且Checkbox状态改变时才会触发onChange回调)<br>- value为true时,表示已选中。<br>- value为false时,表示未选中。 |
| 名称 | 功能描述 |
| -------------------------------------------- | ------------------------------------------------------------ |
| onChange(callback: (value: boolean) => void) | 当选中状态发生变化时,触发该回调。(只有手动触发且Checkbox状态改变时才会触发onChange回调)<br>- value为true时,表示已选中。<br>- value为false时,表示未选中。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## 示例
......
......@@ -16,9 +16,9 @@ CheckboxGroup(options?: { group?: string })
创建多选框群组,可以控制群组内的Checkbox全选或者不全选,group值相同的Checkbox和CheckboxGroup为同一群组。
**参数:**
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
......@@ -30,8 +30,8 @@ CheckboxGroup(options?: { group?: string })
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| selectAll | boolean | 设置是否全选。<br/>默认值:false,若同组的Checkbox显式设置select,则Checkbox的优先级高。 |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置被选中或部分选中状态的颜色。 |
| selectAll | boolean | 设置是否全选。<br/>默认值:false,若同组的Checkbox显式设置select,则Checkbox的优先级高。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置被选中或部分选中状态的颜色。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## 事件
......@@ -39,9 +39,12 @@ CheckboxGroup(options?: { group?: string })
| 名称 | 功能描述 |
| -------- | -------- |
| onChange (callback: (event: [CheckboxGroupResult](#checkboxgroupresult对象说明)) => void ) |CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时,触发回调。(只有手动触发且Checkbox或CheckboxGroup状态改变时才会触发onChange回调)|
| onChange (callback: (event: [CheckboxGroupResult](#checkboxgroupresult对象说明)) => void ) |CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时,触发回调。(只有手动触发且Checkbox或CheckboxGroup状态改变时才会触发onChange回调)<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。|
## CheckboxGroupResult对象说明
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 类型 | 描述 |
| ------ | ------ | ------- |
| name | Array&lt;string&gt; | 群组内所有被选中的多选框名称。 |
......@@ -49,6 +52,8 @@ CheckboxGroup(options?: { group?: string })
## SelectStatus枚举说明
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ----- | -------------------- |
| All | 群组多选择框全部选择。 |
......
......@@ -18,6 +18,8 @@
DataPanel(options:{values: number[], max?: number, type?: DataPanelType})
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
......@@ -26,8 +28,10 @@ DataPanel(options:{values: number[], max?: number, type?: DataPanelType})
| max | number | 否 | -&nbsp;max大于0,表示数据的最大值。<br/>-&nbsp;max小于等于0,max等于value数组各项的和,按比例显示。<br/>默认值:100 |
| type<sup>8+</sup> | [DataPanelType](#datapaneltype枚举说明) | 否 | 数据面板的类型(不支持动态修改)。<br/>默认值:DataPanelType.Circle |
## DataPanelType枚举说明
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| -------| ------------ |
| Line | 线型数据面板。 |
......
......@@ -16,16 +16,18 @@
Divider()
从API version 9开始,该接口支持在ArkTS卡片中使用。
## 属性
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| ----------- | ---------- | ------------------ |
| vertical | boolean | 使用水平分割线还是垂直分割线。false:水平分割线;true:垂直分割线。<br/>默认值:false |
| color | [ResourceColor](ts-types.md#resourcecolor) | 分割线颜色。 |
| strokeWidth | number&nbsp;\|&nbsp;string | 分割线宽度。<br/>默认值:1 |
| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 分割线的端点样式。<br/>默认值:LineCapStyle.Butt |
| vertical | boolean | 使用水平分割线还是垂直分割线。false:水平分割线;true:垂直分割线。<br/>默认值:false<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| color | [ResourceColor](ts-types.md#resourcecolor) | 分割线颜色。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeWidth | number&nbsp;\|&nbsp;string | 分割线宽度。<br/>默认值:1<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 分割线的端点样式。<br/>默认值:LineCapStyle.Butt<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## 事件
......
......@@ -17,6 +17,8 @@
Gauge(options:{value: number, min?: number, max?: number})
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
......@@ -31,16 +33,18 @@ Gauge(options:{value: number, min?: number, max?: number})
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| value | number | 设置量规图的数据值,可用于动态修改量规图的数据值。<br/>默认值:0 |
| startAngle | number | 设置起始角度位置,时钟0点为0度,顺时针方向为正角度。<br/>默认值:0 |
| endAngle | number | 设置终止角度位置,时钟0点为0度,顺时针方向为正角度。<br/>默认值:360 |
| colors | Array&lt;[ColorStop](#colorstop)&gt; | 设置量规图的颜色,支持分段颜色设置。 |
| strokeWidth | Length | 设置环形量规图的环形厚度。 |
| value | number | 设置量规图的数据值,可用于动态修改量规图的数据值。<br/>默认值:0<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| startAngle | number | 设置起始角度位置,时钟0点为0度,顺时针方向为正角度。<br/>默认值:0<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| endAngle | number | 设置终止角度位置,时钟0点为0度,顺时针方向为正角度。<br/>默认值:360<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| colors | Array&lt;[ColorStop](#colorstop)&gt; | 设置量规图的颜色,支持分段颜色设置。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeWidth | Length | 设置环形量规图的环形厚度。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## ColorStop
颜色断点类型,用于描述渐进色颜色断点。
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 类型定义 | 描述 |
| --------- | -------------------- | ------------------------------------------------------------ |
| ColorStop | [[ResourceColor](ts-types.md#resourcecolor),&nbsp;number] | 描述渐进色颜色断点类型,第一个参数为颜色值,若设置为非颜色类型,则置为黑色。第二个参数为颜色所占比重,若设置为负数或是非数值类型,则将比重置为0,该颜色不显示。 |
......
......@@ -23,11 +23,13 @@ Image(src: string | PixelMap | Resource)
通过图片数据源获取图片,用于后续渲染展示。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 是 | 图片的数据源,支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时,例如`Image("common/test.jpg")`,不支持跨包/跨模块调用该Image组件,建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]``Base64`字符串数据。<br/>\- 支持`datashare://`路径前缀的字符串,用于访问通过data&nbsp;ability提供的图片路径。图片加载前需要申请[媒体库功能相关权限](../../file-management/medialibrary-overview.md#申请媒体库功能相关权限)<br/>\- 支持file:///data/storage路径前缀的字符串,用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。 |
| src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 是 | 图片的数据源,支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时,例如`Image("common/test.jpg")`,不支持跨包/跨模块调用该Image组件,建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]``Base64`字符串数据。<br/>\- 支持`datashare://`路径前缀的字符串,用于访问通过data&nbsp;ability提供的图片路径。图片加载前需要申请[媒体库功能相关权限](../../file-management/medialibrary-overview.md#申请媒体库功能相关权限)<br/>\- 支持file:///data/storage路径前缀的字符串,用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。<br/>**说明:**<br/>- ArkTS卡片上支持gif图片格式动效,但仅在显示时播放一次。<br/>- ArkTS卡片上不支持`http://`等网络相关路径前缀、`datashare://`路径前缀以及`file://data/storage`路径前缀的字符串<br/>- ArkTS卡片上不支持&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)类型 |
## 属性
......@@ -35,20 +37,20 @@ Image(src: string | PixelMap | Resource)
| 名称 | 参数类型 | 描述 |
| --------------------- | ------------------------------------------------------- | ------------------------------------------------------------ |
| alt | string \| [Resource](ts-types.md#resource类型) | 加载时显示的占位图,支持本地图片。 |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | 设置图片的缩放类型。<br/>默认值:ImageFit.Cover |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | 设置图片的重复样式。<br/>默认值:ImageRepeat.NoRepeat<br/>**说明:**<br/>svg类型图源不支持该属性。 |
| interpolation | [ImageInterpolation](#imageinterpolation) | 设置图片的插值效果,即减轻低清晰度图片在放大显示的时候出现的锯齿问题,仅针对图片放大插值。<br/>默认值:ImageInterpolation.None<br/>**说明:**<br/>svg类型图源不支持该属性。<br/>PixelMap资源不支持该属性。 |
| renderMode | [ImageRenderMode](#imagerendermode) | 设置图片渲染的模式。<br/>默认值:ImageRenderMode.Original<br/>**说明:**<br/>svg类型图源不支持该属性。 |
| sourceSize | {<br/>width:&nbsp;number,<br/>height:&nbsp;number<br/>} | 设置图片裁剪尺寸,将原始图片解码成pixelMap,指定尺寸的图片,单位为px。<br/>**说明:**<br/>PixelMap资源和SVG图片不支持该属性。 |
| matchTextDirection | boolean | 设置图片是否跟随系统语言方向,在RTL语言环境下显示镜像翻转显示效果。<br/>默认值:false |
| fitOriginalSize | boolean | 图片组件尺寸未设置时,其显示尺寸是否跟随图源尺寸。<br/>默认值:false |
| fillColor | [ResourceColor](ts-types.md#resourcecolor) | 填充颜色。设置的填充颜色会覆盖在图片上。仅对svg图源生效,设置后会替换svg图片的fill颜色。 |
| autoResize | boolean | 是否需要在图片解码过程中对图源做resize操作,该操作会根据显示区域的尺寸决定用于绘制的图源尺寸,有利于减少内存占用。<br/>默认值:true |
| syncLoad<sup>8+</sup> | boolean | 设置是否同步加载图片,默认是异步加载。同步加载时阻塞UI线程,不会显示占位图。<br/>默认值:false |
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置图片是否可复制(SVG图片不支持复制)。<br/>当copyOption设置为非CopyOptions.None时,支持使用长按、鼠标右击、快捷组合键'CTRL+C'等方式进行复制。<br/>默认值:CopyOptions.None |
| colorFilter<sup>9+</sup> | [ColorFilter](ts-types.md#colorfilter9) | 给图像设置颜色滤镜效果。 |
| draggable<sup>9+</sup> | boolean | 设置默认拖拽效果。(不能和[onDragStart](ts-universal-events-drag-drop.md)事件同时使用。)<br/>默认值:false |
| alt | string \| [Resource](ts-types.md#resource类型) | 加载时显示的占位图,支持本地图片。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | 设置图片的缩放类型。<br/>默认值:ImageFit.Cover<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | 设置图片的重复样式。<br/>默认值:ImageRepeat.NoRepeat<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>svg类型图源不支持该属性。 |
| interpolation | [ImageInterpolation](#imageinterpolation) | 设置图片的插值效果,即减轻低清晰度图片在放大显示的时候出现的锯齿问题,仅针对图片放大插值。<br/>默认值:ImageInterpolation.None<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>svg类型图源不支持该属性。<br/>PixelMap资源不支持该属性。 |
| renderMode | [ImageRenderMode](#imagerendermode) | 设置图片渲染的模式。<br/>默认值:ImageRenderMode.Original<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>svg类型图源不支持该属性。 |
| sourceSize | {<br/>width:&nbsp;number,<br/>height:&nbsp;number<br/>} | 设置图片裁剪尺寸,将原始图片解码成pixelMap,指定尺寸的图片,单位为px。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>PixelMap资源和SVG图片不支持该属性。 |
| matchTextDirection | boolean | 设置图片是否跟随系统语言方向,在RTL语言环境下显示镜像翻转显示效果。<br/>默认值:false<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| fitOriginalSize | boolean | 图片组件尺寸未设置时,其显示尺寸是否跟随图源尺寸。<br/>默认值:false<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| fillColor | [ResourceColor](ts-types.md#resourcecolor) | 填充颜色。设置的填充颜色会覆盖在图片上。仅对svg图源生效,设置后会替换svg图片的fill颜色。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| autoResize | boolean | 是否需要在图片解码过程中对图源做resize操作,该操作会根据显示区域的尺寸决定用于绘制的图源尺寸,有利于减少内存占用。<br/>默认值:true<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| syncLoad<sup>8+</sup> | boolean | 设置是否同步加载图片,默认是异步加载。同步加载时阻塞UI线程,不会显示占位图。<br/>默认值:false<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置图片是否可复制(SVG图片不支持复制)。<br/>当copyOption设置为非CopyOptions.None时,支持使用长按、鼠标右击、快捷组合键'CTRL+C'等方式进行复制。<br/>默认值:CopyOptions.None<br/>该接口支持在ArkTS卡片中使用。 |
| colorFilter<sup>9+</sup> | [ColorFilter](ts-types.md#colorfilter9) | 给图像设置颜色滤镜效果。<br/>该接口支持在ArkTS卡片中使用。 |
| draggable<sup>9+</sup> | boolean | 设置默认拖拽效果。(不能和[onDragStart](ts-universal-events-drag-drop.md)事件同时使用。)<br/>默认值:false<br/>该接口支持在ArkTS卡片中使用。 |
> **说明:**
>
......@@ -57,6 +59,8 @@ Image(src: string | PixelMap | Resource)
### ImageInterpolation
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------ | ------------------------- |
| None | 不使用插值图片数据。 |
......@@ -66,6 +70,8 @@ Image(src: string | PixelMap | Resource)
### ImageRenderMode
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| -------- | --------------------- |
| Original | 按照原图进行渲染,包括颜色。 |
......@@ -77,9 +83,9 @@ Image(src: string | PixelMap | Resource)
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onComplete(callback:&nbsp;(event?:&nbsp;{&nbsp;width:&nbsp;number,&nbsp;height:&nbsp;number,&nbsp;componentWidth:&nbsp;number,<br>&nbsp;componentHeight:&nbsp;number,&nbsp;loadingStatus:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 图片成功加载时触发该回调,返回成功加载的图片尺寸。<br>- width:图片的宽,单位为像素。<br/>- height:图片的高,单位为像素。<br/>- componentWidth:组件的宽,单位为像素。<br/>- componentHeight:组件的高,单位为像素。<br/>- loadingStatus:图片加载成功的状态。<br/> |
| onError(callback:&nbsp;(event?:&nbsp;{&nbsp;componentWidth:&nbsp;number,&nbsp;componentHeight:&nbsp;number&nbsp;, message<sup>9+</sup>: string })&nbsp;=&gt;&nbsp;void) | 图片加载出现异常时触发该回调。<br>- componentWidth:组件的宽,单位为像素。<br/>- componentHeight:组件的高,单位为像素。 |
| onFinish(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当加载的源文件为带动效的svg图片时,当svg动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。 |
| onComplete(callback:&nbsp;(event?:&nbsp;{&nbsp;width:&nbsp;number,&nbsp;height:&nbsp;number,&nbsp;componentWidth:&nbsp;number,<br>&nbsp;componentHeight:&nbsp;number,&nbsp;loadingStatus:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 图片成功加载时触发该回调,返回成功加载的图片尺寸。<br>- width:图片的宽,单位为像素。<br/>- height:图片的高,单位为像素。<br/>- componentWidth:组件的宽,单位为像素。<br/>- componentHeight:组件的高,单位为像素。<br/>- loadingStatus:图片加载成功的状态。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| onError(callback:&nbsp;(event?:&nbsp;{&nbsp;componentWidth:&nbsp;number,&nbsp;componentHeight:&nbsp;number&nbsp;, message<sup>9+</sup>: string })&nbsp;=&gt;&nbsp;void) | 图片加载出现异常时触发该回调。<br>- componentWidth:组件的宽,单位为像素。<br/>- componentHeight:组件的高,单位为像素。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| onFinish(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当加载的源文件为带动效的svg图片时,当svg动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## 示例
......
......@@ -14,6 +14,8 @@
Canvas(context?: CanvasRenderingContext2D)
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
......@@ -30,7 +32,7 @@ Canvas(context?: CanvasRenderingContext2D)
| 名称 | 参数 | 描述 |
| ----------------------------- | ---- | -------------------- |
| onReady(event: () => void) | 无 | Canvas组件初始化完成时的事件回调,该事件之后Canvas组件宽高确定且可获取,可使用Canvas相关API进行绘制。 |
| onReady(event: () => void) | 无 | Canvas组件初始化完成时的事件回调,该事件之后Canvas组件宽高确定且可获取,可使用Canvas相关API进行绘制。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
**示例:**
......
......@@ -14,6 +14,8 @@ addColorStop(offset: number, color: string): void
设置渐变断点值,包括偏移和颜色。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
......
......@@ -3,8 +3,20 @@
ImageBitmap对象可以存储canvas渲染的像素数据。
> **说明:**
>
> 从 API Version 8 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从 API Version 8 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 接口
ImageBitmap(src: string)
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------- | ---- | ------ | ------------------------------------------------------------ |
| src | string | 是 | - | 图片的数据源<br/>**说明:**<br/>- ArkTS卡片上不支持`http://`等网络相关路径前缀、`datashare://`路径前缀以及`file://data/storage`路径前缀的字符串 |
......@@ -12,8 +24,8 @@ ImageBitmap对象可以存储canvas渲染的像素数据。
| 属性 | 类型 | 描述 |
| -------- | -------- | -------- |
| width | number | ImageBitmap的像素宽度。 |
| height | number | ImageBitmap的像素高度。 |
| width | number | ImageBitmap的像素宽度。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| height | number | ImageBitmap的像素高度。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
**示例:**
......@@ -53,4 +65,6 @@ ImageBitmap对象可以存储canvas渲染的像素数据。
close()
释放ImageBitmap对象相关联的所有图形资源。该接口为空接口。
\ No newline at end of file
释放ImageBitmap对象相关联的所有图形资源。该接口为空接口。
从API version 9开始,该接口支持在ArkTS卡片中使用。
\ No newline at end of file
......@@ -12,9 +12,9 @@ ImageData对象可以存储canvas渲染的像素数据。
| 属性 | 类型 | 描述 |
| -------- | -------- | -------- |
| width | number | 矩形区域实际像素宽度,单位为px。 |
| height | number | 矩形区域实际像素高度,单位为px。 |
| data | Uint8ClampedArray | 一维数组,保存了相应的颜色数据,数据值范围为0到255。 |
| width | number | 矩形区域实际像素宽度,单位为px。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| height | number | 矩形区域实际像素高度,单位为px。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| data | Uint8ClampedArray | 一维数组,保存了相应的颜色数据,数据值范围为0到255。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
> **说明:**
>
......
......@@ -14,6 +14,8 @@ addPath(path: path2D, transform?:Matrix2D): void
将另一个路径添加到当前的路径对象中。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
......@@ -61,6 +63,8 @@ closePath(): void
将路径的当前点移回到路径的起点,当前点到起点间画一条直线。如果形状已经闭合或只有一个点,则此功能不执行任何操作。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**示例:**
```ts
......@@ -101,6 +105,8 @@ moveTo(x: number, y: number): void
将路径的当前坐标点移动到目标点,移动过程中不绘制线条。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
......@@ -148,6 +154,8 @@ lineTo(x: number, y: number): void
从当前点绘制一条直线到目标点。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
......@@ -196,6 +204,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
......@@ -245,6 +255,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
创建二次贝赛尔曲线的路径。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
......@@ -292,6 +304,8 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
绘制弧线路径。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
......@@ -340,6 +354,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
......@@ -387,6 +403,8 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
在规定的矩形区域绘制一个椭圆。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
......@@ -437,6 +455,8 @@ rect(x: number, y: number, w: number, h: number): void
创建矩形路径。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
......
......@@ -18,6 +18,8 @@
创建数字标记组件。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
......@@ -31,6 +33,8 @@
根据字符串创建标记组件。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
......@@ -41,6 +45,8 @@
## BadgePosition枚举说明
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| -------- | -------- |
| RightTop | 圆点显示在右上角。 |
......@@ -49,6 +55,8 @@
## BadgeStyle对象说明
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------- |
| color | [ResourceColor](ts-types.md#resourcecolor) | 否 | Color.White | 文本颜色。 |
......
......@@ -16,6 +16,8 @@
Column(value?:&nbsp;{space?: string&nbsp;|&nbsp;number})
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
......@@ -28,8 +30,8 @@ Column(value?:&nbsp;{space?: string&nbsp;|&nbsp;number})
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | 设置子组件在水平方向上的对齐格式。<br/>默认值:HorizontalAlign.Center |
| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | 设置子组件在垂直方向上的对齐格式。<br/>默认值:FlexAlign.Start |
| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | 设置子组件在水平方向上的对齐格式。<br/>默认值:HorizontalAlign.Center<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | 设置子组件在垂直方向上的对齐格式。<br/>默认值:FlexAlign.Start<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## 示例
......
......@@ -16,6 +16,8 @@
Counter()
从API version 9开始,该接口支持在ArkTS卡片中使用。
## 事件
......@@ -23,8 +25,8 @@ Counter()
| 名称 | 功能描述 |
| -------- | -------- |
| onInc(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值增加事件。 |
| onDec(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值减少事件。 |
| onInc(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值增加事件。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| onDec(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值减少事件。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## 示例
......
......@@ -19,6 +19,8 @@ Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: Fle
标准Flex布局容器。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
......
......@@ -13,6 +13,8 @@
GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption})
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
......@@ -25,12 +27,14 @@ GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColC
| 参数名 | 类型 | 必填 | 说明 |
| ------ | ----------------------------- | ---- | ------------------------------------------------------------ |
| span | number \| GridColColumnOption | 否 | 占用列数。span为0,意味着该元素不参与布局计算,即不会被渲染。<br/>默认值:1。 |
| offset | number \| GridColColumnOption | 否 | 相对于前一个栅格子组件偏移的列数。<br/>默认值:0。 |
| order | number \| GridColColumnOption | 否 | 元素的序号,根据栅格子组件的序号,从小到大对栅格子组件做排序。<br/>默认值:0。 |
| span | number \| GridColColumnOption | 否 | 占用列数。span为0,意味着该元素不参与布局计算,即不会被渲染。<br/>默认值:1。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| offset | number \| GridColColumnOption | 否 | 相对于前一个栅格子组件偏移的列数。<br/>默认值:0。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| order | number \| GridColColumnOption | 否 | 元素的序号,根据栅格子组件的序号,从小到大对栅格子组件做排序。<br/>默认值:0。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## GridColColumnOption
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| xs | number | 否 | 最小宽度类型设备。 |
......
......@@ -15,6 +15,8 @@
## 接口
GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | GutterOption, breakpoints?: BreakPoints, direction?: GridRowDirection})
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 |类型|必填|说明|
......@@ -26,6 +28,8 @@ GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | Gutt
## GutterOption
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| x | Length \| GridRowSizeOption | 否 | 水平gutter option。 |
......@@ -35,6 +39,8 @@ GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | Gutt
栅格在不同宽度设备类型下,栅格列数。
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| xs | number | 否 | 最小宽度类型设备。 |
......@@ -48,6 +54,8 @@ GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | Gutt
栅格在不同宽度设备类型下,gutter的大小。
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| xs | Length | 否 | 最小宽度类型设备。 |
......@@ -59,6 +67,8 @@ GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | Gutt
## BreakPoints
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| value | Array&lt;string&gt; | 否 | 设置断点位置的单调递增数组。<br>默认值:["320vp", "600vp", "840vp"] |
......@@ -73,12 +83,18 @@ GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | Gutt
```
## BreakpointsReference枚举类型
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 枚举名 | 描述 |
| -------- | -------- |
| WindowSize | 以窗口为参照。 |
| ComponentSize | 以容器为参照。 |
## GridRowDirection枚举类型
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 枚举名 | 描述 |
| -------- | -------- |
| Row | 栅格元素按照行方向排列。 |
......@@ -119,6 +135,8 @@ GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | Gutt
onBreakpointChange(callback: (breakpoints: string) => void)
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 说明 |
......
......@@ -16,6 +16,8 @@
Circle(options?: {width?: string | number, height?: string | number})
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
......@@ -29,17 +31,17 @@ Circle(options?: {width?: string | number, height?: string | number})
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md) | 设置填充区域颜色。<br>默认值:Color.Black |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 设置填充区域透明度。<br>默认值:1 |
| stroke | [ResourceColor](ts-types.md) | 设置边框颜色,不设置时,默认没有边框。 |
| strokeDashArray | Array&lt;Length&gt; | 设置边框间隙。<br>默认值:[] |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 边框绘制起点的偏移量。<br>默认值:0 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 设置边框端点绘制样式。<br>默认值:LineCapStyle.Butt |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | 设置边框拐角绘制样式。<br>默认值:LineJoinStyle.Miter |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 设置斜接长度与边框宽度比值的极限值。<br>默认值:4<br/>**说明:**<br/>Circle组件无法设置尖角图形,该属性设置无效。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 设置边框透明度。<br>默认值:1<br/>**说明:**<br/>该属性的取值范围是[0.0, 1.0],若给定值小于0.0,则取值为0.0;若给定值大于1.0,则取值为1.0。 |
| strokeWidth | Length | 设置边框宽度。<br>默认值:1 |
| antiAlias | boolean | 是否开启抗锯齿效果。<br>默认值:true |
| fill | [ResourceColor](ts-types.md) | 设置填充区域颜色。<br>默认值:Color.Black<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 设置填充区域透明度。<br>默认值:1<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| stroke | [ResourceColor](ts-types.md) | 设置边框颜色,不设置时,默认没有边框。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeDashArray | Array&lt;Length&gt; | 设置边框间隙。<br>默认值:[]<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 边框绘制起点的偏移量。<br>默认值:0<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 设置边框端点绘制样式。<br>默认值:LineCapStyle.Butt<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | 设置边框拐角绘制样式。<br>默认值:LineJoinStyle.Miter<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 设置斜接长度与边框宽度比值的极限值。<br>默认值:4<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>Circle组件无法设置尖角图形,该属性设置无效。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 设置边框透明度。<br>默认值:1<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>该属性的取值范围是[0.0, 1.0],若给定值小于0.0,则取值为0.0;若给定值大于1.0,则取值为1.0。 |
| strokeWidth | Length | 设置边框宽度。<br>默认值:1<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| antiAlias | boolean | 是否开启抗锯齿效果。<br>默认值:true<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## 示例
......
......@@ -16,6 +16,8 @@
Ellipse(options?: {width?: string | number, height?: string | number})
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
......@@ -29,17 +31,17 @@ Ellipse(options?: {width?: string | number, height?: string | number})
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md) | Color.Black | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md) | - |设置边框颜色,不设置时,默认没有边框。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 设置边框间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置边框端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置边框拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置斜接长度与边框宽度比值的极限值。<br/>**说明:**<br/>Ellipse组件无法设置尖角图形,该属性设置无效。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 设置边框透明度。<br/>**说明:**<br/>该属性的取值范围是[0.0, 1.0],若给定值小于0.0,则取值为0.0;若给定值大于1.0,则取值为1.0。 |
| strokeWidth | Length | 1 | 设置边框宽度。 |
| antiAlias | boolean | true | 是否开启抗锯齿效果。 |
| fill | [ResourceColor](ts-types.md) | Color.Black | 设置填充区域颜色。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 设置填充区域透明度。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| stroke | [ResourceColor](ts-types.md) | - |设置边框颜色,不设置时,默认没有边框。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 设置边框间隙。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 边框绘制起点的偏移量。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置边框端点绘制样式。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置边框拐角绘制样式。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置斜接长度与边框宽度比值的极限值。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>Ellipse组件无法设置尖角图形,该属性设置无效。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 设置边框透明度。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>该属性的取值范围是[0.0, 1.0],若给定值小于0.0,则取值为0.0;若给定值大于1.0,则取值为1.0。 |
| strokeWidth | Length | 1 | 设置边框宽度。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| antiAlias | boolean | true | 是否开启抗锯齿效果。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## 示例
......
......@@ -15,6 +15,8 @@
Line(value?: {width?: string | number, height?: string | number})
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
......@@ -29,19 +31,19 @@ Line(value?: {width?: string | number, height?: string | number})
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| startPoint | Array&lt;Length&gt; | [0,&nbsp;0] | 直线起点坐标点(相对坐标),单位vp。 |
| endPoint | Array&lt;Length&gt; | [0,&nbsp;0] | 直线终点坐标点(相对坐标),单位vp。 |
| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | 设置填充区域颜色。<br/>**说明:**<br/>Line组件无法形成闭合区域,该属性设置无效。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 设置填充区域透明度。<br/>**说明:**<br/>Line组件无法形成闭合区域,该属性设置无效。 |
| stroke | [ResourceColor](ts-types.md) | - | 设置边框颜色,不设置时,默认没有边框线条。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置锐角绘制成斜角的极限值。<br/>**说明:**<br/>Line组件无法设置锐角图形,该属性设置无效。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 设置线条透明度。<br/>**说明:**<br/>该属性的取值范围是[0.0, 1.0],若给定值小于0.0,则取值为0.0;若给定值大于1.0,则取值为1.0。 |
| strokeWidth | Length | 1 | 设置线条宽度。 |
| antiAlias | boolean | true | 是否开启抗锯齿效果。 |
| startPoint | Array&lt;Length&gt; | [0,&nbsp;0] | 直线起点坐标点(相对坐标),单位vp。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| endPoint | Array&lt;Length&gt; | [0,&nbsp;0] | 直线终点坐标点(相对坐标),单位vp。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | 设置填充区域颜色。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>Line组件无法形成闭合区域,该属性设置无效。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 设置填充区域透明度。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>Line组件无法形成闭合区域,该属性设置无效。 |
| stroke | [ResourceColor](ts-types.md) | - | 设置边框颜色,不设置时,默认没有边框线条。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 设置线条间隙。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 线条绘制起点的偏移量。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置线条端点绘制样式。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置线条拐角绘制样式。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置锐角绘制成斜角的极限值。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>Line组件无法设置锐角图形,该属性设置无效。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 设置线条透明度。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>该属性的取值范围是[0.0, 1.0],若给定值小于0.0,则取值为0.0;若给定值大于1.0,则取值为1.0。 |
| strokeWidth | Length | 1 | 设置线条宽度。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| antiAlias | boolean | true | 是否开启抗锯齿效果。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## 示例
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册