Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
75be4a87
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看板
体验新版 GitCode,发现更多精彩内容 >>
提交
75be4a87
编写于
8月 29, 2022
作者:
K
kangchongtao
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
主干文档整改
Signed-off-by:
N
kangchongtao
<
kangchongtao@huawei.com
>
上级
bed842d1
变更
44
显示空白变更内容
内联
并排
Showing
44 changed file
with
248 addition
and
184 deletion
+248
-184
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md
...tion-dev/reference/arkui-ts/ts-basic-components-button.md
+2
-2
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
...v/reference/arkui-ts/ts-basic-components-checkboxgroup.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md
...n-dev/reference/arkui-ts/ts-basic-components-datapanel.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
...-dev/reference/arkui-ts/ts-basic-components-datepicker.md
+2
-2
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md
...ion-dev/reference/arkui-ts/ts-basic-components-divider.md
+2
-2
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
...ation-dev/reference/arkui-ts/ts-basic-components-gauge.md
+10
-2
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
...ation-dev/reference/arkui-ts/ts-basic-components-image.md
+6
-2
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
...v/reference/arkui-ts/ts-basic-components-imageanimator.md
+5
-5
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md
...ion-dev/reference/arkui-ts/ts-basic-components-marquee.md
+3
-3
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
...-dev/reference/arkui-ts/ts-basic-components-navigation.md
+3
-3
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
...on-dev/reference/arkui-ts/ts-basic-components-progress.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md
...ation-dev/reference/arkui-ts/ts-basic-components-radio.md
+7
-7
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md
...on-dev/reference/arkui-ts/ts-basic-components-richtext.md
+3
-3
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
...n-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md
...tion-dev/reference/arkui-ts/ts-basic-components-select.md
+2
-2
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
...tion-dev/reference/arkui-ts/ts-basic-components-slider.md
+8
-6
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md
...cation-dev/reference/arkui-ts/ts-basic-components-span.md
+5
-4
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
...ion-dev/reference/arkui-ts/ts-basic-components-stepper.md
+2
-0
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md
...cation-dev/reference/arkui-ts/ts-basic-components-text.md
+8
-5
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
...on-dev/reference/arkui-ts/ts-basic-components-textarea.md
+3
-3
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md
...n-dev/reference/arkui-ts/ts-basic-components-textclock.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
...n-dev/reference/arkui-ts/ts-basic-components-textinput.md
+16
-16
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
...-dev/reference/arkui-ts/ts-basic-components-textpicker.md
+3
-3
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
...n-dev/reference/arkui-ts/ts-basic-components-texttimer.md
+2
-2
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md
...tion-dev/reference/arkui-ts/ts-basic-components-toggle.md
+6
-6
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
...ication-dev/reference/arkui-ts/ts-basic-components-web.md
+3
-2
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
...-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
...n-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
+19
-18
zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md
.../application-dev/reference/arkui-ts/ts-container-badge.md
+9
-7
zh-cn/application-dev/reference/arkui-ts/ts-container-column.md
...application-dev/reference/arkui-ts/ts-container-column.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md
...n/application-dev/reference/arkui-ts/ts-container-flex.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
...n/application-dev/reference/arkui-ts/ts-container-grid.md
+28
-12
zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md
...plication-dev/reference/arkui-ts/ts-container-griditem.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
...n/application-dev/reference/arkui-ts/ts-container-list.md
+24
-5
zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
...plication-dev/reference/arkui-ts/ts-container-listitem.md
+13
-4
zh-cn/application-dev/reference/arkui-ts/ts-container-row.md
zh-cn/application-dev/reference/arkui-ts/ts-container-row.md
+2
-2
zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
...application-dev/reference/arkui-ts/ts-container-scroll.md
+18
-15
zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
...application-dev/reference/arkui-ts/ts-container-swiper.md
+5
-5
zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
...ication-dev/reference/arkui-ts/ts-container-tabcontent.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
...n/application-dev/reference/arkui-ts/ts-container-tabs.md
+5
-5
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md
...tion-dev/reference/arkui-ts/ts-drawing-components-line.md
+10
-4
zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
...on-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
...on-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
...ation-dev/reference/arkui-ts/ts-universal-events-click.md
+2
-15
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md
浏览文件 @
75be4a87
...
...
@@ -24,7 +24,7 @@
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------- | ---------- | ---- | ------- | --------------------------------- |
| type | ButtonType | 否 | Capsule | 描述按钮风格。 |
| type | ButtonType | 否 |
ButtonType.
Capsule | 描述按钮风格。 |
| stateEffect | boolean | 否 | true | 按钮按下时是否开启切换效果,当状态置为false时,点击效果关闭。 |
...
...
@@ -44,7 +44,7 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------- | ---------- | ------- | --------------------------------- |
| type | ButtonType | Capsule | 设置Button样式。 |
| type | ButtonType |
ButtonType.
Capsule | 设置Button样式。 |
| stateEffect | boolean | true | 状态切换时是否开启切换效果,当状态置为false时,点击效果关闭。 |
-
ButtonType枚举说明
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
浏览文件 @
75be4a87
...
...
@@ -30,7 +30,7 @@ CheckboxGroup( group?: string )
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| selectAll | boolean | false | 设置是否全选。 |
| selectedColor |
Color
| - | 设置被选中或部分选中状态的颜色。 |
| selectedColor |
[
ResourceColor
](
../../ui/ts-types.md
)
| - | 设置被选中或部分选中状态的颜色。 |
## 事件
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md
浏览文件 @
75be4a87
...
...
@@ -19,7 +19,7 @@
## 接口
DataPanel(
value
:{values: number[], max?: number, type?: DataPanelType})
DataPanel(
options
:{values: number[], max?: number, type?: DataPanelType})
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
浏览文件 @
75be4a87
...
...
@@ -19,11 +19,11 @@
## 接口
DatePicker(options?:
DatePickerOptions
)
DatePicker(options?:
{start?: Date, end?: Date, selected?: Date}
)
根据指定范围的Date创建可以选择日期的滑动选择器。
-
options参数
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| start | Date | 否 | Date('1970-1-1') | 指定选择器的起始日期。 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md
浏览文件 @
75be4a87
...
...
@@ -28,8 +28,8 @@ Divider()
| -------- | -------- | -------- | -------- |
| vertical | boolean | false | 使用水平分割线还是垂直分割线。false:水平分割线;true:垂直分割线。 |
| color |
[
ResourceColor
](
../../ui/ts-types.md
)
| - | 分割线颜色。 |
| strokeWidth |
Length
| 1 | 分割线宽度。 |
| lineCap |
[
LineCapStyle
](
ts-appendix-enums.md#linecapstyle
枚举说明
)
| LineCapStyle.Butt | 分割线的端点样式。 |
| strokeWidth |
[
Length
](
../../ui/ts-types.md
)
| 1 | 分割线宽度。 |
| lineCap |
[
LineCapStyle
](
ts-appendix-enums.md#linecapstyle
)
| LineCapStyle.Butt | 分割线的端点样式。 |
## 事件
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
浏览文件 @
75be4a87
...
...
@@ -20,7 +20,7 @@
## 接口
Gauge(
value
:{value: number, min?: number, max?: number})
Gauge(
options
:{value: number, min?: number, max?: number})
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
...
...
@@ -37,9 +37,17 @@ Gauge(value:{value: number, min?: number, max?: number})
| value | number | 0 | 设置当前数据图表的值。 |
| startAngle | number | -150 | 设置起始角度位置,时钟0点为0度,顺时针方向为正角度。 |
| endAngle | number | 150 | 设置终止角度位置,时钟0点为0度,顺时针方向为正角度。 |
| colors | Array
<
any
>
| - | 设置图表的颜色,支持纯色和分段渐变色设置。 |
| colors | Array
<
ColorStop
>
| - | 设置图表的颜色,支持分段颜色设置。 |
| strokeWidth | Length | - | 设置环形图表的环形厚度。 |
## ColorStop
颜色断点类型,用于描述渐进色颜色断点。
| 名称 | 类型定义 | 描述 |
| --------- | -------------------- | ------------------------------------------------------------ |
| ColorStop |
[
ResourceColor
](
../../ui/ts-types.md#resourcecolor8
)
,
number] | 描述渐进色颜色断点类型,第一个参数为颜色值,第二个参数为0~1之间的比例值。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @
75be4a87
...
...
@@ -50,9 +50,13 @@ Image(src: string | PixelMap | Resource)
| interpolation |
[
ImageInterpolation
](
#imageinterpolation
)
| ImageInterpolation.None | 设置图片的插值效果,即减轻低清晰度图片在放大显示的时候出现的锯齿问题,仅针对图片放大插值。
<br/>
>
**说明:**
<br/>
>
-
svg类型图源不支持该属性。
<br/>
>
-
PixelMap资源不支持该属性。 |
| renderMode |
[
ImageRenderMode
](
#imagerendermode
)
| ImageRenderMode.Original | 设置图片渲染的模式。
<br/>
>
**说明:**
<br/>
>
-
svg类型图源不支持该属性。 |
| sourceSize | {
<br/>
width:
number,
<br/>
height:
number
<br/>
} | - | 设置图片裁剪尺寸,将原始图片解码成pixelMap,指定尺寸的图片,单位为px。
<br/>
>
**说明:**
<br/>
>
PixelMap资源不支持该属性。 |
| matchTextDirection | boolean | false | 设置图片是否跟随系统语言方向,在RTL语言环境下显示镜像翻转显示效果。 |
| fitOriginalSize | boolean | true | 图片组件尺寸未设置时,其显示尺寸是否跟随图源尺寸。 |
| fillColor |
[
ResourceColor
](
../../ui/ts-types.md#resourcecolor8
)
| - | 仅对svg图源生效,设置后会替换svg图片的fill颜色。 |
| autoResize | boolean | true | 是否需要在图片解码过程中对图源做resize操作,该操作会根据显示区域的尺寸决定用于绘制的图源尺寸,有利于减少内存占用。 |
| syncLoad
<sup>
8+
</sup>
| boolean | false | 设置是否同步加载图片,默认是异步加载。同步加载时阻塞UI线程,不会显示占位图。 |
| copyOption
<sup>
9+
</sup>
|
[
CopyOptions
](
ts-appendix-enums.md#copyoptions9
)
| CopyOptions.None | 设置图片是否可复制(SVG图片不支持复制)。 |
| colorFilter
<sup>
9+
</sup>
|
[
ColorFilter
](
../../ui/ts-types.md
)
| - | 给图像设置颜色滤镜效果。 |
| colorFilter
<sup>
9+
</sup>
|
[
ColorFilter
](
../../ui/ts-types.md
#colorfilter9
)
| - | 给图像设置颜色滤镜效果。 |
### ImageInterpolation
...
...
@@ -78,7 +82,7 @@ Image(src: string | PixelMap | Resource)
| ---------------------------------------- | ---------------------------------------- |
| onComplete(callback:
(event?:
{
width:
number,
height:
number,
componentWidth:
number,
<br>
componentHeight:
number,
loadingStatus:
number
})
=
>
void) | 图片成功加载时触发该回调,返回成功加载的图片尺寸。
<br>
- width:图片的宽,单位为像素。
<br/>
- height:图片的高,单位为像素。
<br/>
- componentWidth:组件的宽,单位为像素。
<br/>
- componentHeight:组件的高,单位为像素。
<br/>
- loadingStatus:图片加载成功的状态。
<br/>
|
| onError(callback:
(event?:
{
componentWidth:
number,
componentHeight:
number
})
=
>
void) | 图片加载出现异常时触发该回调。
<br>
- componentWidth:组件的宽,单位为像素。
<br/>
- componentHeight:组件的高,单位为像素。
<br/>
|
| onFinish(
callback
:
()
=
>
void) | 当加载的源文件为带动效的svg图片时,当svg动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。 |
| onFinish(
event
:
()
=
>
void) | 当加载的源文件为带动效的svg图片时,当svg动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
浏览文件 @
75be4a87
...
...
@@ -50,11 +50,11 @@ ImageAnimator()
| 名称 | 功能描述 |
| -------- | -------- |
| onStart(
)
=
>
void
| 状态回调,动画开始播放时触发。 |
| onPause(
)
=
>
void
| 状态回调,动画暂停播放时触发。 |
| onRepeat(
)
=
>
void
| 状态回调,动画重新播放时触发。 |
| onCancel(
)
=
>
void
| 状态回调,动画取消播放时触发。 |
| onFinish(
)
=
>
void
| 状态回调,动画播放完成时触发。 |
| onStart(
event:
()
=
>
void)
| 状态回调,动画开始播放时触发。 |
| onPause(
event:
()
=
>
void)
| 状态回调,动画暂停播放时触发。 |
| onRepeat(
event:
()
=
>
void)
| 状态回调,动画重新播放时触发。 |
| onCancel(
event:
()
=
>
void)
| 状态回调,动画取消播放时触发。 |
| onFinish(
event:
()
=
>
void)
| 状态回调,动画播放完成时触发。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md
浏览文件 @
75be4a87
...
...
@@ -36,9 +36,9 @@ Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boole
| 名称 | 功能描述 |
| -------- | -------- |
| onStart(
callback
:
()
=
>
void) | 开始滚动时触发回调。 |
| onBounce(
callback
:
()
=
>
void) | 滚动到底时触发回调。 |
| onFinish(
callback
:
()
=
>
void) | 滚动完成时触发回调。 |
| onStart(
event
:
()
=
>
void) | 开始滚动时触发回调。 |
| onBounce(
event
:
()
=
>
void) | 滚动到底时触发回调。 |
| onFinish(
event
:
()
=
>
void) | 滚动完成时触发回调。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
浏览文件 @
75be4a87
...
...
@@ -30,9 +30,9 @@ Navigation()
| -------------- | ---------------------------------------- | ------------------------ | ---------------------------------------- |
| title | string
\|
[
CustomBuilder
](
../../ui/ts-types.md
)
| - | 页面标题。 |
| subTitle | string | - | 页面副标题。 |
| menus | Array<NavigationMenuItem
>
\|
[
CustomBuilder
](
../../ui/ts-types.md
)
| - | 页面右上角菜单。
|
| menus | Array
<NavigationMenuItem
&
gt
;&
nbsp
;\|&
nbsp
;[
CustomBuilder
](../../
ui
/
ts-types.md
)
<
sup
>
8+
</sup>
| - | 页面右上角菜单。
|
| titleMode | NavigationTitleMode | NavigationTitleMode.Free | 页面标题栏显示模式。 |
| toolBar | {
<br/>
items:
[
<br/>Object<br/>] }<br/>\| [CustomBuilder
](
../../ui/ts-types.md
)
| - | 设置工具栏内容。
<br/>
items:
工具栏所有项。
|
| toolBar | {
<br/>
items:
Array
<
Object
>
}
<br/>
\|
[
CustomBuilder
](
../../ui/ts-types.md#custombuilder8
)
<sup>
8+
</sup>
| - | 设置工具栏内容。
<br/>
items:
工具栏所有项。
|
| hideToolBar | boolean | false | 设置隐藏/显示工具栏:
<br/>
true:
隐藏工具栏。
<br/>
false:
显示工具栏。 |
| hideTitleBar | boolean | false | 隐藏标题栏。 |
| hideBackButton | boolean | false | 隐藏返回键。 |
...
...
@@ -44,7 +44,7 @@ Navigation()
| icon | string | 否 | - | 菜单栏单个选项的图标资源路径。 |
| action | ()
=
>
void | 否 | - | 当前选项被选中的事件回调。 |
-
Object类型
接口
说明
-
Object类型说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ----------------------- | ---- | ---- | --------------- |
| value | string | 是 | - | 工具栏单个选项的显示文本。 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
浏览文件 @
75be4a87
...
...
@@ -19,7 +19,7 @@
## 接口说明
Progress(
value
: {value: number, total?: number, type?: ProgressType})
Progress(
options
: {value: number, total?: number, type?: ProgressType})
创建进度组件,用于显示内容加载或操作处理进度。
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md
浏览文件 @
75be4a87
...
...
@@ -39,7 +39,7 @@ Radio(options: {value: string, group: string})
| 名称 | 功能描述 |
| -------- | -------- |
| onChange(callback: (
value: boolean) => void) | 单选框选中状态改变时触发回调。
<br>
-value为true时,代表选中。
<br>
-value为false时,代表未选中。 |
| onChange(callback: (
isChecked: boolean) => void) | 单选框选中状态改变时触发回调。
<br>
-isChecked为true时,代表选中。
<br>
-isChecked为false时,代表未选中。 |
## 示例
...
...
@@ -56,8 +56,8 @@ struct RadioExample {
Radio
({
value
:
'
Radio1
'
,
group
:
'
radioGroup
'
}).
checked
(
true
)
.
height
(
50
)
.
width
(
50
)
.
onChange
((
value
:
boolean
)
=>
{
console
.
log
(
'
Radio1 status is
'
+
value
)
.
onChange
((
isChecked
:
boolean
)
=>
{
console
.
log
(
'
Radio1 status is
'
+
isChecked
)
})
}
Column
()
{
...
...
@@ -65,8 +65,8 @@ struct RadioExample {
Radio
({
value
:
'
Radio2
'
,
group
:
'
radioGroup
'
}).
checked
(
false
)
.
height
(
50
)
.
width
(
50
)
.
onChange
((
value
:
boolean
)
=>
{
console
.
log
(
'
Radio2 status is
'
+
value
)
.
onChange
((
isChecked
:
boolean
)
=>
{
console
.
log
(
'
Radio2 status is
'
+
isChecked
)
})
}
Column
()
{
...
...
@@ -74,8 +74,8 @@ struct RadioExample {
Radio
({
value
:
'
Radio3
'
,
group
:
'
radioGroup
'
}).
checked
(
false
)
.
height
(
50
)
.
width
(
50
)
.
onChange
((
value
:
boolean
)
=>
{
console
.
log
(
'
Radio3 status is
'
+
value
)
.
onChange
((
isChecked
:
boolean
)
=>
{
console
.
log
(
'
Radio3 status is
'
+
isChecked
)
})
}
}.
padding
({
top
:
30
})
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md
浏览文件 @
75be4a87
...
...
@@ -15,7 +15,7 @@
## 接口
RichText
\(
content:string
\
)
RichText
(content:string
)
-
参数
...
...
@@ -29,8 +29,8 @@ RichText\(content:string\)
| 名称 | 描述 |
| -------- | -------- |
| onStart(
) => void | 加载网页时触发。
|
| onComplete(
) => void
| 网页加载结束时触发。 |
| onStart(
callback: () => void) | 加载网页时触发。
|
| onComplete(
callback: () => void)
| 网页加载结束时触发。 |
## 支持标签
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
浏览文件 @
75be4a87
...
...
@@ -19,7 +19,7 @@
## 接口
ScrollBar(value:
ScrollBarOptions
)
ScrollBar(value:
{ scroller: Scroller, direction?: ScrollBarDirection, state?: BarState }
)
-
ScrollBarOptions的参数描述
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md
浏览文件 @
75be4a87
...
...
@@ -16,7 +16,7 @@
Select(options: Array
\<
SelectOption
\>
)
-
SelectOption参数
**SelectOption对象说明:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ----------------------------------- | ---- | ---- | ------- |
...
...
@@ -42,7 +42,7 @@ Select(options: Array\<SelectOption\>)
| 名称 | 功能描述 |
| ---------------------------------------- | -------------------------------------- |
| onSelect(callback: (index: number, value?:string) => void
)
| 下拉菜单选中某一项的回调。index:选中项的索引。value:选中项的值。 |
| onSelect(callback: (index: number, value?:string) => void
)
| 下拉菜单选中某一项的回调。index:选中项的索引。value:选中项的值。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
浏览文件 @
75be4a87
...
...
@@ -19,7 +19,7 @@
## 接口
Slider(
value:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis
})
Slider(
options:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean
})
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
...
...
@@ -29,7 +29,7 @@ Slider(value:{value?: number, min?: number, max?: number, step?: number, style?:
| max | number | 否 | 100 | 设置最大值。 |
| step | number | 否 | 1 | 设置Slider滑动跳动值,当设置相应的step时,Slider为间歇滑动。 |
| style | SliderStyle | 否 | SliderStyle.OutSet | 设置Slider的滑块样式。 |
| direction
<sup>
8+
</sup>
|
[
Axis
](
ts-appendix-enums.md#axis
枚举说明
)
| 否 | Axis.Horizontal | 设置滑动条滑动方向为水平或竖直方向。 |
| direction
<sup>
8+
</sup>
|
[
Axis
](
ts-appendix-enums.md#axis
)
| 否 | Axis.Horizontal | 设置滑动条滑动方向为水平或竖直方向。 |
| reverse
<sup>
8+
</sup>
| boolean | 否 | false | 设置滑动条取值范围是否反向。 |
-
SliderStyle枚举说明
...
...
@@ -45,11 +45,12 @@ Slider(value:{value?: number, min?: number, max?: number, step?: number, style?:
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| blockColor |
Color
| - | 设置滑块的颜色。 |
| trackColor |
Color
| - | 设置滑轨的背景颜色。 |
| selectedColor |
Color
| - | 设置滑轨的已滑动颜色。 |
| blockColor |
[
ResourceColor
](
../../ui/ts-types.md#resourcecolor8
)
| - | 设置滑块的颜色。 |
| trackColor |
[
ResourceColor
](
../../ui/ts-types.md#resourcecolor8
)
| - | 设置滑轨的背景颜色。 |
| selectedColor |
[
ResourceColor
](
../../ui/ts-types.md#resourcecolor8
)
| - | 设置滑轨的已滑动颜色。 |
| showSteps | boolean | false | 设置当前是否显示步长刻度值。 |
| showTips | boolean | false | 设置滑动时是否显示气泡提示百分比。 |
| trackThickness |
[
Length
](
../../ui/ts-types.md#length
)
| - | 设置滑轨的粗细。 |
## 事件
...
...
@@ -58,7 +59,7 @@ Slider(value:{value?: number, min?: number, max?: number, step?: number, style?:
| 名称 | 功能描述 |
| -------- | -------- |
| onChange(callback:
(value:
number,
mode:
SliderChangeMode)
=
>
void
)
| Slider滑动时触发事件回调。
<br/>
value:当前进度值。
<br/>
mode:拖动状态。 |
| onChange(callback:
(value:
number,
mode:
SliderChangeMode)
=
>
void
)
| Slider滑动时触发事件回调。
<br/>
value:当前进度值。
<br/>
mode:拖动状态。 |
-
SliderChangeMode枚举说明
| 名称 | 值 | 描述 |
...
...
@@ -66,6 +67,7 @@ Slider(value:{value?: number, min?: number, max?: number, step?: number, style?:
| Begin | 0 | 用户开始拖动滑块。 |
| Moving | 1 | 用户拖动滑块中。 |
| End | 2 | 用户结束拖动滑块。 |
| Click | 3 | 用户点击滑动条使滑块位置移动。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md
浏览文件 @
75be4a87
...
...
@@ -18,12 +18,12 @@
## 接口
Span(content:
string
)
Span(content:
ResourceStr
)
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| content |
string
| 是 | - | 文本内容。 |
| content |
[
ResourceStr
](
../../ui/ts-types.md#resourcestr8
)
| 是 | - | 文本内容。 |
## 属性
...
...
@@ -32,8 +32,9 @@ Span(content: string)
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| decoration | {
<br/>
type:
[TextDecorationType](ts-appendix-enums.md#textdecorationtype枚举说明),
<br/>
color?:
Color
<br/>
} | {
<br/>
type:
TextDecorationType.None
<br/>
color:Color.Black
<br/>
} | 设置文本装饰线样式及其颜色。 |
| textCase |
[
TextCase
](
ts-appendix-enums.md#textcase枚举说明
)
| Normal | 设置文本大小写。 |
| decoration | {
<br/>
type:
[TextDecorationType](ts-appendix-enums.md#textdecorationtype),
<br/>
color?:
[
ResourceColor
](
../../ui/ts-types.md#resourcecolor8
)
<br/>
} | {
<br/>
type:
TextDecorationType.None
<br/>
color:Color.Black
<br/>
} | 设置文本装饰线样式及其颜色。 |
| letterSpacing |
[
Length
](
../../ui/ts-types.md#length
)
| - | 设置文本字符间距。 |
| textCase |
[
TextCase
](
ts-appendix-enums.md#textcase
)
| Normal | 设置文本大小写。 |
## 事件
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
浏览文件 @
75be4a87
...
...
@@ -40,6 +40,8 @@ Stepper(value?: { index?: number })
| onFinish(callback:
()
=
>
void) | 步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调
。 |
| onSkip(callback:
()
=
>
void) | 当前显示的StepperItem状态为ItemState.Skip时,nextLabel被点击时触发该回调。 |
| onChange(callback:
(prevIndex?:
number,
index?:
number)
=
>
void) | 点击左边或者右边文本按钮进行步骤切换时触发该事件。
<br/>
-
prevIndex:切换前的步骤页索引值。
<br/>
-
index:切换后的步骤页(前一页或者下一页)索引值。 |
| onNext(callback:
(index?:
number,
pendingIndex?:
number)
=
>
void) | 点击切换下一步骤时触发该事件。
<br/>
-
index:当前步骤页索引值。
<br/>
-
pendingIndex:下一步骤页索引值。 |
| onPrevious(callback:
(index?:
number,
pendingIndex?:
number)
=
>
void) | 点击切换上一步骤时触发该事件。
<br/>
-
index:当前步骤页索引值。
<br/>
-
pendingIndex:上一步骤页索引值。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md
浏览文件 @
75be4a87
...
...
@@ -18,12 +18,12 @@
## 接口
Text(content?:
string
)
Text(content?:
ResourceStr
)
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| content |
string
| 否 | '' | 文本内容。包含子组件Span时不生效,显示Span内容,并且此时text组件的样式不生效。 |
| content |
[
ResourceStr
](
../../ui/ts-types.md#resourcestr8
)
| 否 | '' | 文本内容。包含子组件Span时不生效,显示Span内容,并且此时text组件的样式不生效。 |
## 属性
...
...
@@ -33,9 +33,12 @@ Text(content?: string)
| textAlign |
[
TextAlign
](
ts-appendix-enums.md#textalign
)
| TextAlign.Start | 设置多行文本的文本对齐方式。 |
| textOverflow | {overflow:
[
TextOverflow
](
ts-appendix-enums.md#textoverflow
)
} | {overflow:
TextOverflow.Clip} | 设置文本超长时的显示方式。
<br/>
**说明:**
<br/>
文本截断是按字截断。例如,英文以单词为最小单位进行截断,若需要以字母为单位进行截断,可在字母间添加零宽空格:
\u
200B。
<br
/>
需配合
`maxLines`
使用,单独设置不生效。 |
| maxLines | number | Infinity | 设置文本的最大行数。
<br
/>
**说明:**
<br
/>
默认情况下,文本是自动折行的,如果指定此参数,则文本最多不会超过指定的行。如果有多余的文本,可以通过
`textOverflow`
来指定截断方式。 |
| lineHeight | Length | - | 设置文本的文本行高,设置值不大于0时,不限制文本行高,自适应字体大小,Length为number类型时单位为fp。 |
| decoration | {
<br/>
type:
[TextDecorationType](ts-appendix-enums.md#textdecorationtype),
<br/>
color?:
Color
<br/>
} | {
<br/>
type:
TextDecorationType.None,
<br/>
color: Color.Black
<br/>
} | 设置文本装饰线样式及其颜色。 |
| baselineOffset | Length | - | 设置文本基线的偏移量。 |
| lineHeight | string
\|
number
\|
[
Resource
](
../../ui/ts-types.md
)
| - | 设置文本的文本行高,设置值不大于0时,不限制文本行高,自适应字体大小,Length为number类型时单位为fp。 |
| decoration | {
<br/>
type:
TextDecorationType,
<br/>
color?:
[
ResourceColor
](
../../ui/ts-types.md
)
<br/>
} | {
<br/>
type:
TextDecorationType.None,
<br/>
color:Color.Black
<br/>
} | 设置文本装饰线样式及其颜色。 |
| baselineOffset |
[
Length
](
../../ui/ts-types.md
)
| - | 设置文本基线的偏移量。 |
| letterSpacing |
[
Length
](
../../ui/ts-types.md
)
| - | 设置文本字符间距。 |
| minFontSize | number
\|
string
\|
[
Resource
](
../../ui/ts-types.md
)
| - | 设置文本最小显示字号。 |
| maxFontSize | number
\|
string
\|
[
Resource
](
../../ui/ts-types.md
)
| - | 设置文本最大显示字号。 |
| textCase |
[
TextCase
](
ts-appendix-enums.md#textcase
)
| TextCase.Normal | 设置文本大小写。 |
| copyOption
<sup>
9+
</sup>
|
[
CopyOptions
](
ts-appendix-enums.md#copyoptions9
)
| CopyOptions.None | 组件支持设置文本是否可复制粘贴。 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
浏览文件 @
75be4a87
...
...
@@ -18,13 +18,13 @@
## 接口
TextArea(value?:{placeholder?:
string| Resource, text?: string| Resource
, controller?: TextAreaController})
TextArea(value?:{placeholder?:
ResourceStr, text?: ResourceStr
, controller?: TextAreaController})
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | ---- | -------------- |
| placeholder
| string
\|
[
Resource
](
../../ui/ts-types.md#resource类型
)
| 否 | - | 无输入时的提示文本。 |
| text |
string
\|
[
Resource
](
../../ui/ts-types.md#resource类型
)
| 否 | - | 设置提示文本的当前值
。 |
| placeholder
|
[
ResourceStr
](
../../ui/ts-types.md
)
| 否 | - | 无输入时的提示文本。 |
| text |
[
ResourceStr
](
../../ui/ts-types.md
)
| 否 | - | 设置输入框当前的文本内容
。 |
| controller
<sup>
8+
</sup>
|
[
TextAreaController
](
#textareacontroller8
)
| 否 | - | 设置TextArea控制器。 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md
浏览文件 @
75be4a87
...
...
@@ -22,7 +22,7 @@ TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ------------------ | ------------------------------------------------------------ |
| timeZoneOffset | number | 否 | 当前系统的时区偏移量 | 设置时区偏移量。
<br>
取值范围为[-14, 12],表示东十二区到西十二区,其中负值表示东时区,正值表示西时区,比如东八区为-8。
<br>
对横跨国际日界线的国家或地区,用-13(UTC+13)和-14(UTC+14)来保证整个国家或者区域处在相同的时间,当设置的值不在取值范围内时,将使用当前系统的时区偏移量。 |
| cont
orller |
[
TextClockContor
ller
](
#textclockcontroller
)
| 否 | null | 绑定一个控制器,用来控制文本时钟的状态。|
| cont
roller |
[
TextClockContro
ller
](
#textclockcontroller
)
| 否 | null | 绑定一个控制器,用来控制文本时钟的状态。|
## 属性
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
浏览文件 @
75be4a87
...
...
@@ -18,13 +18,13 @@
## 接口
TextInput(value?:{placeholder?:
string | Resource, text?: string | Resource
, controller?: TextInputController})
TextInput(value?:{placeholder?:
ResourceStr, text?: ResourceStr
, controller?: TextInputController})
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | ---- | --------------- |
| placeholder
| string
\|
[
Resource
](
../../ui/ts-types.md#resource类型
)
| 否 | - | 无输入时的提示文本。 |
| text
| string
\|
[
Resource
](
../../ui/ts-types.md#resource类型
)
| 否 | - | 设置提示文本的当前值。
|
| placeholder
|
[
ResourceStr
](
../../ui/ts-types.md
)
| 否 | - | 无输入时的提示文本。 |
| text
|
[
ResourceStr
](
../../ui/ts-types.md
)
| 否 | - | 设置输入框当前的文本内容。
|
| controller
<sup>
8+
</sup>
|
[
TextInputController
](
#textinputcontroller8
)
| 否 | - | 设置TextInput控制器。 |
...
...
@@ -35,12 +35,12 @@ TextInput(value?:{placeholder?: string | Resource, text?: string | Resource, con
| 名称 | 参数类型 | 默认值 | 描述 |
| ------------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- |
| type | InputType | InputType.Normal | 设置输入框类型。 |
| placeholderColor |
Color | - | 设置placeholder颜色。
|
| placeholderColor |
[
ResourceColor
](
../../ui/ts-types.md
)
| - | 设置placeholder颜色。
|
| placeholderFont | {
<br/>
size?:
Length,
<br/>
weight?:
number\|[FontWeight](ts-universal-attributes-text-style.md),
<br/>
family?:
string,
<br/>
style?:
[
FontStyle
](
ts-universal-attributes-text-style.md
)
<br/>
} | - | 设置placeholder文本样式:
<br/>
-
size:
设置文本尺寸,Length为number类型时,使用fp单位。
<br/>
-
weight:
设置文本的字体粗细,number类型取值[100,
900],取值间隔为100,默认为400,取值越大,字体越粗。
<br/>
-
family:
设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial,
sans-serif'。
<br/>
-
style:
设置文本的字体样式。 |
| enterKeyType | EnterKeyType | EnterKeyType.Done | 设置输入法回车键类型。 |
| caretColor |
Color
| - | 设置输入框光标颜色。 |
| caretColor |
[
ResourceColor
](
../../ui/ts-types.md
)
| - | 设置输入框光标颜色。 |
| maxLength | number | - | 设置文本的最大输入字符数。 |
| inputFilter
<sup>
8+
</sup>
| {
<br/>
value:
[ResourceStr](../../ui/ts-types.md)
<sup>
8+
</sup>
,
<br/>
error?:
(value:
string)
<br/>
} | -
| 正则表达式,满足表达式的输入允许显示,不满足正则表达式的输入被忽略。仅支持单个字符匹配,不支持字符串匹配。例如:^(?=.
\*\d
)(?=.
\*
[a-z])(?=.
\*
[A-Z]).{8,10}$,8到10位的强密码不支持过滤。
<br/>
-
value:设置正则表达式。
<br/>
-
error:正则匹配失败时,返回被忽略的内容。 |
| inputFilter
<sup>
8+
</sup>
| {
<br/>
value:
[ResourceStr](../../ui/ts-types.md)
<sup>
8+
</sup>
,
<br/>
error?:
(value:
string)
=
>
void
<br/>
} | -
| 正则表达式,满足表达式的输入允许显示,不满足正则表达式的输入被忽略。仅支持单个字符匹配,不支持字符串匹配。例如:^(?=.
\*\d
)(?=.
\*
[a-z])(?=.
\*
[A-Z]).{8,10}$,8到10位的强密码不支持过滤。
<br/>
-
value:设置正则表达式。
<br/>
-
error:正则匹配失败时,返回被忽略的内容。 |
| copyOption
<sup>
9+
</sup>
|
[
CopyOptions
](
ts-basic-components-text.md
)
| CopyOptions.CrossDevice | 设置文本是否可复制。 |
| showPasswordIcon
<sup>
9+
</sup>
| boolean | true | 密码输入模式时,密码框末尾的图标是否显示。 |
| style
<sup>
9+
</sup>
| TextInputStyle | Default | TextInput风格。 |
...
...
@@ -48,19 +48,19 @@ TextInput(value?:{placeholder?: string | Resource, text?: string | Resource, con
-
EnterKeyType枚举说明
| 名称 | 描述 |
| ------------------- | --------- |
|
EnterKeyType.
Go | 显示Go文本。 |
|
EnterKeyType.
Search | 显示为搜索样式。 |
|
EnterKeyType.
Send | 显示为发送样式。 |
|
EnterKeyType.
Next | 显示为下一个样式。 |
|
EnterKeyType.
Done | 标准样式。 |
| Go | 显示Go文本。 |
| Search | 显示为搜索样式。 |
| Send | 显示为发送样式。 |
| Next | 显示为下一个样式。 |
| Done | 标准样式。 |
-
InputType枚举说明
| 名称 | 描述 |
| ------------------ | ------------- |
|
InputType.
Normal | 基本输入模式。 |
|
InputType.
Password | 密码输入模式。 |
|
InputType.
Email | e-mail地址输入模式。 |
|
InputType.
Number | 纯数字输入模式。 |
| Normal | 基本输入模式。 |
| Password | 密码输入模式。 |
| Email | e-mail地址输入模式。 |
| Number | 纯数字输入模式。 |
-
TextInputStyle枚举说明
| 名称 | 描述 |
...
...
@@ -72,7 +72,7 @@ TextInput(value?:{placeholder?: string | Resource, text?: string | Resource, con
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onChange(
value:
string)
=
>
void | 输入发生变化时,触发回调。
|
| onChange(
callback:
(value:
string)
=
>
void) | 输入发生变化时,触发回调。
|
| onSubmit(callback:
(enterKey:
EnterKeyType)
=
>
void) | 回车键或者软键盘回车键触发该回调,参数为当前软键盘回车键类型。 |
| onEditChanged(callback:
(isEditing:
boolean)
=
>
void)
<sup>
(deprecated)
</sup>
| 输入状态变化时,触发回调。 |
| onEditChange(callback:
(isEditing:
boolean)
=
>
void)
<sup>
8+
</sup>
| 输入状态变化时,触发回调。 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
浏览文件 @
75be4a87
...
...
@@ -18,7 +18,7 @@
## 接口
TextPicker(
value: {range: string[] | Resource, value?: string, selected?: number
})
TextPicker(
options: {range: string[]|Resource, selected?: number, value?: string
})
根据range指定的选择范围创建文本选择器。
...
...
@@ -26,8 +26,8 @@ TextPicker(value: {range: string[] | Resource, value?: string, selected?: number
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| range | string
[
] \| [Resource
](
../../ui/ts-types.md#resource类型
)
| 是 | - | 选择器的数据选择范围。 |
|
value | string | 否 | - | 选中项文本值。当设置了selected参数时,该值不生效。如果该值不在range范围内,则默认取range第一个元素。|
|
selected | number | 否 | 第一个元素 | 选中项在数组中的index值。 |
|
selected | number | 否 | 0 | 选中项在数组中的index值。 |
|
value | string | 否 | 第一个元素值 | 选中项的值,优先级低于selected。 |
## 属性
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
浏览文件 @
75be4a87
...
...
@@ -25,7 +25,7 @@ TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTim
| -------- | -------- | -------- | -------- | -------- |
| isCountDown | boolean | 否 | false | 是否倒计时。 |
| count | number | 否 | 60000 | 倒计时时间(isCountDown为true时生效),单位为毫秒。
<br/>
-
count
<
=0时,使用默认值为倒计时初始值。
<br/>
-
count
>
0时,count值为倒计时初始值。 |
| controller |
[
TextTimerController
](
#texttimercontroller
)
| 否 |
null
| TextTimer控制器。 |
| controller |
[
TextTimerController
](
#texttimercontroller
)
| 否 |
-
| TextTimer控制器。 |
## 属性
...
...
@@ -38,7 +38,7 @@ TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTim
| 名称 | 功能描述 |
| -------- | -------- |
| onTimer(
callback
:
(utc:
number,
elapsedTime:
number)
=
>
void) | 时间文本发生变化时触发。
<br/>
utc:当前显示的时间,单位为毫秒。
<br/>
elapsedTime:计时器经过的时间,单位为毫秒。 |
| onTimer(
event
:
(utc:
number,
elapsedTime:
number)
=
>
void) | 时间文本发生变化时触发。
<br/>
utc:当前显示的时间,单位为毫秒。
<br/>
elapsedTime:计时器经过的时间,单位为毫秒。 |
## TextTimerController
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md
浏览文件 @
75be4a87
...
...
@@ -13,7 +13,7 @@
## 子组件
无
仅当ToggleType为Button时可包含子组件。
## 接口
...
...
@@ -30,17 +30,17 @@ Toggle(options: { type: ToggleType, isOn?: boolean })
-
ToggleType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Checkbox | 提供
勾选框样式,子组件设置文本不生效,如需文本设置,可将Text和当前组件放入布局组件中
。
<br>
>
**说明:**
<br/>
>
[通用属性padding](ts-universal-attributes-size.md)的默认值为:
<br>
{
<br>
top: 14 vp,
<br>
right: 6 vp,
<br>
bottom: 14 vp,
<br>
left: 6 vp
<br>
} |
| Button
| 提供状态按钮样式,如果有文本设置,则相应的文本内容会显示在按钮内部。
|
| Switch
| 提供开关样式,子组件设置文本不生效,如需文本设置,可将Text和当前组件放入布局组件中
。
<br>
>
**说明:**
<br/>
>
[通用属性padding](ts-universal-attributes-size.md)默认值为:
<br>
{
<br/>
top: 12 vp,
<br/>
right: 12 vp,
<br/>
bottom: 12 vp,
<br/>
left: 12 vp
<br/>
} |
| Checkbox | 提供
单选框样式
。
<br>
>
**说明:**
<br/>
>
[通用属性padding](ts-universal-attributes-size.md)的默认值为:
<br>
{
<br>
top: 14 vp,
<br>
right: 6 vp,
<br>
bottom: 14 vp,
<br>
left: 6 vp
<br>
} |
| Button
| 提供状态按钮样式,如果子组件有文本设置,则相应的文本内容会显示在按钮内部。
|
| Switch
| 提供开关样式
。
<br>
>
**说明:**
<br/>
>
[通用属性padding](ts-universal-attributes-size.md)默认值为:
<br>
{
<br/>
top: 12 vp,
<br/>
right: 12 vp,
<br/>
bottom: 12 vp,
<br/>
left: 12 vp
<br/>
} |
## 属性
| 名称 | 参数 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- |
| selectedColor |
Color
| - | 设置组件打开状态的背景颜色。 |
| switchPointColor |
Color
| - | 设置Switch类型的圆形滑块颜色。
<br/>
>
**说明:**
<br/>
>
仅对type为ToggleType.Switch生效。 |
| selectedColor |
[
ResourceColor
](
../../ui/ts-types.md
)
| - | 设置组件打开状态的背景颜色。 |
| switchPointColor |
[
ResourceColor
](
../../ui/ts-types.md
)
| - | 设置Switch类型的圆形滑块颜色。
<br/>
>
**说明:**
<br/>
>
仅对type为ToggleType.Switch生效。 |
## 事件
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @
75be4a87
...
...
@@ -16,12 +16,13 @@
## 接口
Web(options: { src:
string, controller?
: WebController })
Web(options: { src:
ResourceStr, controller
: WebController })
表1 options参数说明
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | ------------------------------- | ---- | ---- | ------- |
| src |
string
| 是 | - | 网页资源地址。 |
| src |
[
ResourceStr
](
../../ui/ts-types.md
)
| 是 | - | 网页资源地址。 |
| controller |
[
WebController
](
#webcontroller
)
| 否 | - | 控制器。 |
**示例:**
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
浏览文件 @
75be4a87
...
...
@@ -16,7 +16,7 @@
## 接口
XComponent
\(
value: {id: string, type: string, libraryname?: string, controller?: XComponentController}
\
)
XComponent
(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}
)
**参数:**
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
浏览文件 @
75be4a87
...
...
@@ -17,29 +17,30 @@
## 接口
AlphabetIndexer(value: {arrayValue
: Array
<
string
>
, selected
: number})
AlphabetIndexer(value: {arrayValue
: Array
<
string
>
, selected
: number})
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| arrayValue | Array
<
string
>
| 是 | - | 字母索引字符串数组。 |
| selected
| number | 是 | - | 选中项编号。
|
| selected
| number | 是 | - | 初始选中项索引值。
|
## 属性
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| selectedColor |
[
ResourceColor
](
../../ui/ts-types.md
)
| 选中文本文字颜色。 |
| popupColor |
[
ResourceColor
](
../../ui/ts-types.md
)
| 弹出提示文本字体颜色。 |
| selectedBackgroundColor |
[
ResourceColor
](
../../ui/ts-types.md
)
| 选中文本背景颜色。 |
| popupBackground |
[
ResourceColor
](
../../ui/ts-types.md
)
| 弹窗索引背景色。 |
| usingPopup | boolean | 是否使用弹出索引提示。 |
| selectedFont | {
<br/>
size?:
number,
<br/>
weight?:
FontWeight,
<br/>
family?:
string,
<br/>
style?:
FontStyle
<br/>
} | 选中文本文字样式。 |
| popupFont | {
<br/>
size?:
number,
<br/>
weight?:
FontWeight,
<br/>
family?:
string,
<br/>
style?:
FontStyle
<br/>
} | 弹出提示文本字体样式。 |
| font | {
<br/>
size?:
number,
<br/>
weight?:
FontWeight,
<br/>
family?:
string,
<br/>
style?:
FontStyle
<br/>
} | 字母索引条默认文本字体样式。 |
| itemSize | Length | 字母索引条字母区域大小,字母区域为正方形,设置正方形边长。 |
| alignStyle | IndexerAlign | 字母索引条对齐样式,支持左侧对齐样式与右侧对齐样式,影响弹窗弹出位置。 |
| ----------------------- | --------------- | ----------------------------------------------------------- |
| color |
[
ResourceColor
](
../../ui/ts-types.md
)
| 设置文字颜色。 |
| selectedColor |
[
ResourceColor
](
../../ui/ts-types.md
)
| 设置选中项文字颜色。 |
| popupColor |
[
ResourceColor
](
../../ui/ts-types.md
)
| 设置提示弹窗文字颜色。 |
| selectedBackgroundColor |
[
ResourceColor
](
../../ui/ts-types.md
)
| 设置选中项背景颜色。 |
| popupBackground |
[
ResourceColor
](
../../ui/ts-types.md
)
| 设置提示弹窗背景色。 |
| usingPopup | boolean | 设置是否使用提示弹窗。 |
| selectedFont |
[
Font
](
../../ui/ts-types.md
)
| 设置选中项文字样式。 |
| popupFont |
[
Font
](
../../ui/ts-types.md
)
| 设置提示弹窗字体样式。 |
| font |
[
Font
](
../../ui/ts-types.md
)
| 设置字母索引条默认字体样式。 |
| itemSize | Length | 设置字母索引条字母区域大小,字母区域为正方形,即正方形边长。 |
| alignStyle | IndexerAlign | 设置提示弹窗的弹出位置。 |
-
IndexerAlign枚举说明
| 名称 | 描述 |
...
...
@@ -52,10 +53,10 @@ AlphabetIndexer(value: {arrayValue : Array<string>, selected : number})
| 名称 | 功能描述 |
| -------- | -------- |
| onSelected(
index:
number)
=
>
void
<sup>
(deprecated)
</sup>
| 索引条选中回调。
|
| onSelect(
index:
number)
=
>
void
<sup>
8+
</sup>
| 索引条选中回调。
|
| onRequestPopupData(callback:
(index:
number)
=
>
Array
<
string
>
)
<sup>
8+
</sup>
| 选中字母索引后,请求索引提示
窗口显示内容回调。
<br/>
返回值:索引对应的字符串数组,此字符串数组在弹出窗口
中竖排显示,字符串列表最多显示5个,超出部分可以滑动显示。 |
| onPopupSelect(callback:
(index:
number)
=
>
void)
<sup>
8+
</sup>
| 字母索引提示
窗口选中回调。
|
| onSelected(
callback:
(index:
number)
=
>
void)
<sup>
(deprecated)
</sup>
| 索引条选中回调,返回值为当前选中索引。
|
| onSelect(
callback:
(index:
number)
=
>
void)
<sup>
8+
</sup>
| 索引条选中回调,返回值为当前选中索引。
|
| onRequestPopupData(callback:
(index:
number)
=
>
Array
<
string
>
)
<sup>
8+
</sup>
| 选中字母索引后,请求索引提示
弹窗显示内容回调。
<br/>
返回值:索引对应的字符串数组,此字符串数组在弹窗
中竖排显示,字符串列表最多显示5个,超出部分可以滑动显示。 |
| onPopupSelect(callback:
(index:
number)
=
>
void)
<sup>
8+
</sup>
| 字母索引提示
弹窗字符串列表选中回调。
|
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @
75be4a87
...
...
@@ -18,26 +18,28 @@
## 接口
Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?
: BadgeStyle})
方法1:Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style
: BadgeStyle})
-
参数
创建数字标记组件。
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| count | number | 是 | - | 设置提醒消息数。 |
| position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 |
| maxCount | number | 否 | 99 | 最大消息数,超过最大消息时仅显示maxCount+。 |
| style | BadgeStyle |
否
| - | Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
| style | BadgeStyle |
是
| - | Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
Badge(value: {value: string, position?: BadgePosition, style?
: BadgeStyle})
方法2: Badge(value: {value: string, position?: BadgePosition, style
: BadgeStyle})
根据字符串创建
提醒
组件。
根据字符串创建
标记
组件。
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | string | 是 | - | 提示内容的文本字符串。 |
| position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 |
| style | BadgeStyle |
否
| - | Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
| style | BadgeStyle |
是
| - | Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
-
BadgeStyle对象说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
...
...
@@ -50,8 +52,8 @@ Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle})
-
BadgePosition枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Right | 圆点显示在右侧纵向居中。 |
| RightTop | 圆点显示在右上角。 |
| Right | 圆点显示在右侧纵向居中。 |
| Left | 圆点显示在左侧纵向居中。 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-column.md
浏览文件 @
75be4a87
...
...
@@ -19,7 +19,7 @@
## 接口
Column(value:{space?: Length})
Column(value
?
:{space?: Length})
-
参数
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md
浏览文件 @
75be4a87
...
...
@@ -19,7 +19,7 @@
## 接口
Flex(
options
?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
Flex(
value
?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
标准Flex布局容器。
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
浏览文件 @
75be4a87
...
...
@@ -22,10 +22,10 @@
Grid(scroller?: Scroller)
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述
|
| -------- | -------- | -------- | -------- |
-------- |
| scroller |
[
Scroller
](
ts-container-scroll.md#scroller
)
| 是 | -
| 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述
|
| --------- | ---------------------------------------- | ---- | --------------------------- | ---------------
-------- |
| scroller |
[
Scroller
](
ts-container-scroll.md#scroller
)
| 否 | -
| 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
## 属性
...
...
@@ -36,19 +36,35 @@ Grid(scroller?: Scroller)
| rowsTemplate | string | '1fr' | 用于设置当前网格布局行的数量,不设置时默认1行
示例,
'1fr
1fr
2fr'分三行,将父组件允许的高分为4等份,第一行占1份,第二行占一份,第三行占2份。 |
| columnsGap | Length | 0 | 用于设置列与列的间距。 |
| rowsGap | Length | 0 | 用于设置行与行的间距。 |
| editMode
<font
color=
ff0000
><sup>
8+
</sup></font>
| boolean | flase | 是否进入编辑模式,进入编辑模式可以拖拽Gird组件内部
[
GridItem
](
ts-container-griditem.md
)
。 |
| layoutDirection
<font
color=
ff0000
><sup>
8+
</sup></font>
| number | 0 |设置布局的主轴方向,目前支持的主轴布局方向如下:
<br/>
-
0:主轴布局方向沿水平方向布局,即先填满一列,再去填下一列。
<br/>
-
1:主轴布局方向沿垂直方向布局,即先填满一行,再去填下一行。|
| maxCount
<font
color=
ff0000
><sup>
8+
</sup></font>
| number | 1 | 当layoutDirection是Row时,表示可显示的最大行数
<br/>
当layoutDirection是Column时,表示可显示的最大列数。 |
| minCount
<font
color=
ff0000
><sup>
8+
</sup></font>
| number | 1 | 当layoutDirection是Row时,表示可显示的最小行数
<br/>
当layoutDirection是Column时,表示可显示的最小列数。 |
| cellLength
<font
color=
ff0000
><sup>
8+
</sup></font>
| number | 0 | 当layoutDirection是Row时,表示一行的高度
<br/>
当layoutDirection是Column时,表示一列的宽度。 |
| multiSelectable
<font
color=
ff0000
><sup>
8+
</sup></font>
| boolean | false | 是否开启鼠标框选。
<br/>
-
false:关闭框选。
<br/>
-
true:开启框选。 |
| supportAnimation
<font
color=
ff0000
><sup>
8+
</sup></font>
| boolean | false | 控制Grid是否支持动画。 |
| scrollBar |
[
BarState
](
ts-appendix-enums.md#barstate
)
| BarState.Off | 设置滚动条状态。 |
| scrollBarColor | string
\|
number
\|
Color | - | 设置滚动条的颜色。 |
| scrollBarWidth | Length | - | 设置滚动条的宽度。 |
| cachedCount | number | 1 | 设置预加载的GridItem的数量。 |
| editMode
<sup>
8+
</sup>
| boolean | flase | 是否进入编辑模式,进入编辑模式可以拖拽Grid组件内部
[
GridItem
](
ts-container-griditem.md
)
。 |
| layoutDirection
<sup>
8+
</sup>
| GridDirection | GridDirection.Row | 设置布局的主轴方向。 |
| maxCount
<sup>
8+
</sup>
| number | 1 | 当layoutDirection是Row/RowReverse时,表示可显示的最大行数
<br/>
当layoutDirection是Column/ColumnReverse时,表示可显示的最大列数。 |
| minCount
<sup>
8+
</sup>
| number | 1 | 当layoutDirection是Row/RowReverse时,表示可显示的最小行数。
<br/>
当layoutDirection是Column/ColumnReverse时,表示可显示的最小列数。 |
| cellLength
<sup>
8+
</sup>
| number | 0 | 当layoutDirection是Row/RowReverse时,表示一行的高度。
<br/>
当layoutDirection是Column/ColumnReverse时,表示一列的宽度。 |
| multiSelectable
<sup>
8+
</sup>
| boolean | false | 是否开启鼠标框选。
<br/>
-
false:关闭框选。
<br/>
-
true:开启框选。 |
| supportAnimation
<sup>
8+
</sup>
| boolean | false | 是否支持动画。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| onScrollIndex(first:
number)
=
>
void | 当前列表显示的起始位置item发生变化时触发。 |
| onScrollIndex(event: (first: number) => void) | 当前网格显示的起始位置item发生变化时触发,返回值为当前显示的网格起始位置的索引值。 |
| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any)
\|
void) | 开始拖拽网格元素时触发,返回值event见ItemDragInfo对象说明,itemIndex为被拖拽网格元素索引值。 |
| onItemDragEnter(event: (event: ItemDragInfo) => void) | 拖拽进入网格元素范围内时触发,返回值event见ItemDragInfo对象说明。 |
| onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | 拖拽在网格元素范围内移动时触发,返回值event见ItemDragInfo对象说明,itemIndex为拖拽起始位置,insertIndex为拖拽插入位置。 |
| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | 拖拽离开网格元素时触发,返回值event见ItemDragInfo对象说明,itemIndex为拖拽离开的网格元素索引值。 |
| onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | 绑定该事件的网格元素可作为拖拽释放目标,当在网格元素内停止拖拽时触发,返回值event见ItemDragInfo对象说明,itemIndex为拖拽起始位置,insertIndex为拖拽插入位置,isSuccess为是否成功释放。 |
## ItemDragInfo对象说明
| 名称 | 类型 | 描述 |
| ---------- | ---------- | ---------- |
| x | number | 当前拖拽点的x坐标。 |
| y | number | 当前拖拽点的y坐标。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md
浏览文件 @
75be4a87
...
...
@@ -38,7 +38,7 @@ GridItem()
| 名称 | 功能描述 |
| -------- | -------- |
| onSelect(callback:
(isSelected:
boolean)
=
>
any
)
<sup>
8+
</sup>
| GridItem元素被鼠标框选的状态改变时触发回调。
<br/>
isSelected:进入鼠标框选范围即被选中返回true,
移出鼠标框选范围即未被选中返回false。 |
| onSelect(callback:
(isSelected:
boolean)
=
>
void
)
<sup>
8+
</sup>
| GridItem元素被鼠标框选的状态改变时触发回调。
<br/>
isSelected:进入鼠标框选范围即被选中返回true,
移出鼠标框选范围即未被选中返回false。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
浏览文件 @
75be4a87
...
...
@@ -26,7 +26,7 @@ List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller}
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| space |
number
\|
string
| 否 | 0 | 列表项间距。 |
| space |
[
Length
](
../../ui/ts-types.md#length
)
| 否 | 0 | 列表项间距。 |
| initialIndex | number | 否 | 0 | 设置当前List初次加载时视口起始位置显示的item,即显示第一个item,如设置的序号超过了最后一个item的序号,则设置不生效。 |
| scroller |
[
Scroller
](
ts-container-scroll.md#scroller
)
| 否 | - | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
...
...
@@ -36,7 +36,9 @@ List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller}
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| listDirection |
[
Axis
](
ts-appendix-enums.md#axis
)
| Vertical | 设置List组件排列方向参照Axis枚举说明。 |
| divider | {
<br/>
strokeWidth:
Length,
<br/>
color?:Color,
<br/>
startMargin?:
Length,
<br/>
endMargin?:
Length
<br/>
} | - | 用于设置ListItem分割线样式,默认无分割线。
<br/>
strokeWidth:
分割线的线宽。
<br/>
color:
分割线的颜色。
<br/>
startMargin:
分割线距离列表侧边起始端的距离。
<br/>
endMargin:
分割线距离列表侧边结束端的距离。 |
| divider | {
<br/>
strokeWidth:
Length,
<br/>
color?:[ResourceColor](../../ui/ts-types.md),
<br/>
startMargin?:
Length,
<br/>
endMargin?:
Length
<br/>
} | - | 用于设置ListItem分割线样式,默认无分割线。
<br/>
strokeWidth:
分割线的线宽。
<br/>
color:
分割线的颜色。
<br/>
startMargin:
分割线距离列表侧边起始端的距离。
<br/>
endMargin:
分割线距离列表侧边结束端的距离。 |
| scrollBar |
[
BarState
](
ts-appendix-enums.md#barstate
)
| BarState.Off | 设置滚动条状态。 |
| cachedCount | number | 1 | 设置预加载的ListItem的数量。 |
| editMode | boolean | false | 声明当前List组件是否处于可编辑模式。 |
| edgeEffect |
[
EdgeEffect
](
ts-appendix-enums.md#edgeeffect
)
| EdgeEffect.Spring | 滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。 |
| chainAnimation | boolean | false | 用于设置当前list是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:list内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。
<br/>
-
false:不启用链式联动。
<br/>
-
true:启用链式联动。 |
...
...
@@ -58,9 +60,26 @@ List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller}
| 名称 | 功能描述 |
| -------- | -------- |
| onItemDelete(index:
number)
=
>
boolean | 列表项删除时触发。 |
| onScrollBegin
<sup>
9+
</sup>
(dx: number, dy: number)
=
>
{ dxRemain: number, dyRemain: number } | 滚动开始事件回调。
<br>
参数:
<br>
- dx:即将发生的水平方向滚动量。
<br>
- dy:即将发生的竖向方向滚动量。
<br>
返回值:
<br>
- dxRemain:水平方向滚动剩余量。
<br>
- dyRemain:竖直方向滚动剩余量。 |
| onScrollIndex(firstIndex:
number,
lastIndex:
number)
=
>
void | 当前列表显示的起始位置和终止位置发生变化时触发。 |
| onItemDelete(event: (index: number) => boolean) | 列表项删除时触发。 |
| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发,返回值scrollOffset为滑动偏移量,scrollState为当前滑动状态。 |
| onScrollIndex(event: (start: number, end: number) => void) | 列表滑动时触发,返回值分别为滑动起始位置索引值与滑动结束位置索引值。 |
| onReachStart(event: () => void) | 列表到达起始位置时触发。 |
| onReachEnd(event: () => void) | 列表到底末尾位置时触发。 |
| onScrollStop(event: () => void) | 列表滑动停止时触发。 |
| onItemMove(event: (from: number, to: number) => boolean) | 列表元素发生移动时触发,返回值from、to分别为移动前索引值与移动后索引值。 |
| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any)
\|
void) | 开始拖拽列表元素时触发,返回值event见ItemDragInfo对象说明,itemIndex为被拖拽列表元素索引值。 |
| onItemDragEnter(event: (event: ItemDragInfo) => void) | 拖拽进入列表元素范围内时触发,返回值event见ItemDragInfo对象说明。 |
| onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | 拖拽在列表元素范围内移动时触发,返回值event见ItemDragInfo对象说明,itemIndex为拖拽起始位置,insertIndex为拖拽插入位置。 |
| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | 拖拽离开列表元素时触发,返回值event见ItemDragInfo对象说明,itemIndex为拖拽离开的列表元素索引值。 |
| onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | 绑定该事件的列表元素可作为拖拽释放目标,当在列表元素内停止拖拽时触发,返回值event见ItemDragInfo对象说明,itemIndex为拖拽起始位置,insertIndex为拖拽插入位置,isSuccess为是否成功释放。 |
## ScrollState枚举说明
| 名称 | 描述 |
| ------ | ------------------------- |
| Idle | 未滑动状态。 |
| Scroll | 惯性滑动状态。 |
| Fling | 手指拖动状态。 |
> **说明:**
> List使能可编辑模式需配合onItemDelete事件和ListItem的editable属性,即可编辑模式实现删除列表项功能,需满足以下条件:
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
浏览文件 @
75be4a87
...
...
@@ -27,17 +27,26 @@ ListItem()
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| sticky | Sticky | Sticky.None | 设置ListItem吸顶效果,参见Sticky枚举描述。 |
| editable
| boolean | false | 当前ListItem元素是否可编辑,进入编辑模式后可删除。
|
| editable
| boolean
\|
EditMode | false | 当前ListItem元素是否可编辑,进入编辑模式后可删除或移动。
|
| selectable
<sup>
8+
</sup>
| boolean | true | 当前ListItem元素是否可以被鼠标框选。
<br/>
>
**说明:**
<br/>
>
外层List容器的鼠标框选开启时,ListItem的框选才生效。 |
| swipeAction
<sup>
9+
</sup>
| {
<br/>
start?:
CustomBuilder,
<br/>
end?:CustomBuilder,
<br/>
edgeEffect?:
SwipeEdgeEffect,
<br/>
} | - | 用于设置ListItem的划出组件。
<br/>
start:
ListItem向右划动时item左边的组件(List垂直布局时)或ListItem向下划动时item上方的组件(List水平布局时)。
<br/>
end:
ListItem向左划动时item右边的组件(List垂直布局时)或ListItem向上划动时item下方的组件(List水平布局时)。
<br/>
edgeEffect:
滑动效果,参见SwipeEdgeEffect的枚举说明。
<br/>
|
-
Sticky枚举说明
##
Sticky枚举说明
| 名称 | 描述 |
| -------- | -------- |
| None | 无吸顶效果。 |
| Normal | 当前item吸顶。 |
| Opacity | 当前item吸顶显示透明度变化效果。 |
-
SwipeEdgeEffect
<sup>
9+
</sup>
枚举说明
## EditMode枚举说明
| 名称 | 描述 |
| ------ | --------- |
| None | 编辑操作不限制。 |
| Deletable | 可删除。 |
| Movable | 可移动。 |
## SwipeEdgeEffect<sup>9+</sup>枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Spring | ListItem划动距离超过划出组件大小后可以继续划动,松手后按照弹簧阻尼曲线回弹。 |
...
...
@@ -47,7 +56,7 @@ ListItem()
| 名称 | 功能描述 |
| -------- | -------- |
| onSelect(
callback:
(isSelected:
boolean)
=
>
any
)
<sup>
8+
</sup>
| ListItem元素被鼠标框选的状态改变时触发回调。
<br/>
isSelected:进入鼠标框选范围即被选中返回true,
移出鼠标框选范围即未被选中返回false。 |
| onSelect(
event:
(isSelected:
boolean)
=
>
void
)
<sup>
8+
</sup>
| ListItem元素被鼠标框选的状态改变时触发回调。
<br/>
isSelected:进入鼠标框选范围即被选中返回true,
移出鼠标框选范围即未被选中返回false。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-row.md
浏览文件 @
75be4a87
...
...
@@ -19,7 +19,7 @@
## 接口
Row(value:{space?: Length})
Row(value
?
:{space?: Length})
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
...
...
@@ -32,7 +32,7 @@ Row(value:{space?: Length})
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| alignItems |
[
VerticalAlign
](
ts-appendix-enums.md#verticalalign
)
| VerticalAlign.Center | 在垂直方向上子组件的对齐格式。 |
| justifyContent
8+
|
[
FlexAlign
](
ts-appendix-enums.md#flexalign
)
| FlexAlign.Start | 设置子组件在水平方向上的对齐格式。 |
| justifyContent
<sup>
8+
</sup>
|
[
FlexAlign
](
ts-appendix-enums.md#flexalign
)
| FlexAlign.Start | 设置子组件在水平方向上的对齐格式。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
浏览文件 @
75be4a87
...
...
@@ -29,32 +29,41 @@ Scroll(scroller?: Scroller)
| 名称 | 参数类型 | 默认值 | 描述 |
| -------------- | ---------------------------------------- | ------------------------ | --------- |
| scrollable | ScrollDirection | ScrollDirection.Vertical | 设置滚动方法。 |
| scrollBar |
[
BarState
](
ts-appendix-enums.md#barstate
)
|
ScrollDirection.Auto
| 设置滚动条状态。 |
| scrollBarColor |
Color | -
| 设置滚动条的颜色。 |
| scrollBar |
[
BarState
](
ts-appendix-enums.md#barstate
)
|
BarState.Off
| 设置滚动条状态。 |
| scrollBarColor |
string
\|
number
\|
Color | -
| 设置滚动条的颜色。 |
| scrollBarWidth | Length | - | 设置滚动条的宽度。 |
| edgeEffect | EdgeEffect | EdgeEffect.Spring | 设置滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。 |
-
ScrollDirection枚举说明
##
ScrollDirection枚举说明
| 名称 | 描述 |
| ---------- | ---------- |
| Horizontal | 仅支持水平方向滚动。 |
| Vertical | 仅支持竖直方向滚动。 |
| None | 不可滚动。 |
## EdgeEffect枚举说明
| 名称 | 描述 |
| ------ | ---------------------------------------- |
| Spring | 弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹。 |
| Fade | 阴影效果,滑动到边缘后会有圆弧状的阴影。 |
| None | 滑动到边缘后无效果。 |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ----------------------------- |
| onScrollBegin
<sup>
9+
</sup>
(dx: number, dy: number)
=
>
{ dxRemain: number, dyRemain: number } | 滚动开始事件回调。
<br>
参数:
<br>
- dx:即将发生的水平方向滚动量。
<br>
- dy:即将发生的竖向方向滚动量。
<br>
返回值:
<br>
- dxRemain:水平方向滚动剩余量。
<br>
- dyRemain:竖直方向滚动剩余量。 |
| onScroll(
xOffset:
number,
yOffset:
number)
=
>
void
| 滚动事件回调,
返回滚动时水平、竖直方向偏移量。 |
| onScrollEdge(
side:
Edge)
=
>
void
| 滚动到边缘事件回调。 |
| onScrollEnd(
)
=
>
void
| 滚动停止事件回调。 |
| onScroll(
event: (xOffset: number, yOffset: number) => void)
| 滚动事件回调,
返回滚动时水平、竖直方向偏移量。 |
| onScrollEdge(
event: (side: Edge) => void)
| 滚动到边缘事件回调。 |
| onScrollEnd(
event: () => void)
| 滚动停止事件回调。 |
> **说明:**
> 若通过onScrollBegin事件和scrollBy方法实现容器嵌套滚动,需设置子滚动节点的EdgeEffect为None。如Scroll嵌套List滚动时,List组件的edgeEffect属性需设置为EdgeEffect.None。
## Scroller
可滚动容器组件的控制器,可以将此组件绑定至容器组件,然后通过它控制容器组件的滚动,目前支持绑定到List
和Scroll组件
上。
可滚动容器组件的控制器,可以将此组件绑定至容器组件,然后通过它控制容器组件的滚动,目前支持绑定到List
、Scroll、ScrollBar
上。
### 导入对象
...
...
@@ -91,14 +100,8 @@ scrollEdge(value: Edge): void
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ---- | ---- | ---- | --------- |
| value | Edge | 是 | - | 滚动到的边缘位置。 |
-
Edge枚举说明
| value |
[
Edge
](
ts-appendix-enums.md#edge
)
| 是 | - | 滚动到的边缘位置。 |
| 名称 | 值 | 描述 |
| ------ | ---- | ---------- |
| Top | 0 | 滑动到顶部 |
| Bottom | 2 | 滑动到底部 |
...
...
@@ -112,7 +115,7 @@ scrollPage(value: { next: boolean, direction?: Axis }): void
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------- | ---- | ---- | ------------------------------ |
| next | boolean | 是 | - | 是否向下翻页。true表示向下翻页,false表示向上翻页。 |
| direction |
Axis
| 否 | - | 设置滚动方向为水平或竖直方向。 |
| direction |
[
Axis
](
ts-appendix-enums.md#axis
)
| 否 | - | 设置滚动方向为水平或竖直方向。 |
### currentOffset
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @
75be4a87
...
...
@@ -46,10 +46,10 @@ Swiper(value:{controller?: SwiperController})
| 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-a
nimatorproperty.md#Curve枚举说明
)
\|
string | 设置Swiper的动画曲线,默认为淡入淡出曲线,常用曲线参考
[
Curve枚举说明
](
ts-animatorproperty.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/>
color?:
Color,
<br/>
selectedColor?:
Color
<br/>
} | 设置indicator样式:
<br/>
-
left:
设置导航点距离Swiper组件左边的距离。
<br/>
-
top:
设置导航点距离Swiper组件顶部的距离。
<br/>
-
right:
设置导航点距离Swiper组件右边的距离。
<br/>
-
bottom:
设置导航点距离Swiper组件底部的距离。
<br/>
-
size:
设置导航点的直径
。
<br/>
-
color:
设置导航点的颜色。
<br/>
-
selectedColor:
设置选中的导航点的颜色。 |
| curve
<sup>
8+
</sup>
|
[
Curve
](
ts-a
ppendix-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:
设置选中的导航点的颜色。 |
| displayCount
<sup>
8+
</sup>
| number
\|
string | 设置元素显示个数。
<br/>
默认值:1 |
| effectMode
<sup>
8+
</sup>
|
EdgeEffect
| 滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。
<br/>
默认值:EdgeEffect.Spring |
| effectMode
<sup>
8+
</sup>
|
[
EdgeEffect
](
ts-appendix-enums.md#edgeeffect
)
| 滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。
<br/>
默认值:EdgeEffect.Spring |
## SwiperDisplayMode枚举说明
...
...
@@ -98,9 +98,9 @@ finishAnimation(callback?: () => void): void
### onChange
onChange(
index:
number)
=
>
void
onChange(
event: (index: number) => void)
当前显示的
组件索引变化时触发该事件
。
当前显示的
子组件索引变化时触发该事件,返回值为当前显示的子组件的索引值
。
**参数:**
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
浏览文件 @
75be4a87
...
...
@@ -28,7 +28,7 @@ TabContent()
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| tabBar | string
\|
{
<br/>
icon?:
string,
<br/>
text?:
string
<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父组件。
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
浏览文件 @
75be4a87
...
...
@@ -41,11 +41,11 @@ Tabs(value: {barPosition?: BarPosition, index?: number, controller?: [TabsContro
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| vertical
| boolean | false | 是否为纵向Tab,默认为false。
|
| scrollable
| boolean | true | 是否可以通过左右滑动进行页面切换,默认为true。
|
| barMode
| BarMode | BarMode.Fixed | TabBar布局模式。
|
| barWidth
| number | - | TabBar的宽度值,不设置时使用系统主题中的默认值。
|
| barHeight
| number | - | TabBar的高度值,不设置时使用系统主题中的默认值。
|
| 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滑动动画时长。 |
-
BarMode枚举说明
...
...
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md
浏览文件 @
75be4a87
...
...
@@ -37,10 +37,16 @@ Line(options?: {width: Length, height: Length})
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | 否 | 直线所在矩形的宽度。 |
| height | Length | 0 | 否 | 直线所在矩形的高度。 |
| startPoint | Point | [0,
0] | 是 | 直线起点坐标(相对坐标)。 |
| endPoint | Point | [0,
0] | 是 | 直线终点坐标(相对坐标)。 |
| width |
[
Length
](
../../ui/ts-types.md#length
)
| 0 | 否 | 直线所在矩形的宽度。 |
| height |
[
Length
](
../../ui/ts-types.md#length
)
| 0 | 否 | 直线所在矩形的高度。 |
| startPoint | Array
<
Point
>
| [0,
0] | 是 | 直线起点坐标(相对坐标)。 |
| endPoint | Array
<
Point
>
| [0,
0] | 是 | 直线终点坐标(相对坐标)。 |
## Point
| 名称 | 类型定义 | 描述 |
| ----- | --------------------- | ---------------------------------------------------- |
| Point |
[
[Length
](
../../ui/ts-types.md#length
)
,
[
Length
](
ts-types.md#length
)
] | 用于描述点坐标,第一个值为x轴坐标,第二个值为y坐标。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
浏览文件 @
75be4a87
...
...
@@ -16,7 +16,7 @@ show(options?: DatePickerDialogOptions)
定义日期滑动选择器弹窗并弹出。
-
options参数
-
DatePickerDialogOptions参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| start | Date | 否 | Date('1970-1-1') | 指定选择器的起始日期。 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
浏览文件 @
75be4a87
...
...
@@ -20,7 +20,7 @@ show(options: TextPickerDialogOptions)
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| range | string[] | 是 | - | 选择器的数据选择范围。 |
| selected | number | 否 |
第一个元素
| 选中项在数组中的index值。 |
| selected | number | 否 |
0
| 选中项在数组中的index值。 |
| value | string | 否 | - | 选中项文本值。当设置了selected参数时,该值不生效。如果该值不在range范围内,则默认取range第一个元素。|
| defaultPickerItemHeight | number | 否 | - | 默认Picker内容项元素高度。 |
| onAccept | (value: TextPickerResult) => void | 否 | - | 点击弹窗中确定按钮时触发。 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
浏览文件 @
75be4a87
...
...
@@ -30,21 +30,8 @@
## EventTarget<sup>8+</sup>对象说明
| 名称 | 参数类型 | 描述 |
| ---- | ----------------- | ---------- |
| area |
[
Area
](
#area8对象说明
)
| 目标元素的区域信息。 |
| area |
[
Area
](
../../ui/ts-types.md#area8
)
| 目标元素的区域信息。 |
## Area<sup>8+</sup>对象说明
| 属性名称 | 类型 | 描述 |
| -------------- | -------------------------- | ------------------- |
| width | number | 目标元素的宽度,单位为vp。 |
| height | number | 目标元素的高度,单位为vp。 |
| position | Position | 目标元素左上角相对父元素左上角的位置。 |
| globalPosition | Position | 目标元素左上角相对页面左上角的位置。 |
## Position<sup>8+</sup>对象说明
| 属性名称 | 参数类型 | 描述 |
| ---- | ------ | ----------- |
| x | number | x轴坐标,单位为vp。 |
| y | number | y轴坐标,单位为vp。 |
## 示例
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录