diff --git a/en/application-dev/reference/arkui-ts/figures/listItem3.jpeg b/en/application-dev/reference/arkui-ts/figures/listItem3.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..5188c9221033fb57e3e483ade647353097f9e4e4 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/listItem3.jpeg differ diff --git a/en/application-dev/reference/arkui-ts/figures/listItemGroup2.jpeg b/en/application-dev/reference/arkui-ts/figures/listItemGroup2.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..fa3469ab517b4e1b410fcef7a21aa9f4f1baebfa Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/listItemGroup2.jpeg differ diff --git a/en/application-dev/reference/arkui-ts/ts-container-listitem.md b/en/application-dev/reference/arkui-ts/ts-container-listitem.md index cd8ef63993cdbfdc654453e9d647bd2fdb5ac7d1..86b924cdc24f71291ed592877833a14b6d5448b3 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-listitem.md +++ b/en/application-dev/reference/arkui-ts/ts-container-listitem.md @@ -76,12 +76,11 @@ For a list in horizontal layout, it refers to the delete item displayed below (o | Name | Type | Mandatory| Description | | -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| deleteAreaDistance | [Length](ts-types.md#length) | No| Swipe distance threshold for deleting the list item.
Default value: **56vp**
**NOTE**
This parameter cannot be set in percentage.
If the value is greater than the list item width minus the width of **swipeAction**, or is less than or equal to 0, the delete area will not be set.| -| onDelete | () => void | No| Callback invoked when the list item is released while in the delete area.
**NOTE**
This callback is invoked only when the list item is released in a position that meets or goes beyond the specified swipe distance threshold (which must be valid) for deleting the list item.| -| onEntryDeleteArea | () => void | No| Callback invoked each time the list item enters the delete area.| -| onExitDeleteArea | () => void | No|Callback invoked each time the list item exits the delete area.| +| actionAreaDistance | [Length](ts-types.md#length) | No| Swipe distance threshold for deleting the list item.
Default value: **56vp**
**NOTE**
This parameter cannot be set in percentage.
If the value is greater than the list item width minus the width of **swipeAction**, or is less than or equal to 0, the delete area will not be set.| +| onAction | () => void | No| Callback invoked when the list item is released while in the delete area.
**NOTE**
This callback is invoked only when the list item is released in a position that meets or goes beyond the specified swipe distance threshold (which must be valid) for deleting the list item.| +| onEnterActionArea | () => void | No| Callback invoked each time the list item enters the delete area.| +| onExitActionArea | () => void | No|Callback invoked each time the list item exits the delete area.| | builder | CustomBuilder | No|Swipe action item displayed when the list item is swiped left or right (in vertical list layout) or up or down (in horizontal list layout).| -| useDefaultDeleteAnimation | boolean | No|Whether to use the default delete animation.
Default value: **true**| ## ListItemOptions10+ | Name | Type | Mandatory| Description | @@ -101,9 +100,10 @@ For a list in horizontal layout, it refers to the delete item displayed below (o | -------- | -------- | | onSelect(event: (isSelected: boolean) => void)8+ | Triggered when the selected state of the **\** changes.
**isSelected**: Returns **true** if the **\** is selected by mouse drag; returns **false** otherwise.| - ## Example +### Example 1 + ```ts // xxx.ets @Entry @@ -130,6 +130,8 @@ struct ListItemExample { ![en-us_image_0000001219864159](figures/en-us_image_0000001219864159.gif) +### Example 2 + ```ts // xxx.ets @@ -165,19 +167,18 @@ struct ListItemExample2 { .swipeAction({ end: { builder: this.itemEnd.bind(this, item), - useDefaultDeleteAnimation: true, - onDelete: () => { + onAction: () => { animateTo({ duration: 1000 }, () => { let index = this.arr.indexOf(item) this.arr.splice(index, 1) }) }, - deleteAreaDistance: 80, - onEnterDeleteArea: () => { + actionAreaDistance: 80, + onEnterActionArea: () => { this.enterEndDeleteAreaString = "enterEndDeleteArea" this.exitEndDeleteAreaString = "not exitEndDeleteArea" }, - onExitDeleteArea: () => { + onExitActionArea: () => { this.enterEndDeleteAreaString = "not enterEndDeleteArea" this.exitEndDeleteAreaString = "exitEndDeleteArea" } @@ -196,3 +197,43 @@ struct ListItemExample2 { } ``` ![deleteListItem](figures/deleteListItem.gif) + +### Example 3 + +```ts +// xxx.ets +@Entry +@Component +struct ListItemExample3 { + private arr: any = [ListItemStyle.CARD, ListItemStyle.CARD,ListItemStyle.NONE] + build() { + Column() { + List({ space: "4vp", initialIndex: 0 }) { + ListItemGroup({style:ListItemGroupStyle.CARD}){ + ForEach(this.arr, (itemStyle,index) => { + ListItem({style:itemStyle}) { + Text(""+index) + .width("100%") + .textAlign(TextAlign.Center) + } + }) + } + ForEach(this.arr, (itemStyle,index) => { + ListItem({style:itemStyle}) { + Text(""+index) + .width("100%") + .textAlign(TextAlign.Center) + } + }) + } + .width('100%') + .multiSelectable(true) + .backgroundColor(0xDCDCDC) // List in light blue + } + .width('100%') + .padding({ top: 5 }) + } +} + +``` +![ListItemStyle](figures/listItem3.jpeg) diff --git a/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md b/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md index 48ed2249eb25c786c2bcd5f8cb900bd4e4b1589a..9f3ff104bab488a2bcc3f4e02f3ddd572742ba34 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md +++ b/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md @@ -8,9 +8,9 @@ The **\** component is used to display list item groups. It must ## Usage Guidelines -If the **listDirection** attribute of the parent **\** component is set to **Axis.Vertical**, the **height** attribute of the **\** component cannot be set. The height of a **\** component is the sum of its header height, footer height, and total height of the list items. If the **listDirection** attribute of the parent **\** component is set to **Axis.Horizontal**, the **width** attribute of the **\** component cannot be set. The width of a **\** component is the sum of its header width, footer width, and total width of the list items. +If the **listDirection** attribute of the parent **\** component is set to **Axis.Vertical**, the **height** attribute of the **\** component is fixed at the sum of the component's header height, footer height, and total height of the list items. If the **listDirection** attribute of the parent **\** component is set to **Axis.Horizontal**, the **width** attribute of the **\** component is fixed at the sum of the component's header width, footer width, and total width of the list items. -The list items in the **\** component cannot be edited, selected, or dragged. That is, the **editable** and **selectable** attributes of these list items do not take effect. +The list items in the **\** component cannot be edited or dragged. That is, their **editable** attribute does not take effect. ## Child Components @@ -27,8 +27,8 @@ ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: | ------------------- | --------------------------------------------------- | ---- | ------------------------------------------------------------ | | header | [CustomBuilder](ts-types.md#custombuilder8) | No | Header of the list item group. | | footer | [CustomBuilder](ts-types.md#custombuilder8) | No | Footer of the list item group. | -| space | number \| string | No | Spacing between list items. This parameter is valid only between list items, but not between a header and list item or between a footer and list item.| -| style10+ | [ListItemGroupStyle](#listitemgroupstyle10) | No | Style of the list item group.
Default value: **ListItemGroupStyle.NONE**
If this parameter is set to **ListItemGroupStyle.NONE**, no style is applied.
If this parameter is set to **ListItemGroupStyle.CARD**, the default card style is applied, but only when **ListItemStyle.CARD** is set for [\](ts-container-listitem.md).
It can be in focus, hover, press, selected, or disable style depending on the state.
**NOTE**
In the default card style, the list has its **listDirection** attribute fixed at **Axis.Vertical** and **alignListItem** attribute at **ListItemAlign.Center**; the **header** and **footer** parameters cannot be set for the list item group. | +| space | number \| string | No | Spacing between list items. This parameter is valid only between list items, but not between the header and list item or between the footer and list item.| +| style10+ | [ListItemGroupStyle](#listitemgroupstyle10) | No | Style of the list item group.
Default value: **ListItemGroupStyle.NONE**
If this parameter is set to **ListItemGroupStyle.NONE**, no style is applied.
If this parameter is set to **ListItemGroupStyle.CARD**, the default card style is applied, but only when **ListItemStyle.CARD** is set for [\](ts-container-listitem.md).
In the default card style, list items can be in focus, hover, press, selected, or disable style depending on their state.
**NOTE**
In the default card style, the parent **\** component has its **listDirection** attribute fixed at **Axis.Vertical** and its **alignListItem** attribute defaulted at **ListItemAlign.Center**; the **header** and **footer** parameters cannot be set for the list item group. | ## Attributes @@ -45,7 +45,7 @@ ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: > **NOTE** > -> The **\** component does not support the universal attribute **[aspectRatio](ts-universal-attributes-layout-constraints.md)**. +> The **\** component does not support the universal attribute [aspectRatio](ts-universal-attributes-layout-constraints.md). > > If the main axis of **\** runs in the vertical direction, the [height](ts-universal-attributes-size.md) setting does not take effect. > @@ -54,6 +54,8 @@ ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: ## Example +### Example 1 + ```ts // xxx.ets @Entry @@ -119,3 +121,55 @@ struct ListItemGroupExample { ``` ![en-us_image_0000001219864159](figures/en-us_image_listitemgroup.gif) + +### Example 2 + +```ts +// xxx.ets +@Entry +@Component +struct ListItemGroupExample2 { + private arr: any = [ + { + style:ListItemGroupStyle.CARD, + itemStyles:[ListItemStyle.CARD, ListItemStyle.CARD, ListItemStyle.CARD] + }, + { + style:ListItemGroupStyle.CARD, + itemStyles:[ListItemStyle.CARD, ListItemStyle.CARD, ListItemStyle.NONE] + }, + { + style:ListItemGroupStyle.CARD, + itemStyles:[ListItemStyle.CARD, ListItemStyle.NONE, ListItemStyle.CARD] + }, + { + style:ListItemGroupStyle.NONE, + itemStyles:[ListItemStyle.CARD, ListItemStyle.CARD, ListItemStyle.NONE] + } + ] + build() { + Column() { + List({ space: "4vp", initialIndex: 0 }) { + ForEach(this.arr, (item,index) => { + ListItemGroup({ style:item.style }) { + ForEach(item.itemStyles, (itemStyle,itemIndex) => { + ListItem({style:itemStyle}) { + Text("Item "+(itemIndex+1)+" in group "+(index+1)) + .width("100%") + .textAlign(TextAlign.Center) + } + }, item => item) + } + }) + } + .width('100%') + .multiSelectable(true) + .backgroundColor(0xDCDCDC) // List in light blue + } + .width('100%') + .padding({ top: 5 }) + } +} + +``` +![ListItemGroupStyle](figures/listItemGroup2.jpeg)