1# GridObjectSortComponent 2 3 4**GridObjectSortComponent** is a grid object organizer that you can use to edit, drag to sort, add, and delete grid objects. 5 6 7> **NOTE** 8> 9> This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version. 10> 11> This component is not supported on wearables. 12 13 14## Modules to Import 15 16```ts 17import { GridObjectSortComponent, GridObjectSortComponentItem, GridObjectSortComponentOptions, GridObjectSortComponentType , SymbolGlyphModifier } from '@kit.ArkUI'; 18``` 19 20## Child Components 21 22Not supported 23 24## Attributes 25 26The [universal attributes](ts-component-general-attributes.md) are not supported. 27 28## GridObjectSortComponent 29 30GridObjectSortComponent({options: GridObjectSortComponentOptions, dataList: Array\<GridObjectSortComponentItem>, onSave: (select: Array\<GridObjectSortComponentItem>, unselect: Array\<GridObjectSortComponentItem>) => void, onCancel: () => void }) 31 32Creates a **GridObjectSortComponent** component. 33 34**Decorator**: @Component 35 36**Atomic service API**: This API can be used in atomic services since API version 12. 37 38**System capability**: SystemCapability.ArkUI.ArkUI.Full 39 40 41| Name | Type | Mandatory| Decorator| Description | 42| -------- | -------------------------------- | ---------- | ---- | ---- | 43| options | [GridObjectSortComponentOptions](#gridobjectsortcomponentoptions) | Yes | @Prop | Component configuration.| 44| dataList | Array<[GridObjectSortComponentItem](#gridobjectsortcomponentitem)> | Yes | - | Data to pass. The maximum data length is 50 characters. If it is exceeded, only the first 50 characters are used.| 45| onSave | (select: Array<[GridObjectSortComponentItem](#gridobjectsortcomponentitem)>, unselect: Array<[GridObjectSortComponentItem](#gridobjectsortcomponentitem)>) => void | Yes| - | Callback invoked when changes are saved. The data after the changes is returned.| 46| onCancel | () => void | Yes| - | Callback invoked when changes are canceled.| 47 48## GridObjectSortComponentOptions 49 50Provides configuration options for the **GridObjectSortComponent** component. 51 52**Atomic service API**: This API can be used in atomic services since API version 12. 53 54**System capability**: SystemCapability.ArkUI.ArkUI.Full 55 56| Name | Type | Mandatory| Description | 57| -------------- | ------------------------- | ---- |-------------------------------------------------------------| 58| type | [GridObjectSortComponentType](#gridobjectsortcomponenttype) | No | Component display type: text only or image with text.<br>Default value: **GridObjectSortComponentType.text**. | 59| imageSize | number \| [Resource](ts-types.md#resource) | No | Image size, in vp.<br>The value must be greater than or equal to 0.<br>Default value: **56vp**. | 60| normalTitle | [ResourceStr](ts-types.md#resourcestr) | No | Title displayed in the non-editing state.<br>Default value: **Channel** | 61| showAreaTitle | [ResourceStr](ts-types.md#resourcestr) | No | First subtitle of the display area.<br>Default value: **Drag to sort** | 62| addAreaTitle | [ResourceStr](ts-types.md#resourcestr) | No | Second subtitle of the display area.<br>Default value: **Tap to add** | 63| editTitle | [ResourceStr](ts-types.md#resourcestr) | No | Title displayed in the editing state.<br>Default value: **Edit** | 64 65## GridObjectSortComponentType 66 67Enumerates display types for nodes in the **GridObjectSortComponent** component. 68 69**Atomic service API**: This API can be used in atomic services since API version 12. 70 71**System capability**: SystemCapability.ArkUI.ArkUI.Full 72 73| Name | Value | Description | 74| -------- | ----- | -------------- | 75| IMAGE_TEXT | 'image_text' | Image with text.| 76| TEXT | 'text' | Text only. | 77 78## GridObjectSortComponentItem 79 80Provides data item configuration for the **GridObjectSortComponent** component. 81 82**System capability**: SystemCapability.ArkUI.ArkUI.Full 83 84| Name | Type | Mandatory| Description | 85| -------- | -------------------------------------- | ---- |--------------------------------------------------------------------------------------------------------------------------| 86| id | number \| string | Yes | Data ID, which must be unique.<br>The default value is an empty string.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 87| text | [ResourceStr](ts-types.md#resourcestr) | Yes | Text information.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 88| selected | boolean | Yes | Whether the grid object has been added. The value **true** means that the grid object has been added, and **false** means the opposite.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 89| url | [ResourceStr](ts-types.md#resourcestr) | No | URL of the image. Required when **GridObjectSortComponentType** is set to **IMAGE_TEXT**.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 90| symbolStyle<sup>18+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Symbol resource of the image. Required when **GridObjectSortComponentType** is set to **IMAGE_TEXT**. The priority of this property is higher than that of **url**.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 91| order | number | Yes | Sequence number.<br>The value must be greater than or equal to 0.<br>Default value: **0**.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 92 93## Events 94 95The [universal events](ts-component-general-events.md) are not supported. 96 97## Example 98This example illustrates the basic usage of the **GridObjectSortComponent** component, involving component configuration initialization, data initialization, and the use of the save and cancel APIs. 99 100```ts 101import { GridObjectSortComponent, GridObjectSortComponentItem, GridObjectSortComponentOptions, GridObjectSortComponentType, SymbolGlyphModifier } from '@kit.ArkUI'; 102 103@Entry 104@Component 105struct Index { 106 // Initialize the component data. 107 @State dataList: GridObjectSortComponentItem[] = [ 108 { 109 id: 0, 110 url: $r('sys.media.ohos_save_button_filled'), 111 text: 'Download', 112 selected: true, 113 order: 3 114 }, 115 { 116 id: 1, 117 url: $r('sys.media.ohos_ic_public_web'), 118 text: 'Network', 119 selected: true, 120 order: 9 121 }, 122 { 123 id: 2, 124 url: $r('sys.media.ohos_ic_public_video'), 125 text: 'Video', 126 selected: false, 127 order: 1 128 }, 129 { 130 id: 3, 131 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.record_circle')), 132 text: 'Recording', 133 selected: false, 134 order: 4 135 } 136 ] 137 138 // Initialize the component configuration information. 139 @State option: GridObjectSortComponentOptions = { 140 type: GridObjectSortComponentType.IMAGE_TEXT, 141 imageSize: 45, 142 normalTitle: 'Menu', 143 editTitle: 'Edit', 144 showAreaTitle: 'Drag to sort', 145 addAreaTitle: 'Touch to add' 146 } 147 148 build() { 149 Column() { 150 GridObjectSortComponent({ 151 options: this.option, 152 dataList: this.dataList, 153 // Callback invoked when changes are saved. The data after the changes is returned. 154 onSave: ( 155 select: Array<GridObjectSortComponentItem>, 156 unselect: Array<GridObjectSortComponentItem> 157 ) => { 158 // save ToDo 159 }, 160 // Callback invoked when changes are canceled. 161 onCancel: () =>{ 162 // cancel ToDo 163 } 164 }) 165 } 166 } 167} 168``` 169 170 171
