提交 cf4b2b87 编写于 作者: H HelloCrease

update docs

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 f09bc557
...@@ -8,22 +8,22 @@ ...@@ -8,22 +8,22 @@
## 属性 ## 属性
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- | | -------------------------------- | ---------------------------------------- | ---------------------------------------- |
| background<sup>10+</sup> | builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: {align?:[Alignment](ts-appendix-enums.md#alignment)} | builder:自定义背景。<br/>align:设置自定义背景与组件的对齐方式。<br/>同时设置了background,backgroundColor,backgroundImage时,叠加显示,background在最上层。<br/>不支持嵌套使用该属性。 | | background<sup>10+</sup> | builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: {align?:[Alignment](ts-appendix-enums.md#alignment)} | builder:自定义背景。<br/>align:设置自定义背景与组件的对齐方式。<br/>同时设置了background,backgroundColor,backgroundImage时,叠加显示,background在最上层。<br/>不支持嵌套使用该属性。 |
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 设置组件的背景色。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 设置组件的背景色。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| backgroundImage | src:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>repeat?:&nbsp;[ImageRepeat](ts-appendix-enums.md#imagerepeat) | src:图片地址,支持网络图片资源地址和本地图片资源地址和Base64,不支持svg类型的图片。<br/>repeat:设置背景图片的重复样式,默认不重复。当设置的背景图片为透明底色图片,且同时设置了backgroundColor时,二者叠加显示,背景颜色在最底部。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | backgroundImage | src:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>repeat?:&nbsp;[ImageRepeat](ts-appendix-enums.md#imagerepeat) | src:图片地址,支持网络图片资源地址和本地图片资源地址和Base64,不支持svg类型的图片。<br/>repeat:设置背景图片的重复样式,默认不重复。当设置的背景图片为透明底色图片,且同时设置了backgroundColor时,二者叠加显示,背景颜色在最底部。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| backgroundImageSize | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>height?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;[ImageSize](ts-appendix-enums.md#imagesize) | 设置背景图像的高度和宽度。当输入为{width:&nbsp;Length,&nbsp;height:&nbsp;Length}对象时,如果只设置一个属性,则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。<br/>width和height取值范围: [0, +∞)<br/>默认值:ImageSize.Auto<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>设置为小于0的值时,按值为0显示。当设置了height未设置width时,width根据图片原始宽高比进行调整。 | | backgroundImageSize | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>height?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;[ImageSize](ts-appendix-enums.md#imagesize) | 设置背景图像的高度和宽度。当输入为{width:&nbsp;Length,&nbsp;height:&nbsp;Length}对象时,如果只设置一个属性,则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。<br/>width和height取值范围: [0, +∞)<br/>默认值:ImageSize.Auto<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>设置为小于0的值时,按值为0显示。当设置了height未设置width时,width根据图片原始宽高比进行调整。 |
| backgroundImagePosition | [Position](ts-types.md#position8)&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置,即相对于组件左上角的坐标。<br/>默认值:<br/>{<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} <br/> x和y值设置百分比时,偏移量是相对组件自身宽高计算的。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | backgroundImagePosition | [Position](ts-types.md#position8)&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置,即相对于组件左上角的坐标。<br/>默认值:<br/>{<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} <br/> x和y值设置百分比时,偏移量是相对组件自身宽高计算的。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| backgroundBlurStyle<sup>9+</sup> | value:[BlurStyle](ts-appendix-enums.md#blurstyle9),<br/>options<sup>10+</sup>?:[BackgroundBlurStyleOptions](#backgroundblurstyleoptions10对象说明) | 为当前组件提供一种在背景和内容之间的模糊能力。<br/>value: 背景模糊样式。模糊样式中封装了模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度五个参数。<br/>options: 可选参数,背景模糊选项。<br/>该接口支持在ArkTS卡片中使用。 | | backgroundBlurStyle<sup>9+</sup> | value:[BlurStyle](ts-appendix-enums.md#blurstyle9),<br/>options<sup>10+</sup>?:[BackgroundBlurStyleOptions](#backgroundblurstyleoptions10对象说明) | 为当前组件提供一种在背景和内容之间的模糊能力。<br/>value: 背景模糊样式。模糊样式中封装了模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度五个参数。<br/>options: 可选参数,背景模糊选项。<br/>该接口支持在ArkTS卡片中使用。 |
## BackgroundBlurStyleOptions<sup>10+</sup>对象说明 ## BackgroundBlurStyleOptions<sup>10+</sup>对象说明
| 名称 | 参数类型 | 必填 | 描述 | | 名称 | 参数类型 | 必填 | 描述 |
| --------------------------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ | | ------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| colorMode<sup>10+</sup> | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | 否 | 背景模糊效果使用的深浅色模式。<br/>默认值:ThemeColorMode.System | | colorMode | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | 否 | 背景模糊效果使用的深浅色模式。<br/>默认值:ThemeColorMode.System |
| adaptiveColor<sup>10+</sup> | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10) | 否 | 背景模糊效果使用的取色模式。<br/>默认值:AdaptiveColor.Default | | adaptiveColor | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10) | 否 | 背景模糊效果使用的取色模式。<br/>默认值:AdaptiveColor.Default |
| scale<sup>10+</sup> | number | 否 | 背景材质模糊效果程度。此参数为系统接口。<br/>默认值:1.0 <br/>取值范围:[0.0, 1.0]<br/>| | scale | number | 否 | 背景材质模糊效果程度。此参数为系统接口。<br/>默认值:1.0 <br/>取值范围:[0.0, 1.0]<br/> |
## 示例 ## 示例
......
...@@ -8,22 +8,22 @@ ...@@ -8,22 +8,22 @@
## 属性 ## 属性
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| ---------- | ---------------------------------------- | --------------------------------------- | | ----------- | ---------------------------------------- | -------------------------------------- |
| borderImage | [BorderImageOption](#borderimageoption对象说明) | 图片边框或者渐变色边框设置接口。<br/>该接口支持在ArkTS卡片中使用。 | | borderImage | [BorderImageOption](#borderimageoption对象说明) | 图片边框或者渐变色边框设置接口。<br/>该接口支持在ArkTS卡片中使用。 |
## BorderImageOption对象说明 ## BorderImageOption对象说明
该接口支持在ArkTS卡片中使用。 该接口支持在ArkTS卡片中使用。
| 名称 | 类型 | 描述 | | 名称 | 类型 | 描述 |
| ---------- | ---------------------------------------- | --------------------------------------- | | ------ | ---------------------------------------- | ---------------------------------------- |
| source | string \| [Resource](ts-types.md#resource) \| [linearGradient](ts-universal-attributes-gradient-color.md) | 边框图源或者渐变色设置。<br/>**说明:** 边框图源仅适用于容器组件,如Row、Column、Flex,在非容器组件上使用会失效。 | | source | string \| [Resource](ts-types.md#resource) \| [linearGradient](ts-universal-attributes-gradient-color.md) | 边框图源或者渐变色设置。<br/>**说明:**<br>边框图源仅适用于容器组件,如Row、Column、Flex,在非容器组件上使用会失效。 |
| slice | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置图片边框切割宽度。<br/>默认值:0 | | slice | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置图片边框切割宽度。<br/>默认值:0 |
| width | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置图片边框宽度。<br/>默认值:0 | | width | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置图片边框宽度。<br/>默认值:0 |
| outset | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置边框图片向外延伸距离。<br/>默认值:0 | | outset | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置边框图片向外延伸距离。<br/>默认值:0 |
| repeat | [RepeatMode](#repeatmode枚举说明) | 设置边框图片的重复方式。<br/>默认值:RepeatMode.Stretch | | repeat | [RepeatMode](#repeatmode枚举说明) | 设置边框图片的重复方式。<br/>默认值:RepeatMode.Stretch |
| fill | boolean | 设置边框图片中心填充。<br/>默认值:false | | fill | boolean | 设置边框图片中心填充。<br/>默认值:false |
## RepeatMode枚举说明 ## RepeatMode枚举说明
......
...@@ -8,13 +8,13 @@ ...@@ -8,13 +8,13 @@
## 属性 ## 属性
| 名称 | 参数说明 | 描述 | | 名称 | 参数说明 | 描述 |
| ---------- | ------------------------------------------- | ------------------------------------------------------------ | | ------------ | ---------------------------------------- | ---------------------------------------- |
| flexBasis | number \| string | 设置组件在父容器主轴方向上的基准尺寸。<br/>默认值:'auto'(表示组件在主轴方向上的基准尺寸为组件原本的大小)。<br/>不支持百分比设置。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | flexBasis | number \| string | 设置组件在父容器主轴方向上的基准尺寸。<br/>默认值:'auto'(表示组件在主轴方向上的基准尺寸为组件原本的大小)。<br/>不支持百分比设置。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| flexGrow | number | 设置父容器的剩余空间分配给此属性所在组件的比例。<br/>默认值:0<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | flexGrow | number | 设置父容器的剩余空间分配给此属性所在组件的比例。<br/>默认值:0<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| flexShrink | number | 设置父容器压缩尺寸分配给此属性所在组件的比例。<br/>父容器为Row、Column时,默认值:0<br/> 父容器为flex时,默认值:1<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | flexShrink | number | 设置父容器压缩尺寸分配给此属性所在组件的比例。<br/>父容器为Row、Column时,默认值:0<br/> 父容器为Flex时,默认值:1<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | 子组件在父容器交叉轴的对齐格式,会覆盖Flex、Column、Row、GridRow布局容器中的alignItems设置。<br/>GridCol可以绑定alignsSelf属性来改变它自身在交叉轴方向上的布局。<br/>默认值:ItemAlign.Auto<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | 子组件在父容器交叉轴的对齐格式,会覆盖Flex、Column、Row、GridRow布局容器中的alignItems设置。<br/>GridCol可以绑定alignsSelf属性来改变它自身在交叉轴方向上的布局。<br/>默认值:ItemAlign.Auto<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| layoutWeight | number&nbsp;\|&nbsp;string | 父容器尺寸确定时,设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配,忽略元素本身尺寸设置,表示自适应占满剩余空间。<br>默认值:0<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>仅在Row/Column/Flex布局中生效。<br/>可选值为大于等于0的数字,或者可以转换为数字的字符串。 | | layoutWeight | number&nbsp;\|&nbsp;string | 父容器尺寸确定时,设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配,忽略元素本身尺寸设置,表示自适应占满剩余空间。<br>默认值:0<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>仅在Row/Column/Flex布局中生效。<br/>可选值为大于等于0的数字,或者可以转换为数字的字符串。 |
## 示例 ## 示例
......
...@@ -9,14 +9,15 @@ ...@@ -9,14 +9,15 @@
## 属性 ## 属性
| 名称 | 参数说明 | 描述 | | 名称 | 参数说明 | 描述 |
| --------------- | -------- | ------------------------------------------------------------ | | --------------- | ------ | ---------------------------------------- |
| aspectRatio | number | 指定当前组件的宽高比,aspectRatio = width/height。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | aspectRatio | number | 指定当前组件的宽高比,aspectRatio = width/height。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| displayPriority | number | 设置当前组件在布局容器中显示的优先级,当父容器空间不足时,低优先级的组件会被隐藏。<br/>小数点后的数字不作优先级区分,即区间为[x, x + 1)内的数字视为相同优先级。例如:1.0与1.9为同一优先级。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>仅在Row/Column/Flex(单行)容器组件中生效。 | | displayPriority | number | 设置当前组件在布局容器中显示的优先级,当父容器空间不足时,低优先级的组件会被隐藏。<br/>小数点后的数字不作优先级区分,即区间为[x, x + 1)内的数字视为相同优先级。例如:1.0与1.9为同一优先级。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>仅在Row/Column/Flex(单行)容器组件中生效。 |
## 示例 ## 示例
### 示例1
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
...@@ -76,6 +77,8 @@ struct AspectRatioExample { ...@@ -76,6 +77,8 @@ struct AspectRatioExample {
**图2** 横屏显示<br> **图2** 横屏显示<br>
![zh-cn_image_0000001174264382](figures/zh-cn_image_0000001174264382.gif) ![zh-cn_image_0000001174264382](figures/zh-cn_image_0000001174264382.gif)
### 示例2
```ts ```ts
class ContainerInfo { class ContainerInfo {
label: string = ''; label: string = '';
......
...@@ -14,8 +14,8 @@ ...@@ -14,8 +14,8 @@
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| ---------------------------- | ---------------------------------------- | ---------------------------------------- | | ---------------------------- | ---------------------------------------- | ---------------------------------------- |
| bindMenu | content: Array<[MenuItem](#menuitem)&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8),<br>options: [MenuOptions](#menuoptions10) | 给组件绑定菜单,点击后弹出菜单。弹出菜单项支持图标+文本排列和自定义两种功能。<br/>content: 必填,配置菜单项图标和文本的数组,或者自定义组件。<br/>options: 非必填,配置弹出菜单的参数。 | | bindMenu | content: Array<[MenuItem](#menuitem)&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8),<br>options?: [MenuOptions](#menuoptions10) | 给组件绑定菜单,点击后弹出菜单。弹出菜单项支持图标+文本排列和自定义两种功能。<br/>content: 配置菜单项图标和文本的数组,或者自定义组件。<br/>options: 配置弹出菜单的参数。 |
| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](ts-types.md#custombuilder8),<br>responseType:&nbsp;[ResponseType](ts-appendix-enums.md#responsetype8)<br>options: [ContextMenuOptions](#contextmenuoptions10) | 给组件绑定菜单,触发方式为长按或者右键点击,弹出菜单项需要自定义。<br/>responseType: 必填。菜单弹出条件,长按或者右键点击。<br/>options: 非必填,配置弹出菜单的参数。 | | bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](ts-types.md#custombuilder8),<br>responseType:&nbsp;[ResponseType](ts-appendix-enums.md#responsetype8)<br>options?: [ContextMenuOptions](#contextmenuoptions10) | 给组件绑定菜单,触发方式为长按或者右键点击,弹出菜单项需要自定义。<br/>responseType: 菜单弹出条件,长按或者右键点击。<br/>options: 配置弹出菜单的参数。 |
## MenuItem ## MenuItem
...@@ -27,13 +27,13 @@ ...@@ -27,13 +27,13 @@
## MenuOptions<sup>10+</sup> ## MenuOptions<sup>10+</sup>
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ----------- | -------------------------------------------- | ---- | ------------------------------------------------------------ | | ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
| title | string | 否 | 菜单标题。<br>**说明:** <br/>仅在content设置为Array<[MenuItem](#menuitem)&gt; 时生效。 | | title | string | 否 | 菜单标题。<br>**说明:** <br/>仅在content设置为Array<[MenuItem](#menuitem)&gt; 时生效。 |
| offset | [Position](ts-types.md#position8) | 否 | 菜单弹出位置的偏移量,不会导致菜单显示超出屏幕范围。 | | offset | [Position](ts-types.md#position8) | 否 | 菜单弹出位置的偏移量,不会导致菜单显示超出屏幕范围。 |
| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 菜单组件优先显示的位置,当前位置显示不下时,会自动调整位置。<br/>**说明:**<br />placement值设置为undefined、null或没有设置此选项时,按默认值[BottomLeft](ts-appendix-enums.md#placement8)处理,相对父组件区域弹出。 | | placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 菜单组件优先显示的位置,当前位置显示不下时,会自动调整位置。<br/>**说明:**<br />placement值设置为undefined、null或没有设置此选项时,按默认值[BottomLeft](ts-appendix-enums.md#placement8)处理,相对父组件区域弹出。 |
| onAppear | ()&nbsp;=&gt;&nbsp;void | 否 | 菜单弹出时的事件回调。 | | onAppear | ()&nbsp;=&gt;&nbsp;void | 否 | 菜单弹出时的事件回调。 |
| onDisappear | ()&nbsp;=&gt;&nbsp;void | 否 | 菜单消失时的事件回调。 | | onDisappear | ()&nbsp;=&gt;&nbsp;void | 否 | 菜单消失时的事件回调。 |
## ContextMenuOptions<sup>10+</sup> ## ContextMenuOptions<sup>10+</sup>
...@@ -41,8 +41,8 @@ ...@@ -41,8 +41,8 @@
| ----------- | ---------------------------------------- | ---- | ---------------------------------------- | | ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
| offset | [Position](ts-types.md#position8) | 否 | 菜单弹出位置的偏移量,不会导致菜单显示超出屏幕范围。 | | offset | [Position](ts-types.md#position8) | 否 | 菜单弹出位置的偏移量,不会导致菜单显示超出屏幕范围。 |
| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 菜单组件优先显示的位置,当前位置显示不下时,会自动调整位置。<br/>**说明:**<br />placement值设置为undefined、null或没有设置此选项时,按未设置placement处理,菜单跟随点击位置弹出。 | | placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 菜单组件优先显示的位置,当前位置显示不下时,会自动调整位置。<br/>**说明:**<br />placement值设置为undefined、null或没有设置此选项时,按未设置placement处理,菜单跟随点击位置弹出。 |
| enableArrow | boolean | 否 | 是否显示箭头。如果菜单的大小和位置不足以放置箭头时,不会显示箭头。 <br/>默认值:false, 不显示箭头。<br/>**说明:**<br />箭头显示时,placement未设置或者值为非法值,默认在目标物上方显示,否则按照placement的位置优先显示。当前位置显示不下时,会自动调整位置。| | enableArrow | boolean | 否 | 是否显示箭头。如果菜单的大小和位置不足以放置箭头时,不会显示箭头。 <br/>默认值:false, 不显示箭头。<br/>**说明:**<br />箭头显示时,placement未设置或者值为非法值,默认在目标物上方显示,否则按照placement的位置优先显示。当前位置显示不下时,会自动调整位置。 |
| arrowOffset | [Length](ts-types.md#length) | 否 | 箭头在菜单处的偏移。箭头在菜单水平方向时,偏移量为箭头至最左侧的距离,默认居中。箭头在菜单竖直方向时,偏移量为箭头至最上侧的距离,默认居中。偏移量必须合法且转换为具体数值时大于0才会生效,另外该值生效时不会导致箭头超出菜单四周的安全距离。根据配置的placement来计算是在水平还是竖直方向上偏移。 | | arrowOffset | [Length](ts-types.md#length) | 否 | 箭头在菜单处的偏移。箭头在菜单水平方向时,偏移量为箭头至最左侧的距离,默认居中。箭头在菜单竖直方向时,偏移量为箭头至最上侧的距离,默认居中。偏移量必须合法且转换为具体数值时大于0才会生效,另外该值生效时不会导致箭头超出菜单四周的安全距离。根据配置的placement来计算是在水平还是竖直方向上偏移。 |
| onAppear | ()&nbsp;=&gt;&nbsp;void | 否 | 菜单弹出时的事件回调。 | | onAppear | ()&nbsp;=&gt;&nbsp;void | 否 | 菜单弹出时的事件回调。 |
| onDisappear | ()&nbsp;=&gt;&nbsp;void | 否 | 菜单消失时的事件回调。 | | onDisappear | ()&nbsp;=&gt;&nbsp;void | 否 | 菜单消失时的事件回调。 |
......
...@@ -9,16 +9,16 @@ ...@@ -9,16 +9,16 @@
## 属性 ## 属性
| 名称 | 参数 | 参数描述 | | 名称 | 参数 | 参数描述 |
| ----- | ----- | ----- | | ---------------- | ---------------------------------------- | ---------------------------------------- |
| bindContentCover | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [ContentCoverOptions](#contentcoveroptions) | 给组件绑定全屏模态页面,点击后显示模态页面。模态页面内容自定义,显示方式可设置无动画过渡,上下切换过渡以及透明渐变过渡方式。<br> isShow: 必填,是否显示全屏模态页面。<br>从API version 10开始,该参数支持[$$](../../quick-start/arkts-two-way-sync.md)双向绑定变量<br>builder: 必填,配置全屏模态页面内容。<br> options: 非必填,配置全屏模态页面的可选属性。 | | bindContentCover | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [ContentCoverOptions](#contentcoveroptions) | 给组件绑定全屏模态页面,点击后显示模态页面。模态页面内容自定义,显示方式可设置无动画过渡,上下切换过渡以及透明渐变过渡方式。<br> isShow: 是否显示全屏模态页面。<br>从API version 10开始,该参数支持[$$](../../quick-start/arkts-two-way-sync.md)双向绑定变量<br>builder: 配置全屏模态页面内容。<br> options: 配置全屏模态页面的可选属性。 |
## ContentCoverOptions ## ContentCoverOptions
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
|-----|-----|-----|-----| | --------------- | ---------------------------------------- | ---- | ------------- |
| modalTransition | [ModalTransition](ts-types.md#modaltransition10) | 否 | 全屏模态页面的转场方式。 | | modalTransition | [ModalTransition](ts-types.md#modaltransition10) | 否 | 全屏模态页面的转场方式。 |
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 全屏模态页面的背板颜色。 | | backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 全屏模态页面的背板颜色。 |
| onAppear | () => void | 否 | 全屏模态页面显示回调函数。 | | onAppear | () => void | 否 | 全屏模态页面显示回调函数。 |
| onDisappear | () => void | 否 | 全屏模态页面回退回调函数。 | | onDisappear | () => void | 否 | 全屏模态页面回退回调函数。 |
## 示例 ## 示例
......
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
> **说明:** > **说明:**
> >
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| overlay | value:&nbsp;string&nbsp;&#124;&nbsp;[CustomBuilder](../arkui-ts/ts-types.md#custombuilder8)<sup>10+</sup>,<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/>} | 在当前组件上,增加遮罩文本或者叠加自定义组件作为该组件的浮层。<br/> value: 遮罩文本内容或自定义组件构造函数。<br/>options: 浮层的定位,align设置浮层相对于组件的方位,[offset](ts-universal-attributes-location.md)为浮层基于自身左上角的偏移量。浮层默认处于组件左上角。<br>两者都设置时效果重叠,浮层相对于组件方位定位后再基于当前位置的左上角进行偏移。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 <br/>注:自定义组件作为浮层时,不支持键盘走焦到自定义组件中。 | | overlay | value:&nbsp;string&nbsp;&#124;&nbsp;[CustomBuilder](../arkui-ts/ts-types.md#custombuilder8)<sup>10+</sup>,<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/>} | 在当前组件上,增加遮罩文本或者叠加自定义组件作为该组件的浮层。<br/> value: 遮罩文本内容或自定义组件构造函数。<br/>options: 浮层的定位,align设置浮层相对于组件的方位,[offset](ts-universal-attributes-location.md)为浮层基于自身左上角的偏移量。浮层默认处于组件左上角。<br>两者都设置时效果重叠,浮层相对于组件方位定位后再基于当前位置的左上角进行偏移。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 <br/>**说明:**<br>自定义组件作为浮层时,不支持键盘走焦到自定义组件中。 |
## 示例 ## 示例
......
...@@ -4,23 +4,23 @@ ...@@ -4,23 +4,23 @@
> **说明:** > **说明:**
> >
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 属性 ## 属性
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- | | --------- | ------ | ---------------------------------------- |
| restoreId | number | 标记支持分布式迁移的组件Id,用于两端设备组件的配对。同一个应用中各个支持分布式迁移组件的Id必须不同。 | | restoreId | number | 标记支持分布式迁移的组件Id,用于两端设备组件的配对。同一个应用中各个支持分布式迁移组件的Id必须不同。 |
## 支持的组件 ## 支持的组件
| 组件名称 | 起始API版本 | 迁移状态 | | 组件名称 | 起始版本 | 迁移状态 |
| -------- | -------- | -------- | | --------- | ---- | ---------------------------------------- |
| List | 8 | 迁移当前设备显示在顶部ListItem的索引值,迁移后在对端设备上,将迁移索引值对应的ListItem在List中完整地置顶显示。 | | List | 8 | 迁移当前设备显示在顶部ListItem的索引值,迁移后在对端设备上,将迁移索引值对应的ListItem在List中完整地置顶显示。 |
| Grid | 9 | 迁移当前设备显示在顶部GridItem的索引值,迁移后在对端设备上,将迁移索引值对应的GridItem在Grid中完整地置顶显示。ScrollBar位置无法迁移。 | | Grid | 9 | 迁移当前设备显示在顶部GridItem的索引值,迁移后在对端设备上,将迁移索引值对应的GridItem在Grid中完整地置顶显示。ScrollBar位置无法迁移。 |
| Scroll | 9 | 迁移距顶部滚动的绝对距离。两端设备显示规格不同等原因导致布局不一致,会影响迁移效果。 | | Scroll | 9 | 迁移距顶部滚动的绝对距离。两端设备显示规格不同等原因导致布局不一致,会影响迁移效果。 |
| TextArea | 9 | 迁移输入的文本内容和光标位置。 | | TextArea | 9 | 迁移输入的文本内容和光标位置。 |
| TextInput | 9 | 迁移输入的文本内容和光标位置。 | | TextInput | 9 | 迁移输入的文本内容和光标位置。 |
## 示例 ## 示例
......
...@@ -4,15 +4,15 @@ ...@@ -4,15 +4,15 @@
> **说明:** > **说明:**
> >
> 从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
> >
> 不支持横竖屏切换。 > 不支持横竖屏切换。
## 属性 ## 属性
| 名称 | 参数 | 参数描述 | | 名称 | 参数 | 参数描述 |
| ----- | ----- | ----- | | --------- | ---------------------------------------- | ---------------------------------------- |
| bindSheet | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [SheetOptions](#sheetoptions) | 给组件绑定半模态页面,点击后显示模态页面。<br>isShow: 必填,是否显示半模态页面。<br>从API version 10开始,该参数支持[$$](../../quick-start/arkts-two-way-sync.md)双向绑定变量<br>builder: 必填,配置半模态页面内容。<br> options: 非必填,配置半模态页面的可选属性。 | | bindSheet | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [SheetOptions](#sheetoptions) | 给组件绑定半模态页面,点击后显示模态页面。<br>isShow: 是否显示半模态页面。<br>从API version 10开始,该参数支持[$$](../../quick-start/arkts-two-way-sync.md)双向绑定变量<br>builder: 配置半模态页面内容。<br> options: 配置半模态页面的可选属性。 |
> **说明:** > **说明:**
> >
> 在非双向绑定情况下,以拖拽方式关闭半模态页面不会改变isShow参数的值。 > 在非双向绑定情况下,以拖拽方式关闭半模态页面不会改变isShow参数的值。
...@@ -20,20 +20,20 @@ ...@@ -20,20 +20,20 @@
> 为了使isShow参数值与半模态界面的状态同步,建议使用[$$](../../quick-start/arkts-two-way-sync.md)双向绑定isShow参数。 > 为了使isShow参数值与半模态界面的状态同步,建议使用[$$](../../quick-start/arkts-two-way-sync.md)双向绑定isShow参数。
## SheetOptions ## SheetOptions
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ----- | ----- | ----- | ------ | | --------------- | ---------------------------------------- | ---- | --------------- |
| height | [SheetSize](#sheetsize)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 否 | 半模态高度,默认是LARGE。 | | height | [SheetSize](#sheetsize)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 否 | 半模态高度,默认是LARGE。 |
| dragBar | boolean | 否 | 是否显示控制条,默认显示。 | | dragBar | boolean | 否 | 是否显示控制条,默认显示。 |
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 半模态页面的背板颜色。 | | backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 半模态页面的背板颜色。 |
| onAppear | () => void | 否 | 半模态页面显示回调函数。 | | onAppear | () => void | 否 | 半模态页面显示回调函数。 |
| onDisappear | () => void | 否 | 半模态页面回退回调函数。 | | onDisappear | () => void | 否 | 半模态页面回退回调函数。 |
## SheetSize ## SheetSize
| 名称 | 参数描述 | | 名称 | 参数描述 |
| -------- | -------- | | ------ | --------------- |
| MEDIUM | 指定半模态高度为屏幕高度一半。 | | MEDIUM | 指定半模态高度为屏幕高度一半。 |
| LARGE | 指定半模态高度几乎为屏幕高度。 | | LARGE | 指定半模态高度几乎为屏幕高度。 |
## 示例 ## 示例
......
...@@ -13,32 +13,32 @@ ...@@ -13,32 +13,32 @@
## 事件 ## 事件
| 名称 | 支持冒泡 | 描述 | | 名称 | 支持冒泡 | 描述 |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | | ---------------------------------------- | ---- | ---------------------------------------- |
| onHover(event:&nbsp;(isHover?:&nbsp;boolean,&nbsp;event<sup>10+</sup>?:&nbsp;HoverEvent)&nbsp;=&gt;&nbsp;void) | 是 | 鼠标进入或退出组件时触发该回调。<br/>isHover:表示鼠标是否悬浮在组件上,鼠标进入时为true,&nbsp;退出时为false。<br/>event:设置阻塞事件冒泡属性。 | | onHover(event:&nbsp;(isHover?:&nbsp;boolean,&nbsp;event<sup>10+</sup>?:&nbsp;HoverEvent)&nbsp;=&gt;&nbsp;void) | 是 | 鼠标进入或退出组件时触发该回调。<br/>isHover: 表示鼠标是否悬浮在组件上,鼠标进入时为true,&nbsp;退出时为false。<br/>event: 设置阻塞事件冒泡属性。 |
| onMouse(event:&nbsp;(event?:&nbsp;MouseEvent)&nbsp;=&gt;&nbsp;void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上悬浮移动时,触发该回调,event返回值包含触发事件时的时间戳、鼠标按键、动作、鼠标位置在整个屏幕上的坐标和相对于当前组件的坐标。 | | onMouse(event:&nbsp;(event?:&nbsp;MouseEvent)&nbsp;=&gt;&nbsp;void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上悬浮移动时,触发该回调,event返回值包含触发事件时的时间戳、鼠标按键、动作、鼠标位置在整个屏幕上的坐标和相对于当前组件的坐标。 |
## MouseEvent对象说明 ## MouseEvent对象说明
| 名称 | 属性类型 | 描述 | | 名称 | 属性类型 | 描述 |
| --------- | ------------------------------- | -------------------- | | ---------------------- | ---------------------------------------- | ---------------------------- |
| screenX | number | 鼠标位置相对于应用窗口左上角的x轴坐标。 | | screenX | number | 鼠标位置相对于应用窗口左上角的x轴坐标。 |
| screenY | number | 鼠标位置相对于应用窗口左上角的y轴坐标。 | | screenY | number | 鼠标位置相对于应用窗口左上角的y轴坐标。 |
| x | number | 鼠标位置相对于当前组件左上角的x轴坐标。 | | x | number | 鼠标位置相对于当前组件左上角的x轴坐标。 |
| y | number | 鼠标位置相对于当前组件左上角的y轴坐标。 | | y | number | 鼠标位置相对于当前组件左上角的y轴坐标。 |
| button | [MouseButton](ts-appendix-enums.md#mousebutton) | 鼠标按键。 | | button | [MouseButton](ts-appendix-enums.md#mousebutton) | 鼠标按键。 |
| action | [MouseAction](ts-appendix-enums.md#mouseaction) | 鼠标动作。 | | action | [MouseAction](ts-appendix-enums.md#mouseaction) | 鼠标动作。 |
| stopPropagation | () => void | 阻塞事件冒泡。 | | stopPropagation | () => void | 阻塞事件冒泡。 |
| timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔,单位纳秒。 | | timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔,单位纳秒。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 触发事件的元素对象显示区域。 | | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 触发事件的元素对象显示区域。 |
| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype枚举说明) | 事件输入设备。 | | source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype枚举说明) | 事件输入设备。 |
## HoverEvent<sup>10+</sup>对象说明 ## HoverEvent<sup>10+</sup>对象说明
| 名称 | 属性类型 | 描述 | | 名称 | 属性类型 | 描述 |
| --------- | ------------------------------- | -------------------- | | --------------- | ---------- | ------- |
| stopPropagation | () => void | 阻塞事件冒泡。 | | stopPropagation | () => void | 阻塞事件冒泡。 |
## 示例 ## 示例
......
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
| 添加组件 | 介绍了几种常用的内置组件、自定义组件以及通过API方式支持的界面元素。 | -&nbsp;[常用组件](arkts-common-components-button.md)<br/>- [自定义组件](../quick-start/arkts-create-custom-components.md)<br>-&nbsp;[气泡和菜单](arkts-popup-and-menu-components-popup.md) | | 添加组件 | 介绍了几种常用的内置组件、自定义组件以及通过API方式支持的界面元素。 | -&nbsp;[常用组件](arkts-common-components-button.md)<br/>- [自定义组件](../quick-start/arkts-create-custom-components.md)<br>-&nbsp;[气泡和菜单](arkts-popup-and-menu-components-popup.md) |
| 设置页面路由和组件导航 | 介绍了如何设置页面路由以及组件间的导航。 | -&nbsp;[页面路由](arkts-routing.md)<br/>-&nbsp;[组件导航](arkts-navigation-navigation.md) | | 设置页面路由和组件导航 | 介绍了如何设置页面路由以及组件间的导航。 | -&nbsp;[页面路由](arkts-routing.md)<br/>-&nbsp;[组件导航](arkts-navigation-navigation.md) |
| 显示图形 | 介绍了如何显示图片、绘制自定义几何图形以及使用画布绘制自定义图形。 | -&nbsp;[图片](arkts-graphics-display.md)<br/>-&nbsp;[几何图形](arkts-geometric-shape-drawing.md)<br/>-&nbsp;[画布](arkts-drawing-customization-on-canvas.md) | | 显示图形 | 介绍了如何显示图片、绘制自定义几何图形以及使用画布绘制自定义图形。 | -&nbsp;[图片](arkts-graphics-display.md)<br/>-&nbsp;[几何图形](arkts-geometric-shape-drawing.md)<br/>-&nbsp;[画布](arkts-drawing-customization-on-canvas.md) |
| 使用动画 | 介绍了组件和页面使用动画的典型场景。 | -&nbsp;[页面内的动画](arkts-layout-update-animation.md)<br/>-&nbsp;[页面间的动画](arkts-zoom-animation.md) | | 使用动画 | 介绍了组件和页面使用动画的典型场景。 | - [属性动画](arkts-attribute-animation-overview.md)<br>- [转场动画](arkts-transition-overview.md)<br>- [组件动画](arkts-component-animation.md)<br>- [动画曲线](arkts-traditional-curve.md)<br>- [动画衔接](arkts-animation-smoothing.md)<br>- [动画效果](arkts-blur-effect.md) |
| 绑定事件 | 介绍了事件的基本概念和如何使用通用事件和手势事件。 | -&nbsp;[通用事件](arkts-common-events-touch-screen-event.md)<br/>-&nbsp;[手势事件](arkts-gesture-events-binding.md) | | 绑定事件 | 介绍了事件的基本概念和如何使用通用事件和手势事件。 | -&nbsp;[通用事件](arkts-common-events-touch-screen-event.md)<br/>-&nbsp;[手势事件](arkts-gesture-events-binding.md) |
## 相关实例 ## 相关实例
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册