提交 d4fba780 编写于 作者: K kangchongtao

主干文档修改

Signed-off-by: Nkangchongtao <kangchongtao@huawei.com>
上级 56010f34
......@@ -19,12 +19,12 @@
## 接口
Blank(min?: Length)
Blank(min?: number \| string)
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| min | [Length](../../ui/ts-types.md) | 否 | 0 | 空白填充组件在容器主轴上的最小大小。 |
| min | number \| string | 否 | 0 | 空白填充组件在容器主轴上的最小大小。 |
## 属性
......
......@@ -74,7 +74,7 @@ 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;})&nbsp;=&gt;&nbsp;void) | 图片加载出现异常时触发该回调。<br>- componentWidth:组件的宽,单位为像素。<br/>- componentHeight:组件的高,单位为像素。<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:组件的高,单位为像素。<br/> |
| onFinish(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当加载的源文件为带动效的svg图片时,当svg动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。 |
## 示例
......
......@@ -30,17 +30,19 @@ AlphabetIndexer(value: {arrayValue: Array&lt;string&gt;, selected: number})
| 名称 | 参数类型 | 描述 |
| ----------------------- | --------------- | ----------------------------------------------------------- |
| color | [ResourceColor](../../ui/ts-types.md) | 设置文字颜色。 |
| selectedColor | [ResourceColor](../../ui/ts-types.md) | 设置选中项文字颜色。 |
| popupColor | [ResourceColor](../../ui/ts-types.md) | 设置提示弹窗文字颜色。 |
| selectedBackgroundColor | [ResourceColor](../../ui/ts-types.md) | 设置选中项背景颜色。 |
| popupBackground | [ResourceColor](../../ui/ts-types.md) | 设置提示弹窗背景色。 |
| color | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置文字颜色。 |
| selectedColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置选中项文字颜色。 |
| popupColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置提示弹窗文字颜色。 |
| selectedBackgroundColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置选中项背景颜色。 |
| popupBackground | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置提示弹窗背景色。 |
| usingPopup | boolean | 设置是否使用提示弹窗。 |
| selectedFont | [Font](../../ui/ts-types.md) | 设置选中项文字样式。 |
| popupFont | [Font](../../ui/ts-types.md) | 设置提示弹窗字体样式。 |
| font | [Font](../../ui/ts-types.md) | 设置字母索引条默认字体样式。 |
| itemSize | Length | 设置字母索引条字母区域大小,字母区域为正方形,即正方形边长。 |
| selectedFont | [Font](../../ui/ts-types.md#font) | 设置选中项文字样式。 |
| popupFont | [Font](../../ui/ts-types.md#font) | 设置提示弹窗字体样式。 |
| font | [Font](../../ui/ts-types.md#font) | 设置字母索引条默认字体样式。 |
| itemSize | string \| number | 设置字母索引条字母区域大小,字母区域为正方形,即正方形边长。 |
| alignStyle | IndexerAlign | 设置字母索引条弹框的对齐样式,支持弹窗显示在索引条右侧和左侧。<br/>默认值:IndexerAlign.Right |
| selected | number | 设置选中项索引值。 |
| popupPosition | [Position](../../ui/ts-types.md#position8) | 设置弹出窗口相对于索引器条上边框中点的位置。 |
- IndexerAlign枚举说明
| 名称 | 描述 |
......
......@@ -17,7 +17,7 @@
可以包含单个子组件。
## 接口
GridCol(span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption)
GridCol(option?: {span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption})
**参数**
| 参数名 |类型|必填|说明
......
......@@ -19,7 +19,7 @@
## 接口
GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})
GridContainer(value?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})
- 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
......
......@@ -38,7 +38,7 @@ GridItem()
| 名称 | 功能描述 |
| -------- | -------- |
| onSelect(callback:&nbsp;(isSelected:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | GridItem元素被鼠标框选的状态改变时触发回调。<br/>isSelected:进入鼠标框选范围即被选中返回true,&nbsp;移出鼠标框选范围即未被选中返回false。 |
| onSelect(event:&nbsp;(isSelected:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | GridItem元素被鼠标框选的状态改变时触发回调。<br/>isSelected:进入鼠标框选范围即被选中返回true,&nbsp;移出鼠标框选范围即未被选中返回false。 |
## 示例
......
......@@ -20,25 +20,27 @@
## 接口
GridRow(options?: {columns?: number | GridRowColumnOption, gutter?: Length | GetterOption, breakpoints?: BreakPoints, direction?: GridRowDirection})
GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | GutterOption, breakpoints?: BreakPoints, direction?: GridRowDirection})
**参数:**
| 参数名 |类型|必填|说明|
|-----|-----|----|----|
|gutter|Length \| GetterOption| 否 |栅格布局间距,x代表水平方向。|
|gutter|Length \| GutterOption| 否 |栅格布局间距,x代表水平方向。|
|columns| number \| GridRowColumnOption | 否 |设置布局列数。|
|breakpoints|BreakPoints| 否 |用于设置断点值的断点数列以及基于窗口或容器尺寸的相应参照。|
|direction|GridRowDirection| 否 |栅格布局排列方向。|
## GetterOption
## GutterOption
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| x | Length \| GridRowSizeOption | 否 | 水平getter option。 |
| y | Length \| GridRowSizeOption | 否 | 竖直getter option。 |
| x | Length \| GridRowSizeOption | 否 | 水平gutter option。 |
| y | Length \| GridRowSizeOption | 否 | 竖直gutter option。 |
## GridRowColumnOption
栅格在不同宽度设备类型下,栅格列数。
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| xs | number | 否 | 最小宽度类型设备。 |
......@@ -48,12 +50,25 @@ GridRow(options?: {columns?: number | GridRowColumnOption, gutter?: Length | Get
| xl | number | 否 | 特大宽度类型设备。 |
| xxl | number | 否 | 超大宽度类型设备。 |
## GridRowSizeOption
栅格在不同宽度设备类型下,gutter的大小。
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| xs | Length | 否 | 最小宽度类型设备。 |
| sm | Length | 否 | 小宽度类型设备。 |
| md | Length | 否 | 中等宽度类型设备。 |
| lg | Length | 否 | 大宽度类型设备。 |
| xl | Length | 否 | 特大宽度类型设备。 |
| xxl | Length | 否 | 超大宽度类型设备。 |
## BreakPoints
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| value | Array<string> | 否 | 用于设置断点位置的单调递增数组。<br>默认值:["320vp", "520vp", "840vp"] |
| reference | BreakpointsReference | 否 | - | 竖直getter option。 |
| reference | BreakpointsReference | 否 | - | 竖直gutter option。 |
```ts
// 启用xs、sm、md共3个断点
breakpoints: {value: ["100vp", "200vp"]}
......@@ -108,7 +123,7 @@ GridRow(options?: {columns?: number | GridRowColumnOption, gutter?: Length | Get
### onBreakpointChange
onBreakpointChange(callback: (breakpoints: string) => void
onBreakpointChange(callback: (breakpoints: string) => void)
**参数:**
......
......@@ -22,11 +22,6 @@ Circle(options?: {width?: string | number, height?: string | number})
| width | string \| number | 否 | 0 | 宽度。 |
| height | string \| number | 否 | 0 | 高度。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string&nbsp;\|&nbsp;number | 是 | - | 宽度。 |
| height | string&nbsp;\|&nbsp;number | 是 | - | 高度。 |
## 属性
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
......
......@@ -14,9 +14,7 @@
## AnimationOptions对象说明
### 属性
| 属性名称 | 属性类型 | 描述 |
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| duration | number | 动画持续时间,单位为毫秒。<br/>默认值:1000 |
| tempo | number | 动画的播放速度,值越大动画播放越快,值越小播放越慢,为0时无动画效果。<br/>默认值:1.0 |
......@@ -24,12 +22,8 @@
| delay | number | 单位为ms(毫秒),默认不延时播放。<br/>默认值:0 |
| iterations | number | 默认播放一次,设置为-1时表示无限次播放。<br/>默认值:1 |
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | 设置动画播放模式,默认播放完成后重头开始播放。<br/>默认值:PlayMode.Normal |
| onFinish | ()&nbsp;=&gt;&nbsp;void | 动效播放完成回调。 |
### 接口
| 名称 | 功能描述 |
| -------- | -------- |
| onFinish()&nbsp;=&gt;&nbsp;void | 动效播放完成回调。 |
## 示例
......
......@@ -13,29 +13,30 @@
## ActionSheet.show
show(options: {&nbsp;paramObject1})
show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp;|&nbsp;Resource,&nbsp;confirm?: {value: string&nbsp;|&nbsp;Resource,&nbsp;action:() => void},&nbsp;cancel?:()=>void,&nbsp;sheets: Array&lt;SheetInfo&gt;,&nbsp;autoCancel?:boolean,&nbsp;alignment?: DialogAlignment,&nbsp;offset?: { dx: number | string | Resource; dy: number | string | Resource } })
定义列表弹窗并弹出。
- paramObject1参数
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 否 | 无标题 | 弹窗标题。 |
| message | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是 | - | 弹窗内容。 |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 是 | - | 弹窗标题。 |
| message | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 是 | - | 弹窗内容。 |
| autoCancel | boolean | 否 | true | 点击遮障层时,是否关闭弹窗。 |
| confirm | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 确认按钮的文本内容和点击回调。<br/>value:按钮文本内容。<br/>action:&nbsp;按钮选中时的回调。 |
| confirm | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 确认按钮的文本内容和点击回调。<br/>value:按钮文本内容。<br/>action:&nbsp;按钮选中时的回调。 |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
| offset | {<br/>dx:&nbsp;Length,<br/>dy:&nbsp;Length<br/>} | 否 | {<br/>dx:&nbsp;0,<br/>dy:&nbsp;0<br/>} | 弹窗相对alignment所在位置的偏移量。 |
| sheets | Array<SheetInfo&gt; | 是 | - | 设置选项内容,每个选择项支持设置图片、文本和选中的回调。 |
| sheets | Array&lt;SheetInfo&gt; | 是 | - | 设置选项内容,每个选择项支持设置图片、文本和选中的回调。 |
- SheetInfo接口说明
## SheetInfo接口说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ------------------------------------------------------------ | ---- | ------ | ----------------- |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是 | - | sheet文本。 |
| icon | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 否 | 无 | sheet图标。 |
| action | ()=&gt;void | 是 | - | sheet选中的回调。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ------------------------------------------------------------ | ---- | ----------------- |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 是 | 选项的文本内容。 |
| icon | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 否 | 选项的图标,默认无图标显示。 |
| action | ()=&gt;void | 是 | 选项选中的回调。 |
## 示例
......
......@@ -10,9 +10,9 @@
| 名称 | 参数类型 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- |
| show | options:&nbsp;{&nbsp;paramObject1&nbsp;\|&nbsp;paramObject2} | - | 定义并显示AlertDialog组件。 |
| show | value:&nbsp;{&nbsp;AlertDialogParamWithConfirm&nbsp;\|&nbsp;AlertDialogParamWithButtons} | - | 定义并显示AlertDialog组件。 |
- paramObject1参数
## AlertDialogParamWithConfirm对象说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 否 | - | 弹窗标题。 |
......@@ -24,7 +24,7 @@
| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
| gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。 |
- paramObject2参数
## AlertDialogParamWithButtons对象说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 否 | - | 弹窗标题。 |
......
......@@ -17,9 +17,9 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| linearGradient | {<br/>angle?:&nbsp;[Angle](../../ui/ts-types.md),<br/>direction?:&nbsp;[GradientDirection](ts-appendix-enums.md#gradientdirection),<br/>colors:&nbsp;Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br/>repeating?:&nbsp;boolean<br/>} | - | 线性渐变。<br/>angle:&nbsp;线性渐变的角度。<br/>direction:&nbsp;线性渐变的方向,设置angle后不生效。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| sweepGradient | {<br/>center:&nbsp;Point,<br/>start?:&nbsp;angle,<br/>end?:&nbsp;angle,<br/>colors:&nbsp;Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br/>repeating?:&nbsp;boolean<br/>} | - | 角度渐变。<br/>center:为角度渐变的中心点。<br/>start:角度渐变的起点。<br/>end:角度渐变的终点。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| radialGradient | {<br/>center:&nbsp;Point,<br/>radius:&nbsp;Length,<br/>colors:&nbsp;Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br/>repeating:&nbsp;boolean<br/>} | - | 径向渐变。<br/>center:径向渐变的中心点。<br/>radius:径向渐变的半径。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| linearGradient | {<br/>angle?:&nbsp;number \| string,<br/>direction?:&nbsp;[GradientDirection](ts-appendix-enums.md#gradientdirection),<br/>colors:&nbsp;Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br/>, repeating?:&nbsp;boolean<br/>} | - | 线性渐变。<br/>angle:&nbsp;线性渐变的角度。<br/>direction:&nbsp;线性渐变的方向,设置angle后不生效。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| sweepGradient | {<br/>center:&nbsp;Point,<br/>start?:&nbsp;number \| string,<br/>end?:&nbsp;number \| string,<br/>colors:&nbsp;Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br/>, repeating?:&nbsp;boolean<br/>} | - | 角度渐变。<br/>center:为角度渐变的中心点。<br/>start:角度渐变的起点。<br/>end:角度渐变的终点。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| radialGradient | {<br/>center:&nbsp;Point,<br/>radius:&nbsp;number \| string,<br/>colors:&nbsp;Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br/>, repeating:&nbsp;boolean<br/>} | - | 径向渐变。<br/>center:径向渐变的中心点。<br/>radius:径向渐变的半径。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
## 示例
......
......@@ -18,13 +18,13 @@
| ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| blur | number | - | 为当前组件添加内容模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。 |
| backdropBlur | number | - | 为当前组件添加背景模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。 |
| shadow | {<br/>radius:&nbsp;number,<br/>color?:&nbsp;Color&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>offsetX?:&nbsp;number,<br/>offsetY?:&nbsp;number<br/>} | - | 为当前组件添加阴影效果,入参为模糊半径(必填)、阴影的颜色(可选,默认为灰色)、X轴的偏移量(可选,默认为0),Y轴的偏移量(可选,默认为0),偏移量单位为px。 |
| shadow | {<br/>radius:&nbsp;number \| [Resource](../../ui/ts-types.md#resource),<br/>color?:&nbsp;Color \| string \| Resource,<br/>offsetX?:&nbsp;number \| Resource,<br/>offsetY?:&nbsp;number \| Resource<br/>} | - | 为当前组件添加阴影效果,入参为模糊半径(必填)、阴影的颜色(可选,默认为灰色)、X轴的偏移量(可选,默认为0),Y轴的偏移量(可选,默认为0),偏移量单位为px。 |
| grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例,入参1.0则完全转为灰度图像,入参则0.0图像无变化,入参在0.0和1.0之间时,效果呈线性变化。(百分比) |
| brightness | number | 1.0 | 为当前组件添加高光效果,入参为高光比例,值为1时没有效果,小于1时亮度变暗,0为全黑;大于1时亮度增加,数值越大亮度越大。 |
| saturate | number | 1.0 | 为当前组件添加饱和度效果,饱和度为颜色中的含色成分和消色成分(灰)的比例,入参为1时,显示原图像,大于1时含色成分越大,饱和度越大;小于1时消色成分越大,饱和度越小。(百分比) |
| contrast | number | 1.0 | 为当前组件添加对比度效果,入参为对比度的值,值为1时,显示原图;大于1时,值越大对比度越高,图像越清晰醒目;小于1时,值越小对比度越低;当对比度为0时,图像变为全灰。(百分比) |
| invert | number | 0 | 反转输入的图像。入参为图像反转的比例。值为1时完全反转。值为0则图像无变化。(百分比) |
| colorBlend&nbsp;<sup>8+</sup> | Color&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | - | 为当前组件添加颜色叠加效果,入参为叠加的颜色。 |
| colorBlend&nbsp;<sup>8+</sup> | Color&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | - | 为当前组件添加颜色叠加效果,入参为叠加的颜色。 |
| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的,值为0图像无变化。&nbsp;(百分比) |
| hueRotate | number\|string | '0deg' | 色相旋转效果,输入参数为旋转角度。 |
......
......@@ -16,7 +16,7 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| overlay | title:&nbsp;string,<br/>options:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment枚举说明),<br/>offset?:&nbsp;{x:&nbsp;number,&nbsp;y:&nbsp;number}<br/>} | {<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} | 在当前组件上,增加遮罩文本,布局与当前组件相同。 |
| overlay | value:&nbsp;string,<br/>options?:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment),&nbsp;<br/>offset?:&nbsp;{x?:&nbsp;number, y?:&nbsp;number}<br/>} | {<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} | 在当前组件上,增加遮罩文本,布局与当前组件相同。 |
## 示例
......
......@@ -17,8 +17,8 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| clip | Shape&nbsp;\|&nbsp;boolean | false | 参数为Shape类型时,按指定的形状对当前组件进行裁剪;参数为boolean类型时,设置是否按照边缘轮廓进行裁剪。 |
| mask | Shape | - | 在当前组件上加上指定形状的遮罩。 |
| clip | [Circle](ts-drawing-components-circle.md)&nbsp;\|&nbsp;[Ellipse](ts-drawing-components-ellipse.md)&nbsp;\|&nbsp;[Path](ts-drawing-components-path.md)&nbsp;\|&nbsp;[Rect](ts-drawing-components-rect.md)&nbsp;\|&nbsp;boolean | false | 参数为相应类型的组件,按指定的形状对当前组件进行裁剪;参数为boolean类型时,设置是否按照边缘轮廓进行裁剪。 |
| mask | [Circle](ts-drawing-components-circle.md)&nbsp;\|&nbsp;[Ellipse](ts-drawing-components-ellipse.md)&nbsp;\|&nbsp;[Path](ts-drawing-components-path.md)&nbsp;\|&nbsp;[Rect](ts-drawing-components-rect.md)&nbsp;| - | 在当前组件上加上指定形状的遮罩。 |
## 示例
......
......@@ -9,13 +9,21 @@
| 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ---------------------------------------- |
| onDragStart(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;&nbsp;[CustomBuilder](../../ui/ts-types.md)) | 否 | 第一次拖拽此事件绑定的组件时,触发回调。<br/>- event:拖拽事件信息,包括拖拽点坐标。<br/>- extraParams:拖拽事件额外信息,详见extraParam类型描述。<br/>返回值:当前跟手效果所拖拽的对象,用于显示拖拽时的提示组件。<br/>长按150毫秒(ms)可触发拖拽事件。优先级:长按手势配置时间小于等于150毫秒(ms)时,长按手势优先触发,否则拖拽事件优先触发。 |
| onDragStart(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;&nbsp;[CustomBuilder](../../ui/ts-types.md#custombuilder8)) \| DragItemInfo | 否 | 第一次拖拽此事件绑定的组件时,触发回调。<br/>- event:拖拽事件信息,包括拖拽点坐标。<br/>- extraParams:拖拽事件额外信息,详见extraParam类型描述。<br/>返回值:当前跟手效果所拖拽的对象,用于显示拖拽时的提示组件。<br/>长按150毫秒(ms)可触发拖拽事件。优先级:长按手势配置时间小于等于150毫秒(ms)时,长按手势优先触发,否则拖拽事件优先触发。 |
| onDragEnter(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽进入组件范围内时,触发回调。<br/>- event:拖拽事件信息,包括拖拽点坐标。<br/>- extraParams:拖拽事件额外信息,详见extraParam类型描述。<br/>当监听了onDrop事件时,此事件才有效。 |
| onDragMove(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽在组件范围内移动时,触发回调。<br/>- event:拖拽事件信息,包括拖拽点坐标。<br/>- extraParams:拖拽事件额外信息,详见extraParam类型描述。<br/>当监听了onDrop事件时,此事件才有效。 |
| onDragLeave(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽离开组件范围内时,触发回调。<br/>- event:拖拽事件信息,包括拖拽点坐标。<br/>- extraParams:拖拽事件额外信息,详见extraParam类型描述。<br/>当监听了onDrop事件时,此事件才有效。 |
| onDrop(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 绑定此事件的组件可作为拖拽释放目标,当在本组件范围内停止拖拽行为时,触发回调。<br/>- event:拖拽事件信息,包括拖拽点坐标。<br/>- extraParams:拖拽事件额外信息,详见extraParam类型描述。 |
- extraParam说明<br>
## DragItemInfo说明
| 属性名称 | 属性类型 | 必填 | 描述 |
| ------------- | ------ | ------- |--------------------------------- |
| pixelMap | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否 | 设置拖拽过程中显示的图片。 |
| builder | [CustomBuilder](../../ui/ts-types.md#custombuilder8) | 否 | 使用自定义生成器进行绘图,如果设置了pixelMap,则忽略此值。 |
| extraInfo | string | 否 | 拖拽项的描述。 |
## extraParam说明
用于返回组件在拖拽中需要用到的额外信息。
extraParam是Json对象转换的string字符串,可以通过Json.parse转换的Json对象获取如下属性。
| 属性名称 | 属性类型 | 描述 |
......
......@@ -148,10 +148,10 @@
| 名称 | 类型 | 必填 | 说明 |
| ------ | ------------------------------ | ---- | ------------------------------------------------------------ |
| size | number | 否 | 设置文本尺寸,Length为number类型时,使用fp单位。 |
| weight | number | 否 | 设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。 |
| family | [FontWeight](../reference/arkui-ts/ts-appendix-enums.md#fontweight) \| number \| string | 否 | 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial, sans-serif'。 |
| style | string \| Resource | 否 | 设置文本的字体样式。 |
| size | [Length](#length) | 否 | 设置文本尺寸,Length为number类型时,使用fp单位。 |
| weight | [FontWeight](../reference/arkui-ts/ts-appendix-enums.md#fontweight) \| number \| string | 否 | 设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。 |
| family | string \| [Resource](#resource) | 否 | 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial, sans-serif'。 |
| style | [FontStyle](../reference/arkui-ts/ts-appendix-enums.md#fontstyle) | 否 | 设置文本的字体样式。 |
## Area<sup>8+</sup>
......@@ -159,10 +159,10 @@
| 名称 | 类型 | 说明 |
| -------------- | -------- | ------------------------------------------------- |
| width | Length | 目标元素的宽度,作为返回值时,类型为number,单位vp。 |
| height | Length | 目标元素的高度,作为返回值时,类型为number,单位vp。 |
| position | Position | 目标元素左上角相对父元素左上角的位置。 |
| globalPosition | Position | 目标元素左上角相对页面左上角的位置。 |
| width | [Length](#length) | 目标元素的宽度,作为返回值时,类型为number,单位vp。 |
| height | [Length](#length) | 目标元素的高度,作为返回值时,类型为number,单位vp。 |
| position | [Position](#position8) | 目标元素左上角相对父元素左上角的位置。 |
| globalPosition | [Position](#position8) | 目标元素左上角相对页面左上角的位置。 |
## Position<sup>8+</sup>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册