1# ComposeListItem 2 3 4The **ComposeListItem** component is a container that presents a series of items arranged in a column with the same width. You can use it to present data of the same type in a multiple and coherent row style, for example, images or text. 5 6 7> **NOTE** 8> 9> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. 10 11 12## Modules to Import 13 14``` 15import { ComposeListItem } from "@kit.ArkUI" 16``` 17 18 19## Child Components 20 21Not supported 22 23## Attributes 24The [universal attributes](ts-universal-attributes-size.md) are supported. 25 26 27## ComposeListItem 28 29ComposeListItem({contentItem?: ContentItem, operateItem?: OperateItem}) 30 31**Decorator**: @Component 32 33**System capability**: SystemCapability.ArkUI.ArkUI.Full 34 35 36| Name| Type| Mandatory| Decorator| Description| 37| -------- | -------- | -------- | -------- | -------- | 38| contentItem | [ContentItem](#contentitem) | No| \@Prop | Elements on the left and in the center.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 39| operateItem | [OperateItem](#operateitem) | No| \@Prop | Element on the right.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 40 41## ContentItem 42 43**System capability**: SystemCapability.ArkUI.ArkUI.Full 44 45 46| Name| Type| Mandatory| Description| 47| -------- | -------- | -------- | -------- | 48| iconStyle | [IconType](#icontype) | No| Icon style of the element on the left.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 49| icon | [ResourceStr](ts-types.md#resourcestr) | No| Icon resource of the element on the left.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 50| primaryText | [ResourceStr](ts-types.md#resourcestr) | No| Primary text of the element in the center.<br>**Text processing rules**: Text will wrap to a new line when it exceeds the length limit.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 51| secondaryText | [ResourceStr](ts-types.md#resourcestr) | No| Secondary text of the element in the center.<br>**Text processing rules**: Text will wrap to a new line when it exceeds the length limit.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 52| description | [ResourceStr](ts-types.md#resourcestr) | No| Description of the element in the center.<br>**Text processing rules**: Text will wrap to a new line when it exceeds the length limit.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 53 54## IconType 55 56**Atomic service API**: This API can be used in atomic services since API version 11. 57 58**System capability**: SystemCapability.ArkUI.ArkUI.Full 59 60| Name| Value| Description| 61| -------- | -------- | -------- | 62| BADGE | 1 | Badge with an icon size of 8 x 8 vp.| 63| NORMAL_ICON | 2 | Small icon with an icon size of 16 x 16 vp.| 64| SYSTEM_ICON | 3 | System icon with an icon size of 24 x 24 vp.| 65| HEAD_SCULPTURE | 4 | Profile picture with an icon size of 40 x 40 vp.| 66| APP_ICON | 5 | Application icon with an icon size of 64 x 64 vp.| 67| PREVIEW | 6 | Preview image with an icon size of 96 x 96 vp.| 68| LONGITUDINAL | 7 | Icon with a horizontal special ratio (width is greater than height), keeping the longest side at 96 vp.| 69| VERTICAL | 8 | Icon with a vertical special ratio (height is greater than width), keeping the longest side at 96 vp.| 70 71## OperateItem 72 73**Atomic service API**: This API can be used in atomic services since API version 11. 74 75**System capability**: SystemCapability.ArkUI.ArkUI.Full 76 77| Name| Type| Mandatory| Description| 78| -------- | -------- | -------- | -------- | 79| arrow | [OperateIcon](#operateicon) | No| Arrow with a size of 12 x 24 vp.| 80| icon | [OperateIcon](#operateicon) | No| First icon with a size of 24 x 24 vp.| 81| subIcon | [OperateIcon](#operateicon) | No| Second icon with a size of 24 x 24 vp.| 82| button | [OperateButton](#operatebutton) | No| Button.| 83| switch | [OperateCheck](#operatecheck) | No| Switch.| 84| checkbox | [OperateCheck](#operatecheck) | No| Check box with a size of 24 x 24 vp.| 85| radio | [OperateCheck](#operatecheck) | No| Radio button with a size of 24 x 24 vp.| 86| image | [ResourceStr](ts-types.md#resourcestr) | No| Image with a size of 48 x 48 vp.| 87| text | [ResourceStr](ts-types.md#resourcestr) | No| Text.| 88 89## OperateIcon 90 91**Atomic service API**: This API can be used in atomic services since API version 11. 92 93**System capability**: SystemCapability.ArkUI.ArkUI.Full 94 95| Name| Type| Mandatory| Description | 96| -------- | -------- | -------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 97| value | [ResourceStr](ts-types.md#resourcestr) | Yes| Resource of the icon or arrow on the right. | 98| action | ()=>void | No| Click event of the icon or arrow on the right. | 99 100## OperateButton 101 102**Atomic service API**: This API can be used in atomic services since API version 11. 103 104**System capability**: SystemCapability.ArkUI.ArkUI.Full 105 106| Name| Type| Mandatory| Description| 107| -------- | -------- | -------- | -------- | 108| text | [ResourceStr](ts-types.md#resourcestr) | No| Text of the button on the right.| 109 110## OperateCheck 111 112**Atomic service API**: This API can be used in atomic services since API version 11. 113 114**System capability**: SystemCapability.ArkUI.ArkUI.Full 115 116| Name| Type| Mandatory| Description | 117| -------- | -------- | -------- |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 118| isCheck | boolean | No| Whether the switch, check box, or radio button on the right is selected.<br> Default value: **false**<br> **true**: selected<br> **false**: not selected | 119| onChange | (value: boolean)=>void | No| Callback invoked when the selected state of the switch, check box, or radio button on the right is changed.<br> **true**: from not selected to selected<br> **false**: from selected to not selected | 120 121## Events 122The [universal events](ts-universal-events-click.md) are supported. 123 124## Example 125This example demonstrates how to create a simple list item that includes a primary text, a secondary text, a description, and a button with accompanying text on the right. 126```ts 127// This example demonstrates the basic functionality of the component, including the use of elements on the left and right. 128import { IconType, ComposeListItem, promptAction } from '@kit.ArkUI'; 129 130@Entry 131@Component 132struct ComposeListItemExample { 133 build() { 134 Column() { 135 List() { 136 ListItem() { 137 ComposeListItem({ 138 contentItem: ({ 139 iconStyle: IconType.NORMAL_ICON, 140 icon: $r('sys.media.ohos_app_icon'), 141 primaryText: 'Two-line list', 142 secondaryText: 'Secondary text', 143 description: 'Description' 144 }), 145 operateItem: ({ 146 icon: { 147 value: $r('sys.media.ohos_app_icon'), 148 action: () => { 149 promptAction.showToast({ message: 'icon' }); 150 } }, 151 text: 'Text on the right' 152 }) 153 }) 154 } 155 } 156 } 157 } 158} 159``` 160 161 162
