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## Usage Guidelines 9If 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. 10 11The 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. 12 13## Child Components 14 15This component supports the **[\<ListItem>](ts-container-listitem.md)** child component. 16 17 18## APIs 19 20ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: number | string}) 21 22**Parameters** 23 24| Name| Type| Mandatory| Description| 25| -------- | -------- | -------- | -------- | 26| header | [CustomBuilder](ts-types.md#custombuilder8) | No| Header of the **\<ListItemGroup>** component.| 27| footer | [CustomBuilder](ts-types.md#custombuilder8) | No| Footer of the **\<ListItemGroup>** component.| 28| 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.| 29 30## Attributes 31 32| Name| Type| Description| 33| -------- | -------- | -------- | 34| 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.| 35 36 37## Example 38 39```ts 40// xxx.ets 41@Entry 42@Component 43struct ListItemGroupExample { 44 private timetable: any = [ 45 { 46 title: 'Monday', 47 projects: ['Language', 'Math', 'English'] 48 }, 49 { 50 title: 'Tuesday', 51 projects: ['Physics', 'Chemistry', 'Biologics'] 52 }, 53 { 54 title: 'Wednesday', 55 projects: ['History', 'Geography', 'Politics'] 56 }, 57 { 58 title: 'Thursday', 59 projects: ['Art', 'Music', 'Sports'] 60 } 61 ] 62 63 @Builder itemHead(text:string) { 64 Text(text) 65 .fontSize(20) 66 .backgroundColor(0xAABBCC) 67 .width("100%") 68 .padding(10) 69 } 70 71 @Builder itemFoot(num:number) { 72 Text(''Total lessons:'+ num") 73 .fontSize(16) 74 .backgroundColor(0xAABBCC) 75 .width("100%") 76 .padding(5) 77 } 78 79 build() { 80 Column() { 81 List({ space: 20 }) { 82 ForEach(this.timetable, (item) => { 83 ListItemGroup({ header:this.itemHead(item.title), footer:this.itemFoot(item.projects.length) }) { 84 ForEach(item.projects, (project) => { 85 ListItem() { 86 Text(project) 87 .width("100%").height(100).fontSize(20) 88 .textAlign(TextAlign.Center).backgroundColor(0xFFFFFF) 89 } 90 }, item => item) 91 } 92 .borderRadius(20) 93 .divider ({ strokeWidth: 1,color:Color.Blue }) // Divider between lines 94 }) 95 } 96 .width('90%') 97 .sticky(StickyStyle.Header|StickyStyle.Footer) 98 }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) 99 } 100} 101``` 102 103 104
