diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-atomic-layout.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-atomic-layout.md index 7e3eba49fba43c4b99ceabfa66149ee776f6d6b3..de1a2c1f4141b09c543e04463f29d17f835243c6 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-atomic-layout.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-atomic-layout.md @@ -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值的组件同时隐藏。
默认值：0（表示不隐藏） | ## 占比能力 -在非折行的flex布局中，定义了占比能力的组件，保证指定元素始终在容器的某一个比例空间中进行布局。 +在非折行的flex布局中，定义了占比能力的组件，保证指定组件始终在容器的某一个比例空间中进行布局。 -| 样式 | 类型 | 默认值 | 说明 | -| -------- | -------- | -------- | -------- | -| flex-weight | number | - | 指明当前元素在flex主轴方向上尺寸权值。如果容器组件中所有节点均设置此属性，当前元素尺寸为： 容器主轴尺寸 \* 当前权值 / 所有子元素权值和。如果容器组件中某几个节点设置此属性，则容器会对其他未设置此属性的节点进行布局，再将剩余空间分配给设置了此属性的节点。设置了此属性的节点的尺寸为：容器剩余空间 \* 该元素权值 / 所有子元素权值和。 | +| 样式 | 类型 | 说明 | +| -------- | -------- | -------- | +| flex-weight | number | 指明当前元素在flex主轴方向上尺寸权值。如果容器组件中所有节点均设置此属性，当前元素尺寸为： 容器主轴尺寸 \* 当前权值 / 所有子元素权值和。如果容器组件中某几个节点设置此属性，则容器会对其他未设置此属性的节点进行布局，再将剩余空间分配给设置了此属性的节点，如果未设置此属性的节点设置了超过父元素的宽度，那么将没有剩余空间分配给设置了此属性的节点。设置了此属性的节点的尺寸为：容器剩余空间 \* 该元素权值 / 所有子元素权值和。 | ## 固定比例 定义了组件固定比例调整尺寸的能力。 -| 样式 | 类型 | 默认值 | 说明 | -| -------- | -------- | -------- | -------- | -| aspect-ratio | number | - | 1. 接受任意大于0的浮点值，定义为该节点的宽度与高度比，设置该属性后，该元素尺寸宽高比按照此属性值进行调整。
2. 遵守最大值与最小值的限制。
3. 在flex布局中，主轴尺寸先进行调整，后根据该尺寸调整交叉轴。 | +| 样式 | 类型 | 说明 | +| -------- | -------- | -------- | +| aspect-ratio | number | 1. 接受任意大于0的浮点值，定义为该节点的宽度与高度比，设置该属性后，该元素尺寸宽高比按照此属性值进行调整。
2. 遵守最大值与最小值的限制。
3. 在flex布局中，主轴尺寸先进行调整，后根据该尺寸调整交叉轴。 | diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper-item.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper-item.md index 93cb8d57eed7de341c47faa301c310f85b0c149e..1cfc116e21b7ebb1d68c37383abd0963ce0b361b 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper-item.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper-item.md @@ -20,9 +20,9 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| label | Label | - | 否 | 自定义步骤导航器底部步骤提示文本按钮属性，不支持动态修改。如果没有定义该属性，步骤导航器在中文语言环境下，使用“返回”和“下一步”文本按钮，在非中文语言环境下，使用“BACK”和“NEXT”文本按钮。针对第一个步骤，没有回退文本按钮，针对最后一个步骤，下一步文本按钮文本使用“开始”（中文语言）或者“START”（非中文语言）。 | +| 名称 | 类型 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | +| label | Label |   否   | 自定义步骤导航器底部步骤提示文本按钮属性，不支持动态修改。如果没有定义该属性，步骤导航器在中文语言环境下，使用"返回"和"下一步"文本按钮，在非中文语言环境下，使用"BACK"和"NEXT"文本按钮。针对第一个步骤，没有"返回"文本按钮；针对最后一个步骤，"下一步"文本按钮文本使用"开始"（中文语言）或者"START"（非中文语言）。 | **表1** Label对象定义 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-content.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-content.md index 0bde9e1f25bd4445a74c897d3a8bab1cf7f790da..1d80f62b21b550d043a24153720a5e9da190dc4d 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-content.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-content.md @@ -19,9 +19,9 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| scrollable | boolean | true | 否 | 是否可以通过左右滑动进行页面切换。默认为true，设置为false后，页面的切换只能通过tab-bar的点击实现。 | +| 名称 | 类型 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | +| scrollable | boolean |   否   | 是否可以通过左右滑动进行页面切换。默认为true，设置为false后，页面的切换只能通过tab-bar的点击实现。 | ## 样式 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md index 669f8106d9da813e5754660c639bd2351b49816f..608bb435f2901a443551793254250607024f8756 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md @@ -26,19 +26,19 @@ tspan。 支持以下表格中的属性。 -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- | -| id | string | - | 否 | 组件的唯一标识。 | -| path | string | 0 | 是 | 设置路径的形状。
字母指令表示的意义如下：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath | -| startOffset | <length>\|<percentage> | 0 | 否 | 设置文本沿path绘制的起始偏移。 | -| font-size | <length> | 30px | 否 | 设置文本的尺寸。 | -| fill | <color> | black | 否 | 字体填充颜色 | -| by | number | - | 否 | 相对被指定动画的属性偏移值，from默认为原属性值。 | -| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 | -| fill-opacity | number | 1.0 | 否 | 字体填充透明度 | -| stroke | <color> | black | 否 | 绘制字体边框并指定颜色 | -| stroke-width | number | 1px | 否 | 字体边框宽度 | -| stroke-opacity | number | 1.0 | 否 | 字体边框透明度 | +| 名称 | 类型 | 默认值 | 描述 | +| -------------- | ---------------------------------- | ------ | ------------------------------------------------------------ | +| id | string | - | 组件的唯一标识。 | +| path | string | 0 | 设置路径的形状。
字母指令表示的意义如下：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
默认值：0 | +| startOffset | <length>\|<percentage> | 0 | 设置文本沿path绘制的起始偏移。
默认值：0 | +| font-size | <length> | 30px | 设置文本的尺寸。
默认值：30px | +| fill | <color> | black | 字体填充颜色。
默认值：black | +| by | number | - | 相对被指定动画的属性偏移值，from默认为原属性值。 | +| opacity | number | 1 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。
默认值：0 | +| fill-opacity | number | 1.0 | 字体填充透明度。
默认值：1.0 | +| stroke | <color> | black | 绘制字体边框并指定颜色。
默认值：balck | +| stroke-width | number | 1px | 字体边框宽度。
默认值：1px | +| stroke-opacity | number | 1.0 | 字体边框透明度。
默认值：1.0 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/image-effect.png b/zh-cn/application-dev/reference/arkui-ts/figures/image-effect.png new file mode 100644 index 0000000000000000000000000000000000000000..fc2c9b7d49f7d698aac11d2ede6b0cc58222c7ca Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/image-effect.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md index dfbabd005766ee3afaa7e10dd3d226d3732b9722..ef51de1cc1d89511764887f30c382f53bc3ba175 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md @@ -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 | 跳过状态，表示跳过当前步骤, 进入下一个StepperItem。 | +| 参数名 | 参数类型 | 参数描述 | +| -------- | -------- | -------- | +| prevLabel | string | 当步骤导航器大于一页，除第一页默认值都为“返回”。 | +| nextLabel | string | 步骤导航器大于一页时，最后一页默认值为“开始”，其余页默认值为“下一步”。 | +| status | ItemState | 步骤导航器元素的状态。
默认值：ItemState.Normal | + +## ItemState枚举说明 + +| 名称 | 描述 | +| -------- | -------- | +| Normal | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 | +| Disabled | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 | +| Waiting | 等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个StepperItem。 | +| Skip | 跳过状态，表示跳过当前步骤, 进入下一个StepperItem。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md index 6acbfc7449061d055a0d38148c8e4a164a21b7c9..52b6a255f541389741f8c49083a510203ee68496 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md @@ -1,15 +1,10 @@ # Stack -> **说明：** -> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - 堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。 - -## 权限列表 - -无 +> **说明：** +> +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 子组件 @@ -19,12 +14,13 @@ ## 接口 -Stack(value:{alignContent?: Alignment}) +Stack({ alignContent?: Alignment }) + +**参数：** -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | alignContent | [Alignment](ts-appendix-enums.md#alignment枚举说明) | 否 | Center | 设置子组件在容器内的对齐方式。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| alignContent | [Alignment](ts-appendix-enums.md#alignment) | 否 | 设置子组件在容器内的对齐方式。
默认值：Alignment.Center | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md index 4440a82f815fd8a3272a6ee562ab78e2bec3a935..5a523dd57d9a658b14a3dd6050d9cedd4123613a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -1,18 +1,12 @@ # Swiper + 滑块视图容器，提供子组件滑动轮播显示的能力。 + > **说明：** > > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -滑动容器，提供切换子组件显示的能力。 - - -## 权限列表 - -无 - - ## 子组件 可以包含子组件。 @@ -24,14 +18,14 @@ Swiper(value:{controller?: SwiperController}) **参数：** - | 参数名 | 参数类型 | 必填 | 参数描述 | - | ---------- | ------------------------------------- | ---- | -------------------- | - | controller | [SwiperController](#swipercontroller) | 否 | 给组件绑定一个控制器，用来控制组件翻页。
默认值：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 | 是否开启循环。
设置为true时表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个。
默认值：true | | duration | number | 子组件切换的动画时长，单位为毫秒。
默认值：400 | | vertical | boolean | 是否为纵向滑动。
默认值：false | -| itemSpace | Length | 设置子组件与子组件之间间隙。
默认值：0 | +| itemSpace | number \| string | 设置子组件与子组件之间间隙。
默认值：0 | | displayMode | SwiperDisplayMode | 主轴方向上元素排列的模式，优先以displayCount设置的个数显示，displayCount未设置时本属性生效。
默认值：SwiperDisplayMode.Stretch | | cachedCount8+ | number | 设置预加载子组件个数。
默认值：1 | | disableSwipe8+ | boolean | 禁用组件滑动切换功能。
默认值：false | | curve8+ | [Curve](ts-appendix-enums.md#curve) \| string | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-appendix-enums.md#curve)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。
默认值：Curve.Ease | -| indicatorStyle8+ | {
left?: Length,
top?: Length,
right?: Length,
bottom?: Length,
size?: Length,
mask?: boolean,
color?: [ResourceColor](../../ui/ts-types.md),
selectedColor?: [ResourceColor](../../ui/ts-types.md)
} | - | 设置indicator样式：
- left: 设置导航点距离Swiper组件左边的距离。
- top: 设置导航点距离Swiper组件顶部的距离。
- right: 设置导航点距离Swiper组件右边的距离。
- bottom: 设置导航点距离Swiper组件底部的距离。
- size: 设置导航点的直径。
- mask: 设置是否显示导航点蒙层样式。
- color: 设置导航点的颜色。
- selectedColor: 设置选中的导航点的颜色。 | +| indicatorStyle8+ | {
left?: [Length](../../ui/ts-types.md#length),
top?: [Length](../../ui/ts-types.md#length),
right?: [Length](../../ui/ts-types.md#length),
bottom?: [Length](../../ui/ts-types.md#length),
size?: [Length](../../ui/ts-types.md#length),
mask?: boolean,
color?: [ResourceColor](../../ui/ts-types.md),
selectedColor?: [ResourceColor](../../ui/ts-types.md)
} | 设置导航点样式：
\- left: 设置导航点距离Swiper组件左边的距离。
\- top: 设置导航点距离Swiper组件顶部的距离。
\- right: 设置导航点距离Swiper组件右边的距离。
\- bottom: 设置导航点距离Swiper组件底部的距离。
\- size: 设置导航点的直径。
\- mask: 设置是否显示导航点蒙层样式。
\- color: 设置导航点的颜色。
\- selectedColor: 设置选中的导航点的颜色。 | | displayCount8+ | number\|string | 设置元素显示个数。
默认值：1 | | effectMode8+ | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。
默认值：EdgeEffect.Spring | ## SwiperDisplayMode枚举说明 - - | 名称 | 描述 | - | ----------- | ------------------------------------------ | - | Stretch | Swiper滑动一页的宽度为Swiper组件自身的宽度。| - | AutoLinear | Swiper滑动一页的宽度为子组件宽度中的最大值。| + +| 名称 | 描述 | +| ----------- | ------------------------------------------ | +| Stretch | Swiper滑动一页的宽度为Swiper组件自身的宽度。| +| AutoLinear | Swiper滑动一页的宽度为子组件宽度中的最大值。| ## EdgeEffect枚举说明 - - | 名称 | 描述 | - | ------ | ------------------------------------------------------------------------- | - | Spring | 弹性物理动效，滑动到边缘后可以通过触摸事件继续滑动一段距离，松手后回弹。 | - | Fade | 滑动到边缘后，可以通过触摸事件继续滑动一段阴影，松手后阴影回弹。 | - | None | 滑动到边缘后无效果。 | + +| 名称 | 描述 | +| ------ | ------------------------------------------------------------------------- | +| Spring | 弹性物理动效，滑动到边缘后可以通过触摸事件继续滑动一段距离，松手后回弹。 | +| Fade | 滑动到边缘后，可以通过触摸事件继续滑动一段阴影，松手后阴影回弹。 | +| None | 滑动到边缘后无效果。 | ## SwiperController diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md index 2d5b2007efe5fbf9ad087c6c48068794083fd19a..c3e49f84e77052c506f2ea8a0b9b6def59b526d2 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md @@ -76,3 +76,5 @@ struct ImageEffectsExample { } } ``` + +image-effect \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md index a5261c90b6ca33c821d856efd398b5d8311fd334..a9e87d40133f5cf24eb3768d15ff7c584654f01a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md @@ -3,28 +3,24 @@ 为组件绑定弹出式菜单，弹出式菜单以垂直列表形式显示菜单项，可通过长按、点击或鼠标右键触发。 > **说明：** -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 权限列表 - -无 +> +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| ---------------------------- | ---------------------------------------- | ---- | ---------------------------------- | -| bindMenu | Array8+ | - | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 | -| bindContextMenu8+ | content: [CustomBuilder](../../ui/ts-types.md),
responseType: [ResponseType](ts-appendix-enums.md#responsetype8) | - | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 | +| 名称 | 参数类型 | 描述 | +| ---------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| bindMenu | Array8+ | content: [CustomBuilder](../../ui/ts-types.md),
responseType: [ResponseType](ts-appendix-enums.md#responsetype8) | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 | +## MenuItem -- MenuItem - | 名称 | 类型 | 描述 | - | ------ | ----------------------- | ----------- | - | value | string | 菜单项文本。 | - | action | () => void | 点击菜单项的事件回调。 | +| 名称 | 类型 | 描述 | +| ------ | ----------------------- | ----------- | +| value | string | 菜单项文本。 | +| action | () => void | 点击菜单项的事件回调。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md index a0ae6d4562cbbe2a6bd508f8315d9ac0fd416338..eebd642335745d02b1f2ed25dd864901462278e7 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md @@ -1,31 +1,27 @@ # 多态样式 -> **说明：** -> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - 设置组件不同状态下的样式。 +> **说明：** +> +> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 -无 +## 属性 +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| stateStyles | StateStyles | 设置组件不同状态的样式。 | -## 属性 +## StateStyles接口说明 -| 名称 | 参数类型 | 默认值 | 描述 | +| 名称 | 类型 | 必填 | 描述 | | -------- | -------- | -------- | -------- | -| stateStyles | StateStyles | - | 设置组件不同状态的样式。 | - -- StateStyles接口说明 - | 名称 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | normal | ()=>void | 否 | - | 组件无状态时的样式。 | - | pressed | ()=>void | 否 | - | 组件按下状态的样式。 | - | disabled | ()=>void | 否 | - | 组件禁用状态的样式。 | - | focused | ()=>void | 否 | - | 组件聚焦状态的样式。 | - | clicked | ()=>void | 否 | - | 组件点击状态的样式。 | +| normal | ()=>void | 否 | 组件无状态时的样式。 | +| pressed | ()=>void | 否 | 组件按下状态的样式。 | +| disabled | ()=>void | 否 | 组件禁用状态的样式。 | +| focused | ()=>void | 否 | 组件获焦状态的样式。 | +| clicked | ()=>void | 否 | 组件点击状态的样式。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md index 1d4e2cd67a266c57d8af58ed2a347b977b8a1d33..ba9251977c5df751622a77ea68a74cf015cf12e3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md @@ -3,43 +3,40 @@ 设置组件点击时弹出的气泡框状态。 > **说明：** -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 +## 接口 -无 +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| bindPopup | show: boolean,
popup: PopupOptions \| CustomPopupOptions8+ | 给组件绑定Popup，点击弹出弹窗。
show: 创建页面弹窗提示是否默认显示，默认值为false。
popup: 配置当前弹窗提示的参数。 | -## 属性 +## PopupOptions类型说明 +| 名称 | 类型 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | +| message | string | 是 | 弹窗信息内容。 | +| placementOnTop | boolean | 否 | 是否在组件上方显示，默认值为false。 | +| arrowOffset9+ | [Length](../../ui/ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，默认居左；箭头在气泡左右侧时，默认居上。 | +| primaryButton | {
value: string,
action: () => void
} | 否 | 第一个按钮。
value: 弹窗里主按钮的文本。
action: 点击主按钮的回调函数。 | +| secondaryButton | {
value: string,
action: () => void
} | 否 | 第二个按钮。
value: 弹窗里辅助按钮的文本。
action: 点击辅助按钮的回调函数。 | +| onStateChange | (event: { isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。 | + +## CustomPopupOptions8+类型说明 -| 名称 | 参数类型 | 默认值 | 描述 | +| 名称 | 类型 | 必填 | 描述 | | -------- | -------- | -------- | -------- | -| bindPopup | show: boolean,
popup: PopupOptions \| CustomPopupOptions | - | 给组件绑定Popup，点击弹出弹窗。
show: 创建页面弹窗提示是否默认显示，默认值为false。
popup: 配置当前弹窗提示的参数。 | - - -- PopupOptions类型接口说明 - | 名称 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | message | string | 是 | - | 弹窗信息内容。 | - | placementOnTop | boolean | 否 | false | 是否在组件上方显示，默认值为false。 | - | arrowOffset9+ | Length | 否 | - | popup箭头在弹窗处的偏移。箭头在气泡上下方时，默认居左；箭头在气泡左右侧，默认居上。 | - | primaryButton | {
value: string,
action: () => void
} | 否 | - | 第一个按钮。
value: 弹窗里主按钮的文本。
action: 点击主按钮的回调函数。 | - | secondaryButton | {
value: string,
action: () => void
} | 否 | - | 第二个按钮。
value: 弹窗里辅助按钮的文本。
action: 点击辅助按钮的回调函数。 | - | onStateChange | (isVisible: boolean) => void | 否 | - | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。 | - -- CustomPopupOptions8+类型接口说明 - | 名称 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | builder | () => any | 是 | - | 提示气泡内容的构造器。 | - | placement | [Placement](ts-appendix-enums.md#placement8) | 否 | Placement.Bottom | 气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。 | - | arrowOffset9+ | Length | 否 | - | popup箭头在弹窗处的偏移。箭头在气泡上下方时，默认居左；箭头在气泡左右侧，默认居上。 | - | maskColor | [ResourceColor](../../ui/ts-types.md) | 否 | - | 提示气泡遮障层的颜色。 | - | popupColor | [ResourceColor](../../ui/ts-types.md) | 否 | - | 提示气泡的颜色。 | - | enableArrow | boolean | 否 | true | 是否显示箭头。
从API Version 9开始，如果箭头所在方位侧的气泡长度不足以显示下箭头，则会默认不显示箭头。比如：placement设置为Left，但气泡高度小于箭头的宽度（32vp），则实际不会显示箭头。 | - | autoCancel | boolean | 否 | true | 页面有操作时，是否自动关闭气泡 | - | onStateChange | (isVisible: boolean) => void | 否 | - | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。 | +| builder | [CustomBuilder](../../ui/ts-types.md) | 是 | 提示气泡内容的构造器。 | +| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。
默认值：Placement.Bottom | +| arrowOffset9+ | [Length](../../ui/ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，默认居左；箭头在气泡左右侧时，默认居上。 | +| maskColor | [ResourceColor](../../ui/ts-types.md) | 否 | 提示气泡遮障层的颜色。 | +| popupColor | [ResourceColor](../../ui/ts-types.md) | 否 | 提示气泡的颜色。 | +| enableArrow | boolean | 否 | 是否显示箭头。
从API Version 9开始，如果箭头所在方位侧的气泡长度不足以显示下箭头，则会默认不显示箭头。比如：placement设置为Left，但气泡高度小于箭头的宽度（32vp），则实际不会显示箭头。
默认值：true | +| autoCancel | boolean | 否 | 页面有操作时，是否自动关闭气泡
默认值：true | +| onStateChange | (event: { isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。 | ## 示例 diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-props.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-props.md index 9d3a1fbf02c4de67afe52a6172f7cf265c30e3f0..9fdfc043b87ecd5ee5e5ac497df7c7fb75e6335e 100644 --- a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-props.md +++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-props.md @@ -76,3 +76,5 @@ ## 数据单向性 父子组件之间数据的传递是单向的，只能从父组件传递给子组件，子组件不能直接修改父组件传递下来的值，可以将props传入的值用data接收后作为默认值，再对data的值进行修改。 + +更多说明请参考[props](../arkui-js/js-components-custom-props.md)。 \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-component-based-preview.md b/zh-cn/application-dev/ui/ts-component-based-preview.md index 574ba980deb2eb261fe82c40ddf06729b66f3bd6..56220940ef921472f0047526434bfba0e05c0259 100644 --- a/zh-cn/application-dev/ui/ts-component-based-preview.md +++ b/zh-cn/application-dev/ui/ts-component-based-preview.md @@ -1,10 +1,10 @@ # @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) + } } + } } ``` diff --git a/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md b/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md index 7057e34756c738d113ba3e65bc67d51c86491a20..d048a2579e1835856250d2882361cdbb9b68dbda 100644 --- a/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md +++ b/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md @@ -5,10 +5,10 @@ ## 生命周期回调函数定义 -| 函数名 | 描述 | -| ---------------- | ---------------------------------------- | +| 函数名 | 描述 | +| ---------------- | ------------------------------------------------------------ | | aboutToAppear | 函数在创建自定义组件的新实例后，在执行其build函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build函数中生效。 | -| aboutToDisappear | 函数在自定义组件析构消耗之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。 | +| aboutToDisappear | 函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。 | | onPageShow | 页面显示时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 | | onPageHide | 页面消失时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 | | onBackPress | 当用户点击返回按钮时触发，仅\@Entry修饰的自定义组件生效。
- 返回true表示页面自己处理返回逻辑, 不进行页面路由。
- 返回false表示使用默认的返回逻辑。
- 不返回值会作为false处理。 |