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>](../arkui-js/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>](../arkui-js/js-components-container-list-item.md)** component is supported. 22 23 24## Attributes 25 26In addition to the [universal attributes](../arkui-js/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> **id** in the universal attributes 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](../arkui-js/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](../arkui-js/js-components-common-events.md), the following events are supported. 50 51| Name | Name | 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 that is 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 that is 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](../arkui-js/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 prompt from '@system.prompt'; 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 }, 157 expandAll(e) { 158 this.$element('mylist').expandGroup() 159 }, 160 collapse(e) { 161 prompt.showToast({ 162 message: 'Close ' + e.groupid 163 }) 164 }, 165 expand(e) { 166 prompt.showToast({ 167 message: 'Open ' + e.groupid 168 }) 169 } 170} 171``` 172 173 174
