Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
54241e78
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看板
未验证
提交
54241e78
编写于
6月 16, 2023
作者:
O
openharmony_ci
提交者:
Gitee
6月 16, 2023
浏览文件
操作
浏览文件
下载
差异文件
!19222 List组件UX一致性新增接口doc修改
Merge pull request !19222 from sunjiakun/branch_listUX_0605
上级
2affa102
fb7a7dbf
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
45 addition
and
9 deletion
+45
-9
zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
...plication-dev/reference/arkui-ts/ts-container-listitem.md
+31
-3
zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md
...tion-dev/reference/arkui-ts/ts-container-listitemgroup.md
+14
-6
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
浏览文件 @
54241e78
...
...
@@ -11,13 +11,28 @@
可以包含单个子组件。
## 接口
ListItem(value?: string)
从API version 9开始,该接口支持在ArkTS卡片中使用。
**方法1:**
ListItem(value?: ListItemOptions)
<sup>
10+
</sup>
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ |
| value |
[
ListItemOptions
](
#listitemoptions10对象说明
)
| 否 | 为ListItem提供可选参数, 该对象内含有ListItemStyle枚举类型的style参数。 |
**方法2:**
ListItem(value?: string)
<sup>
(deprecated)
</sup>
从API version 10开始, 该接口不再维护,推荐使用方法1。
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ----------------------------- | ---- | -------- |
| value | string
<sup>
(deprecated)
</sup>
| 否 | 无 |
## 属性
除支持
[
通用属性
](
ts-universal-attributes-size.md
)
外,还支持以下属性:
...
...
@@ -63,6 +78,19 @@ List垂直布局,ListItem向右滑动,item左边的长距离滑动删除选
| onExitDeleteArea | () => void | 否 |当滑动条目退出删除区域时调用,只触发一次,当再次退出时仍触发。 |
| builder | CustomBuilder | 否 |当列表项向右或向右滑动(当列表方向为“垂直”时),向下或向下滑动(当列方向为“水平”时)时显示的操作项。 |
| useDefaultDeleteAnimation | boolean | 否 |设置是否使用默认的删除动画。
<br/>
默认值:true |
## ListItemOptions<sup>10+</sup>对象说明
| 名称 | 参数类型 | 必填 | 描述 |
| ----- | ----------------------------------------- | ---- | ------------------------------------------------------------ |
| style |
[
ListItemStyle
](
#listitemstyle10枚举说明
)
| 否 | 设置List组件卡片样式。
<br/>
默认值: ListItemStyle.NONE
<br/>
设置为ListItemStyle.NONE时无样式。
<br/>
设置为ListItemStyle.CARD时,必须配合
[
ListItemGroup
](
ts-container-listitemgroup.md
)
的ListItemGroupStyle.CARD同时使用,显示默认卡片样式。
<br/>
卡片样式下,ListItem默认规格:高度48vp,宽度100%。
<br/>
卡片样式下, 为卡片内的列表选项提供了默认的focus、hover、press、selected和disable样式。
<br/>
**说明:**
<br/>
当前卡片模式下,不支持listDirection属性设置,使用默认Axis.Vertical排列方向。
<br/>
当前卡片模式下,List属性alignListItem默认为ListItemAlign.Center,居中对齐显示。 |
## ListItemStyle<sup>10+</sup>枚举说明
| 名称 | 描述 |
| ---- | ------------------ |
| NONE | 无样式。 |
| CARD | 显示默认卡片样式。 |
## 事件
| 名称 | 功能描述 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md
浏览文件 @
54241e78
...
...
@@ -19,15 +19,16 @@
## 接口
ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: number | string})
ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: number | string
, style?: ListItemGroupStyle
})
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| header |
[
CustomBuilder
](
ts-types.md#custombuilder8
)
| 否 | 设置ListItemGroup头部组件。 |
| footer |
[
CustomBuilder
](
ts-types.md#custombuilder8
)
| 否 | 设置ListItemGroup尾部组件。 |
| space | number
\|
string | 否 | 列表项间距。只作用于ListItem与ListItem之间,不作用于header与ListItem、footer与ListItem之间。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------------------- | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
| header |
[
CustomBuilder
](
ts-types.md#custombuilder8
)
| 否 | 设置ListItemGroup头部组件。 |
| footer |
[
CustomBuilder
](
ts-types.md#custombuilder8
)
| 否 | 设置ListItemGroup尾部组件。 |
| space | number
\|
string | 否 | 列表项间距。只作用于ListItem与ListItem之间,不作用于header与ListItem、footer与ListItem之间。 |
| style
<sup>
10+
</sup>
|
[
ListItemGroupStyle
](
#listitemgroupstyle10枚举说明
)
| 否 | 设置List组件卡片样式。
<br/>
默认值: ListItemGroupStyle.NONE
<br/>
设置为ListItemGroupStyle.NONE时无样式。
<br/>
设置为ListItemStyle.CARD时,必须配合
[
ListItem
](
ts-container-listitem.md
)
的ListItemStyle.CARD同时使用,显示默认卡片样式。
<br/>
卡片样式下, 为卡片内的列表选项提供了默认的focus、hover、press、selected和disable样式。
<br/>
**说明:**
<br/>
当前卡片模式下,不支持listDirection属性设置,使用默认Axis.Vertical排列方向。
<br/>
当前卡片模式下,List属性alignListItem默认为ListItemAlign.Center,居中对齐显示。
<br/>
当前卡片模式下,ListItemGroup不支持设置头部组件header和尾部组件footer。 |
## 属性
...
...
@@ -35,6 +36,13 @@ ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?:
| -------- | -------- | -------- |
| divider | {
<br/>
strokeWidth:
[Length](ts-types.md#length),
<br/>
color?:
[ResourceColor](ts-types.md#resourcecolor),
<br/>
startMargin?:
[Length](ts-types.md#length),
<br/>
endMargin?:
[Length](ts-types.md#length)
<br/>
}
\|
null | 用于设置ListItem分割线样式,默认无分割线。
<br/>
strokeWidth:
分割线的线宽。
<br/>
color:
分割线的颜色。
<br/>
startMargin:
分割线距离列表侧边起始端的距离。
<br/>
endMargin:
分割线距离列表侧边结束端的距离。 |
## ListItemGroupStyle<sup>10+</sup>枚举说明
| 名称 | 描述 |
| ---- | ------------------ |
| NONE | 无样式。 |
| CARD | 显示默认卡片样式。 |
> **说明:**
>
> ListItemGroup组件不支持设置[通用属性aspectRatio](ts-universal-attributes-layout-constraints.md)。
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录