1# list-item-group
2
3>  **NOTE**
4>
5>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
6
7**\<list-item-group>** is a child component of [\<list>](js-components-container-list.md) and is used to group items in a list. By default, the width of **\<list-item-group>** is equal to that of **\<list>**.
8
9
10- To use this component, you must set the **columns** attribute of the parent component **\<list>** to **1**. Otherwise, this component is not displayed.
11
12- You can customize the width of each **\<list-item-group>**. However, if you retain the default value **stretch** of **align-items** for the parent component **\<list>**, the width of **\<list-item-group>** is equal to that of **\<list>**. To make the customized **\<list-item-group>** width take effect, set **align-items** to other values rather than **stretch**.
13
14## Required Permissions
15
16None
17
18
19## Child Components
20
21Only the [\<list-item>](js-components-container-list-item.md) child component is supported.
22
23
24## Attributes
25
26In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported.
27
28| Name  | Type    | Default Value    | Mandatory  | Description                                      |
29| ---- | ------ | ------- | ---- | ---------------------------------------- |
30| type | string | default | No   | Type of the list-item-group. A list supports multiple list-item-group types. The same type of list-item-groups must have the same view layout after being rendered. If the type is fixed, replace the **if** attribute with the **show** attribute to ensure that the view layout remains unchanged.|
31
32>  **NOTE**
33>
34>  The universal attribute **id** is used to identify a group. The input parameters of related functions and event information in the list also use **id** to uniquely identify a group.
35
36
37## Styles
38
39In addition to the [universal styles](js-components-common-styles.md), the following styles are supported.
40
41| Name             | Type    | Default Value       | Mandatory  | Description                                      |
42| --------------- | ------ | ---------- | ---- | ---------------------------------------- |
43| flex-direction  | string | row        | No   | Main axis direction of the flex container, which defines how items are placed in the container. Available values are as follows:<br>- **column**: Items are placed vertically from top to bottom.<br>- **row**: Items are placed horizontally from left to right.|
44| justify-content | string | flex-start | No   | How items are aligned along the main axis of the flex container. Available values are as follows:<br>- **flex-start**: Items are packed toward the start edge of the container along the main axis.<br>- **flex-end**: Items are packed toward the end edge of the container along the main axis.<br>- **center**: Items are packed toward the center of the container along the main axis.<br>- **space-between**: Items are positioned with space between the rows.<br>- **space-around**: Items are positioned with space before, between, and after the rows.<br>- **space-evenly**<sup>5+</sup>: Items are distributed within the container along the main axis, with even space between each two.|
45
46
47## Events
48
49In addition to the [universal events](js-components-common-events.md), the following events are supported.
50
51| Name           | Parameter                                | Description                                      |
52| ------------- | ---------------------------------- | ---------------------------------------- |
53| groupclick    | { groupid: string } | Triggered when a group is clicked.<br>**groupid**: ID of the group that is clicked.    |
54| groupcollapse | { groupid: string } | Triggered when a group is collapsed.<br>**groupid**: ID of the group collapsed.<br>If the parameter is not carried or **groupid** is left empty, all groups are collapsed.|
55| groupexpand   | { groupid: string } | Triggered when a group is expanded.<br>**groupid**: ID of the group expanded.<br>If the parameter is not carried or **groupid** is left empty, all groups are expanded.|
56
57
58## Methods
59
60The [universal methods](js-components-common-methods.md) are supported.
61
62
63## Example
64
65```html
66<!-- xxx.hml -->
67<div class="doc-page">
68  <list style="width: 100%;" id="mylist">
69    <list-item class="top-list-item" clickeffect="false">
70      <div class="item-div">
71        <div class="item-child">
72          <button type="capsule" value="Collapse first" onclick="collapseOne"></button>
73          <button type="capsule" value="Expand first" onclick="expandOne"></button>
74        </div>
75        <div class="item-child">
76          <button type="capsule" value="Collapse all" onclick="collapseAll"></button>
77          <button type="capsule" value="Expand all" onclick="expandAll"></button>
78        </div>
79      </div>
80    </list-item>
81    <list-item-group for="listgroup in list" id="{{listgroup.value}}" ongroupcollapse="collapse" ongroupexpand="expand">
82      <list-item type="item" style="background-color:#FFF0F5;height:95px;">
83        <div class="item-group-child">
84          <text>One---{{listgroup.value}}</text>
85        </div>
86      </list-item>
87      <list-item type="item" style="background-color: #87CEFA;height:145px;" primary="true">
88        <div class="item-group-child">
89          <text>Primary---{{listgroup.value}}</text>
90        </div>
91      </list-item>
92    </list-item-group>
93  </list>
94</div>
95```
96
97```css
98/* xxx.css */
99.doc-page {
100  flex-direction: column;
101}
102.top-list-item {
103  width:100%;
104  background-color:#D4F2E7;
105}
106.item-div {
107  flex-direction:column;
108  align-items:center;
109  justify-content:space-around;
110  height:240px;
111}
112.item-child {
113  width:100%;
114  height:60px;
115  justify-content:space-around;
116  align-items:center;
117}
118.item-group-child {
119  justify-content: center;
120  align-items: center;
121  width:100%;
122}
123```
124
125```js
126// xxx.js
127import promptAction from '@ohos.promptAction';
128export default {
129    data: {
130        direction: 'column',
131        list: [],
132        listAdd: []
133    },
134    onInit() {
135        this.list = []
136        this.listAdd = []
137        for (var i = 1; i <= 3; i++) {
138            var dataItem = {
139                value: 'GROUP' + i,
140            };
141            this.list.push(dataItem);
142        }
143    },
144    collapseOne(e) {
145        this.$element('mylist').collapseGroup({
146            groupid: 'GROUP1'
147        })
148    },
149    expandOne(e) {
150        this.$element('mylist').expandGroup({
151            groupid: 'GROUP1'
152        })
153    },
154    collapseAll(e) {
155        this.$element('mylist').collapseGroup({
156            groupid: ''
157        })
158    },
159    expandAll(e) {
160        this.$element('mylist').expandGroup({
161            groupid: ''
162        })
163    },
164    collapse(e) {
165        promptAction.showToast({
166            message: 'Close ' + e.groupid
167        })
168    },
169    expand(e) {
170        promptAction.showToast({
171            message: 'Open ' + e.groupid
172        })
173    }
174}
175
176
177
178```
179
180![list6](figures/list6.gif)
181