1# ComposeListItem 2 3 4The list 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**Parameters** 37 38 39| Name| Type| Mandatory| Decorator| Description| 40| -------- | -------- | -------- | -------- | -------- | 41| 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.| 42| 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.| 43 44## ContentItem 45 46 47| Name| Type| Mandatory| Description| 48| -------- | -------- | -------- | -------- | 49| 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.| 50| 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.| 51| primaryText | [ResourceStr](ts-types.md#resourcestr) | No| Primary text of the element in the center.<br>**Text display rule**: Only one line of text is displayed, with overflowing content shown as an ellipsis (...).<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 52| secondaryText | [ResourceStr](ts-types.md#resourcestr) | No| Secondary text of the element in the center.<br>**Text display rule**: Only one line of text is displayed, with overflowing content shown as an ellipsis (...).<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 53| description | [ResourceStr](ts-types.md#resourcestr) | No| Description of the element in the center.<br>**Text display rule**: Only one line of text is displayed, with overflowing content shown as an ellipsis (...).<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 54 55## IconType 56 57**Atomic service API**: This API can be used in atomic services since API version 11. 58 59| Name| Value| Description| 60| -------- | -------- | -------- | 61| BADGE | 1 | The icon on the left is a badge, in the size of 8 \* 8 dp.| 62| NORMAL_ICON | 2 | The icon on the left is a small icon, in the size of 16 \* 16 dp.| 63| SYSTEM_ICON | 3 | The icon on the left is a system icon, in the size of 24 \* 24 dp.| 64| HEAD_SCULPTURE | 4 | The icon on the left is a profile picture, in the size of 40 \* 40 dp.| 65| APP_ICON | 5 | The icon on the left is an application icon, in the size of 64 \* 64 dp.| 66| PREVIEW | 6 | The icon on the left is a preview image, in the size of 96 \* 96 dp.| 67| LONGITUDINAL | 7 | The icon on the left uses an aspect ratio where width is greater than height, with the longest edge being 96 dp.| 68| VERTICAL | 8 | The icon on the left uses an aspect ratio where height is greater than width, with the longest edge being 96 dp.| 69 70## OperateItem 71 72**Atomic service API**: This API can be used in atomic services since API version 11. 73 74| Name| Type| Mandatory| Description| 75| -------- | -------- | -------- | -------- | 76| arrow | [OperateIcon](#operateicon) | No| The element on the right is an arrow, in the size of 12 x 24 dp.| 77| icon | [OperateIcon](#operateicon) | No| First icon of the element on the right, in the size of 24 x 24 dp.| 78| subIcon | [OperateIcon](#operateicon) | No| Second icon of the element on the right, in the size of 24 x 24 dp.| 79| button | [OperateButton](#operatebutton) | No| The element on the right is a button.| 80| switch | [OperateCheck](#operatecheck) | No| The element on the right is a switch.| 81| checkbox | [OperateCheck](#operatecheck) | No| The element on the right is a check box, in the size of 24 x 24 dp.| 82| radio | [OperateCheck](#operatecheck) | No| The element on the right is a radio button, in the size of 24 x 24 dp.| 83| image | [ResourceStr](ts-types.md#resourcestr) | No| The element on the right is an image, in the size of 48 x 48 dp.| 84| text | [ResourceStr](ts-types.md#resourcestr) | No| The element on the right is text.| 85 86## OperateIcon 87 88**Atomic service API**: This API can be used in atomic services since API version 11. 89 90| Name| Type| Mandatory| Description| 91| -------- | -------- | -------- | -------- | 92| value | [ResourceStr](ts-types.md#resourcestr) | Yes| Resource of the icon or arrow on the right.| 93| action | ()=>void | No| Click event of the icon or arrow on the right.| 94 95## OperateButton 96 97**Atomic service API**: This API can be used in atomic services since API version 11. 98 99| Name| Type| Mandatory| Description| 100| -------- | -------- | -------- | -------- | 101| text | [ResourceStr](ts-types.md#resourcestr) | No| Button text on the right.| 102 103## OperateCheck 104 105**Atomic service API**: This API can be used in atomic services since API version 11. 106 107| Name| Type| Mandatory| Description| 108| -------- | -------- | -------- | -------- | 109| 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| 110| 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| 111 112## Events 113The [universal events](ts-universal-events-click.md) are supported. 114 115## Example 116 117```ts 118// This example demonstrates the basic functionality of the component, including the use of elements on the left and right. 119import { IconType, ComposeListItem, promptAction } from '@kit.ArkUI'; 120 121@Entry 122@Component 123struct ComposeListItemExample { 124 build() { 125 Column() { 126 List() { 127 ListItem() { 128 ComposeListItem({ 129 contentItem: ({ 130 iconStyle: IconType.NORMAL_ICON, 131 icon: $r('sys.media.ohos_app_icon'), 132 primaryText: 'Two-line list', 133 secondaryText: 'Secondary text', 134 description: 'Description' 135 }), 136 operateItem: ({ 137 icon: { 138 value: $r('sys.media.ohos_app_icon'), 139 action: () => { 140 promptAction.showToast({ message: 'icon' }); 141 } }, 142 text: 'Text on the right' 143 }) 144 }) 145 } 146 } 147 } 148 } 149} 150``` 151 152
