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

!9002 update docs

Merge pull request !9002 from 关明月/master
......@@ -58,6 +58,8 @@
<div class="container">
<qrcode value="{{qr_value}}" type="{{qr_type}}"
style="color: {{qr_col}};background-color: {{qr_bcol}};width: {{qr_size}};height: {{qr_size}};margin-bottom: 70px;"></qrcode>
<text class="txt">Value</text>
<input onChange="setValue">123</input>
<text class="txt">Type</text>
<switch showtext="true" checked="true" texton="rect" textoff="circle" onchange="settype"></switch>
<text class="txt">Color</text>
......@@ -94,6 +96,7 @@ select{
/* index.js */
export default {
data: {
qr_value:'',
qr_type: 'rect',
qr_size: '300px',
qr_col: '#87ceeb',
......
# 属性动画
组件的某些通用属性变化时,可以通过属性动画实现渐变效果,提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
组件的通用属性发生变化时,可以创建属性动画进行渐变,提升用户体验。
| 接口名称 | 功能描述 |
| ------------------------------ | ------------------------------------------------------------ |
| animation(value: AnimateParam) | 为组件添加动画属性,控制调用此属性的组件从一种状态到另一种状态的过渡效果。 |
animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void})
## AnimateParam对象说明
为组件添加属性动画,实现组件属性状态变化时的过渡动画效果。
- 属性
**参数:**
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | --------------- | ----------------------- |
| duration | number | 1000 | 单位为毫秒,默认动画时长为1000毫秒。 |
| curve | [Curve](ts-appendix-enums.md#curve) | Curve.Linear | 默认曲线为线性。 |
| delay | number | 0 | 单位为毫秒,默认不延时播放。 |
| iterations | number | 1 | 默认播放一次,设置为-1时表示无限次播放。 |
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | PlayMode.Normal | 设置动画播放模式,默认播放完成后重头开始播放。 |
| 名称 | 参数类型 | 必填 | 描述 |
| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| duration | number | 否 | 设置动画时长。单位为毫秒,默认动画时长为1000毫秒。<br/>默认值:1000 |
| tempo | number | 否 | 动画播放速度。数值越大,动画播放速度越快,数值越小,播放速度越慢<br/>值为0时,表示不存在动画。<br/>默认值:1 |
| curve | string&nbsp;\|&nbsp;[Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;ICurve<sup>9+</sup> | 否 | 设置动画曲线。默认曲线为线性。<br/>默认值:Curve.Linear |
| delay | number | 否 | 设置动画延迟执行的时长。单位为毫秒,默认不延时播放。<br/>默认值:0 |
| iterations | number | 否 | 设置播放次数。默认播放一次,设置为-1时表示无限次播放。<br/>默认值:1 |
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | 否 | 设置动画播放模式,默认播放完成后重头开始播放。<br/>默认值:PlayMode.Normal |
| onFinish | () => void | 否 | 状态回调,动画播放完成时触发。 |
## 示例
......@@ -30,9 +30,9 @@
@Entry
@Component
struct AttrAnimationExample {
@State widthSize: number = 200
@State heightSize: number = 100
@State flag: boolean = true
@State widthSize: number = 200;
@State heightSize: number = 100;
@State flag: boolean = true;
build() {
Column() {
......
......@@ -100,10 +100,12 @@
## FillMode
| 名称 | 描述 |
| -------- | -------------------------------- |
| None | 播放完成后恢复初始状态。 |
| Forwards | 播放完成后保持动画结束时的状态。 |
| 名称 | 描述 |
| --------- | ------------------------------------------------------------ |
| None | 动画未执行时不会将任何样式应用于目标,动画播放完成之后恢复初始默认状态。 |
| Forwards | 目标将保留动画执行期间最后一个关键帧的状态。 |
| Backwards | 动画将在应用于目标时立即应用第一个关键帧中定义的值,并在delay期间保留此值。第一个关键帧取决于playMode,playMode为Normal或Alternate时为from的状态,playMode为Reverse或AlternateReverse时为to的状态。 |
| Both | 动画将遵循Forwards和Backwards的规则,从而在两个方向上扩展动画属性。 |
## PlayMode
......
# Blank
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
空白填充组件,在容器主轴方向上,空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效。
## 权限列表
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......@@ -19,23 +14,21 @@
## 接口
Blank(min?: number \| string)
Blank(min?: number&nbsp;|&nbsp;string)
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| min | number \| string | 否 | 0 | 空白填充组件在容器主轴上的最小大小。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| min | number&nbsp;\|&nbsp;string | 否 | 空白填充组件在容器主轴上的最小大小。<br/>默认值:0 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| color | [ResourceColor](../../ui/ts-types.md) | 0xffffff | 设置空白填充的填充颜色。 |
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
> **说明:**
>
> - 不支持通用属性方法。
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| color | [ResourceColor](../../ui/ts-types.md) | 设置空白填充的填充颜色。 |
## 示例
......
# Divider
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
提供分隔器组件,分隔不同内容块/内容元素。
## 权限列表
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......@@ -21,15 +16,16 @@
Divider()
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| vertical | boolean | false | 使用水平分割线还是垂直分割线。false:水平分割线;true:垂直分割线。 |
| color | [ResourceColor](../../ui/ts-types.md) | - | 分割线颜色。 |
| strokeWidth | [Length](../../ui/ts-types.md) | 1 | 分割线宽度。 |
| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 分割线的端点样式。 |
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| vertical | boolean | 使用水平分割线还是垂直分割线。false:水平分割线;true:垂直分割线。<br/>默认值:false |
| color | [ResourceColor](../../ui/ts-types.md) | 分割线颜色。 |
| strokeWidth | number&nbsp;\|&nbsp;string | 分割线宽度。<br/>默认值:1 |
| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 分割线的端点样式。<br/>默认值:LineCapStyle.Butt |
## 事件
......
# Gauge
> **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
数据量规图表组件,用于将数据展示为环形图表。
## 权限列表
> **说明:**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......@@ -22,23 +17,25 @@
Gauge(options:{value: number, min?: number, max?: number})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | number | 是 | - | 当前数据值。 |
| min | number | 否 | 0 | 当前数据段最小值。 |
| max | number | 否 | 100 | 当前数据段最大值。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| value | number | 是 | 当前数据值。 |
| min | number | 否 | 当前数据段最小值。<br/>默认值:0 |
| max | number | 否 | 当前数据段最大值。<br/>默认值:100 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| value | number | 0 | 设置当前数据图表的值。 |
| startAngle | number | -150 | 设置起始角度位置,时钟0点为0度,顺时针方向为正角度。 |
| endAngle | number | 150 | 设置终止角度位置,时钟0点为0度,顺时针方向为正角度。 |
| colors | Array&lt;ColorStop&gt; | - | 设置图表的颜色,支持分段颜色设置。 |
| strokeWidth | Length | - | 设置环形图表的环形厚度。 |
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| value | number | 设置当前数据图表的值。<br/>默认值:0 |
| startAngle | number | 设置起始角度位置,时钟0点为0度,顺时针方向为正角度。<br/>默认值:-150 |
| endAngle | number | 设置终止角度位置,时钟0点为0度,顺时针方向为正角度。<br/>默认值:150 |
| colors | Array&lt;ColorStop&gt; | 设置图表的颜色,支持分段颜色设置。 |
| strokeWidth | Length | 设置环形图表的环形厚度。 |
## ColorStop
......@@ -51,7 +48,7 @@ Gauge(options:{value: number, min?: number, max?: number})
## 示例
```ts
// xxx.ets
@Entry
......
......@@ -3,6 +3,7 @@
图片组件,支持本地图片和网络图片的渲染展示。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
......@@ -24,31 +25,32 @@ Image(src: string | PixelMap | Resource)
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](../../ui/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/>\- 支持`dataability://`路径前缀的字符串,用于访问通过data&nbsp;ability提供的图片路径。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](../../ui/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/>\- 支持`dataability://`路径前缀的字符串,用于访问通过data&nbsp;ability提供的图片路径。 |
## 属性
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 默认值 | 描述 |
| ------------------------ | ---------------------------------------- | ------------------------ | ---------------------------------------- |
| alt | string \| [Resource](../../ui/ts-types.md#resource类型) | - | 加载时显示的占位图,支持本地图片和网络图片。 |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | ImageFit.Cover | 设置图片的缩放类型。 |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | 设置图片的重复样式。<br/>> **说明:**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
| interpolation | [ImageInterpolation](#imageinterpolation) | ImageInterpolation.None | 设置图片的插值效果,即减轻低清晰度图片在放大显示的时候出现的锯齿问题,仅针对图片放大插值。<br/>>&nbsp;**说明:**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。<br/>>&nbsp;-&nbsp;PixelMap资源不支持该属性。 |
| renderMode | [ImageRenderMode](#imagerendermode) | ImageRenderMode.Original | 设置图片渲染的模式。<br/>>&nbsp;**说明:**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
| sourceSize | {<br/>width:&nbsp;number,<br/>height:&nbsp;number<br/>} | - | 设置图片裁剪尺寸,将原始图片解码成pixelMap,指定尺寸的图片,单位为px。<br/>>&nbsp;**说明:**<br/>>&nbsp;PixelMap资源不支持该属性。 |
| matchTextDirection | boolean | false | 设置图片是否跟随系统语言方向,在RTL语言环境下显示镜像翻转显示效果。 |
| fitOriginalSize | boolean | true | 图片组件尺寸未设置时,其显示尺寸是否跟随图源尺寸。 |
| fillColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | - | 仅对svg图源生效,设置后会替换svg图片的fill颜色。 |
| autoResize | boolean | true | 是否需要在图片解码过程中对图源做resize操作,该操作会根据显示区域的尺寸决定用于绘制的图源尺寸,有利于减少内存占用。 |
| syncLoad<sup>8+</sup> | boolean | false | 设置是否同步加载图片,默认是异步加载。同步加载时阻塞UI线程,不会显示占位图。 |
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | CopyOptions.None | 设置图片是否可复制(SVG图片不支持复制)。<br/>当设置copyOption为非CopyOptions.None时,支持快捷组合键'CTRL+C'进行复制。 |
| colorFilter<sup>9+</sup> | [ColorFilter](../../ui/ts-types.md#colorfilter9) | - | 给图像设置颜色滤镜效果。 |
| 名称 | 参数类型 | 描述 |
| --------------------- | ------------------------------------------------------- | ------------------------------------------------------------ |
| alt | string \| [Resource](../../ui/ts-types.md#resource类型) | 加载时显示的占位图,支持本地图片和网络图片。 |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | 设置图片的缩放类型。<br/>默认值:ImageFit.Cover |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | 设置图片的重复样式。<br/>默认值: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资源不支持该属性。 |
| matchTextDirection | boolean | 设置图片是否跟随系统语言方向,在RTL语言环境下显示镜像翻转显示效果。<br/>默认值:false |
| fitOriginalSize | boolean | 图片组件尺寸未设置时,其显示尺寸是否跟随图源尺寸。<br/>默认值:true |
| fillColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 填充颜色。设置的填充颜色会覆盖在图片上。仅对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](../../ui/ts-types.md#colorfilter9) | 给图像设置颜色滤镜效果。 |
> **说明:**
>
> 使用快捷组合键对Image组件复制的前提是,该组件必须处于获焦状态。将Image组件的属性focusable设置为true,即可使用TAB键将焦点切换到Image组件上,再将Image组件的focusOnTouch属性设置为true,即可实现点击获焦。
### ImageInterpolation
......
# Navigation
> **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
Navigation组件一般作为Page页面的根容器,通过属性设置来展示页面的标题、工具栏、菜单。
## 权限列表
> **说明:**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......@@ -23,43 +18,47 @@ Navigation()
创建可以根据属性设置,自动展示导航栏、标题、工具栏的组件。
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------------- | ---------------------------------------- | ------------------------ | ---------------------------------------- |
| title | string&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | - | 页面标题。 |
| subTitle | string | - | 页面副标题。 |
| menus | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 页面右上角菜单。 |
| titleMode | NavigationTitleMode | NavigationTitleMode.Free | 页面标题栏显示模式。 |
| toolBar | {<br/>items:Array&lt;Object&gt;&nbsp;}<br/>\|&nbsp;[CustomBuilder](../../ui/ts-types.md#custombuilder8)<sup>8+</sup> | - | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。 |
| hideToolBar | boolean | false | 设置隐藏/显示工具栏:<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 |
| hideTitleBar | boolean | false | 隐藏标题栏。 |
| hideBackButton | boolean | false | 隐藏返回键。 |
- NavigationMenuItem类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ----------------------- | ---- | ---- | --------------- |
| value | string | 是 | - | 菜单栏单个选项的显示文本。 |
| icon | string | 否 | - | 菜单栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 |
- Object类型说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ----------------------- | ---- | ---- | --------------- |
| value | string | 是 | - | 工具栏单个选项的显示文本。 |
| icon | string | 否 | - | 工具栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 |
- NavigationTitleMode枚举说明
| 名称 | 描述 |
| ---- | ---------------------------------------- |
| Free | 当内容为可滚动组件时,标题随着内容向上滚动而缩小(子标题的大小不变、淡出)。向下滚动内容到顶时则恢复原样。 |
| Mini | 固定为小标题模式(图标+主副标题)。 |
| Full | 固定为大标题模式(主副标题)。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 目前可滚动组件只支持List。
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- |
| title | string&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | 页面标题。 |
| subTitle | string | 页面副标题。 |
| menus | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | 页面右上角菜单。 |
| titleMode | NavigationTitleMode | 页面标题栏显示模式。<br/>默认值:NavigationTitleMode.Free |
| toolBar | object&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。 |
| hideToolBar | boolean | 设置隐藏/显示工具栏:<br/>默认值:false<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 |
| hideTitleBar | boolean | 隐藏标题栏。<br/>默认值:false |
| hideBackButton | boolean | 隐藏返回键。<br/>默认值:false |
## NavigationMenuItem类型说明
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | ------------------------------ |
| value | string | 是 | 菜单栏单个选项的显示文本。 |
| icon | string | 否 | 菜单栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | 当前选项被选中的事件回调。 |
## object类型说明
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | ------------------------------ |
| value | string | 是 | 工具栏单个选项的显示文本。 |
| icon | string | 否 | 工具栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | 当前选项被选中的事件回调。 |
## NavigationTitleMode枚举说明
| 名称 | 描述 |
| ---- | ---------------------------------------- |
| Free | 当内容为可滚动组件时,标题随着内容向上滚动而缩小(子标题的大小不变、淡出)。向下滚动内容到顶时则恢复原样。 |
| Mini | 固定为小标题模式(图标+主副标题)。 |
| Full | 固定为大标题模式(主副标题)。 |
> **说明:**
> 目前可滚动组件只支持List。
## 事件
......
......@@ -6,10 +6,6 @@
>
> 该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件
......@@ -18,29 +14,31 @@
PatternLock(controller?: PatternLockController)
- 参数
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | ---- | ---- | ---------------------- |
| controller | [PatternLockController](#patternlockcontroller) | 否 | null | 给组件绑定一个控制器,用来控制组件状态重置。 |
| 参数名 | 参数类型 | 必填 | 描述 |
| ---------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ |
| controller | [PatternLockController](#patternlockcontroller) | 否 | 给组件绑定一个控制器,用来控制组件状态重置。<br/>默认值:null |
## 属性
不支持`backgroundColor`以外的通用属性设置。
| 名称 | 参数类型 | 默认值 | 描述 |
| --------------- | ------------------------------------- | ----------- | ---------------------------------------- |
| sideLength | Length | 300vp | 设置组件的宽度和高度(相同值)。最小可以设置为0。 |
| circleRadius | Length | 14vp | 设置宫格圆点的半径。 |
| regularColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“未选中”状态的填充颜色。 |
| selectedColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“选中”状态的填充颜色。 |
| activeColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“激活”状态的填充颜色。 |
| pathColor | [ResourceColor](../../ui/ts-types.md) | Color.Blue | 设置连线的颜色。 |
| pathStrokeWidth | Length | 34vp | 设置连线的宽度。最小可以设置为0。 |
| autoReset | boolean | true | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true,用户可以通过触摸图案密码锁重置组件状态(清除之前的输入效果);如果设置为false,用户手指离开屏幕完成输入后,再次触摸图案密码锁(包括圆点)不能改变之前的输入状态。 |
| 名称 | 参数类型 | 描述 |
| --------------- | ------------------------------------- | ------------------------------------------------------------ |
| sideLength | [Length](../../ui/ts-types.md) | 设置组件的宽度和高度(相同值)。最小可以设置为0。<br/>默认值:300vp |
| circleRadius | [Length](../../ui/ts-types.md) | 设置宫格圆点的半径。<br/>默认值:14vp |
| regularColor | [ResourceColor](../../ui/ts-types.md) | 设置宫格圆点在“未选中”状态的填充颜色。<br/>默认值:Color.Black |
| selectedColor | [ResourceColor](../../ui/ts-types.md) | 设置宫格圆点在“选中”状态的填充颜色。<br/>默认值:Color.Black |
| activeColor | [ResourceColor](../../ui/ts-types.md) | 设置宫格圆点在“激活”状态的填充颜色。<br/>默认值:Color.Black |
| pathColor | [ResourceColor](../../ui/ts-types.md) | 设置连线的颜色。<br/>默认值:Color.Blue |
| pathStrokeWidth | number&nbsp;\|&nbsp;string | 设置连线的宽度。最小可以设置为0。<br/>默认值:34vp |
| autoReset | boolean | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true,用户可以通过触摸图案密码锁重置组件状态(清除之前的输入效果);如果设置为false,用户手指离开屏幕完成输入后,再次触摸图案密码锁(包括圆点)不能改变之前的输入状态。<br/>默认值:true |
## 事件
除支持[通用事件](ts-universal-events-click.md)外,还支持以下事件:
| 名称 | 描述 |
| ---------------------------------------- | ---------------------------------------- |
| onPatternComplete(callback: (input: Array\<number\>) => void) | 密码输入结束时被调用的回调函数。<br />input: 与选中宫格圆点顺序一致的数字数组,数字为选中宫格的索引(0到8)。 |
......
# PluginComponent
提供外部应用组件嵌入式显示功能,即外部应用提供的UI可在本应用内显示。
> **说明:**
>
......@@ -8,14 +10,6 @@
> - 本组件为系统接口。
提供外部应用组件嵌入式显示功能,即外部应用提供的UI可在本应用内显示。
## 权限列表
## 子组件
......@@ -23,20 +17,22 @@
## 接口
PluginComponent(value: { template: PluginComponentTemplate, data: any })
PluginComponent(value: { template: PluginComponentTemplate, data: KVObject})
创建插件组件,用于显示外部应用提供的UI。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| value | {<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject<br/>} | 是 | - | template:&nbsp;&nbsp;组件模板,用于跟提供者定义的组件绑定。<br/>data:&nbsp;传给插件组件提供者使用的数据。 |
**参数:**
- PluginComponentTemplate类型说明
| 参数 | 类型 | 描述 |
| ------- | ------ | ----------------------- |
| source | string | 组件模板名。 |
| ability | string | 提供者Ability的abilityname。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| value | {<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject<br/>} | 是 | template:&nbsp;&nbsp;组件模板,用于跟提供者定义的组件绑定。<br/>data:&nbsp;传给插件组件提供者使用的数据。 |
## PluginComponentTemplate类型说明
| 参数 | 类型 | 描述 |
| ------- | ------ | ----------------------- |
| source | string | 组件模板名。 |
| ability | string | 提供者Ability的abilityname。 |
## 事件
......@@ -66,24 +62,25 @@ push(param: PushParameters, callback: AsyncCallback&lt;void&gt;): void
组件提供者向组件使用者主动发送组件与数据。
**参数**
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ------------------------- | ---- | -------------------------------- |
| param | PushParameters | 是 | 组件使用者的详细信息,详见PushParameters参数说明。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 此次接口调用的异步回调。 |
- 参数
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ------------------------- | ---- | -------------------------------- |
| param | PushParameters | 是 | 组件使用者的详细信息,详见PushParameters参数说明。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 此次接口调用的异步回调。 |
**PushParameters参数说明**
- PushParameters参数说明
| 参数名 | 类型 | 必填 | 说明 |
| --------- | -------- | ---- | --------------- |
| want | Want | 是 | 组件使用者Ability信息。 |
| name | string | 是 | 组件名称。 |
| data | KVObject | 否 | 组件数据值。 |
| extraData | KVObject | 否 | 附加数据值。 |
| 参数名 | 类型 | 必填 | 说明 |
| --------- | -------- | ---- | --------------- |
| want | Want | 是 | 组件使用者Ability信息。 |
| name | string | 是 | 组件名称。 |
| data | KVObject | 否 | 组件数据值。 |
| extraData | KVObject | 否 | 附加数据值。 |
- 示例
**示例**
[Plugin组件提供方](#组件提供方)示例。
[Plugin组件提供方](#组件提供方)示例。
## request
......@@ -92,35 +89,38 @@ request(param: RequestParameters, callback: AsyncCallback&lt;RequestCallbackPara
组件使用者向组件提供者主动请求组件。
- 参数
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ---------------------------------------- | ---- | ------------------------------------ |
| param | RequestParameters | 是 | 组件模板的详细请求信息,详见RequestParameters参数说明。 |
| callback | AsyncCallback<RequestCallbackParameters&nbsp;\|&nbsp;void&gt; | 是 | 此次请求的异步回调,&nbsp;通过回调接口的参数返回接受请求的数据。 |
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ---------------------------------------- | ---- | ------------------------------------ |
| param | RequestParameters | 是 | 组件模板的详细请求信息,详见RequestParameters参数说明。 |
| callback | AsyncCallback<RequestCallbackParameters&nbsp;\|&nbsp;void&gt; | 是 | 此次请求的异步回调,&nbsp;通过回调接口的参数返回接受请求的数据。 |
**RequestParameters参数说明**
- RequestParameters参数说明
| 参数名 | 类型 | 必填 | 说明 |
| ---- | -------- | ---- | --------------- |
| want | Want | 是 | 组件提供者Ability信息。 |
| name | string | 是 | 请求组件名称。 |
| data | KVObject | 是 | 附加数据。 |
| 参数名 | 类型 | 必填 | 说明 |
| ---- | -------- | ---- | --------------- |
| want | Want | 是 | 组件提供者Ability信息。 |
| name | string | 是 | 请求组件名称。 |
| data | KVObject | 是 | 附加数据。 |
- RequestCallbackParameters说明
| 名称 | 类型 | 说明 |
| ----------------- | ----------------------- | ----- |
| componentTemplate | PluginComponentTemplate | 组件模板。 |
| data | KVObject | 组件数据。 |
| extraData | KVObject | 附加数据。 |
**RequestCallbackParameters说明**
- KVObject类型说明
| 参数 | 类型 | 说明 |
| ---- | ---------------------------------------- | ---------------------------------------- |
| key | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;boolean&nbsp;\|&nbsp;Array&nbsp;\|&nbsp;KVObject | KVObject用[key,value]来存储数据,key是string类型的,value可以是number,string,boolean,数组或者另外的一个KVObject。 |
| 名称 | 类型 | 说明 |
| ----------------- | ----------------------- | ----- |
| componentTemplate | PluginComponentTemplate | 组件模板。 |
| data | KVObject | 组件数据。 |
| extraData | KVObject | 附加数据。 |
**KVObject类型说明**
- 示例
| 参数 | 类型 | 说明 |
| ---- | ---------------------------------------- | ---------------------------------------- |
| key | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;boolean&nbsp;\|&nbsp;Array&nbsp;\|&nbsp;KVObject | KVObject用[key,value]来存储数据,key是string类型的,value可以是number,string,boolean,数组或者另外的一个KVObject。 |
[Plugin组件使用方](#组件使用方)示例。
**示例**
[Plugin组件使用方](#组件使用方)示例。
## on
......@@ -129,28 +129,31 @@ on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback): v
提供者监听"request"类型的事件,给使用者返回通过request接口主动请求的数据;使用者监听"push"类型的事件,接收提供者通过push接口主动推送的数据。
- 参数
| 参数名 | 类型 | 必填 | 说明 |
| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| eventType | string | 是 | 监听的事件类型,&nbsp;可选值为:"push"&nbsp;、"request"。<br/>"push”:指组件提供者向使用者主动推送数据。<br/>"request”:指组件使用者向提供者主动请求数据。 |
| callback | OnPushEventCallback&nbsp;\|&nbsp;OnRequestEventCallback | 是 | 见callback事件说明。 |
**参数**
| 参数名 | 类型 | 必填 | 说明 |
| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| eventType | string | 是 | 监听的事件类型,&nbsp;可选值为:"push"&nbsp;、"request"。<br/>"push”:指组件提供者向使用者主动推送数据。<br/>"request”:指组件使用者向提供者主动请求数据。 |
| callback | OnPushEventCallback&nbsp;\|&nbsp;OnRequestEventCallback | 是 | 见callback事件说明。 |
**callback事件说明**
| 参数名 | 类型 | 说明 |
| ---------------------- | ---------------------------------------- | ---------------------------------------- |
| OnRequestEventCallback | (source:&nbsp;Want,<br/>name:&nbsp;string,<br/>data:&nbsp;KVObject&nbsp;)&nbsp;=>RequestEventResult | 数据请求事件的回调。<br/>source:&nbsp;组件请求方Ability信息。<br/>name:&nbsp;请求组件名称。<br/>data:&nbsp;附加数据。<br/>返回值:&nbsp;请求数据结果。 |
| OnPushEventCallback | (source:&nbsp;Want,<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject,<br/>extraData:&nbsp;KVObject<br/>)&nbsp;=&gt;&nbsp;void | 接收提供者主动推送的数据。<br/>source:&nbsp;组件提供者Ability信息。<br/>template:&nbsp;组件模板。<br/>data:&nbsp;组件更新数据。<br/>extraData:&nbsp;附加数据。 |
- callback事件说明
| 参数名 | 类型 | 说明 |
| ---------------------- | ---------------------------------------- | ---------------------------------------- |
| OnRequestEventCallback | (source:&nbsp;Want,<br/>name:&nbsp;string,<br/>data:&nbsp;KVObject&nbsp;)&nbsp;=>RequestEventResult | 数据请求事件的回调。<br/>source:&nbsp;组件请求方Ability信息。<br/>name:&nbsp;请求组件名称。<br/>data:&nbsp;附加数据。<br/>返回值:&nbsp;请求数据结果。 |
| OnPushEventCallback | (source:&nbsp;Want,<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject,<br/>extraData:&nbsp;KVObject<br/>)&nbsp;=&gt;&nbsp;void | 接收提供者主动推送的数据。<br/>source:&nbsp;组件提供者Ability信息。<br/>template:&nbsp;组件模板。<br/>data:&nbsp;组件更新数据。<br/>extraData:&nbsp;附加数据。 |
**RequestEventResult类型说明**
- RequestEventResult类型说明
| 参数 | 类型 | 说明 |
| --------- | -------- | ----- |
| template | string | 组件名称。 |
| data | KVObject | 组件数据。 |
| extraData | KVObjec | 附加数据。 |
| 参数 | 类型 | 说明 |
| --------- | -------- | ---------- |
| template | string | 组件名称。 |
| data | KVObject | 组件数据。 |
| extraData | KVObject | 附加数据。 |
- 示例
**示例**
[Plugin组件工具](#Plugin组件工具)示例。
[Plugin组件工具](#plugin组件工具)示例。
## 示例
......
......@@ -53,7 +53,7 @@ Progress(options: {value: number, total?: number, type?: ProgressType})
| -------- | -------- | -------- |
| value | number | 设置当前进度值。 |
| color | [ResourceColor](../../ui/ts-types.md) | 设置进度条前景色。 |
| style<sup>8+</sup> | {<br/>strokeWidth?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>scaleCount?:&nbsp;number,<br/>scaleWidth?:&nbsp;[Length](../../ui/ts-types.md#length)<br/>} | 定义组件的样式。<br/>-&nbsp;strokeWidth:&nbsp;设置进度条宽度。<br/>-&nbsp;scaleCount:&nbsp;设置环形进度条总刻度数。<br/>-&nbsp;scaleWidth:&nbsp;设置环形进度条刻度粗细,刻度粗细大于进度条宽度时,为系统默认粗细。 |
| style<sup>8+</sup> | {<br/>strokeWidth?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>scaleCount?:&nbsp;number,<br/>scaleWidth?:&nbsp;[Length](../../ui/ts-types.md#length)<br/>} | 定义组件的样式。<br/>-&nbsp;strokeWidth:&nbsp;设置进度条宽度。<br/>-&nbsp;scaleCount:&nbsp;设置环形进度条总刻度数。<br/>-&nbsp;scaleWidth:&nbsp;设置环形进度条刻度粗细,刻度粗细大于进度条宽度时,为系统默认粗细。 |
## 示例
......
......@@ -6,11 +6,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件
......@@ -20,23 +15,25 @@
QRCode(value: string)
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | string | 是 | - | 二维码内容字符串。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| value | string | 是 | 二维码内容字符串。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| color | [ResourceColor](../../ui/ts-types.md) | Black | 设置二维码颜色。 |
| backgroundColor | [ResourceColor](../../ui/ts-types.md) | - | 设置二维码背景颜色。 |
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性。
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| color | [ResourceColor](../../ui/ts-types.md) | 设置二维码颜色。<br/>默认值:Color.Black |
| backgroundColor | [ResourceColor](../../ui/ts-types.md) | 设置二维码背景颜色。<br/>默认值:Color.White |
## 事件
通用事件仅支持点击事件
通用事件仅支持[点击事件](ts-universal-events-click.md)
## 示例
......
# Radio
> **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
单选框,提供相应的用户交互选择项。
## 权限列表
> **说明:**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......@@ -21,23 +16,26 @@
Radio(options: {value: string, group: string})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | string | 是 | - | 当前单选框的值。|
| group | string | 是 | - | 当前单选框的所属群组名称,相同group的Radio只能有一个被选中。|
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| value | string | 是 | 当前单选框的值。|
| group | string | 是 | 当前单选框的所属群组名称,相同group的Radio只能有一个被选中。|
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| checked | boolean | false | 设置单选框的选中状态。 |
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| checked | boolean | 设置单选框的选中状态。<br/>默认值:false |
## 事件
| 名称 | 功能描述 |
除支持[通用事件](ts-universal-events-click.md)外,还支持以下事件:
| 名称 | 功能描述 |
| -------- | -------- |
| onChange(callback: (isChecked: boolean) => void) | 单选框选中状态改变时触发回调。<br> -isChecked为true时,代表选中。<br> -isChecked为false时,代表未选中。 |
......
# Search
提供搜索框组件,用于提供用户搜索内容的输入区域。
> **说明:**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
提供搜索框组件,用于提供用户搜索内容的输入区域。
## 权限列表
## 子组件
......@@ -18,25 +14,27 @@
Search(options?: { value?: string; placeholder?: string; icon?: string; controller?: SearchController })
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------- | ---------------- | ---- | ---- | ---------------------------------------- |
| value | string | 否 | - | 搜索文本值。 |
| placeholder | string | 否 | - | 无输入时的提示文本。 |
| icon | string | 否 | - | 搜索图标路径,默认使用系统搜索图标,支持的图标格式: svg, jpg和png。 |
| controller | SearchController | 否 | - | 控制器。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----------- | ---------------- | ---- | ------------------------------------------------------------ |
| value | string | 否 | 搜索文本值。 |
| placeholder | string | 否 | 无输入时的提示文本。 |
| icon | string | 否 | 搜索图标路径,默认使用系统搜索图标,支持的图标格式: svg、jpg和png。 |
| controller | SearchController | 否 | 控制器。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------------- | ---------------------------------------- | ---- | --------------------- |
| searchButton | string | 无 | 搜索框末尾搜索按钮文本值,默认无搜索按钮。 |
| placeholderColor | [ResourceColor](../../ui/ts-types.md) | - | 设置placeholder颜色。 |
| placeholderFont | [Font](../../ui/ts-types.md) | - | 设置placeholder文本样式。 |
| textFont | [Font](../../ui/ts-types.md) | - | 设置搜索框内文本样式。 |
| copyOption<sup>9+</sup> | [CopyOptions](ts-basic-components-text.md) | CopyOptions.CrossDevice | 设置文本是否可复制。 |
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| ----------------------- | ------------------------------------------------ | ---------------------------------------------- |
| searchButton | string | 搜索框末尾搜索按钮文本值,默认无搜索按钮。 |
| placeholderColor | [ResourceColor](../../ui/ts-types.md) | 设置placeholder颜色。 |
| placeholderFont | [Font](../../ui/ts-types.md) | 设置placeholder文本样式。 |
| textFont | [Font](../../ui/ts-types.md) | 设置搜索框内文本样式。 |
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置文本是否可复制。 |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本对齐方式。<br/>默认值:TextAlign.Start |
## 事件
......@@ -62,13 +60,11 @@ caretPosition(value: number): void
设置输入光标的位置。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- |
| value | number | 是 | - | 从字符串开始到光标所在位置的长度。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | ---------------------------------- |
| value | number | 是 | 从字符串开始到光标所在位置的长度。 |
## 示例
......
......@@ -40,7 +40,7 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | 正则表达式,满足表达式的输入允许显示,不满足正则表达式的输入被忽略。仅支持单个字符匹配,不支持字符串匹配。例如:^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$,8到10位的强密码不支持过滤。<br/>-&nbsp;value:设置正则表达式。<br/>-&nbsp;error:正则匹配失败时,返回被忽略的内容。 |
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置文本是否可复制。 |
| showPasswordIcon<sup>9+</sup> | boolean | 密码输入模式时,密码框末尾的图标是否显示。<br/>默认值:true |
| style<sup>9+</sup> | TextInputStyle | TextInput风格。<br/>默认值:Default |
| style<sup>9+</sup> | TextInputStyle | TextInput风格。<br/>默认值:TextInputStyle.Default |
## EnterKeyType枚举说明
......@@ -56,7 +56,7 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te
| 名称 | 描述 |
| ------------------ | ------------- |
| Normal | 基本输入模式。 |
| Normal | 基本输入模式。<br/>支持输入数字、字母、下划线、空格、特殊字符。 |
| Password | 密码输入模式。 |
| Email | e-mail地址输入模式。 |
| Number | 纯数字输入模式。 |
......
# Ellipse
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
椭圆绘制组件。
## 权限列表
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......@@ -21,12 +16,12 @@
ellipse(options?: {width?: string | number, height?: string | number})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | 否 | 0 | 宽度。 |
| height | string \| number | 否 | 0 | 高度。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| width | string \| number | 否 | 宽度。<br/>默认值:0 |
| height | string \| number | 否 | 高度。<br/>默认值:0 |
## 属性
......@@ -56,9 +51,9 @@ ellipse(options?: {width?: string | number, height?: string | number})
struct EllipseExample {
build() {
Flex({ justifyContent: FlexAlign.SpaceAround }) {
// 在一个 150 * 70 的矩形框中绘制一个椭圆
// 在一个 150 * 80 的矩形框中绘制一个椭圆
Ellipse({ width: 150, height: 80 })
// 在一个 150 * 70 的矩形框中绘制一个椭圆
// 在一个 150 * 80 的矩形框中绘制一个椭圆
Ellipse().width(150).height(80)
}.width('100%').margin({ top: 5 })
}
......
......@@ -3,14 +3,10 @@
路径绘制组件,根据绘制路径生成封闭的自定义形状。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件
......@@ -19,15 +15,13 @@
Path(value?: { width?: number | string; height?: number | string; commands?: string })
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ------ | -------------------- |
| width | number \| string | 否 | 0 | 路径所在矩形的宽度 |
| height | number \| string | 否 | 0 | 路径所在矩形的高度 |
| commands | string | 否 | '' | 路径绘制的命令字符串 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | ---------------- | ---- | ----------------------------------- |
| width | number \| string | 否 | 路径所在矩形的宽度<br/>默认值:0 |
| height | number \| string | 否 | 路径所在矩形的高度<br/>默认值:0 |
| commands | string | 否 | 路径绘制的命令字符串<br/>默认值:'' |
## 属性
......
......@@ -3,20 +3,16 @@
组件的Z序,指明了该组件在堆叠组件中的位置。
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| zIndex | number | 0 | 同一容器中兄弟组件显示层级关系,z值越大,显示层级越高。 |
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| zIndex | number | 同一容器中兄弟组件显示层级关系。zIndex值越大,显示层级越高,即zIndex值大的组件会覆盖在zIndex值小的组件上方。 |
## 示例
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册