Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 44400993 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!9118 master文档整改4 

Merge pull request !9118 from 田雨/master
上级 601a0f87 9be62f5c
隐藏空白更改
内联 并排
Showing with 164 addition and 183 deletion
zh-cn/application-dev/reference/arkui-js/js-components-common-atomic-layout.md
浏览文件 @ 44400993
......@@ -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布局中，主轴尺寸先进行调整，后根据该尺寸调整交叉轴。 |
zh-cn/application-dev/reference/arkui-js/js-components-container-stepper-item.md
浏览文件 @ 44400993
......@@ -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对象定义
......
zh-cn/application-dev/reference/arkui-js/js-components-container-tab-content.md
浏览文件 @ 44400993
......@@ -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的点击实现。 |
## 样式
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md
浏览文件 @ 44400993
......@@ -26,19 +26,19 @@
支持以下表格中的属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- |
| 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 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
浏览文件 @ 44400993
......@@ -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。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md
浏览文件 @ 44400993
# 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 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @ 44400993
# 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
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ 44400993
......@@ -76,3 +76,5 @@ struct ImageEffectsExample {
}
}
```
<img src="figures/image-effect.png" alt="image-effect" />
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
浏览文件 @ 44400993
......@@ -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 | 点击菜单项的事件回调。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md
浏览文件 @ 44400993
# 多态样式
> **说明：**
> 从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 | 否 | 组件点击状态的样式。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
浏览文件 @ 44400993
......@@ -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 | 否 | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。 |
## 示例
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-props.md
浏览文件 @ 44400993
......@@ -76,3 +76,5 @@
## 数据单向性
父子组件之间数据的传递是单向的，只能从父组件传递给子组件，子组件不能直接修改父组件传递下来的值，可以将props传入的值用data接收后作为默认值，再对data的值进行修改。
更多说明请参考[props](../arkui-js/js-components-custom-props.md)。
\ No newline at end of file
zh-cn/application-dev/ui/ts-component-based-preview.md
浏览文件 @ 44400993
# @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)
}
}
}
}
```
zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md
浏览文件 @ 44400993
......@@ -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.
先完成此消息的编辑！
想要评论请 注册 或