Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
072b540c
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
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看板
未验证
提交
072b540c
编写于
6月 02, 2023
作者:
O
openharmony_ci
提交者:
Gitee
6月 02, 2023
浏览文件
操作
浏览文件
下载
差异文件
!19097 断链+UI通用说明文档添加版本号-19096的挑单
Merge pull request !19097 from LiAn/OpenHarmony-4.0-Beta1
上级
f13da795
79ad796b
变更
10
展开全部
隐藏空白更改
内联
并排
Showing
10 changed file
with
373 addition
and
359 deletion
+373
-359
zh-cn/application-dev/reference/arkui-ts/figures/arkts-progress.png
...ication-dev/reference/arkui-ts/figures/arkts-progress.png
+0
-0
zh-cn/application-dev/reference/arkui-ts/figures/size.png
zh-cn/application-dev/reference/arkui-ts/figures/size.png
+0
-0
zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md
...n/application-dev/reference/arkui-ts/ts-appendix-enums.md
+250
-246
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
...on-dev/reference/arkui-ts/ts-basic-components-progress.md
+26
-26
zh-cn/application-dev/reference/arkui-ts/ts-container-ability-component.md
...-dev/reference/arkui-ts/ts-container-ability-component.md
+4
-4
zh-cn/application-dev/reference/arkui-ts/ts-custom-component-lifecycle.md
...n-dev/reference/arkui-ts/ts-custom-component-lifecycle.md
+5
-6
zh-cn/application-dev/reference/arkui-ts/ts-pixel-units.md
zh-cn/application-dev/reference/arkui-ts/ts-pixel-units.md
+15
-11
zh-cn/application-dev/reference/arkui-ts/ts-types.md
zh-cn/application-dev/reference/arkui-ts/ts-types.md
+69
-65
zh-cn/application-dev/ui/arkts-common-components-button.md
zh-cn/application-dev/ui/arkts-common-components-button.md
+4
-1
zh-cn/application-dev/ui/figures/floating_button.gif
zh-cn/application-dev/ui/figures/floating_button.gif
+0
-0
未找到文件。
zh-cn/application-dev/reference/arkui-ts/figures/progress.png
→
zh-cn/application-dev/reference/arkui-ts/figures/
arkts-
progress.png
浏览文件 @
072b540c
文件已移动
zh-cn/application-dev/reference/arkui-ts/figures/size.
jpe
g
→
zh-cn/application-dev/reference/arkui-ts/figures/size.
pn
g
浏览文件 @
072b540c
文件已移动
zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md
浏览文件 @
072b540c
此差异已折叠。
点击以展开。
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
浏览文件 @
072b540c
...
@@ -4,7 +4,7 @@
...
@@ -4,7 +4,7 @@
> **说明:**
> **说明:**
>
>
> 该组件从API version7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
> 该组件从API version
7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
## 子组件
...
@@ -22,46 +22,46 @@ Progress(options: {value: number, total?: number, type?: ProgressType})
...
@@ -22,46 +22,46 @@ Progress(options: {value: number, total?: number, type?: ProgressType})
**参数:**
**参数:**
| 参数名
| 参数类型 | 必填 | 参数描述
|
| 参数名
| 参数类型 | 必填 | 参数描述
|
| --------
| -------- | -------- |
-------- |
| --------
------------------ | ----------------------------------- | ---- | --------------------------------
-------- |
| value
| number | 是
| 指定当前进度值。设置小于0的数值时置为0,设置大于total的数值时置为total。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| value
| number | 是
| 指定当前进度值。设置小于0的数值时置为0,设置大于total的数值时置为total。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| total
| number | 否
| 指定进度总长。
<br/>
默认值:100
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| total
| number | 否
| 指定进度总长。
<br/>
默认值:100
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| type
<sup>
8+
</sup>
|
[
ProgressType
](
#progresstype枚举说明
)
| 否
| 指定进度条类型。
<br/>
默认值:ProgressType.Linear
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| type
<sup>
8+
</sup>
|
[
ProgressType
](
#progresstype枚举说明
)
| 否
| 指定进度条类型。
<br/>
默认值:ProgressType.Linear
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| style
<sup>
deprecated
</sup>
|
[
ProgressStyle
](
#progressstyle枚举说明
)
| 否 | 指定进度条样式。
<br/>
该参数从API version8开始废弃,建议使用type替代。
<br/>
默认值:ProgressStyle.Linear |
| style
<sup>
deprecated
</sup>
|
[
ProgressStyle
](
#progressstyle枚举说明
)
| 否
| 指定进度条样式。
<br/>
该参数从API version8开始废弃,建议使用type替代。
<br/>
默认值:ProgressStyle.Linear |
## ProgressType枚举说明
## ProgressType枚举说明
从API version 9开始,该接口支持在ArkTS卡片中使用。
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称
| 描述
|
| 名称
| 描述
|
| --------
|
-------- |
| --------
-------------- | --------------------------------
-------- |
| Linear
| 线性样式。从API version9开始,高度大于宽度的时候自适应垂直显示。
|
| Linear
| 线性样式。从API version9开始,高度大于宽度的时候自适应垂直显示。
|
| Ring
<sup>
8+
</sup>
| 环形无刻度样式,环形圆环逐渐显示至完全填充效果。
|
| Ring
<sup>
8+
</sup>
| 环形无刻度样式,环形圆环逐渐显示至完全填充效果。
|
| Eclipse
<sup>
8+
</sup>
| 圆形样式,显示类似月圆月缺的进度展示效果,从月牙逐渐变化至满月。
|
| Eclipse
<sup>
8+
</sup>
| 圆形样式,显示类似月圆月缺的进度展示效果,从月牙逐渐变化至满月。
|
| ScaleRing
<sup>
8+
</sup>
| 环形有刻度样式,显示类似时钟刻度形式的进度展示效果。从API version9开始,刻度外圈出现重叠的时候自动转换为环形无刻度进度条。|
| ScaleRing
<sup>
8+
</sup>
| 环形有刻度样式,显示类似时钟刻度形式的进度展示效果。从API version9开始,刻度外圈出现重叠的时候自动转换为环形无刻度进度条。
|
| Capsule
<sup>
8+
</sup>
| 胶囊样式,头尾两端圆弧处的进度展示效果与Eclipse相同;中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。 |
| Capsule
<sup>
8+
</sup>
| 胶囊样式,头尾两端圆弧处的进度展示效果与Eclipse相同;中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。 |
## ProgressStyle枚举说明
## ProgressStyle枚举说明
从API version 9开始,该接口支持在ArkTS卡片中使用。
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称
| 描述
|
| 名称
| 描述
|
| --------- | ----------------------------------------
--------------------
|
| --------- | ---------------------------------------- |
| Linear | 线性样式。 |
| Linear | 线性样式。
|
| Ring | 环形无刻度样式,环形圆环逐渐显示至完全填充效果。 |
| Ring | 环形无刻度样式,环形圆环逐渐显示至完全填充效果。
|
| Eclipse | 圆形样式,显示类似月圆月缺的进度展示效果,从月牙逐渐变化至满月。|
| Eclipse | 圆形样式,显示类似月圆月缺的进度展示效果,从月牙逐渐变化至满月。
|
| ScaleRing | 环形有刻度样式,显示类似时钟刻度形式的进度展示效果。|
| ScaleRing | 环形有刻度样式,显示类似时钟刻度形式的进度展示效果。
|
| Capsule | 胶囊样式,头尾两端圆弧处的进度展示效果与Eclipse相同;中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。 |
| Capsule | 胶囊样式,头尾两端圆弧处的进度展示效果与Eclipse相同;中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。 |
## 属性
## 属性
除支持
[
通用属性
](
ts-universal-attributes-size.md
)
外,还支持以下属性:
除支持
[
通用属性
](
ts-universal-attributes-size.md
)
外,还支持以下属性:
| 名称
| 参数类型 | 描述
|
| 名称
| 参数类型 | 描述
|
| --------
| -------- |
-------- |
| --------
---------- | ---------------------------------------- | --------------------------------
-------- |
| value
| number
| 设置当前进度值。设置小于0的数值时置为0,设置大于total的数值时置为total。非法数值不生效。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| value
| number
| 设置当前进度值。设置小于0的数值时置为0,设置大于total的数值时置为total。非法数值不生效。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| color |
[
ResourceColor
](
ts-types.md#resourcecolor
)
| 设置进度条前景色。
<br/>
默认值:'
\#
ff007dff'
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| color
|
[
ResourceColor
](
ts-types.md#resourcecolor
)
| 设置进度条前景色。
<br/>
默认值:'
\#
ff007dff'
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| backgroundColor |
[
ResourceColor
](
ts-types.md#resourcecolor
)
| 设置进度条底色。
<br/>
默认值:'
\#
19182431'
<br/><br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| backgroundColor
|
[
ResourceColor
](
ts-types.md#resourcecolor
)
| 设置进度条底色。
<br/>
默认值:'
\#
19182431'
<br/><br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| style
<sup>
8+
</sup>
| {
<br/>
strokeWidth?:
[Length](ts-types.md#length),
<br/>
scaleCount?:
number,
<br/>
scaleWidth?:
[
Length
](
ts-types.md#length
)
<br/>
} | 定义组件的样式。
<br/>
-
strokeWidth:
设置进度条宽度(不支持百分比设置)。从API version9开始,环形进度条设置宽度大于等于半径时,默认修改宽度至半径值的二分之一。
<br/>
默认值:4.0Vp
<br/>
-
scaleCount:
设置环形进度条总刻度数。
<br>
默认值:120
<br/>
-
scaleWidth:
设置环形进度条刻度粗细(不支持百分比设置),刻度粗细大于进度条宽度时,为系统默认粗细。
<br>
默认值:2.0Vp
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| style
<sup>
8+
</sup>
| {
<br/>
strokeWidth?:
[Length](ts-types.md#length),
<br/>
scaleCount?:
number,
<br/>
scaleWidth?:
[
Length
](
ts-types.md#length
)
<br/>
} | 定义组件的样式。
<br/>
-
strokeWidth:
设置进度条宽度(不支持百分比设置)。从API version9开始,环形进度条设置宽度大于等于半径时,默认修改宽度至半径值的二分之一。
<br/>
默认值:4.0Vp
<br/>
-
scaleCount:
设置环形进度条总刻度数。
<br>
默认值:120
<br/>
-
scaleWidth:
设置环形进度条刻度粗细(不支持百分比设置),刻度粗细大于进度条宽度时,为系统默认粗细。
<br>
默认值:2.0Vp
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## 事件
## 事件
...
@@ -128,4 +128,4 @@ struct ProgressExample {
...
@@ -128,4 +128,4 @@ struct ProgressExample {
}
}
```
```
![
progress
](
figures/progress.png
)
![
progress
](
figures/
arkts-
progress.png
)
zh-cn/application-dev/reference/arkui-ts/ts-container-ability-component.md
浏览文件 @
072b540c
...
@@ -4,7 +4,7 @@
...
@@ -4,7 +4,7 @@
> **说明:**
> **说明:**
>
>
> 该组件从API
Version
9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
> 该组件从API
Version
9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
>
> 本组件为系统接口。
> 本组件为系统接口。
...
@@ -29,9 +29,9 @@ AbilityComponent(want: Want)
...
@@ -29,9 +29,9 @@ AbilityComponent(want: Want)
**参数:**
**参数:**
| 参数名
| 参数类型 | 必填 | 参数描述
|
| 参数名
| 参数类型 | 必填 | 参数描述
|
| ----
---- | -------- | -------- |
-------- |
| ----
| ---------------------------------------- | ---- | -------
-------- |
| want |
[
Want
](
../apis/js-apis-app-ability-want.md
)
| 是 | 默认加载的Ability描述。 |
| want |
[
Want
](
../apis/js-apis-app-ability-want.md
)
| 是
| 默认加载的Ability描述。 |
## 事件
## 事件
...
...
zh-cn/application-dev/reference/arkui-ts/ts-custom-component-lifecycle.md
浏览文件 @
072b540c
# 自定义组件的生命周期
# 自定义组件的生命周期
自定义组件的生命周期回调函数用于通知用户该自定义组件的生命周期,这些回调函数是私有的,在运行时由开发框架在特定的时间进行调用,不能从应用程序中手动调用这些回调函数。
自定义组件的生命周期回调函数用于通知用户该自定义组件的生命周期,这些回调函数是私有的,在运行时由开发框架在特定的时间进行调用,不能从应用程序中手动调用这些回调函数。
> **说明:**
>**说明:**
>
>
>允许在生命周期函数中使用Promise和异步回调函数,比如网络资源获取,定时器设置等;
> - 本模块首批接口从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
> - 允许在生命周期函数中使用Promise和异步回调函数,比如网络资源获取,定时器设置等。
## aboutToAppear
## aboutToAppear
...
@@ -123,8 +122,8 @@ onRecycle?(params: { [key: string]: unknown }): void
...
@@ -123,8 +122,8 @@ onRecycle?(params: { [key: string]: unknown }): void
**参数:**
**参数:**
| 参数名
| 类型 | 说明
|
| 参数名
| 类型 | 说明
|
| ------ | -------------------------- | ----------
----------
|
| ------ | -------------------------- | ---------- |
| params | { [key: string]: unknown } | 自定义组件的构造参数 |
| params | { [key: string]: unknown } | 自定义组件的构造参数 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-pixel-units.md
浏览文件 @
072b540c
# 像素单位
# 像素单位
为开发者提供4种像素单位,框架采用vp为基准数据单位。
ArkUI
为开发者提供4种像素单位,框架采用vp为基准数据单位。
> **说明:**
>
> 本模块首批接口从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
| 名称 | 描述 |
| ---- | ------------------------------------------------------------ |
| 名称 | 描述 |
| px | 屏幕物理像素单位。 |
| ---- | ---------------------------------------- |
| px | 屏幕物理像素单位。 |
| vp | 屏幕密度相关像素,根据屏幕像素密度转换为屏幕物理像素,当数值不带单位时,默认单位vp。在实际宽度为1440物理像素的屏幕上,1vp约等于3px。 |
| vp | 屏幕密度相关像素,根据屏幕像素密度转换为屏幕物理像素,当数值不带单位时,默认单位vp。在实际宽度为1440物理像素的屏幕上,1vp约等于3px。 |
| fp | 字体像素,与vp类似适用屏幕密度变化,随系统字体大小设置变化。 |
| fp | 字体像素,与vp类似适用屏幕密度变化,随系统字体大小设置变化。
|
| lpx | 视窗逻辑像素单位,lpx单位为实际屏幕宽度与逻辑宽度(通过designWidth配置)的比值,designWidth默认值为720。当designWidth为720时,在实际宽度为1440物理像素的屏幕上,1lpx为2px大小。 |
| lpx | 视窗逻辑像素单位,lpx单位为实际屏幕宽度与逻辑宽度(通过designWidth配置)的比值,designWidth默认值为720。当designWidth为720时,在实际宽度为1440物理像素的屏幕上,1lpx为2px大小。 |
...
@@ -15,12 +19,12 @@
...
@@ -15,12 +19,12 @@
提供其他单位与px单位互相转换的方法。
提供其他单位与px单位互相转换的方法。
| 接口
| 描述
|
| 接口
| 描述
|
| ----------------------------------------
----------- | --------------------
---------------------------------------- |
| ----------------------------------------
|
---------------------------------------- |
| vp2px(value
:
number)
:
number
| 将vp单位的数值转换为以px为单位的数值。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| vp2px(value
:
number)
:
number | 将vp单位的数值转换为以px为单位的数值。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| px2vp(value
:
number)
:
number
| 将px单位的数值转换为以vp为单位的数值。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| px2vp(value
:
number)
:
number | 将px单位的数值转换为以vp为单位的数值。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| fp2px(value
:
number)
:
number
| 将fp单位的数值转换为以px为单位的数值。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| fp2px(value
:
number)
:
number | 将fp单位的数值转换为以px为单位的数值。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| px2fp(value
:
number)
:
number
| 将px单位的数值转换为以fp为单位的数值。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| px2fp(value
:
number)
:
number | 将px单位的数值转换为以fp为单位的数值。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| lpx2px(value
:
number)
:
number | 将lpx单位的数值转换为以px为单位的数值。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| lpx2px(value
:
number)
:
number | 将lpx单位的数值转换为以px为单位的数值。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| px2lpx(value
:
number)
:
number | 将px单位的数值转换为以lpx为单位的数值。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| px2lpx(value
:
number)
:
number | 将px单位的数值转换为以lpx为单位的数值。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-types.md
浏览文件 @
072b540c
# 类型定义
# 类型定义
> **说明:**
>
> 本模块首批接口从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## Resource
## Resource
资源引用类型,用于设置组件属性的值。
资源引用类型,用于设置组件属性的值。
...
@@ -24,49 +28,49 @@
...
@@ -24,49 +28,49 @@
长度类型,用于描述尺寸单位。
长度类型,用于描述尺寸单位。
| 类型 | 说明 |
| 类型
| 说明 |
| -------- | -------------------------------------- |
| --------
-------------
| -------------------------------------- |
| string | 需要显式指定像素单位,如'10px',也可设置百分比字符串,如'100%'。 |
| string
| 需要显式指定像素单位,如'10px',也可设置百分比字符串,如'100%'。 |
| number | 默认单位vp。 |
| number
| 默认单位vp。 |
|
[
Resource
](
#resource
)
| 资源引用类型,引入系统资源或者应用资源中的尺寸。 |
|
[
Resource
](
#resource
)
| 资源引用类型,引入系统资源或者应用资源中的尺寸。
|
## ResourceStr
## ResourceStr
字符串类型,用于描述字符串入参可以使用的类型。
字符串类型,用于描述字符串入参可以使用的类型。
| 类型
| 说明
|
| 类型
| 说明
|
| --------
| ---
------------------------- |
| --------
------------- |
------------------------- |
| string
| 字符串类型。
|
| string
| 字符串类型。
|
|
[
Resource
](
#resource
)
| 资源引用类型,引入系统资源或者应用资源中的字符串。 |
|
[
Resource
](
#resource
)
| 资源引用类型,引入系统资源或者应用资源中的字符串。 |
## Padding
## Padding
内边距类型,用于描述组件不同方向的内边距。
内边距类型,用于描述组件不同方向的内边距。
| 名称 | 类型
| 必填 | 说明
|
| 名称 | 类型
| 必填 | 说明
|
| ------ | ------
| ---- |
--------------- |
| ------ | ------
----------- | ---- | -----
--------------- |
| top |
[
Length
](
#length
)
| 否 | 上内边距,组件内元素距组件顶部的尺寸。 |
| top |
[
Length
](
#length
)
| 否 | 上内边距,组件内元素距组件顶部的尺寸。 |
| right |
[
Length
](
#length
)
| 否 | 右内边距,组件内元素距组件右边界的尺寸。 |
| right |
[
Length
](
#length
)
| 否 | 右内边距,组件内元素距组件右边界的尺寸。 |
| bottom |
[
Length
](
#length
)
| 否 | 下内边距,组件内元素距组件底部的尺寸。 |
| bottom |
[
Length
](
#length
)
| 否 | 下内边距,组件内元素距组件底部的尺寸。 |
| left |
[
Length
](
#length
)
| 否 | 左内边距,组件内元素距组件左边界的尺寸。 |
| left |
[
Length
](
#length
)
| 否 | 左内边距,组件内元素距组件左边界的尺寸。 |
## Margin
## Margin
外边距类型,用于描述组件不同方向的外边距。
外边距类型,用于描述组件不同方向的外边距。
| 名称 | 类型
| 必填 | 说明
|
| 名称 | 类型
| 必填 | 说明
|
| ------ | ------
| ---- |
--------------- |
| ------ | ------
----------- | ---- | -----
--------------- |
| top |
[
Length
](
#length
)
| 否 | 上外边距,组件顶部距组件外元素的尺寸。 |
| top |
[
Length
](
#length
)
| 否 | 上外边距,组件顶部距组件外元素的尺寸。 |
| right |
[
Length
](
#length
)
| 否 | 右外边距,组件右边界距组件外元素的尺寸。 |
| right |
[
Length
](
#length
)
| 否 | 右外边距,组件右边界距组件外元素的尺寸。 |
| bottom |
[
Length
](
#length
)
| 否 | 下外边距,组件底部距组件外元素的尺寸。 |
| bottom |
[
Length
](
#length
)
| 否 | 下外边距,组件底部距组件外元素的尺寸。 |
| left |
[
Length
](
#length
)
| 否 | 坐外边距,组件左边界距组件外元素的尺寸。 |
| left |
[
Length
](
#length
)
| 否 | 坐外边距,组件左边界距组件外元素的尺寸。 |
## EdgeWidths<sup>9+</sup>
## EdgeWidths<sup>9+</sup>
边框宽度类型,用于描述组件边框不同方向的宽度。
边框宽度类型,用于描述组件边框不同方向的宽度。
| 名称 | 类型 | 必填 | 说明 |
| 名称 | 类型
| 必填 | 说明 |
| ------ | ------ | ---- | -------- |
| ------ | ------
-----------
| ---- | -------- |
| top |
[
Length
](
#length
)
| 否 | 组件上边框宽度。 |
| top |
[
Length
](
#length
)
| 否 | 组件上边框宽度。 |
| right |
[
Length
](
#length
)
| 否 | 组件右边框宽度。 |
| right |
[
Length
](
#length
)
| 否 | 组件右边框宽度。 |
| bottom |
[
Length
](
#length
)
| 否 | 组件下边框宽度。 |
| bottom |
[
Length
](
#length
)
| 否 | 组件下边框宽度。 |
...
@@ -76,8 +80,8 @@
...
@@ -76,8 +80,8 @@
圆角类型,用于描述组件边框圆角半径。
圆角类型,用于描述组件边框圆角半径。
| 名称 | 类型 | 必填 | 说明 |
| 名称 | 类型
| 必填 | 说明 |
| ----------- | ------ | ---- | ---------- |
| ----------- | ------
-----------
| ---- | ---------- |
| topLeft |
[
Length
](
#length
)
| 否 | 组件左上角圆角半径。 |
| topLeft |
[
Length
](
#length
)
| 否 | 组件左上角圆角半径。 |
| topRight |
[
Length
](
#length
)
| 否 | 组件右上角圆角半径。 |
| topRight |
[
Length
](
#length
)
| 否 | 组件右上角圆角半径。 |
| bottomLeft |
[
Length
](
#length
)
| 否 | 组件左下角圆角半径。 |
| bottomLeft |
[
Length
](
#length
)
| 否 | 组件左下角圆角半径。 |
...
@@ -87,8 +91,8 @@
...
@@ -87,8 +91,8 @@
边框颜色,用于描述组件边框四条边的颜色。
边框颜色,用于描述组件边框四条边的颜色。
| 名称 | 类型 | 必填 | 说明 |
| 名称 | 类型
| 必填 | 说明 |
| ------ | ------------- | ---- | -------- |
| ------ | -------------
------------------
| ---- | -------- |
| top |
[
ResourceColor
](
#resourcecolor
)
| 否 | 组件上边框颜色。 |
| top |
[
ResourceColor
](
#resourcecolor
)
| 否 | 组件上边框颜色。 |
| right |
[
ResourceColor
](
#resourcecolor
)
| 否 | 组件右边框颜色。 |
| right |
[
ResourceColor
](
#resourcecolor
)
| 否 | 组件右边框颜色。 |
| bottom |
[
ResourceColor
](
#resourcecolor
)
| 否 | 组件下边框颜色。 |
| bottom |
[
ResourceColor
](
#resourcecolor
)
| 否 | 组件下边框颜色。 |
...
@@ -98,8 +102,8 @@
...
@@ -98,8 +102,8 @@
边框样式,用于描述组件边框四条边的样式。
边框样式,用于描述组件边框四条边的样式。
| 名称 | 类型 | 必填 | 说明 |
| 名称 | 类型
| 必填 | 说明 |
| ------ | ----------- | ---- | -------- |
| ------ | -----------
-----------------------------
| ---- | -------- |
| top |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
| 否 | 组件上边框样式。 |
| top |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
| 否 | 组件上边框样式。 |
| right |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
| 否 | 组件右边框样式。 |
| right |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
| 否 | 组件右边框样式。 |
| bottom |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
| 否 | 组件下边框样式。 |
| bottom |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
| 否 | 组件下边框样式。 |
...
@@ -110,8 +114,8 @@
...
@@ -110,8 +114,8 @@
相对布局完成位置坐标偏移量。
相对布局完成位置坐标偏移量。
| 名称 | 类型 | 必填 | 说明 |
| 名称 | 类型
| 必填 | 说明 |
| ---- | ------ | ---- | -------- |
| ---- | ------
-----------
| ---- | -------- |
| dx |
[
Length
](
#length
)
| 是 | 水平方向偏移量。 |
| dx |
[
Length
](
#length
)
| 是 | 水平方向偏移量。 |
| dy |
[
Length
](
#length
)
| 是 | 竖直方向偏移量。 |
| dy |
[
Length
](
#length
)
| 是 | 竖直方向偏移量。 |
...
@@ -119,27 +123,27 @@
...
@@ -119,27 +123,27 @@
颜色类型,用于描述资源颜色类型。
颜色类型,用于描述资源颜色类型。
| 类型
| 说明
|
| 类型
| 说明
|
| -----------------------------------
----- | ---------
---------------------------------------- |
| -----------------------------------
|
---------------------------------------- |
|
[
Color
](
ts-appendix-enums.md#color
)
| 颜色枚举值。
|
|
[
Color
](
ts-appendix-enums.md#color
)
| 颜色枚举值。
|
| number
| HEX格式颜色,支持rgb。示例:0xffffff。
|
| number
| HEX格式颜色,支持rgb。示例:0xffffff。
|
| string
| rgb或者argb格式颜色。示例:'#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'。
|
| string
| rgb或者argb格式颜色。示例:'#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'。
|
|
[
Resource
](
#resource
)
| 使用引入资源的方式,引入系统资源或者应用资源中的颜色。
|
|
[
Resource
](
#resource
)
| 使用引入资源的方式,引入系统资源或者应用资源中的颜色。
|
## ColoringStrategy
## ColoringStrategy
智能取色枚举类型,用于设置前景色。
智能取色枚举类型,用于设置前景色。
| 名称
| 描述
|
| 名称
| 描述
|
| ------
--- |
------- |
| ------
| --------
------- |
| INVERT
| 设置前景色为控件背景色的反色。
|
| INVERT
| 设置前景色为控件背景色的反色。
|
## LengthConstrain
## LengthConstrain
长度约束,用于对组件最大、最小长度做限制。
长度约束,用于对组件最大、最小长度做限制。
| 名称 | 类型 | 必填 | 说明 |
| 名称 | 类型
| 必填 | 说明 |
| --------- | ------ | ---- | ------- |
| --------- | ------
-----------
| ---- | ------- |
| minLength |
[
Length
](
#length
)
| 是 | 组件最小长度。 |
| minLength |
[
Length
](
#length
)
| 是 | 组件最小长度。 |
| maxLength |
[
Length
](
#length
)
| 是 | 组件最大长度。 |
| maxLength |
[
Length
](
#length
)
| 是 | 组件最大长度。 |
...
@@ -148,12 +152,12 @@
...
@@ -148,12 +152,12 @@
设置文本样式。
设置文本样式。
| 名称
| 类型 | 必填 | 说明
|
| 名称
| 类型 | 必填 | 说明
|
| ------ | ----------------------------------------
-------------------- | ---- | --------------------
---------------------------------------- |
| ------ | ----------------------------------------
| ---- |
---------------------------------------- |
| size |
[
Length
](
#length
)
| 否
| 设置文本尺寸,Length为number类型时,使用fp单位。不支持设置百分比字符串。 |
| size |
[
Length
](
#length
)
| 否
| 设置文本尺寸,Length为number类型时,使用fp单位。不支持设置百分比字符串。 |
| weight |
[
FontWeight
](
ts-appendix-enums.md#fontweight
)
\|
number
\|
string | 否 | 设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。 |
| weight |
[
FontWeight
](
ts-appendix-enums.md#fontweight
)
\|
number
\|
string | 否
| 设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。 |
| family | string
\|
[
Resource
](
#resource
)
| 否
| 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial, sans-serif'。当前只支持'sans-serif'字体。 |
| family | string
\|
[
Resource
](
#resource
)
| 否
| 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial, sans-serif'。当前只支持'sans-serif'字体。 |
| style |
[
FontStyle
](
ts-appendix-enums.md#fontstyle
)
| 否 | 设置文本的字体样式。
|
| style |
[
FontStyle
](
ts-appendix-enums.md#fontstyle
)
| 否 | 设置文本的字体样式。
|
## Area<sup>8+</sup>
## Area<sup>8+</sup>
...
@@ -170,8 +174,8 @@
...
@@ -170,8 +174,8 @@
位置类型,用于表示一个坐标点。
位置类型,用于表示一个坐标点。
| 名称 | 类型 | 必填 | 说明 |
| 名称 | 类型
| 必填 | 说明 |
| ---- | ------ | ---- | --------------------------- |
| ---- | ------
-----------
| ---- | --------------------------- |
| x |
[
Length
](
#length
)
| 否 | x轴坐标,作为返回值时,类型为number,单位vp。 |
| x |
[
Length
](
#length
)
| 否 | x轴坐标,作为返回值时,类型为number,单位vp。 |
| y |
[
Length
](
#length
)
| 否 | y轴坐标,作为返回值时,类型为number,单位vp。 |
| y |
[
Length
](
#length
)
| 否 | y轴坐标,作为返回值时,类型为number,单位vp。 |
...
@@ -179,8 +183,8 @@
...
@@ -179,8 +183,8 @@
设置约束尺寸,组件布局时,进行尺寸范围限制。
设置约束尺寸,组件布局时,进行尺寸范围限制。
| 名称 | 类型 | 必填 | 说明 |
| 名称 | 类型
| 必填 | 说明 |
| --------- | ------ | ---- | ------- |
| --------- | ------
-----------
| ---- | ------- |
| minWidth |
[
Length
](
#length
)
| 否 | 元素最小宽度。 |
| minWidth |
[
Length
](
#length
)
| 否 | 元素最小宽度。 |
| maxWidth |
[
Length
](
#length
)
| 否 | 元素最大宽度。 |
| maxWidth |
[
Length
](
#length
)
| 否 | 元素最大宽度。 |
| minHeight |
[
Length
](
#length
)
| 否 | 元素最小高度。 |
| minHeight |
[
Length
](
#length
)
| 否 | 元素最小高度。 |
...
@@ -190,8 +194,8 @@
...
@@ -190,8 +194,8 @@
设置宽高尺寸。
设置宽高尺寸。
| 名称 | 类型 | 必填 | 说明 |
| 名称 | 类型
| 必填 | 说明 |
| ------ | ------ | ---- | ----- |
| ------ | ------
-----------
| ---- | ----- |
| width |
[
Length
](
#length
)
| 否 | 元素宽度。 |
| width |
[
Length
](
#length
)
| 否 | 元素宽度。 |
| height |
[
Length
](
#length
)
| 否 | 元素高度。 |
| height |
[
Length
](
#length
)
| 否 | 元素高度。 |
...
@@ -202,9 +206,9 @@
...
@@ -202,9 +206,9 @@
| 名称 | 类型 | 必填 | 说明 |
| 名称 | 类型 | 必填 | 说明 |
| ------ | ---------------------------------------- | ---- | ------- |
| ------ | ---------------------------------------- | ---- | ------- |
| width |
[
Length
](
#length
)
\|
[
EdgeWidths
](
#edgewidths9
)
<sup>
9+
</sup>
| 否 | 边框宽度。 |
| width |
[
Length
](
#length
)
\|
[
EdgeWidths
](
#edgewidths9
)
<sup>
9+
</sup>
| 否 | 边框宽度。 |
| color |
[
ResourceColor
](
#resourcecolor
)
\|
[
EdgeColors
](
#edgecolors9
)
<sup>
9+
</sup>
| 否 | 边框颜色。 |
| color |
[
ResourceColor
](
#resourcecolor
)
\|
[
EdgeColors
](
#edgecolors9
)
<sup>
9+
</sup>
| 否 | 边框颜色。 |
| radius |
[
Length
](
#length
)
\|
[
BorderRadiuses
](
#borderradiuses9
)
<sup>
9+
</sup>
| 否 | 边框圆角半径。 |
| radius |
[
Length
](
#length
)
\|
[
BorderRadiuses
](
#borderradiuses9
)
<sup>
9+
</sup>
| 否 | 边框圆角半径。 |
| style |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
\|
EdgeStyles
<sup>
9+
</sup>
| 否 | 边框样式。 |
| style |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
\|
EdgeStyles
<sup>
9+
</sup>
| 否 | 边框样式。 |
## ColorFilter<sup>9+</sup>
## ColorFilter<sup>9+</sup>
...
@@ -228,19 +232,19 @@
...
@@ -228,19 +232,19 @@
像素扩展属性集合,用于描述像素扩展的信息。
像素扩展属性集合,用于描述像素扩展的信息。
| 名称
| 类型 | 必填 | 说明
|
| 名称
| 类型 | 必填 | 说明
|
| ------
----- | ------ | ---- |
---------- |
| ------
| ----------------- | ---- | ----
---------- |
| left
|
[
Length
](
#length
)
| 否 | 组件图像左边沿扩展距离。
|
| left
|
[
Length
](
#length
)
| 否 | 组件图像左边沿扩展距离。
|
| right
|
[
Length
](
#length
)
| 否 | 组件图像右边沿像素扩展距离。 |
| right |
[
Length
](
#length
)
| 否 | 组件图像右边沿像素扩展距离。 |
| top |
[
Length
](
#length
)
| 否 | 组件图像上边沿像素扩展距离。 |
| top
|
[
Length
](
#length
)
| 否 | 组件图像上边沿像素扩展距离。 |
| bottom |
[
Length
](
#length
)
| 否 | 组件图像下边沿像素扩展距离。 |
| bottom |
[
Length
](
#length
)
| 否 | 组件图像下边沿像素扩展距离。 |
## ModalTransition<sup>10+</sup>
## ModalTransition<sup>10+</sup>
全屏模态转场方式枚举类型,用于设置全屏模态转场类型。
全屏模态转场方式枚举类型,用于设置全屏模态转场类型。
| 名称 | 描述 |
| 名称 | 描述 |
| --------- | ------- |
| ------- | ------------ |
| None | 全屏模态无转场动画。 |
| None | 全屏模态无转场动画。 |
| Default | 全屏模态上下切换动画。 |
| Default | 全屏模态上下切换动画。 |
| Alpha | 全屏模态透明度渐变动画。 |
| Alpha | 全屏模态透明度渐变动画。 |
\ No newline at end of file
\ No newline at end of file
zh-cn/application-dev/ui/arkts-common-components-button.md
浏览文件 @
072b540c
...
@@ -156,6 +156,7 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
...
@@ -156,6 +156,7 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
## 场景示例
## 场景示例
-
用于启动操作。
-
用于启动操作。
可以用按钮启动任何用户界面元素,按钮会根据用户的操作触发相应的事件。例如,在List容器里通过点击按钮进行页面跳转。
可以用按钮启动任何用户界面元素,按钮会根据用户的操作触发相应的事件。例如,在List容器里通过点击按钮进行页面跳转。
```
ts
```
ts
...
@@ -195,6 +196,7 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
...
@@ -195,6 +196,7 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
-
用于表单的提交。
-
用于表单的提交。
在用户登录/注册页面,使用按钮进行登录或注册操作。
在用户登录/注册页面,使用按钮进行登录或注册操作。
```
ts
```
ts
...
@@ -218,6 +220,7 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
...
@@ -218,6 +220,7 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
!
[
zh-cn_image_0000001562940473
](
figures/zh-cn_image_0000001562940473.png
)
!
[
zh-cn_image_0000001562940473
](
figures/zh-cn_image_0000001562940473.png
)
-
悬浮按钮
-
悬浮按钮
在可以滑动的界面,滑动时按钮始终保持悬浮状态。
在可以滑动的界面,滑动时按钮始终保持悬浮状态。
```
ts
```
ts
...
@@ -258,4 +261,4 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
...
@@ -258,4 +261,4 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
}
}
```
```
!
[
GIF
](
figures/GIF
.gif
)
!
[
floating_button
](
figures/floating_button
.gif
)
zh-cn/application-dev/ui/figures/
GIF
.gif
→
zh-cn/application-dev/ui/figures/
floating_button
.gif
浏览文件 @
072b540c
文件已移动
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录