Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
9be62f5c
D
Docs
项目概览
OpenHarmony
/
Docs
12 个月 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
9be62f5c
编写于
9月 06, 2022
作者:
T
tianyu
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fourth
Signed-off-by:
N
tianyu
<
tianyu55@h-partners.com
>
上级
de017331
变更
15
隐藏空白更改
内联
并排
Showing
15 changed file
with
164 addition
and
183 deletion
+164
-183
zh-cn/application-dev/reference/arkui-js/js-components-common-atomic-layout.md
.../reference/arkui-js/js-components-common-atomic-layout.md
+10
-10
zh-cn/application-dev/reference/arkui-js/js-components-container-stepper-item.md
...eference/arkui-js/js-components-container-stepper-item.md
+3
-3
zh-cn/application-dev/reference/arkui-js/js-components-container-tab-content.md
...reference/arkui-js/js-components-container-tab-content.md
+3
-3
zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md
...tion-dev/reference/arkui-js/js-components-svg-textpath.md
+13
-13
zh-cn/application-dev/reference/arkui-ts/figures/image-effect.png
...plication-dev/reference/arkui-ts/figures/image-effect.png
+0
-0
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
...dev/reference/arkui-ts/ts-basic-components-stepperitem.md
+16
-19
zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md
.../application-dev/reference/arkui-ts/ts-container-stack.md
+9
-13
zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
...application-dev/reference/arkui-ts/ts-container-swiper.md
+19
-25
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
...eference/arkui-ts/ts-universal-attributes-image-effect.md
+2
-0
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
...on-dev/reference/arkui-ts/ts-universal-attributes-menu.md
+11
-15
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md
...nce/arkui-ts/ts-universal-attributes-polymorphic-style.md
+14
-18
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
...n-dev/reference/arkui-ts/ts-universal-attributes-popup.md
+26
-29
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-props.md
...ce/js-service-widget-ui/js-service-widget-custom-props.md
+2
-0
zh-cn/application-dev/ui/ts-component-based-preview.md
zh-cn/application-dev/ui/ts-component-based-preview.md
+33
-32
zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md
...ication-dev/ui/ts-custom-component-lifecycle-callbacks.md
+3
-3
未找到文件。
zh-cn/application-dev/reference/arkui-js/js-components-common-atomic-layout.md
浏览文件 @
9be62f5c
...
...
@@ -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主轴方向上尺寸权值。如果容器组件中所有节点均设置此属性,当前元素尺寸为:
容器主轴尺寸
\*
当前权值
/
所有子元素权值和。如果容器组件中某几个节点设置此属性,则容器会对其他未设置此属性的节点进行布局,再将
剩余空间分配给设置了此属性的节点。设置了此属性的节点的尺寸为:容器剩余空间
\*
该元素权值
/
所有子元素权值和。 |
| 样式 | 类型 | 说明 |
| -------- | -------- | -------- |
| flex-weight | number |
指明当前元素在flex主轴方向上尺寸权值。如果容器组件中所有节点均设置此属性,当前元素尺寸为:
容器主轴尺寸
\*
当前权值
/
所有子元素权值和。如果容器组件中某几个节点设置此属性,则容器会对其他未设置此属性的节点进行布局,再将剩余空间分配给设置了此属性的节点,如果未设置此属性的节点设置了超过父元素的宽度,那么将没有
剩余空间分配给设置了此属性的节点。设置了此属性的节点的尺寸为:容器剩余空间
\*
该元素权值
/
所有子元素权值和。 |
## 固定比例
定义了组件固定比例调整尺寸的能力。
| 样式 | 类型 |
默认值 |
说明 |
| -------- | -------- | -------- |
-------- |
| aspect-ratio | number |
- |
1.
接受任意大于0的浮点值,定义为该节点的宽度与高度比,设置该属性后,该元素尺寸宽高比按照此属性值进行调整。
<br/>
2.
遵守最大值与最小值的限制。
<br/>
3.
在flex布局中,主轴尺寸先进行调整,后根据该尺寸调整交叉轴。 |
| 样式 | 类型 | 说明 |
| -------- | -------- | -------- |
| aspect-ratio | number | 1.
接受任意大于0的浮点值,定义为该节点的宽度与高度比,设置该属性后,该元素尺寸宽高比按照此属性值进行调整。
<br/>
2.
遵守最大值与最小值的限制。
<br/>
3.
在flex布局中,主轴尺寸先进行调整,后根据该尺寸调整交叉轴。 |
zh-cn/application-dev/reference/arkui-js/js-components-container-stepper-item.md
浏览文件 @
9be62f5c
...
...
@@ -20,9 +20,9 @@
除支持
[
通用属性
](
../arkui-js/js-components-common-attributes.md
)
外,还支持如下属性:
| 名称 | 类型 |
默认值 |
必填 | 描述 |
| -------- | -------- | -------- | -------- |
-------- |
| label | Label |
- | 否 | 自定义步骤导航器底部步骤提示文本按钮属性,不支持动态修改。如果没有定义该属性,步骤导航器在中文语言环境下,使用“返回”和“下一步”文本按钮,在非中文语言环境下,使用“BACK”和“NEXT”文本按钮。针对第一个步骤,没有回退文本按钮,针对最后一个步骤,下一步文本按钮文本使用“开始”(中文语言)或者“START”
(非中文语言)。 |
| 名称 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| label | Label |
否
| 自定义步骤导航器底部步骤提示文本按钮属性,不支持动态修改。如果没有定义该属性,步骤导航器在中文语言环境下,使用"返回"和"下一步"文本按钮,在非中文语言环境下,使用"BACK"和"NEXT"文本按钮。针对第一个步骤,没有"返回"文本按钮;针对最后一个步骤,"下一步"文本按钮文本使用"开始"(中文语言)或者"START"
(非中文语言)。 |
**表1**
Label对象定义
...
...
zh-cn/application-dev/reference/arkui-js/js-components-container-tab-content.md
浏览文件 @
9be62f5c
...
...
@@ -19,9 +19,9 @@
除支持
[
通用属性
](
../arkui-js/js-components-common-attributes.md
)
外,还支持如下属性:
| 名称 | 类型 |
默认值 |
必填 | 描述 |
| -------- | -------- | -------- | -------- |
-------- |
| scrollable | boolean |
true | 否
| 是否可以通过左右滑动进行页面切换。默认为true,设置为false后,页面的切换只能通过tab-bar的点击实现。 |
| 名称 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| scrollable | boolean |
否
| 是否可以通过左右滑动进行页面切换。默认为true,设置为false后,页面的切换只能通过tab-bar的点击实现。 |
## 样式
...
...
zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md
浏览文件 @
9be62f5c
...
...
@@ -26,19 +26,19 @@ tspan。
支持以下表格中的属性。
| 名称
| 类型 | 默认值 | 必填 | 描述
|
| -------------- | ---------------------------------- | -----
| ---- |
---------------------------------------- |
| id | string | -
| 否 | 组件的唯一标识。
|
| path | string | 0
| 是 | 设置路径的形状。
<br/>
字母指令表示的意义如下:
<br/>
-
M
=
moveto
<br/>
-
L
=
lineto
<br/>
-
H
=
horizontal
lineto
<br/>
-
V
=
vertical
lineto
<br/>
-
C
=
curveto
<br/>
-
S
=
smooth
curveto
<br/>
-
Q
=
quadratic
Belzier
curve
<br/>
-
T
=
smooth
quadratic
Belzier
curveto
<br/>
-
A
=
elliptical
Arc
<br/>
-
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
| 设置路径的形状。
<br/>
字母指令表示的意义如下:
<br/>
-
M
=
moveto
<br/>
-
L
=
lineto
<br/>
-
H
=
horizontal
lineto
<br/>
-
V
=
vertical
lineto
<br/>
-
C
=
curveto
<br/>
-
S
=
smooth
curveto
<br/>
-
Q
=
quadratic
Belzier
curve
<br/>
-
T
=
smooth
quadratic
Belzier
curveto
<br/>
-
A
=
elliptical
Arc
<br/>
-
Z
=
closepath
<br/>
默认值:0
|
| startOffset |
<
length
>
\|
<
percentage
>
| 0
| 设置文本沿path绘制的起始偏移。
<br/>
默认值:0
|
| font-size |
<
length
>
| 30px
| 设置文本的尺寸。
<br/>
默认值:30px
|
| fill |
<
color
>
| black
| 字体填充颜色。
<br/>
默认值:black
|
| by | number | -
| 相对被指定动画的属性偏移值,from默认为原属性值。
|
| opacity | number | 1
| 元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画。
<br/>
默认值:0
|
| fill-opacity | number | 1.0
| 字体填充透明度。
<br/>
默认值:1.0
|
| stroke |
<
color
>
| black
| 绘制字体边框并指定颜色。
<br/>
默认值:balck
|
| stroke-width | number | 1px
| 字体边框宽度。
<br/>
默认值:1px
|
| stroke-opacity | number | 1.0
| 字体边框透明度。
<br/>
默认值:1.0
|
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/figures/image-effect.png
0 → 100644
浏览文件 @
9be62f5c
1.3 MB
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
浏览文件 @
9be62f5c
...
...
@@ -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 | 步骤导航器元素的状态。
<br/>
默认值:ItemState.Normal |
## ItemState枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Normal | 正常状态,右侧文本按钮正常显示,可点击进入下一个StepperItem。 |
| Disabled | 不可用状态,右侧文本按钮灰度显示,不可点击进入下一个StepperItem。 |
| Waiting | 等待状态,右侧文本按钮不显示,使用等待进度条,不可点击进入下一个StepperItem。 |
| Skip | 跳过状态,表示跳过当前步骤,
进入下一个StepperItem。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md
浏览文件 @
9be62f5c
# 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
)
| 否 | 设置子组件在容器内的对齐方式。
<br/>
默认值:Alignment.Center |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @
9be62f5c
# 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
\|
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?:
Length,
<br/>
top?:
Length,
<br/>
right?:
Length,
<br/>
bottom?:
Length,
<br/>
size?:
Length,
<br/>
mask?:
boolean,
<br/>
color?:
[ResourceColor](../../ui/ts-types.md),
<br/>
selectedColor?:
[
ResourceColor
](
../../ui/ts-types.md
)
<br/>
} | - | 设置indicator样式:
<br/>
-
left:
设置导航点距离Swiper组件左边的距离。
<br/>
-
top:
设置导航点距离Swiper组件顶部的距离。
<br/>
-
right:
设置导航点距离Swiper组件右边的距离。
<br/>
-
bottom:
设置导航点距离Swiper组件底部的距离。
<br/>
-
size:
设置导航点的直径。
<br/>
-
mask:
设置是否显示导航点蒙层样式。
<br/>
-
color:
设置导航点的颜色。
<br/>
-
selectedColor:
设置选中的导航点的颜色。 |
| indicatorStyle
<sup>
8+
</sup>
| {
<br/>
left?:
[Length](../../ui/ts-types.md#length),
<br/>
top?:
[Length](../../ui/ts-types.md#length),
<br/>
right?:
[Length](../../ui/ts-types.md#length),
<br/>
bottom?:
[Length](../../ui/ts-types.md#length),
<br/>
size?:
[Length](../../ui/ts-types.md#length),
<br/>
mask?:
boolean,
<br/>
color?:
[ResourceColor](../../ui/ts-types.md),
<br/>
selectedColor?:
[
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
浏览文件 @
9be62f5c
...
...
@@ -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
浏览文件 @
9be62f5c
...
...
@@ -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:
[CustomBuilder](../../ui/ts-types.md),
<br>
responseType:
[
ResponseType
](
ts-appendix-enums.md#responsetype8
)
|
- | 给组件绑定菜单,触发方式为长按或者右键点击,弹出菜单项需要自定义。
|
| 名称
| 参数类型 | 描述
|
| ---------------------------- | ----------------------------------------
-------------------- | --------------------------
---------------------------------- |
| bindMenu | Array<MenuItem
>
\|
[
CustomBuilder
](
../../ui/ts-types.md
)
| 给组件绑定菜单,点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
| bindContextMenu
<sup>
8+
</sup>
| content:
[CustomBuilder](../../ui/ts-types.md),
<br>
responseType:
[
ResponseType
](
ts-appendix-enums.md#responsetype8
)
|
给组件绑定菜单,触发方式为长按或者右键点击,弹出菜单项需要自定义。
|
## MenuItem
-
MenuItem
| 名称 | 类型 | 描述 |
| ------ | ----------------------- | ----------- |
| value | string | 菜单项文本。 |
| action | ()
=
>
void | 点击菜单项的事件回调。 |
| 名称 | 类型 | 描述 |
| ------ | ----------------------- | ----------- |
| value | string | 菜单项文本。 |
| action | ()
=
>
void | 点击菜单项的事件回调。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md
浏览文件 @
9be62f5c
# 多态样式
> **说明:**
> 从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 | 否 | 组件点击状态的样式。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
浏览文件 @
9be62f5c
...
...
@@ -3,43 +3,40 @@
设置组件点击时弹出的气泡框状态。
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
##
权限列表
##
接口
无
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| bindPopup | show:
boolean,
<br/>
popup:
PopupOptions
\|
CustomPopupOptions
<sup>
8+
</sup>
| 给组件绑定Popup,点击弹出弹窗。
<br/>
show:
创建页面弹窗提示是否默认显示,默认值为false。
<br/>
popup:
配置当前弹窗提示的参数。 |
##
属性
##
PopupOptions类型说明
| 名称 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| message | string | 是 | 弹窗信息内容。 |
| placementOnTop | boolean | 否 | 是否在组件上方显示,默认值为false。 |
| arrowOffset
<sup>
9+
</sup>
|
[
Length
](
../../ui/ts-types.md#length
)
| 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时,默认居左;箭头在气泡左右侧时,默认居上。 |
| primaryButton | {
<br/>
value:
string,
<br/>
action:
()
=
>
void
<br/>
} | 否 | 第一个按钮。
<br/>
value:
弹窗里主按钮的文本。
<br/>
action:
点击主按钮的回调函数。 |
| secondaryButton | {
<br/>
value:
string,
<br/>
action:
()
=
>
void
<br/>
} | 否 | 第二个按钮。
<br/>
value:
弹窗里辅助按钮的文本。
<br/>
action:
点击辅助按钮的回调函数。 |
| onStateChange | (event:
{
isVisible:
boolean
})
=
>
void | 否 | 弹窗状态变化事件回调,参数isVisible为弹窗当前的显示状态。 |
## CustomPopupOptions<sup>8+</sup>类型说明
| 名称 |
参数类型 | 默认值
| 描述 |
| 名称 |
类型 | 必填
| 描述 |
| -------- | -------- | -------- | -------- |
| bindPopup | show:
boolean,
<br/>
popup:
PopupOptions
\|
CustomPopupOptions | - | 给组件绑定Popup,点击弹出弹窗。
<br/>
show:
创建页面弹窗提示是否默认显示,默认值为false。
<br/>
popup:
配置当前弹窗提示的参数。 |
-
PopupOptions类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| message | string | 是 | - | 弹窗信息内容。 |
| placementOnTop | boolean | 否 | false | 是否在组件上方显示,默认值为false。 |
| arrowOffset
<sup>
9+
</sup>
| Length | 否 | - | popup箭头在弹窗处的偏移。箭头在气泡上下方时,默认居左;箭头在气泡左右侧,默认居上。 |
| primaryButton | {
<br/>
value:
string,
<br/>
action:
()
=
>
void
<br/>
} | 否 | - | 第一个按钮。
<br/>
value:
弹窗里主按钮的文本。
<br/>
action:
点击主按钮的回调函数。 |
| secondaryButton | {
<br/>
value:
string,
<br/>
action:
()
=
>
void
<br/>
} | 否 | - | 第二个按钮。
<br/>
value:
弹窗里辅助按钮的文本。
<br/>
action:
点击辅助按钮的回调函数。 |
| onStateChange | (isVisible:
boolean)
=
>
void | 否 | - | 弹窗状态变化事件回调,参数isVisible为弹窗当前的显示状态。 |
-
CustomPopupOptions
<sup>
8+
</sup>
类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| builder | ()
=
>
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:
boolean)
=
>
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:
{
isVisible:
boolean
})
=
>
void | 否 | 弹窗状态变化事件回调,参数为弹窗当前的显示状态。 |
## 示例
...
...
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-props.md
浏览文件 @
9be62f5c
...
...
@@ -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
浏览文件 @
9be62f5c
# @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
浏览文件 @
9be62f5c
...
...
@@ -5,10 +5,10 @@
## 生命周期回调函数定义
| 函数名
| 描述
|
| ---------------- | ---------------------------------------- |
| 函数名
| 描述
|
| ---------------- | ----------------------------------------
--------------------
|
| aboutToAppear | 函数在创建自定义组件的新实例后,在执行其build函数之前执行。允许在aboutToAppear函数中改变状态变量,更改将在后续执行build函数中生效。 |
| aboutToDisappear | 函数在自定义组件析构
消耗
之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。 |
| aboutToDisappear | 函数在自定义组件析构
销毁
之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。 |
| onPageShow | 页面显示时触发一次,包括路由过程、应用进入前后台等场景,仅@Entry修饰的自定义组件生效。 |
| onPageHide | 页面消失时触发一次,包括路由过程、应用进入前后台等场景,仅@Entry修饰的自定义组件生效。 |
| onBackPress | 当用户点击返回按钮时触发,仅
\@
Entry修饰的自定义组件生效。
<br/>
-
返回true表示页面自己处理返回逻辑,
不进行页面路由。
<br/>
-
返回false表示使用默认的返回逻辑。
<br/>
-
不返回值会作为false处理。 |
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录