Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
5c6a8de2
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看板
未验证
提交
5c6a8de2
编写于
9月 09, 2022
作者:
O
openharmony_ci
提交者:
Gitee
9月 09, 2022
浏览文件
操作
浏览文件
下载
差异文件
!9092 文档整改
Merge pull request !9092 from 田雨/master
上级
0648f570
4f6dbf0f
变更
14
隐藏空白更改
内联
并排
Showing
14 changed file
with
292 addition
and
308 deletion
+292
-308
zh-cn/application-dev/reference/arkui-js/js-components-common-customizing-font.md
...ference/arkui-js/js-components-common-customizing-font.md
+4
-5
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md
...on-dev/reference/arkui-ts/ts-basic-components-checkbox.md
+20
-20
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
...v/reference/arkui-ts/ts-basic-components-checkboxgroup.md
+24
-20
zh-cn/application-dev/reference/arkui-ts/ts-container-ability-component.md
...-dev/reference/arkui-ts/ts-container-ability-component.md
+8
-9
zh-cn/application-dev/reference/arkui-ts/ts-container-column.md
...application-dev/reference/arkui-ts/ts-container-column.md
+14
-18
zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
...ication-dev/reference/arkui-ts/ts-container-tabcontent.md
+8
-13
zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
...n/application-dev/reference/arkui-ts/ts-container-tabs.md
+38
-38
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
...on-dev/reference/arkui-ts/ts-drawing-components-circle.md
+6
-6
zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
...plication-dev/reference/arkui-ts/ts-explicit-animation.md
+16
-14
zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md
...ation-dev/reference/arkui-ts/ts-media-components-video.md
+62
-54
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
...eference/arkui-ts/ts-universal-attributes-border-image.md
+27
-27
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
...-dev/reference/arkui-ts/ts-universal-attributes-border.md
+39
-54
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md
...n-dev/reference/arkui-ts/ts-universal-attributes-focus.md
+8
-12
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
...eference/arkui-ts/ts-universal-attributes-touch-target.md
+18
-18
未找到文件。
zh-cn/application-dev/reference/arkui-js/js-components-common-customizing-font.md
浏览文件 @
5c6a8de2
# 自定义字体样式
自定义字体可以是从项目中的字体文件中加载的字体,字体格式支持ttf和otf。
> **说明:**
>
> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
font-face用于定义字体样式。应用可以在style中定义font-face来指定相应的字体名和字体资源,然后在font-family样式中引用该字体。
自定义字体可以是从项目中的字体文件中加载的字体,字体格式支持ttf和otf。
## 定义font-face
...
...
@@ -48,6 +46,7 @@ font-face用于定义字体样式。应用可以在style中定义font-face来指
页面样式:
```
css
/*xxx.css*/
@font-face
{
font-family
:
HWfont
;
src
:
url("/common/HWfont.ttf")
;
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md
浏览文件 @
5c6a8de2
# Checkbox
> **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
提供多选框组件,通常用于某选项的打开或关闭。
## 权限列表
无
> **说明:**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
...
...
@@ -16,29 +12,33 @@
## 接口
Checkbox(
name?: string, group?: string
)
Checkbox(
option?:
{name?: string, group?: string }
)
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------| --------| ------ | -------- | -------- |
| name | string | 否 | - | 多选框名称。 |
| group | string | 否 | - | 多选框的群组名称。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| --------| --------| ------ | -------- |
| name | string | 否 | 多选框名称。 |
| group | string | 否 | 多选框的群组名称。 |
## 属性
除支持
[
通用属性
](
ts-universal-attributes-size.md
)
外,还支持以下属性:
| 名称 | 参数类型 |
默认值 |
描述 |
| ------------- | ------- | ------
| ------
-- |
| select | boolean |
false | 设置多选框是否选中。
|
| selectedColor |
[
ResourceColor
](
../../ui/ts-types.md
)
|
- |
设置多选框选中状态颜色。 |
| 名称 | 参数类型 | 描述 |
| ------------- | ------- | -------- |
| select | boolean |
设置多选框是否选中。
<br/>
默认值:false
|
| selectedColor |
[
ResourceColor
](
../../ui/ts-types.md
)
| 设置多选框选中状态颜色。 |
## 事件
| 名称 | 功能描述 |
支持
[
通用事件
](
ts-universal-events-click.md
)
外,还支持以下事件:
| 名称 | 功能描述 |
| ----------| -------- |
|onChange(callback: (value: boolean) => void) | 当选中状态发生变化时,触发该回调。
<br>
- value为true时,表示已选中。
<br>
- value为false时,表示未选中。 |
|onChange(callback: (value: boolean) => void) | 当选中状态发生变化时,触发该回调。
<br>
- value为true时,表示已选中。
<br>
- value为false时,表示未选中。 |
## 示例
```
ts
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
浏览文件 @
5c6a8de2
# CheckboxGroup
> **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
多选框群组,用于控制多选框全选或者不全选状态。
## 权限列表
无
> **说明:**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
...
...
@@ -19,31 +16,38 @@ CheckboxGroup( group?: string )
创建多选框群组,可以控制群组内的Checkbox全选或者不全选,相同group的Checkbox和CheckboxGroup为同一群组。
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| group | string | 否 | - | 群组名称。|
**参数:**
## 属性
|
名称 | 参数类型 | 默认值 |
描述 |
|
参数名 | 参数类型 | 必填 | 参数
描述 |
| -------- | -------- | -------- | -------- |
| selectAll | boolean | false | 设置是否全选。 |
| selectedColor |
[
ResourceColor
](
../../ui/ts-types.md
)
| - | 设置被选中或部分选中状态的颜色。 |
| group | string | 否 | 群组名称。|
## 属性
除支持
[
通用属性
](
ts-universal-attributes-size.md
)
外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| selectAll | boolean | 设置是否全选。
<br/>
默认值:false |
| selectedColor |
[
ResourceColor
](
../../ui/ts-types.md
)
| 设置被选中或部分选中状态的颜色。 |
## 事件
除支持
[
通用事件
](
ts-universal-events-click.md
)
外,还支持以下事件:
| 名称 | 功能描述 |
| -------- | -------- |
| onChange (callback: (names: Array
<
string
>
, status: SelectStatus) => void ) |CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时,触发回调。
<br>
- names:群组内所有被选中的多选框名称。
<br>
- status:选中状态。|
-
SelectStatus枚举说明
| 名称 | 描述 |
| ----- | -------------------- |
| All | 群组多选择框全部选择。 |
| Part | 群组多选择框部分选择。 |
| None | 群组多选择框全部没有选择。 |
## SelectStatus枚举说明
| 名称 | 描述 |
| ----- | -------------------- |
| All | 群组多选择框全部选择。 |
| Part | 群组多选择框部分选择。 |
| None | 群组多选择框全部没有选择。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-ability-component.md
浏览文件 @
5c6a8de2
# AbilityComponent
独立显示Ability的容器。
> **说明:**
>
> 该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 本组件均为系统接口,三方应用不支持调用。
独立显示Ability的容器。
## 使用约束
AbilityComponent为独立层次渲染,不能再之上叠加其他显示内容。
...
...
@@ -26,26 +25,26 @@ AbilityComponent需设置且只能设置width、height,且width、height不支
## 接口
AbilityComponent(
value: {want : Want}
)
AbilityComponent(
want: Want
)
**参数:**
| 参数名 | 参数类型 | 必填 |
默认值 |
参数描述 |
| -------- | -------- | -------- | -------- |
-------- |
| want |
[
Want
](
../
../reference/apis/js-apis-application-Want.md
)
| 是 | -
| 默认加载的Ability描述。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| want |
[
Want
](
../
apis/js-apis-application-Want.md
)
| 是
| 默认加载的Ability描述。 |
## 事件
### onConnect
onConnect(
)
=
>
void
onConnect(
callback:()
=
>
void)
AbilityComponent环境启动完成时的回调,之后可使用AbilityComponent的方法。
### onDisconnect
onDisconnect(
)
=
>
void
onDisconnect(
callback:()
=
>
void)
AbilityComponent环境销毁时的回调。
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-column.md
浏览文件 @
5c6a8de2
# Column
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
沿垂直方向布局的容器。
## 权限列表
无
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
...
...
@@ -19,21 +14,22 @@
## 接口
Column(value?:{space?: Length})
Column(value?:{space?: string
|
number })
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| space | Length | 否 | 0 | 纵向布局元素间距。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| space | string
\|
number | 否 | 纵向布局元素间距。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| alignItems |
[
HorizontalAlign
](
ts-appendix-enums.md#horizontalalign
)
| HorizontalAlign.Center | 设置子组件在水平方向上的对齐格式。 |
| justifyContent
<sup>
8+
</sup>
|
[
FlexAlign
](
ts-container-flex.md
)
| FlexAlign.Start | 设置子组件在垂直方向上的对齐格式。 |
除支持
[
通用属性
](
ts-universal-attributes-size.md
)
外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| alignItems |
[
HorizontalAlign
](
ts-appendix-enums.md#horizontalalign
)
| 设置子组件在水平方向上的对齐格式。
<br/>
默认值:HorizontalAlign.Center |
| justifyContent
<sup>
8+
</sup>
|
[
FlexAlign
](
ts-container-flex.md
)
| 设置子组件在垂直方向上的对齐格式。
<br/>
默认值:FlexAlign.Start |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
浏览文件 @
5c6a8de2
# TabContent
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
仅在Tabs中使用,对应一个切换页签的内容视图。
## 权限列表
无
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
...
...
@@ -24,16 +19,16 @@ TabContent()
## 属性
不支持触摸热区设置。
除支持
[
通用属性
](
ts-universal-attributes-size.md
)
外,还支持以下属性:
| 名称 | 参数类型 |
默认值 |
描述 |
| -------- | -------- | -------- |
-------- |
| tabBar | string
\|
Resource
\|
{
<br/>
icon?:
string
\|
Resource,
<br/>
text?:
string
\|
Resource
<br/>
}
<br/>
\|
[
CustomBuilder
](
../../ui/ts-types.md
)
<sup>
8+
</sup>
|
- |
设置TabBar上显示内容。
<br/>
CustomBuilder:
构造器,内部可以传入组件(API8版本以上适用)。
<br/>
>
**说明:**
<br/>
>
如果icon采用svg格式图源,则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源,icon大小则是svg本身内置的宽高属性值大小。 |
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| tabBar | string
\|
Resource
\|
{
<br/>
icon?:
string
\|
Resource,
<br/>
text?:
string
\|
Resource
<br/>
}
<br/>
\|
[
CustomBuilder
](
../../ui/ts-types.md
)
<sup>
8+
</sup>
| 设置TabBar上显示内容。
<br/>
CustomBuilder:
构造器,内部可以传入组件(API8版本以上适用)。
<br/>
>
**说明:**
<br/>
>
如果icon采用svg格式图源,则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源,icon大小则是svg本身内置的宽高属性值大小。 |
> **说明:**
> - TabContent组件不支持设置通用宽度属性,其宽度默认撑满Tabs父组件。
>
> - TabContent组件不支持设置通用高度属性,其高度由Tabs父组件高度与TabBar组件高度决定。
> - TabContent组件不支持[触摸热区设置](ts-universal-attributes-touch-target.md)。
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
浏览文件 @
5c6a8de2
# Tabs
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
一种可以通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图。
## 权限列表
无
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
...
...
@@ -17,46 +12,50 @@
包含子组件
[
TabContent
](
ts-container-tabcontent.md
)
。
## 接口
说明
## 接口
Tabs(value: {barPosition?: BarPosition, index?: number, controller?:
[
TabsController
](
#tabscontroller
)
})
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| barPosition | BarPosition | 否 | BarPosition.Start | 指定页签位置来创建Tabs容器组件。 |
| index | number | 否 | 0 | 指定初次初始页签索引。 |
| controller |
[
TabsController
](
#tabscontroller
)
| 否 | - | 设置Tabs控制器。 |
**参数:**
-
BarPosition枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Start | vertical属性方法设置为true时,页签位于容器左侧;vertical属性方法设置为false时,页签位于容器顶部。 |
| End | vertical属性方法设置为true时,页签位于容器右侧;vertical属性方法设置为false时,页签位于容器底部。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| barPosition | BarPosition | 否 | 指定页签位置来创建Tabs容器组件。
<br/>
默认值:BarPosition.Start |
| index | number | 否 | 指定初次初始页签索引。
<br/>
默认值:0 |
| controller |
[
TabsController
](
#tabscontroller
)
| 否 | 设置Tabs控制器。 |
## BarPosition枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Start | vertical属性方法设置为true时,页签位于容器左侧;vertical属性方法设置为false时,页签位于容器顶部。 |
| End | vertical属性方法设置为true时,页签位于容器右侧;vertical属性方法设置为false时,页签位于容器底部。 |
## 属性
不支持
触摸热区设置。
不支持
[
触摸热区设置
](
ts-universal-attributes-touch-target.md
)
,除支持
[
通用属性
](
ts-universal-attributes-size.md
)
外,还支持以下属性:
| 名称 | 参数类型 |
默认值 |
描述 |
| -------- | -------- | -------- |
-------- |
| vertical | boolean |
false | 设置为false是为横向Tabs,设置为true时为纵向Tabs。
|
| scrollable | boolean |
true | 设置为true时可以通过滑动页面进行页面切换,为false时不可滑动切换页面。
|
| barMode | BarMode |
BarMode.Fixed | TabBar布局模式,具体描述见BarMode枚举说明。
|
| barWidth | number
\|
string
<sup>
8+
</sup>
|
- |
TabBar的宽度值。 |
| barHeight | number
\|
string
<sup>
8+
</sup>
|
- |
TabBar的高度值。 |
| animationDuration | number |
200 | TabContent滑动动画时长。
|
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| vertical | boolean |
设置为false是为横向Tabs,设置为true时为纵向Tabs。
<br/>
默认值:false
|
| scrollable | boolean |
设置为true时可以通过滑动页面进行页面切换,为false时不可滑动切换页面。
<br/>
默认值:true
|
| barMode | BarMode |
TabBar布局模式,具体描述见BarMode枚举说明。
<br/>
默认值:BarMode.Fixed
|
| barWidth | number
\|
string
<sup>
8+
</sup>
| TabBar的宽度值。 |
| barHeight | number
\|
string
<sup>
8+
</sup>
| TabBar的高度值。 |
| animationDuration | number |
TabContent滑动动画时长。
<br/>
默认值:200
|
-
BarMode枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Scrollable | TabBar使用实际布局宽度,
超过总长度后可滑动。 |
| Fixed | 所有TabBar平均分配宽度。 |
## BarMode枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Scrollable | TabBar使用实际布局宽度,
超过总长度后可滑动。 |
| Fixed | 所有TabBar平均分配宽度。 |
## 事件
除支持
[
通用事件
](
ts-universal-events-click.md
)
外,还支持以下事件:
| 名称 | 功能描述 |
| -------- | -------- |
| onChange(callback:
(index:
number)
=
>
void) | Tab页签切换后触发的事件。 |
...
...
@@ -78,10 +77,11 @@ changeIndex(value: number): void
控制Tabs切换到指定页签。
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | number | 是 | - | 页签在Tabs里的索引值,索引值从0开始。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| value | number | 是 | 页签在Tabs里的索引值,索引值从0开始。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
浏览文件 @
5c6a8de2
...
...
@@ -3,12 +3,8 @@
用于绘制圆形的组件。
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
无
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
...
...
@@ -26,6 +22,10 @@ Circle(options?: {width?: string | number, height?: string | number})
| width | string
\|
number | 否 | 0 | 宽度。 |
| height | string
\|
number | 否 | 0 | 高度。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string
\|
number | 是 | - | 宽度。 |
| height | string
\|
number | 是 | - | 高度。 |
## 属性
...
...
zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
浏览文件 @
5c6a8de2
...
...
@@ -3,7 +3,8 @@
提供显示动画接口。
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
| 接口名称 | 功能描述 |
...
...
@@ -13,21 +14,22 @@
## AnimationOptions对象说明
-
属性
| 属性名称 | 属性类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| duration | number | 1000 | 动画持续时间,单位为毫秒。 |
| tempo | number | 1.0 | 动画的播放速度,值越大动画播放越快,值越小播放越慢,为0时无动画效果。 |
| curve | Curve
\|
Curves | Linear | 动画曲线。 |
| delay | number | 0 | 单位为ms(毫秒),默认不延时播放。 |
| iterations | number | 1 | 默认播放一次,设置为-1时表示无限次播放。 |
| playMode |
[
PlayMode
](
ts-appendix-enums.md#playmode
)
| Normal | 设置动画播放模式,默认播放完成后重头开始播放。 |
### 属性
| 属性名称 | 属性类型 | 描述 |
| -------- | -------- | -------- |
| duration | number | 动画持续时间,单位为毫秒。
<br/>
默认值:1000 |
| tempo | number | 动画的播放速度,值越大动画播放越快,值越小播放越慢,为0时无动画效果。
<br/>
默认值:1.0 |
| curve | Curve
\|
Curves | 动画曲线。
<br/>
默认值:Curve.Linear |
| delay | number | 单位为ms(毫秒),默认不延时播放。
<br/>
默认值:0 |
| iterations | number | 默认播放一次,设置为-1时表示无限次播放。
<br/>
默认值:1 |
| playMode |
[
PlayMode
](
ts-appendix-enums.md#playmode
)
| 设置动画播放模式,默认播放完成后重头开始播放。
<br/>
默认值:PlayMode.Normal |
-
接口
| 名称 | 功能描述 |
| -------- | -------- |
| onFinish()
=
>
void | 动效播放完成回调。 |
### 接口
| 名称 | 功能描述 |
| -------- | -------- |
| onFinish()
=
>
void | 动效播放完成回调。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md
浏览文件 @
5c6a8de2
...
...
@@ -3,6 +3,7 @@
用于播放单个视频并控制其播放状态的组件。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
...
...
@@ -27,50 +28,53 @@
## 接口
Video(value:
VideoOptions)
Video(value:
{src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})
-
VideoOptions类型接口说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------------------- | ---------------------------------------- | ---- | ---------------------------------------- | ---------------------------------------- |
| src | string
\|
[
Resource
](
../../ui/ts-types.md
)
| 否 | - | 视频播放源的路径,支持本地视频路径和网络路径。
<br>
支持在resources下面的video或rawfile文件夹里放置媒体资源。
<br>
支持dataability://的路径前缀,用于访问通过Data Ability提供的视频路径,具体路径信息详见
[
Data Ability说明
](
../../ability/fa-dataability.md
)
。 |
| currentProgressRate | number
\|
string
\|
PlaybackSpeed
<sup>
8+
</sup>
| 否 | 1.0
\|
PlaybackSpeed.
<br>
Speed_Forward_1_00_X | 视频播放倍速。
<br/>
>
**说明:**
<br/>
>
number取值仅支持:0.75,1.0,1.25,1.75,2.0。
<br/>
|
| previewUri | string
\|
PixelMap
<sup>
8+
</sup>
\|
[
Resource
](
../../ui/ts-types.md
)
| 否 | - | 预览图片的路径。 |
| controller |
[
VideoController
](
#videocontroller
)
| 否 | - | 控制器。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| src | string
\|
[
Resource
](
../../ui/ts-types.md
)
| 否 | 视频播放源的路径,支持本地视频路径和网络路径。
<br>
支持在resources下面的video或rawfile文件夹里放置媒体资源。
<br>
支持dataability://的路径前缀,用于访问通过Data Ability提供的视频路径,具体路径信息详见
[
Data Ability说明
](
../../ability/fa-dataability.md
)
。
<br/>
**说明:**
<br/>
视频支持的规格是:mp4、mkv、webm、TS。 |
| currentProgressRate | number
\|
string
\|
PlaybackSpeed
<sup>
8+
</sup>
| 否 | 视频播放倍速。
<br/>
**说明:**
<br/>
number取值仅支持:0.75,1.0,1.25,1.75,2.0。
<br/>
默认值:1.0
\|
PlaybackSpeed.Speed_Forward_1_00_X |
| previewUri | string
\|
PixelMap
<sup>
8+
</sup>
\|
[
Resource
](
../../ui/ts-types.md
)
| 否 | 预览图片的路径。 |
| controller |
[
VideoController
](
#videocontroller
)
| 否 | 控制器。 |
-
PlaybackSpeed
<sup>
8+
</sup>
类型接口说明
| 名称 | 描述 |
| -------------------- | --------- |
| Speed_Forward_0_75_X | 0.75倍速播放。 |
| Speed_Forward_1_00_X | 1倍速播放。 |
| Speed_Forward_1_25_X | 1.25倍速播放。 |
| Speed_Forward_1_75_X | 1.75倍速播放。 |
| Speed_Forward_2_00_X | 2倍速播放。 |
## PlaybackSpeed<sup>8+</sup>枚举说明
| 名称 | 描述 |
| -------------------- | --------- |
| Speed_Forward_0_75_X | 0.75倍速播放。 |
| Speed_Forward_1_00_X | 1倍速播放。 |
| Speed_Forward_1_25_X | 1.25倍速播放。 |
| Speed_Forward_1_75_X | 1.75倍速播放。 |
| Speed_Forward_2_00_X | 2倍速播放。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| --------- | ---------------------------------------- | ----- | --------------- |
| muted | boolean | false | 是否静音。 |
| autoPlay | boolean | false | 是否自动播放。 |
| controls | boolean | true | 控制视频播放的控制栏是否显示。 |
| objectFit |
[
ImageFit
](
ts-basic-components-image.md
)
| Cover | 设置视频显示模式。 |
| loop | boolean | false | 是否单个视频循环播放。 |
除支持
[
通用属性
](
ts-universal-attributes-size.md
)
外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| --------- | ---------------------------------------- | ----------------------------------------------- |
| muted | boolean | 是否静音。
<br/>
默认值:false |
| autoPlay | boolean | 是否自动播放。
<br/>
默认值:false |
| controls | boolean | 控制视频播放的控制栏是否显示。
<br/>
默认值:true |
| objectFit |
[
ImageFit
](
ts-basic-components-image.md
)
| 设置视频显示模式。
<br/>
默认值:Cover |
| loop | boolean | 是否单个视频循环播放。
<br/>
默认值:false |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onStart()
=
>
void | 播放时触发该事件。 |
| onPause()
=
>
void | 暂停时触发该事件。 |
| onFinish()
=
>
void | 播放结束时触发该事件。 |
| onError()
=
>
void | 播放失败时触发该事件。 |
| onPrepared(event?:
{
duration:
number
})
=
>
void | 视频准备完成时触发该事件,通过duration可以获取视频时长,单位为秒(s)。 |
| onSeeking(event?:
{
time:
number
})
=
>
void | 操作进度条过程时上报时间信息,单位为s。 |
| onSeeked(event?:
{
time:
number
})
=
>
void | 操作进度条完成后,上报播放时间信息,单位为s。 |
| onUpdate(event?:
{
time:
number
})
=
>
void | 播放进度变化时触发该事件,单位为s,更新时间间隔为250ms。 |
除支持
[
通用事件
](
ts-universal-events-click.md
)
外,还支持以下事件:
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onStart(event:()
=
>
void) | 播放时触发该事件。 |
| onPause(event:()
=
>
void) | 暂停时触发该事件。 |
| onFinish(event:()
=
>
void) | 播放结束时触发该事件。 |
| onError(event:()
=
>
void) | 播放失败时触发该事件。 |
| onPrepared(callback:(event?:
{
duration:
number
})
=
>
void) | 视频准备完成时触发该事件,通过duration可以获取视频时长,单位为秒(s)。 |
| onSeeking(callback:(event?:
{
duration:
number
})
=
>
void) | 操作进度条过程时上报时间信息,单位为s。 |
| onSeeked(callback:(event?:
{
duration:
number
})
=
>
void) | 操作进度条完成后,上报播放时间信息,单位为s。 |
| onUpdate(callback:(event?:
{
duration:
number
})
=
>
void) | 播放进度变化时触发该事件,单位为s,更新时间间隔为250ms。 |
## VideoController
...
...
@@ -109,10 +113,11 @@ setCurrentTime(value: number)
指定视频播放的进度位置。
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | --------- |
| value | number | 是 | - | 视频播放进度位置。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | --------------------------- |
| value | number | 是 | 视频播放进度位置,单位为s。 |
### requestFullscreen
...
...
@@ -120,10 +125,11 @@ requestFullscreen(value: boolean)
请求全屏播放。
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ----- | ------- |
| value | boolean | 是 | false | 是否全屏播放。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ------- |
| value | boolean | 是 | 是否全屏播放。
<br/>
默认值:false |
### exitFullscreen
...
...
@@ -137,19 +143,21 @@ setCurrentTime(value: number, seekMode: SeekMode)
指定视频播放的进度位置,并指定跳转模式。
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ---- | --------- |
| value | number | 是 | - | 视频播放进度位置。 |
| seekMode | SeekMode | 是 | - | 跳转模式。 |
-
SeekMode
<sup>
8+
</sup>
类型接口说明
| 名称 | 描述 |
| ---------------- | -------------- |
| PreviousKeyframe | 跳转到前一个最近的关键帧。 |
| NextKeyframe | 跳转到后一个最近的关键帧。 |
| ClosestKeyframe | 跳转到最近的关键帧。 |
| Accurate | 精准跳转,不论是否为关键帧。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | ---- | ------------------ |
| value | number | 是 | 视频播放进度位置。 |
| seekMode | SeekMode | 是 | 跳转模式。 |
## SeekMode<sup>8+</sup>枚举说明
| 名称 | 描述 |
| ---------------- | -------------- |
| PreviousKeyframe | 跳转到前一个最近的关键帧。 |
| NextKeyframe | 跳转到后一个最近的关键帧。 |
| ClosestKeyframe | 跳转到最近的关键帧。 |
| Accurate | 精准跳转,不论是否为关键帧。 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
浏览文件 @
5c6a8de2
...
...
@@ -7,38 +7,38 @@
> 从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
##
权限列表
##
属性
无
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| source | string
\|
[
Resource
](
../../ui/ts-types.md#resource类型
)
\|
[
linearGradient
](
ts-universal-attributes-gradient-color.md
)
| 边框图源或者渐变色设置。 |
| slice |
[
Length
](
../../ui/ts-types.md#length
)
\|
EdgeWidth | 设置图片边框切割宽度。
<br/>
默认值:0 |
| width |
[
Length
](
../../ui/ts-types.md#length
)
\|
EdgeWidth | 设置图片边框宽度。
<br/>
默认值:0 |
| outset |
[
Length
](
../../ui/ts-types.md#length
)
\|
EdgeWidth | 设置边框图片向外延伸距离。
<br/>
默认值:0 |
| RepeatMode | RepeatMode | 设置边框图片的重复方式。
<br/>
默认值:RepeatMode.Stretch |
| fill | boolean | 设置边框图片中心填充。
<br/>
默认值:false |
## EdgeWidth枚举说明
## 属性
引用该对象时,至少传入一个参数。
| 名称 | 参数类型 | 必填 |描述 |
| -------- | -------- |-------- |-------- |
| left |
[
Length
](
../../ui/ts-types.md#length
)
| 否 | 左侧距离参数。 |
| right |
[
Length
](
../../ui/ts-types.md#length
)
| 否 | 右侧距离参数。 |
| top |
[
Length
](
../../ui/ts-types.md#length
)
| 否 | 上侧距离参数。 |
| bottom |
[
Length
](
../../ui/ts-types.md#length
)
| 否 | 下侧距离参数。 |
## RepeatMode枚举说明
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| source | string
\|
[
Resource
](
../../ui/ts-types.md#resource类型
)
\|
[
linearGradient
](
ts-universal-attributes-gradient-color.md
)
| - | 边框图源或者渐变色设置。 |
| slice | Length
\|
EdgeWidth | 0 | 设置图片边框切割宽度。 |
| width | Length
\|
EdgeWidth | 0 | 设置图片边框宽度。 |
| outset | Length
\|
EdgeWidth | 0 | 设置边框图片向外延伸距离。 |
| RepeatMode | RepeatMode | RepeatMode.Stretch | 设置边框图片的重复方式。 |
| fill | boolean | false | 设置边框图片中心填充。 |
-
EdgeWidth对象说明
引用该对象时,至少传入一个参数。
| 名称 | 参数类型 | 必填 | 默认值 |描述 |
| -------- | -------- |-------- |-------- |-------- |
| left | Length | 否 | 0 | 左侧距离参数。 |
| right | Length | 否 | 0 | 右侧距离参数。 |
| top | Length | 否 | 0 | 上侧距离参数。 |
| bottom | Length | 否 | 0 | 下侧距离参数。 |
-
RepeatMode枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Repeat | 被切割图片重复铺平在图片边框上,超出的部分会被剪裁。|
| Stretch | 被切割图片以拉伸填充的方式铺满图片边框。 |
| Round | 被切割图片以整数次平铺在图片边框上,无法以整数次平铺时压缩被切割图片。 |
| Space | 被切割图片以整数次平铺在图片边框上,无法以整数次平铺时以空白填充。 |
| 名称 | 描述 |
| -------- | -------- |
| Repeat | 被切割图片重复铺平在图片边框上,超出的部分会被剪裁。|
| Stretch | 被切割图片以拉伸填充的方式铺满图片边框。 |
| Round | 被切割图片以整数次平铺在图片边框上,无法以整数次平铺时压缩被切割图片。 |
| Space | 被切割图片以整数次平铺在图片边框上,无法以整数次平铺时以空白填充。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
浏览文件 @
5c6a8de2
...
...
@@ -9,75 +9,60 @@
> 从API Version 9开始,父节点的border显示在子节点内容之上。
## 权限列表
无
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ------------ | ------------- | ----------------------- | ------------------------ |
| border | BorderOptions | - | 统一边框样式设置接口。 |
| borderStyle |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
|
BorderStyle.Solid | 设置元素的边框样式。 |
| borderWidth | Length | 0 | 设置元素的边框宽度。 |
| borderColor |
[
ResourceColor
](
../../ui/ts-types.md
)
| - | 设置元素的边框颜色。 |
| borderRadius | Length
\|
BorderRadiuses
<sup>
9+
</sup>
| 0 | 设置元素的边框圆角半径。 |
-
BorderOptions属性说明
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | ------------------------------------------------------------ | ----------------- | ---- | ---------- |
| width |
[
Length
](
../../ui/ts-types.md#长度类型
)
\|
EdgeWidth
<sup>
9+
</sup>
| 0 | 否 | 边框宽度。 |
| color |
[
ResourceColor
](
../../ui/ts-types.md
)
\|
EdgeColor
<sup>
9+
</sup>
| 'Black' | 否 | 边框颜色。 |
| radius |
[
Length
](
../../ui/ts-types.md#长度类型
)
\|
BorderRadiuses
<sup>
9+
</sup>
| 0 | 否 | 边框角度。 |
| style |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
\|
EdgeStyle
<sup>
9+
</sup>
| BorderStyle.Solid | 否 | 边框样式。 |
| 名称 | 参数类型 | 描述 |
| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| border | {
<br/>
width?:
[Length](../../ui/ts-types.md#长度类型)
\|
EdgeWidth
<sup>
9+
</sup>
,
<br/>
color?:
[ResourceColor](../../ui/ts-types.md)
\|
EdgeColor
<sup>
9+
</sup>
,
<br/>
radius?:
[Length](../../ui/ts-types.md#长度类型)
\|
BorderRadiuses
<sup>
9+
</sup>
,
<br/>
style?:
[BorderStyle](ts-appendix-enums.md#borderstyle)
\|
EdgeStyle
<sup>
9+
</sup><br/>
} | 统一边框样式设置接口。
<br/>
-
width:设置边框宽度。
<br/>
-
color:设置边框颜色。
<br/>
-
radius:设置边框圆角半径。
<br/>
-
style:设置边框样式。 |
| borderStyle |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
\|
EdgeStyle
<sup>
9+
</sup>
| 设置元素的边框样式。
<br/>
默认值:BorderStyle.Solid |
| borderWidth |
[
Length
](
../../ui/ts-types.md
)
\|
EdgeWidth
<sup>
9+
</sup>
| 设置元素的边框宽度。 |
| borderColor |
[
ResourceColor
](
../../ui/ts-types.md
)
\|
EdgeColor
<sup>
9+
</sup>
| 设置元素的边框颜色。 |
| borderRadius |
[
Length
](
../../ui/ts-types.md
)
\|
BorderRadiuses
<sup>
9+
</sup>
| 设置元素的边框圆角半径。 |
-
EdgeWidth
<sup>
9+
</sup>
对象说明
##
EdgeWidth<sup>9+</sup>对象说明
引入该对象时,至少传入一个参数。
引入该对象时,至少传入一个参数。
| 名称 | 参数类型 | 必填 | 默认值
| 描述 |
| ------ | -------- | ---- | --
---- | -------------- |
| left | length | 否 | 0
| 左侧边框宽度。 |
| right | length | 否 | 0
| 右侧边框宽度。 |
| top | length | 否 | 0
| 上侧边框宽度。 |
| bottom | length | 否 | 0
| 下侧边框宽度。 |
| 名称 | 参数类型 | 必填
| 描述 |
| ------ | ------------------------------------- |
---- | -------------- |
| left |
[
Length
](
../../ui/ts-types.md#length
)
| 否
| 左侧边框宽度。 |
| right |
[
Length
](
../../ui/ts-types.md#length
)
| 否
| 右侧边框宽度。 |
| top |
[
Length
](
../../ui/ts-types.md#length
)
| 否
| 上侧边框宽度。 |
| bottom |
[
Length
](
../../ui/ts-types.md#length
)
| 否
| 下侧边框宽度。 |
-
EdgeColor
<sup>
9+
</sup>
对象说明
##
EdgeColor<sup>9+</sup>对象说明
引入该对象时,至少传入一个参数。
引入该对象时,至少传入一个参数。
| 名称 | 参数类型 | 必填 | 默认值
| 描述 |
| ------ | ------------------------------------- | ---- | ---
---- | -------------- |
| left |
[
ResourceColor
](
../../ui/ts-types.md
)
| 否 | 'Black'
| 左侧边框颜色。 |
| right |
[
ResourceColor
](
../../ui/ts-types.md
)
| 否 | 'Black'
| 右侧边框颜色。 |
| top |
[
ResourceColor
](
../../ui/ts-types.md
)
| 否 | 'Black'
| 上侧边框颜色。 |
| bottom |
[
ResourceColor
](
../../ui/ts-types.md
)
| 否 | 'Black'
| 下侧边框颜色。 |
| 名称 | 参数类型 | 必填
| 描述 |
| ------ | ------------------------------------- |
---- | -------------- |
| left |
[
ResourceColor
](
../../ui/ts-types.md
)
| 否
| 左侧边框颜色。 |
| right |
[
ResourceColor
](
../../ui/ts-types.md
)
| 否
| 右侧边框颜色。 |
| top |
[
ResourceColor
](
../../ui/ts-types.md
)
| 否
| 上侧边框颜色。 |
| bottom |
[
ResourceColor
](
../../ui/ts-types.md
)
| 否
| 下侧边框颜色。 |
-
BorderRadiuses
<sup>
9+
</sup>
对象说明
##
BorderRadiuses<sup>9+</sup>对象说明
引用该对象时,至少传入一个参数。
引用该对象时,至少传入一个参数。
| 名称 | 参数类型 | 必填 | 默认值
| 描述 |
| ----------- | -------- | ---- | --
---- | ---------------- |
| topLeft | length | 否 | 0
| 左上角圆角半径。 |
| topRight | length | 否 | 0
| 右上角圆角半径。 |
| bottomLeft | length | 否 | 0
| 左下角圆角半径。 |
| bottomRight | length | 否 | 0
| 右下角圆角半径。 |
| 名称 | 参数类型 | 必填
| 描述 |
| ----------- | ------------------------------------- |
---- | ---------------- |
| topLeft |
[
Length
](
../../ui/ts-types.md#length
)
| 否
| 左上角圆角半径。 |
| topRight |
[
Length
](
../../ui/ts-types.md#length
)
| 否
| 右上角圆角半径。 |
| bottomLeft |
[
Length
](
../../ui/ts-types.md#length
)
| 否
| 左下角圆角半径。 |
| bottomRight |
[
Length
](
../../ui/ts-types.md#length
)
| 否
| 右下角圆角半径。 |
-
EdgeStyle
<sup>
9+
</sup>
对象说明
##
EdgeStyle<sup>9+</sup>对象说明
引入该对象时,至少传入一个参数。
引入该对象时,至少传入一个参数。
| 名称 | 参数类型 | 必填 | 默认值
| 描述 |
| ------ | ----------- | ---- | -------------
---- | -------------- |
| left |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
| 否 | BorderStyle.Solid
| 左侧边框样式。 |
| right |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
| 否 | BorderStyle.Solid
| 右侧边框样式。 |
| top |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
| 否 | BorderStyle.Solid
| 上侧边框样式。 |
| bottom |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
| 否 | BorderStyle.Solid
| 下侧边框样式。 |
| 名称 | 参数类型 | 必填
| 描述 |
| ------ | ----------------------------------------------- |
---- | -------------- |
| left |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
| 否
| 左侧边框样式。 |
| right |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
| 否
| 右侧边框样式。 |
| top |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
| 否
| 上侧边框样式。 |
| bottom |
[
BorderStyle
](
ts-appendix-enums.md#borderstyle
)
| 否
| 下侧边框样式。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md
浏览文件 @
5c6a8de2
...
...
@@ -3,23 +3,19 @@
自定义组件的走焦效果,可设置组件是否走焦和具体的走焦顺序,tab键或者方向键切换焦点。
> **说明:**
>
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 属性
|
**名称**
|
**参数类型**
|
**
默认值**
|
**
描述**
|
| -------------------- | -------- | -------
| -------
--------------------------------- |
| focusable | boolean |
false | 设置当前组件是否可以获焦。
|
| tabIndex
<sup>
9+
<sup>
| number |
0 | 自定义组件tab键走焦能力,走焦顺序为:tabIndex大于0的组件依次递增走焦, tabIndex等于0的组件按组件树先后顺序走焦。
<br
/>
- tabIndex >= 0:表示元素是可聚焦的,并且可以通过tab键走焦来访问到该元素,按照tabIndex的数值递增而先后获焦。如果多个元素拥有相同的tabIndex,按照元素在当前组件树中的先后顺序获焦
<br
/>
- tabIndex < 0(通常是tabIndex = -1):表示元素是可聚焦的,但是不能通过tab键走焦来访问到该元素。
|
| defaultFocus
<sup>
9+
<sup>
| boolean |
false | 设置当前组件是否为当前页面上的默认焦点,仅在初次创建的页面第一次进入时生效。
|
| groupDefaultFocus
<sup>
9+
<sup>
| boolean |
false | 设置当前组件是否为当前组件所在容器获焦时的默认焦点,仅在初次创建容器节点第一次获焦时生效。
<br
/>
**说明:**
必须与tabIndex联合使用,当某个容器设置了tabIndex,且容器内某子组件设置了groupDefaultFocus,当该容器首次获焦时,会自动将焦点转移至该组件上。
|
| focusOnTouch
<sup>
9+
<sup>
| boolean |
false | 设置当前组件是否支持点击获焦能力。
<br
/>
**说明:**
仅在组件可点击时才能正常获取焦点。 |
|
**名称**
|
**参数类型**
|
**描述**
|
| -------------------- | -------- | ---------------------------------------- |
| focusable | boolean |
设置当前组件是否可以获焦。
<br/>
默认值:false
|
| tabIndex
<sup>
9+
<sup>
| number |
自定义组件tab键走焦能力,走焦顺序为:tabIndex大于0的组件依次递增走焦, tabIndex等于0的组件按组件树先后顺序走焦。
<br
/>
- tabIndex >= 0:表示元素是可聚焦的,并且可以通过tab键走焦来访问到该元素,按照tabIndex的数值递增而先后获焦。如果多个元素拥有相同的tabIndex,按照元素在当前组件树中的先后顺序获焦
<br
/>
- tabIndex
<
0(
通常是tabIndex =
-1):表示元素是可聚焦的,但是不能通过tab键走焦来访问到该元素。<br/
>
默认值:0
|
| defaultFocus
<sup>
9+
<sup>
| boolean |
设置当前组件是否为当前页面上的默认焦点,仅在初次创建的页面第一次进入时生效。
<br/>
默认值:false
|
| groupDefaultFocus
<sup>
9+
<sup>
| boolean |
设置当前组件是否为当前组件所在容器获焦时的默认焦点,仅在初次创建容器节点第一次获焦时生效。
<br/>
默认值:false
<br/>
**说明:**
必须与tabIndex联合使用,当某个容器设置了tabIndex,且容器内某子组件设置了groupDefaultFocus,当该容器首次获焦时,会自动将焦点转移至该组件上。
<br/>
|
| focusOnTouch
<sup>
9+
<sup>
| boolean |
设置当前组件是否支持点击获焦能力。
<br/>
默认值:false
<br
/>
**说明:**
仅在组件可点击时才能正常获取焦点。 |
## focusControl<sup>9+</sup>
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
浏览文件 @
5c6a8de2
# 触摸热区设置
> **说明:**
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
适用于支持通用点击事件、通用触摸事件、通用手势处理的组件。
## 权限列表
无
> **说明:**
>
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数类型 |
默认值 |
描述 |
| -------- | -------- | -------- |
-------- |
| responseRegion | Array
<
Rectangle
>
\|
Rectangle |
{
<br/>
x:0,
<br/>
y:0,
<br/>
width:'100%',
<br/>
height:'100%'
<br/>
} | 设置一个或多个触摸热区,包括位置和大小。
<br/>
>
**说明:**
<br/>
>
-百分比是相对于组件本身来度量的。
<br/>
>
-x和y可以设置正负值百分比。当x设置为'100%'时表示热区往右偏移组件本身宽度大小,当x设置为'-100%'时表示热区往左偏移组件本身宽度大小。当y设置为'100%'时表示热区往下偏移组件本身高度大小,当y设置为'-100%'时表示热区往上偏移组件本身高度大小。
<br/>
>
-width和height只能设置正值百分比。width:'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp,那么'100%'表示热区宽度也为100vp。height:'100%'表示热区高度设置为该组件本身的高度。
|
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| responseRegion | Array
<
Rectangle
>
\|
Rectangle |
设置一个或多个触摸热区,包括位置和大小。
<br/>
默认值:
<br/>
{
<br/>
x:0,
<br/>
y:0,
<br/>
width:'100%',
<br/>
height:'100%'
<br/>
}
|
### Rectangle对象说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| --------
| -------- | -------- | -------- | -------- |
| x | Length | 否 | 0vp | 触摸点相对于组件本身左边沿的X坐标。 |
| y | Length | 否 | 0vp | 触摸点相对于组件本身左边沿的Y坐标。 |
| width | Length | 否 | 100% | 触摸热区范围的宽度。 |
| height | Length | 否 | 100% | 触摸热区范围的高度。 |
| 名称 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| x |
[
Length
](
../../ui/ts-types.md
)
| 否 | 触摸点相对于组件本身左边沿的X坐标。
<br/>
默认值:0vp |
| y |
[
Length
](
../../ui/ts-types.md
)
| 否 | 触摸点相对于组件本身左边沿的Y坐标。
<br/>
默认值:0vp |
| width |
[
Length
](
../../ui/ts-types.md
)
| 否 | 触摸热区范围的宽度。
<br/>
默认值:100% |
| height |
[
Length
](
../../ui/ts-types.md
)
| 否 | 触摸热区范围的高度。
<br/>
默认值:100% |
> **说明:**
> 当x和y都设置为正值时,表示组件的触摸热区的范围整体往组件本身右下角偏移,偏移的大小可通过数值来设置。
>
> x和y可以设置正负值百分比。当x设置为'100%'时表示热区往右偏移组件本身宽度大小,当x设置为'-100%'时表示热区往左偏移组件本身宽度大小。当y设置为'100%'时表示热区往下偏移组件本身高度大小,当y设置为'-100%'时表示热区往上偏移组件本身高度大小。
>
> width和height只能设置正值百分比。width:'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp,那么'100%'表示热区宽度也为100vp。height:'100%'表示热区高度设置为该组件本身的高度。
>
> 百分比是相对于组件本身来度量的。
## 示例
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录