1# @ohos.arkui.advanced.ComposeListItem (List) 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 "@ohos.arkui.advanced.ComposeListItem" 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.| 42| operateItem | [OperateItem](#operateitem) | No| \@Prop | Element on the right.| 43 44 45## ContentItem 46 47| Name| Type| Mandatory| Description| 48| -------- | -------- | -------- | -------- | 49| iconStyle | [IconType](#icontype) | No| Icon style of the element on the left.| 50| icon | [ResourceStr](ts-types.md#resourcestr) | No| Icon resource of the element on the left.| 51| primaryText | [ResourceStr](ts-types.md#resourcestr) | No| Title of the element in the center. If the length limit is reached, an ellipsis (...) is displayed to represent clipped text.| 52| secondaryText | [ResourceStr](ts-types.md#resourcestr) | No| Subtitle of the element in the center. If the length limit is reached, an ellipsis (...) is displayed to represent clipped text.| 53| description | [ResourceStr](ts-types.md#resourcestr) | No| Description of the element in the center. If the length limit is reached, an ellipsis (...) is displayed to represent clipped text.| 54 55 56## IconType 57 58| Name| Value| Description| 59| -------- | -------- | -------- | 60| BADGE | 1 | The icon on the left is a badge, in the size of 8 x 8 dp.| 61| NORMAL_ICON | 2 | The icon on the left is a small icon, in the size of 16 x 16 dp.| 62| SYSTEM_ICON | 3 | The icon on the left is a system icon, in the size of 24 x 24 dp.| 63| HEAD_SCULPTURE | 4 | The icon on the left is a profile picture, in the size of 40 x 40 dp.| 64| APP_ICON | 5 | The icon on the left is an application icon, in the size of 64 x 64 dp.| 65| PREVIEW | 6 | The icon on the left is a preview image, in the size of 96 x 96 dp.| 66| LONGITUDINAL | 7 | The icon on the left uses an aspect ratio where width is greater than height, with the longest edge being 96 dp.| 67| VERTICAL | 8 | The icon on the left uses an aspect ratio where height is greater than width, with the longest edge being 96 dp.| 68 69 70## OperateItem 71 72| Name| Type| Mandatory| Description| 73| -------- | -------- | -------- | -------- | 74| arrow | [OperateIcon](#operateicon) | No| The element on the right is an arrow, in the size of 12 x 24 dp.| 75| icon | [OperateIcon](#operateicon) | No| First icon of the element on the right, in the size of 24 x 24 dp.| 76| subIcon | [OperateIcon](#operateicon) | No| Second icon of the element on the right, in the size of 24 x 24 dp.| 77| button | [OperateButton](#operatebutton) | No| The element on the right is a button.| 78| switch | [OperateCheck](#operatecheck) | No| The element on the right is a switch.| 79| checkbox | [OperateCheck](#operatecheck) | No| The element on the right is a check box, in the size of 24 x 24 dp.| 80| radio | [OperateCheck](#operatecheck) | No| The element on the right is a radio button, in the size of 24 x 24 dp.| 81| image | [ResourceStr](ts-types.md#resourcestr) | No| The element on the right is an image, in the size of 48 x 48 dp.| 82| text | [ResourceStr](ts-types.md#resourcestr) | No| The element on the right is text.| 83 84 85## OperateIcon 86 87| Name| Type| Mandatory| Description| 88| -------- | -------- | -------- | -------- | 89| value | [ResourceStr](ts-types.md#resourcestr) | Yes| Resource of the icon or arrow on the right.| 90| action | ()=>void | No| Click event of the icon or arrow on the right.| 91 92 93## OperateButton 94 95| Name| Type| Mandatory| Description| 96| -------- | -------- | -------- | -------- | 97| text | [ResourceStr](ts-types.md#resourcestr) | No| Button text on the right.| 98 99 100## OperateCheck 101 102| Name| Type| Mandatory| Description| 103| -------- | -------- | -------- | -------- | 104| 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| 105| 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| 106 107## Events 108The [universal events](ts-universal-events-click.md) are supported. 109 110## Example 111 112```ts 113import { IconType, ComposeListItem } from '@ohos.arkui.advanced.ComposeListItem'; 114import promptAction from '@ohos.promptAction' 115 116@Entry 117@Component 118struct ComposeListItemExample { 119 build() { 120 Column() { 121 List() { 122 ListItem() { 123 ComposeListItem({ 124 contentItem: ({ 125 iconStyle: IconType.NORMAL_ICON, 126 icon: $r('sys.media.ohos_app_icon'), 127 primaryText: 'Two-row list', 128 secondaryText:'Secondary text' 129 }), 130 operateItem: ({ 131 icon: { 132 value: $r('sys.media.ohos_app_icon'), 133 action: () => { 134 promptAction.showToast({ message: 'icon' }) 135 } }, 136 text:'Text on the right' 137 }) 138 }) 139 } 140 } 141 } 142 } 143} 144``` 145 146 147
