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