提交 9be62f5c 编写于 作者: T tianyu

fourth

Signed-off-by: Ntianyu <tianyu55@h-partners.com>
上级 de017331
......@@ -10,24 +10,24 @@
在非折行flex布局基础上,增加了显示优先级标记,可以调整组件内元素水平/垂直方向的显示优先级,根据当前组件容器的可用空间来显示内容。
| 样式 | 类型 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- |
| display-index | number | 0 | 适用于div等支持flex布局的容器组件中的子组件上,当容器组件在flex主轴上尺寸不足以显示全部内容时,按照display-index值从小到大的顺序进行隐藏,具有相同display-index值的组件同时隐藏,默认值为0,表示隐藏。 |
| 样式 | 类型 | 说明 |
| -------- | -------- | -------- |
| display-index | number | 适用于div等支持flex布局的容器组件中的子组件,当容器组件在flex主轴上尺寸不足以显示全部内容时,按照display-index值从小到大的顺序进行隐藏,具有相同display-index值的组件同时隐藏。<br/>默认值:0(表示不隐藏) |
## 占比能力
在非折行的flex布局中,定义了占比能力的组件,保证指定元素始终在容器的某一个比例空间中进行布局。
在非折行的flex布局中,定义了占比能力的组件,保证指定组件始终在容器的某一个比例空间中进行布局。
| 样式 | 类型 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- |
| flex-weight | number | - | 指明当前元素在flex主轴方向上尺寸权值。如果容器组件中所有节点均设置此属性,当前元素尺寸为:&nbsp;容器主轴尺寸&nbsp;\*&nbsp;当前权值&nbsp;/&nbsp;所有子元素权值和。如果容器组件中某几个节点设置此属性,则容器会对其他未设置此属性的节点进行布局,再将剩余空间分配给设置了此属性的节点。设置了此属性的节点的尺寸为:容器剩余空间&nbsp;\*&nbsp;该元素权值&nbsp;/&nbsp;所有子元素权值和。 |
| 样式 | 类型 | 说明 |
| -------- | -------- | -------- |
| flex-weight | number | 指明当前元素在flex主轴方向上尺寸权值。如果容器组件中所有节点均设置此属性,当前元素尺寸为:&nbsp;容器主轴尺寸&nbsp;\*&nbsp;当前权值&nbsp;/&nbsp;所有子元素权值和。如果容器组件中某几个节点设置此属性,则容器会对其他未设置此属性的节点进行布局,再将剩余空间分配给设置了此属性的节点,如果未设置此属性的节点设置了超过父元素的宽度,那么将没有剩余空间分配给设置了此属性的节点。设置了此属性的节点的尺寸为:容器剩余空间&nbsp;\*&nbsp;该元素权值&nbsp;/&nbsp;所有子元素权值和。 |
## 固定比例
定义了组件固定比例调整尺寸的能力。
| 样式 | 类型 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- |
| aspect-ratio | number | - | 1.&nbsp;接受任意大于0的浮点值,定义为该节点的宽度与高度比,设置该属性后,该元素尺寸宽高比按照此属性值进行调整。<br/>2.&nbsp;遵守最大值与最小值的限制。<br/>3.&nbsp;在flex布局中,主轴尺寸先进行调整,后根据该尺寸调整交叉轴。 |
| 样式 | 类型 | 说明 |
| -------- | -------- | -------- |
| aspect-ratio | number | 1.&nbsp;接受任意大于0的浮点值,定义为该节点的宽度与高度比,设置该属性后,该元素尺寸宽高比按照此属性值进行调整。<br/>2.&nbsp;遵守最大值与最小值的限制。<br/>3.&nbsp;在flex布局中,主轴尺寸先进行调整,后根据该尺寸调整交叉轴。 |
......@@ -20,9 +20,9 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性:
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| label | Label | - | 否 | 自定义步骤导航器底部步骤提示文本按钮属性,不支持动态修改。如果没有定义该属性,步骤导航器在中文语言环境下,使用“返回”和“下一步”文本按钮,在非中文语言环境下,使用“BACK”和“NEXT”文本按钮。针对第一个步骤,没有回退文本按钮,针对最后一个步骤,下一步文本按钮文本使用“开始”(中文语言)或者“START”(非中文语言)。 |
| 名称 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| label | Label | &nbsp;&nbsp;&nbsp;&nbsp; | 自定义步骤导航器底部步骤提示文本按钮属性,不支持动态修改。如果没有定义该属性,步骤导航器在中文语言环境下,使用"返回"和"下一步"文本按钮,在非中文语言环境下,使用"BACK"和"NEXT"文本按钮。针对第一个步骤,没有"返回"文本按钮;针对最后一个步骤,"下一步"文本按钮文本使用"开始"(中文语言)或者"START"(非中文语言)。 |
**表1** Label对象定义
......
......@@ -19,9 +19,9 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性:
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| scrollable | boolean | true | 否 | 是否可以通过左右滑动进行页面切换。默认为true,设置为false后,页面的切换只能通过tab-bar的点击实现。 |
| 名称 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| scrollable | boolean | &nbsp;&nbsp;&nbsp;&nbsp; | 是否可以通过左右滑动进行页面切换。默认为true,设置为false后,页面的切换只能通过tab-bar的点击实现。 |
## 样式
......
......@@ -26,19 +26,19 @@ tspan。
支持以下表格中的属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- |
| id | string | - | 否 | 组件的唯一标识。 |
| path | string | 0 | 是 | 设置路径的形状。<br/>字母指令表示的意义如下:<br/>-&nbsp;M&nbsp;=&nbsp;moveto<br/>-&nbsp;L&nbsp;=&nbsp;lineto<br/>-&nbsp;H&nbsp;=&nbsp;horizontal&nbsp;lineto<br/>-&nbsp;V&nbsp;=&nbsp;vertical&nbsp;lineto<br/>-&nbsp;C&nbsp;=&nbsp;curveto<br/>-&nbsp;S&nbsp;=&nbsp;smooth&nbsp;curveto<br/>-&nbsp;Q&nbsp;=&nbsp;quadratic&nbsp;Belzier&nbsp;curve<br/>-&nbsp;T&nbsp;=&nbsp;smooth&nbsp;quadratic&nbsp;Belzier&nbsp;curveto<br/>-&nbsp;A&nbsp;=&nbsp;elliptical&nbsp;Arc<br/>-&nbsp;Z&nbsp;=&nbsp;closepath |
| startOffset | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本沿path绘制的起始偏移。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| fill | &lt;color&gt; | black | 否 | 字体填充颜色 |
| by | number | - | 否 | 相对被指定动画的属性偏移值,from默认为原属性值。 |
| opacity | number | 1 | 否 | 元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画。 |
| fill-opacity | number | 1.0 | 否 | 字体填充透明度 |
| stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色 |
| stroke-width | number | 1px | 否 | 字体边框宽度 |
| stroke-opacity | number | 1.0 | 否 | 字体边框透明度 |
| 名称 | 类型 | 默认值 | 描述 |
| -------------- | ---------------------------------- | ------ | ------------------------------------------------------------ |
| id | string | - | 组件的唯一标识。 |
| path | string | 0 | 设置路径的形状。<br/>字母指令表示的意义如下:<br/>-&nbsp;M&nbsp;=&nbsp;moveto<br/>-&nbsp;L&nbsp;=&nbsp;lineto<br/>-&nbsp;H&nbsp;=&nbsp;horizontal&nbsp;lineto<br/>-&nbsp;V&nbsp;=&nbsp;vertical&nbsp;lineto<br/>-&nbsp;C&nbsp;=&nbsp;curveto<br/>-&nbsp;S&nbsp;=&nbsp;smooth&nbsp;curveto<br/>-&nbsp;Q&nbsp;=&nbsp;quadratic&nbsp;Belzier&nbsp;curve<br/>-&nbsp;T&nbsp;=&nbsp;smooth&nbsp;quadratic&nbsp;Belzier&nbsp;curveto<br/>-&nbsp;A&nbsp;=&nbsp;elliptical&nbsp;Arc<br/>-&nbsp;Z&nbsp;=&nbsp;closepath<br/>默认值:0 |
| startOffset | &lt;length&gt;\|&lt;percentage&gt; | 0 | 设置文本沿path绘制的起始偏移。<br/>默认值:0 |
| font-size | &lt;length&gt; | 30px | 设置文本的尺寸。<br/>默认值:30px |
| fill | &lt;color&gt; | black | 字体填充颜色。<br/>默认值:black |
| by | number | - | 相对被指定动画的属性偏移值,from默认为原属性值。 |
| opacity | number | 1 | 元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画。<br/>默认值:0 |
| fill-opacity | number | 1.0 | 字体填充透明度。<br/>默认值:1.0 |
| stroke | &lt;color&gt; | black | 绘制字体边框并指定颜色。<br/>默认值:balck |
| stroke-width | number | 1px | 字体边框宽度。<br/>默认值:1px |
| stroke-opacity | number | 1.0 | 字体边框透明度。<br/>默认值:1.0 |
## 示例
......
......@@ -4,12 +4,8 @@
> **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
>
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......@@ -24,19 +20,20 @@ StepperItem()
## 属性
| 参数名 | 参数类型 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- |
| prevLabel | string | - | 当步骤导航器大于一页,除第一页默认值都为"返回"。 |
| nextLabel | string | - | 步骤导航器大于一页时,最后一页默认值为"开始",其余页默认值为"下一步"。 |
| status | ItemState | ItemState.Normal | 步骤导航器元素的状态。 |
- ItemState枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Normal | 正常状态,右侧文本按钮正常显示,可点击进入下一个StepperItem。 |
| Disabled | 不可用状态,右侧文本按钮灰度显示,不可点击进入下一个StepperItem。 |
| Waiting | 等待状态,右侧文本按钮不显示,使用等待进度条,不可点击进入下一个StepperItem。 |
| Skip | 跳过状态,表示跳过当前步骤,&nbsp;进入下一个StepperItem。 |
| 参数名 | 参数类型 | 参数描述 |
| -------- | -------- | -------- |
| prevLabel | string | 当步骤导航器大于一页,除第一页默认值都为“返回”。 |
| nextLabel | string | 步骤导航器大于一页时,最后一页默认值为“开始”,其余页默认值为“下一步”。 |
| status | ItemState | 步骤导航器元素的状态。<br/>默认值:ItemState.Normal |
## ItemState枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Normal | 正常状态,右侧文本按钮正常显示,可点击进入下一个StepperItem。 |
| Disabled | 不可用状态,右侧文本按钮灰度显示,不可点击进入下一个StepperItem。 |
| Waiting | 等待状态,右侧文本按钮不显示,使用等待进度条,不可点击进入下一个StepperItem。 |
| Skip | 跳过状态,表示跳过当前步骤,&nbsp;进入下一个StepperItem。 |
## 示例
......
# Stack
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。
## 权限列表
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......@@ -19,12 +14,13 @@
## 接口
Stack(value:{alignContent?: Alignment})
Stack({&nbsp;alignContent?:&nbsp;Alignment&nbsp;})
**参数:**
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| alignContent | [Alignment](ts-appendix-enums.md#alignment枚举说明) | 否 | Center | 设置子组件在容器内的对齐方式。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| alignContent | [Alignment](ts-appendix-enums.md#alignment) | 否 | 设置子组件在容器内的对齐方式。<br/>默认值:Alignment.Center |
## 示例
......
# Swiper
滑块视图容器,提供子组件滑动轮播显示的能力。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
滑动容器,提供切换子组件显示的能力。
## 权限列表
## 子组件
可以包含子组件。
......@@ -24,14 +18,14 @@ Swiper(value:{controller?: SwiperController})
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ---------- | ------------------------------------- | ---- | -------------------- |
| controller | [SwiperController](#swipercontroller) | 否 | 给组件绑定一个控制器,用来控制组件翻页。<br/>默认值:null |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ---------- | ------------------------------------- | ---- | -------------------- |
| controller | [SwiperController](#swipercontroller) | 否 | 给组件绑定一个控制器,用来控制组件翻页。 |
## 属性
不支持[Menu控制](ts-universal-attributes-menu.md)
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性,不支持[Menu控制](ts-universal-attributes-menu.md)
| 名称 | 参数类型 | 描述 |
| --------------------------- | ---------------------------------------- | ---------------------------------------- |
......@@ -42,29 +36,29 @@ Swiper(value:{controller?: SwiperController})
| loop | boolean | 是否开启循环。<br>设置为true时表示开启循环,在LazyForEach懒循环加载模式下,加载的组件数量建议大于5个。<br/>默认值:true |
| duration | number | 子组件切换的动画时长,单位为毫秒。<br/>默认值:400 |
| vertical | boolean | 是否为纵向滑动。<br/>默认值:false |
| itemSpace | Length | 设置子组件与子组件之间间隙。<br/>默认值:0 |
| itemSpace | number&nbsp;\|&nbsp;string | 设置子组件与子组件之间间隙。<br/>默认值:0 |
| displayMode | SwiperDisplayMode | 主轴方向上元素排列的模式,优先以displayCount设置的个数显示,displayCount未设置时本属性生效。<br/>默认值:SwiperDisplayMode.Stretch |
| cachedCount<sup>8+</sup> | number | 设置预加载子组件个数。<br/>默认值:1 |
| disableSwipe<sup>8+</sup> | boolean | 禁用组件滑动切换功能。<br/>默认值:false |
| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | 设置Swiper的动画曲线,默认为淡入淡出曲线,常用曲线参考[Curve枚举说明](ts-appendix-enums.md#curve),也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。<br/>默认值:Curve.Ease |
| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>mask?:&nbsp;boolean,<br/>color?:&nbsp;[ResourceColor](../../ui/ts-types.md),<br/>selectedColor?:&nbsp;[ResourceColor](../../ui/ts-types.md)<br/>} | - | 设置indicator样式:<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;mask:&nbsp;设置是否显示导航点蒙层样式。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 |
| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>top?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>right?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>bottom?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>size?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>mask?:&nbsp;boolean,<br/>color?:&nbsp;[ResourceColor](../../ui/ts-types.md),<br/>selectedColor?:&nbsp;[ResourceColor](../../ui/ts-types.md)<br/>} | 设置导航点样式:<br/>\- left: 设置导航点距离Swiper组件左边的距离。<br/>\- top: 设置导航点距离Swiper组件顶部的距离。<br/>\- right: 设置导航点距离Swiper组件右边的距离。<br/>\- bottom: 设置导航点距离Swiper组件底部的距离。<br/>\- size: 设置导航点的直径。<br/>\- mask: 设置是否显示导航点蒙层样式。<br/>\- color: 设置导航点的颜色。<br/>\- selectedColor: 设置选中的导航点的颜色。 |
| displayCount<sup>8+</sup> | number\|string | 设置元素显示个数。<br/>默认值:1 |
| effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。<br/>默认值:EdgeEffect.Spring |
## SwiperDisplayMode枚举说明
| 名称 | 描述 |
| ----------- | ------------------------------------------ |
| Stretch | Swiper滑动一页的宽度为Swiper组件自身的宽度。|
| AutoLinear | Swiper滑动一页的宽度为子组件宽度中的最大值。|
| 名称 | 描述 |
| ----------- | ------------------------------------------ |
| Stretch | Swiper滑动一页的宽度为Swiper组件自身的宽度。|
| AutoLinear | Swiper滑动一页的宽度为子组件宽度中的最大值。|
## EdgeEffect枚举说明
| 名称 | 描述 |
| ------ | ------------------------------------------------------------------------- |
| Spring | 弹性物理动效,滑动到边缘后可以通过触摸事件继续滑动一段距离,松手后回弹。 |
| Fade | 滑动到边缘后,可以通过触摸事件继续滑动一段阴影,松手后阴影回弹。 |
| None | 滑动到边缘后无效果。 |
| 名称 | 描述 |
| ------ | ------------------------------------------------------------------------- |
| Spring | 弹性物理动效,滑动到边缘后可以通过触摸事件继续滑动一段距离,松手后回弹。 |
| Fade | 滑动到边缘后,可以通过触摸事件继续滑动一段阴影,松手后阴影回弹。 |
| None | 滑动到边缘后无效果。 |
## SwiperController
......
......@@ -76,3 +76,5 @@ struct ImageEffectsExample {
}
}
```
<img src="figures/image-effect.png" alt="image-effect" />
\ No newline at end of file
......@@ -3,28 +3,24 @@
为组件绑定弹出式菜单,弹出式菜单以垂直列表形式显示菜单项,可通过长按、点击或鼠标右键触发。
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------------------------- | ---------------------------------------- | ---- | ---------------------------------- |
| bindMenu | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 给组件绑定菜单,点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](../../ui/ts-types.md),<br>responseType:&nbsp;[ResponseType](ts-appendix-enums.md#responsetype8) | - | 给组件绑定菜单,触发方式为长按或者右键点击,弹出菜单项需要自定义。 |
| 名称 | 参数类型 | 描述 |
| ---------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| bindMenu | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | 给组件绑定菜单,点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](../../ui/ts-types.md),<br>responseType:&nbsp;[ResponseType](ts-appendix-enums.md#responsetype8) | 给组件绑定菜单,触发方式为长按或者右键点击,弹出菜单项需要自定义。 |
## MenuItem
- MenuItem
| 名称 | 类型 | 描述 |
| ------ | ----------------------- | ----------- |
| value | string | 菜单项文本。 |
| action | ()&nbsp;=&gt;&nbsp;void | 点击菜单项的事件回调。 |
| 名称 | 类型 | 描述 |
| ------ | ----------------------- | ----------- |
| value | string | 菜单项文本。 |
| action | ()&nbsp;=&gt;&nbsp;void | 点击菜单项的事件回调。 |
## 示例
......
# 多态样式
> **说明:**
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
设置组件不同状态下的样式。
> **说明:**
>
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 属性
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| stateStyles | StateStyles | 设置组件不同状态的样式。 |
## 属性
## StateStyles接口说明
| 名称 | 参数类型 | 默认值 | 描述 |
| 名称 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| stateStyles | StateStyles | - | 设置组件不同状态的样式。 |
- StateStyles接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| normal | ()=&gt;void | 否 | - | 组件无状态时的样式。 |
| pressed | ()=&gt;void | 否 | - | 组件按下状态的样式。 |
| disabled | ()=&gt;void | 否 | - | 组件禁用状态的样式。 |
| focused | ()=&gt;void | 否 | - | 组件聚焦状态的样式。 |
| clicked | ()=&gt;void | 否 | - | 组件点击状态的样式。 |
| normal | ()=&gt;void | 否 | 组件无状态时的样式。 |
| pressed | ()=&gt;void | 否 | 组件按下状态的样式。 |
| disabled | ()=&gt;void | 否 | 组件禁用状态的样式。 |
| focused | ()=&gt;void | 否 | 组件获焦状态的样式。 |
| clicked | ()=&gt;void | 否 | 组件点击状态的样式。 |
## 示例
......
......@@ -3,43 +3,40 @@
设置组件点击时弹出的气泡框状态。
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 接口
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| bindPopup | show:&nbsp;boolean,<br/>popup:&nbsp;PopupOptions&nbsp;\|&nbsp;CustomPopupOptions<sup>8+</sup> | 给组件绑定Popup,点击弹出弹窗。<br/>show:&nbsp;创建页面弹窗提示是否默认显示,默认值为false。<br/>popup:&nbsp;配置当前弹窗提示的参数。 |
## 属性
## PopupOptions类型说明
| 名称 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| message | string | 是 | 弹窗信息内容。 |
| placementOnTop | boolean | 否 | 是否在组件上方显示,默认值为false。 |
| arrowOffset<sup>9+</sup> | [Length](../../ui/ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时,默认居左;箭头在气泡左右侧时,默认居上。 |
| primaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 |
| secondaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 |
| onStateChange | (event:&nbsp;{&nbsp;isVisible:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void | 否 | 弹窗状态变化事件回调,参数isVisible为弹窗当前的显示状态。 |
## CustomPopupOptions<sup>8+</sup>类型说明
| 名称 | 参数类型 | 默认值 | 描述 |
| 名称 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| bindPopup | show:&nbsp;boolean,<br/>popup:&nbsp;PopupOptions&nbsp;\|&nbsp;CustomPopupOptions | - | 给组件绑定Popup,点击弹出弹窗。<br/>show:&nbsp;创建页面弹窗提示是否默认显示,默认值为false。<br/>popup:&nbsp;配置当前弹窗提示的参数。 |
- PopupOptions类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| message | string | 是 | - | 弹窗信息内容。 |
| placementOnTop | boolean | 否 | false | 是否在组件上方显示,默认值为false。 |
| arrowOffset<sup>9+</sup> | Length | 否 | - | popup箭头在弹窗处的偏移。箭头在气泡上下方时,默认居左;箭头在气泡左右侧,默认居上。 |
| primaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 |
| secondaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 |
| onStateChange | (isVisible:&nbsp;boolean)&nbsp;=&gt;&nbsp;void | 否 | - | 弹窗状态变化事件回调,参数isVisible为弹窗当前的显示状态。 |
- CustomPopupOptions<sup>8+</sup>类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| builder | ()&nbsp;=&gt;&nbsp;any | 是 | - | 提示气泡内容的构造器。 |
| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | Placement.Bottom | 气泡组件优先显示的位置,当前位置显示不下时,会自动调整位置。 |
| arrowOffset<sup>9+</sup> | Length | 否 | - | popup箭头在弹窗处的偏移。箭头在气泡上下方时,默认居左;箭头在气泡左右侧,默认居上。 |
| maskColor | [ResourceColor](../../ui/ts-types.md) | 否 | - | 提示气泡遮障层的颜色。 |
| popupColor | [ResourceColor](../../ui/ts-types.md) | 否 | - | 提示气泡的颜色。 |
| enableArrow | boolean | 否 | true | 是否显示箭头。<br/>从API Version 9开始,如果箭头所在方位侧的气泡长度不足以显示下箭头,则会默认不显示箭头。比如:placement设置为Left,但气泡高度小于箭头的宽度(32vp),则实际不会显示箭头。 |
| autoCancel | boolean | 否 | true | 页面有操作时,是否自动关闭气泡 |
| onStateChange | (isVisible:&nbsp;boolean)&nbsp;=&gt;&nbsp;void | 否 | - | 弹窗状态变化事件回调,参数为弹窗当前的显示状态。 |
| builder | [CustomBuilder](../../ui/ts-types.md) | 是 | 提示气泡内容的构造器。 |
| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 气泡组件优先显示的位置,当前位置显示不下时,会自动调整位置。<br/>默认值:Placement.Bottom |
| arrowOffset<sup>9+</sup> | [Length](../../ui/ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时,默认居左;箭头在气泡左右侧时,默认居上。 |
| maskColor | [ResourceColor](../../ui/ts-types.md) | 否 | 提示气泡遮障层的颜色。 |
| popupColor | [ResourceColor](../../ui/ts-types.md) | 否 | 提示气泡的颜色。 |
| enableArrow | boolean | 否 | 是否显示箭头。<br/>从API Version 9开始,如果箭头所在方位侧的气泡长度不足以显示下箭头,则会默认不显示箭头。比如:placement设置为Left,但气泡高度小于箭头的宽度(32vp),则实际不会显示箭头。<br/>默认值:true |
| autoCancel | boolean | 否 | 页面有操作时,是否自动关闭气泡<br/>默认值:true |
| onStateChange | (event:&nbsp;{&nbsp;isVisible:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void | 否 | 弹窗状态变化事件回调,参数为弹窗当前的显示状态。 |
## 示例
......
......@@ -76,3 +76,5 @@
## 数据单向性
父子组件之间数据的传递是单向的,只能从父组件传递给子组件,子组件不能直接修改父组件传递下来的值,可以将props传入的值用data接收后作为默认值,再对data的值进行修改。
更多说明请参考[props](../arkui-js/js-components-custom-props.md)
\ No newline at end of file
# @Preview
用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行预览,加载页面时,将创建并呈现@Preview装饰的自定义组件。
用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行实时预览,不支持动态图和动态预览,加载页面时,将创建并呈现@Preview装饰的自定义组件。
> **说明:**
> 在单个源文件中,最多可以使用10个@Preview装饰自定义组件。
> 在单个源文件中,最多可以使用10个@Preview装饰自定义组件,更多说明请参考[@Preview]( https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-previewing-app-service-0000001218760596#section146052489820 )
@Preview的用法如下:
......@@ -15,46 +15,47 @@
@Entry
@Component
struct MyComponent {
build() {
Column() {
Row() {
Text('Hello World!')
.fontSize("50lpx")
.fontWeight(FontWeight.Bold)
}
Row() {
Component1()
}
Row() {
Component2()
}
}
build() {
Column() {
Row() {
Text('Hello World!')
.fontSize("50lpx")
.fontWeight(FontWeight.Bold)
}
Row() {
Component1()
}
Row() {
Component2()
}
}
}
}
@Preview
@Component
struct Component1 {
build() {
Column() {
Row() {
Text('Hello Component1')
.fontSize("50lpx")
.fontWeight(FontWeight.Bold)
}
}
build() {
Column() {
Row() {
Text('Hello Component1')
.fontSize("50lpx")
.fontWeight(FontWeight.Bold)
}
}
}
}
@Component
struct Component2 {
build() {
Column() {
Row() {
Text('Hello Component2')
.fontSize("50lpx")
.fontWeight(FontWeight.Bold)
}
}
build() {
Column() {
Row() {
Text('Hello Component2')
.fontSize("50lpx")
.fontWeight(FontWeight.Bold)
}
}
}
}
```
......@@ -5,10 +5,10 @@
## 生命周期回调函数定义
| 函数名 | 描述 |
| ---------------- | ---------------------------------------- |
| 函数名 | 描述 |
| ---------------- | ------------------------------------------------------------ |
| aboutToAppear | 函数在创建自定义组件的新实例后,在执行其build函数之前执行。允许在aboutToAppear函数中改变状态变量,更改将在后续执行build函数中生效。 |
| aboutToDisappear | 函数在自定义组件析构消耗之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。 |
| aboutToDisappear | 函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。 |
| onPageShow | 页面显示时触发一次,包括路由过程、应用进入前后台等场景,仅@Entry修饰的自定义组件生效。 |
| onPageHide | 页面消失时触发一次,包括路由过程、应用进入前后台等场景,仅@Entry修饰的自定义组件生效。 |
| onBackPress | 当用户点击返回按钮时触发,仅\@Entry修饰的自定义组件生效。<br/>-&nbsp;返回true表示页面自己处理返回逻辑,&nbsp;不进行页面路由。<br/>-&nbsp;返回false表示使用默认的返回逻辑。<br/>-&nbsp;不返回值会作为false处理。 |
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册