Update docs (20761)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

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.<br>Default value: **56vp**<br>**NOTE**<br>This parameter cannot be set in percentage.<br>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.<br>**NOTE**<br> 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.<br>Default value: **56vp**<br>**NOTE**<br>This parameter cannot be set in percentage.<br>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.<br>**NOTE**<br> 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.<br>Default value: **true**|
 ## ListItemOptions<sup>10+</sup>
 
 | 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) =&gt; void)<sup>8+</sup> | Triggered when the selected state of the **\<ListItem>** changes.<br>**isSelected**: Returns **true** if the **\<ListItem>** 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)

en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md

@@ -8,9 +8,9 @@ The **\<ListItemGroup>** component is used to display list item groups. It must
 
 ## Usage Guidelines
 
-If the **listDirection** attribute of the parent **\<List>** component is set to **Axis.Vertical**, the **height** attribute of the **\<ListItemGroup>** component cannot be set. The height of a **\<ListItemGroup>** component is the sum of its header height, footer height, and total height of the list items. If the **listDirection** attribute of the parent **\<List>** component is set to **Axis.Horizontal**, the **width** attribute of the **\<ListItemGroup>** component cannot be set. The width of a **\<ListItemGroup>** component is the sum of its header width, footer width, and total width of the list items.
+If the **listDirection** attribute of the parent **\<List>** component is set to **Axis.Vertical**, the **height** attribute of the **\<ListItemGroup>** 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 **\<List>** component is set to **Axis.Horizontal**, the **width** attribute of the **\<ListItemGroup>** 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 **\<ListItemGroup>** 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 **\<ListItemGroup>** 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.|
-| style<sup>10+</sup> | [ListItemGroupStyle](#listitemgroupstyle10) | No  | Style of the list item group.<br>Default value: **ListItemGroupStyle.NONE**<br>If this parameter is set to **ListItemGroupStyle.NONE**, no style is applied.<br>If this parameter is set to **ListItemGroupStyle.CARD**, the default card style is applied, but only when **ListItemStyle.CARD** is set for [\<ListItem>](ts-container-listitem.md).<br>It can be in focus, hover, press, selected, or disable style depending on the state.<br>**NOTE**<br>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.|
+| style<sup>10+</sup> | [ListItemGroupStyle](#listitemgroupstyle10) | No  | Style of the list item group.<br>Default value: **ListItemGroupStyle.NONE**<br>If this parameter is set to **ListItemGroupStyle.NONE**, no style is applied.<br>If this parameter is set to **ListItemGroupStyle.CARD**, the default card style is applied, but only when **ListItemStyle.CARD** is set for [\<ListItem>](ts-container-listitem.md).<br>In the default card style, list items can be in focus, hover, press, selected, or disable style depending on their state.<br>**NOTE**<br>In the default card style, the parent **\<List>** 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 **\<ListItemGroup>** component does not support the universal attribute **[aspectRatio](ts-universal-attributes-layout-constraints.md)**.
+> The **\<ListItemGroup>** component does not support the universal attribute [aspectRatio](ts-universal-attributes-layout-constraints.md).
 >
 > If the main axis of **\<ListItemGroup>** 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)