1# ListItemGroup 2 3The **\<ListItemGroup>** component is used to display list item groups. It must be used with the **[\<List>](ts-container-list.md)** component and, if not otherwise specified, takes up the entire width of the **\<List>**. 4 5> **NOTE** 6> 7> - This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version. 8> - This component can be used only as a child of [\<List>](ts-container-list.md). 9 10## Usage Guidelines 11 12If 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. 13 14The list items in the **\<ListItemGroup>** component cannot be edited or dragged. That is, their **editable** attribute does not take effect. 15 16## Child Components 17 18This component supports the **[\<ListItem>](ts-container-listitem.md)** child component. 19 20 21## APIs 22 23ListItemGroup(options?: ListItemGroupOptions) 24 25**Parameters** 26 27| Name| Type| Mandatory| Description| 28| -------- | -------- | -------- | -------- | 29| options | [ListItemGroupOptions](#listitemgroupoptions)| Yes| Parameters of the list item group.| 30 31## ListItemGroupOptions 32 33| Name | Type | Mandatory| Description | 34| ------------------- | --------------------------------------------------- | ---- | ------------------------------------------------------------ | 35| header | [CustomBuilder](ts-types.md#custombuilder8) | No | Header of the list item group.<br>**NOTE**<br>Only one child component can be placed. | 36| footer | [CustomBuilder](ts-types.md#custombuilder8) | No | Footer of the list item group.<br>**NOTE**<br>Only one child component can be placed. | 37| 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.| 38| 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.<br>If **ListItemGroupStyle.CARD** is set and **ListItemStyle.CARD** is not, only some card styles and functions are available.| 39 40## Attributes 41 42| Name| Type| Description| 43| -------- | -------- | -------- | 44| 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 | Style of the divider for the list items. By default, there is no divider.<br>- **strokeWidth**: stroke width of the divider.<br>- **color**: color of the divider.<br>- **startMargin**: distance between the divider and the start of the list.<br>- **endMargin**: distance between the divider and the end of the list.<br>**strokeWidth**, **startMargin**, and **endMargin** cannot be set in percentage.| 45 46## ListItemGroupStyle<sup>10+</sup> 47 48| Name| Value | Description | 49| ---- | ---- | ------------------ | 50| NONE | 0 | No style. | 51| CARD | 1 | Default card style.| 52 53> **NOTE** 54> 55> The **\<ListItemGroup>** component does not support the universal attribute [aspectRatio](ts-universal-attributes-layout-constraints.md). 56> 57> If the main axis of **\<ListItemGroup>** runs in the vertical direction, the [height](ts-universal-attributes-size.md) setting does not take effect. 58> 59> If the main axis of **\<ListItemGroup>** runs in the horizontal direction, the [width](ts-universal-attributes-size.md) setting does not take effect. 60 61 62## Example 63 64### Example 1 65 66```ts 67// xxx.ets 68@Entry 69@Component 70struct ListItemGroupExample { 71 private timeTable: TimeTable[] = [ 72 { 73 title: 'Monday', 74 projects: ['Language', 'Math', 'English'] 75 }, 76 { 77 title: 'Tuesday', 78 projects: ['Physics', 'Chemistry', 'Biologics'] 79 }, 80 { 81 title: 'Wednesday', 82 projects: ['History', 'Geography', 'Politics'] 83 }, 84 { 85 title: 'Thursday', 86 projects: ['Art', 'Music', 'Sports'] 87 } 88 ] 89 90 @Builder 91 itemHead(text: string) { 92 Text(text) 93 .fontSize(20) 94 .backgroundColor(0xAABBCC) 95 .width("100%") 96 .padding(10) 97 } 98 99 @Builder 100 itemFoot(num: number) { 101 Text(''Total lessons:'+ num") 102 .fontSize(16) 103 .backgroundColor(0xAABBCC) 104 .width("100%") 105 .padding(5) 106 } 107 108 build() { 109 Column() { 110 List({ space: 20 }) { 111 ForEach(this.timeTable, (item: TimeTable) => { 112 ListItemGroup({ header: this.itemHead(item.title), footer: this.itemFoot(item.projects.length) }) { 113 ForEach(item.projects, (project: string) => { 114 ListItem() { 115 Text(project) 116 .width("100%") 117 .height(100) 118 .fontSize(20) 119 .textAlign(TextAlign.Center) 120 .backgroundColor(0xFFFFFF) 121 } 122 }, (item: string) => item) 123 } 124 .divider ({ strokeWidth: 1,color:Color.Blue }) // Divider between lines 125 }) 126 } 127 .width('90%') 128 .sticky(StickyStyle.Header | StickyStyle.Footer) 129 .scrollBar(BarState.Off) 130 }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) 131 } 132} 133 134interface TimeTable { 135 title: string; 136 projects: string[]; 137} 138``` 139 140 141 142### Example 2 143 144```ts 145// xxx.ets 146@Entry 147@Component 148struct ListItemGroupExample2 { 149 private arr: ArrObject[] = [ 150 { 151 style: ListItemGroupStyle.CARD, 152 itemStyles: [ListItemStyle.CARD, ListItemStyle.CARD, ListItemStyle.CARD] 153 }, 154 { 155 style: ListItemGroupStyle.CARD, 156 itemStyles: [ListItemStyle.CARD, ListItemStyle.CARD, ListItemStyle.NONE] 157 }, 158 { 159 style: ListItemGroupStyle.CARD, 160 itemStyles: [ListItemStyle.CARD, ListItemStyle.NONE, ListItemStyle.CARD] 161 }, 162 { 163 style: ListItemGroupStyle.NONE, 164 itemStyles: [ListItemStyle.CARD, ListItemStyle.CARD, ListItemStyle.NONE] 165 } 166 ] 167 168 build() { 169 Column() { 170 List({ space: "4vp", initialIndex: 0 }) { 171 ForEach(this.arr, (item: ArrObject, index?: number) => { 172 ListItemGroup({ style: item.style }) { 173 ForEach(item.itemStyles, (itemStyle: number, itemIndex?: number) => { 174 ListItem({ style: itemStyle }) { 175 if (index != undefined && itemIndex != undefined) { 176 Text("Item" + (itemIndex + 1) +" in group" + (index + 1) +" ") 177 .width("100%") 178 .textAlign(TextAlign.Center) 179 } 180 } 181 }, (item: string) => item) 182 } 183 }) 184 } 185 .width('100%') 186 .multiSelectable(true) 187 .backgroundColor(0xDCDCDC) 188 } 189 .width('100%') 190 .padding({ top: 5 }) 191 } 192} 193 194interface ArrObject { 195 style: number; 196 itemStyles: number[]; 197} 198``` 199 200
