From fb7a7dbf9200387425a46943071839a29cb7c32f Mon Sep 17 00:00:00 2001 From: sunjiakun Date: Fri, 16 Jun 2023 23:49:14 +0800 Subject: [PATCH] Update doc about interface of listUX Signed-off-by: sunjiakun --- .../arkui-ts/ts-container-listitem.md | 34 +++++++++++++++++-- .../arkui-ts/ts-container-listitemgroup.md | 20 +++++++---- 2 files changed, 45 insertions(+), 9 deletions(-) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md index b5aa4e9192..2ce9459a27 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md @@ -11,13 +11,28 @@ 可以包含单个子组件。 - ## 接口 -ListItem(value?: string) - 从API version 9开始，该接口支持在ArkTS卡片中使用。 +**方法1：** ListItem(value?: ListItemOptions)10+ + +**参数：** + +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ | +| value | [ListItemOptions](#listitemoptions10对象说明) | 否 | 为ListItem提供可选参数, 该对象内含有ListItemStyle枚举类型的style参数。 | + +**方法2：** ListItem(value?: string)(deprecated) + +从API version 10开始, 该接口不再维护，推荐使用方法1。 + +**参数：** + +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ------ | ----------------------------- | ---- | -------- | +| value | string(deprecated) | 否 | 无 | + ## 属性 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： @@ -63,6 +78,19 @@ List垂直布局，ListItem向右滑动，item左边的长距离滑动删除选 | onExitDeleteArea | () => void | 否 |当滑动条目退出删除区域时调用，只触发一次，当再次退出时仍触发。 | | builder | CustomBuilder | 否 |当列表项向右或向右滑动（当列表方向为“垂直”时），向下或向下滑动（当列方向为“水平”时）时显示的操作项。 | | useDefaultDeleteAnimation | boolean | 否 |设置是否使用默认的删除动画。
默认值：true | +## ListItemOptions10+对象说明 + +| 名称 | 参数类型 | 必填 | 描述 | +| ----- | ----------------------------------------- | ---- | ------------------------------------------------------------ | +| style | [ListItemStyle](#listitemstyle10枚举说明) | 否 | 设置List组件卡片样式。
默认值: ListItemStyle.NONE
设置为ListItemStyle.NONE时无样式。
设置为ListItemStyle.CARD时，必须配合[ListItemGroup](ts-container-listitemgroup.md)的ListItemGroupStyle.CARD同时使用，显示默认卡片样式。
卡片样式下，ListItem默认规格：高度48vp，宽度100%。
卡片样式下, 为卡片内的列表选项提供了默认的focus、hover、press、selected和disable样式。
**说明：**
当前卡片模式下，不支持listDirection属性设置，使用默认Axis.Vertical排列方向。
当前卡片模式下，List属性alignListItem默认为ListItemAlign.Center，居中对齐显示。 | + +## ListItemStyle10+枚举说明 + +| 名称 | 描述 | +| ---- | ------------------ | +| NONE | 无样式。 | +| CARD | 显示默认卡片样式。 | + ## 事件 | 名称 | 功能描述 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md index fb27abb4a2..d87f7978d4 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md @@ -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之间。 | +| style10+ | [ListItemGroupStyle](#listitemgroupstyle10枚举说明) | 否 | 设置List组件卡片样式。
默认值: ListItemGroupStyle.NONE
设置为ListItemGroupStyle.NONE时无样式。
设置为ListItemStyle.CARD时，必须配合[ListItem](ts-container-listitem.md)的ListItemStyle.CARD同时使用，显示默认卡片样式。
卡片样式下, 为卡片内的列表选项提供了默认的focus、hover、press、selected和disable样式。
**说明：**
当前卡片模式下，不支持listDirection属性设置，使用默认Axis.Vertical排列方向。
当前卡片模式下，List属性alignListItem默认为ListItemAlign.Center，居中对齐显示。
当前卡片模式下，ListItemGroup不支持设置头部组件header和尾部组件footer。 | ## 属性 @@ -35,6 +36,13 @@ ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: | -------- | -------- | -------- | | divider | {
strokeWidth: [Length](ts-types.md#length),
color?: [ResourceColor](ts-types.md#resourcecolor),
startMargin?: [Length](ts-types.md#length),
endMargin?: [Length](ts-types.md#length)
} \| null | 用于设置ListItem分割线样式，默认无分割线。
strokeWidth: 分割线的线宽。
color: 分割线的颜色。
startMargin： 分割线距离列表侧边起始端的距离。
endMargin: 分割线距离列表侧边结束端的距离。 | +## ListItemGroupStyle10+枚举说明 + +| 名称 | 描述 | +| ---- | ------------------ | +| NONE | 无样式。 | +| CARD | 显示默认卡片样式。 | + > **说明：** > > ListItemGroup组件不支持设置[通用属性aspectRatio](ts-universal-attributes-layout-constraints.md)。 -- GitLab