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