1# AlphabetIndexer 2 3The **\<Indexer>** component can create a logically indexed array of items in a container for instant location. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## APIs 16 17AlphabetIndexer(value: {arrayValue: Array<string>, selected: number}) 18 19**Parameters** 20 21| Name| Type| Mandatory| Description| 22| -------- | -------- | -------- | -------- | 23| arrayValue | Array<string> | Yes| Array of strings to be displayed in the alphabetic index bar. The value cannot be null.| 24| selected | number | Yes | Index of the initially selected item. If the value exceeds the value range, the default value 0 is used. | 25 26## Attributes 27 28In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 29 30| Name | Type | Description | 31| ----------------------- | --------------------| ------------------------------------------------------------------| 32| color | [ResourceColor](ts-types.md#resourcecolor) | Font color.<br>Default value: **0x99000000** | 33| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Font color of the selected text.<br>Default value: **0xFF254FF7** | 34| popupColor | [ResourceColor](ts-types.md#resourcecolor) | Font color of the pop-up text.<br>Default value: **0xFF254FF7** | 35| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected item.<br>Default value: **0x1F0A59F7** | 36| popupBackground | [ResourceColor](ts-types.md#resourcecolor) | Background color of the pop-up text.<br>Default value: **0xFFF1F3F5** | 37| usingPopup | boolean | Whether to use pop-up text.<br>Default value: **false** | 38| selectedFont | [Font](ts-types.md#font) | Font style of the selected text.<br>Default value:<br>{<br>size:10,<br> style:FontStyle.Normal,<br> weight:FontWeight.Normal,<br> family:'HarmonyOS Sans'<br>} | 39| popupFont | [Font](ts-types.md#font) | Font style of the pop-up text.<br>Default value:<br>{<br>size:10,<br> style:FontStyle.Normal,<br> weight:FontWeight.Normal,<br> family:'HarmonyOS Sans'<br>} | 40| font | [Font](ts-types.md#font) | Default font style of the alphabetic index bar.<br>Default value:<br>{<br>size:10,<br> style:FontStyle.Normal,<br> weight:FontWeight.Normal,<br> family:'HarmonyOS Sans'<br>} | 41| itemSize | string \| number | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set. This attribute cannot be set to a percentage.<br>Default value: **24.0**<br>Unit: vp| 42| alignStyle | IndexerAlign | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported.<br>Default value: **IndexerAlign.Right** | 43| selected | number | Index of the selected item.<br>Default value: **0**| 44| popupPosition | [Position](ts-types.md#position8) | Position of the pop-up window relative to the center of the indexer bar's top border.<br>Default value: **{x:96.0, y:48.0}**| 45 46## IndexerAlign 47 48| Name| Description| 49| -------- | -------- | 50| Left | The pop-up window is displayed on the right of the alphabetic indexer bar.| 51| Right | The pop-up window is displayed on the left of the alphabetic indexer bar.| 52 53## Events 54 55In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 56 57| Name| Description| 58| -------- | -------- | 59| onSelected(callback: (index: number) => void)<sup>(deprecated)</sup> | Invoked when an item in the alphabetic indexer bar is selected. The return value is the index of the selected item. This API is deprecated since API version 8. You are advised to use **onSelect**. | 60| onSelect(callback: (index: number) => void)<sup>8+</sup> | Invoked when an item in the alphabetic indexer bar is selected. The return value is the index of the selected item. | 61| onRequestPopupData(callback: (index: number) => Array<string>)<sup>8+</sup> | Invoked when a request for displaying content in the index prompt window is sent after an item in the alphabetic indexer bar is selected.<br>The return value is a string array corresponding to the selected index. The string array is displayed vertically in the pop-up window. It can display up to five strings at a time and allows scrolling.| 62| onPopupSelect(callback: (index: number) => void)<sup>8+</sup> | Invoked when an item in the index pop-up window is selected. | 63 64 65## Example 66 67```ts 68// xxx.ets 69@Entry 70@Component 71struct AlphabetIndexerSample { 72 private arrayA:string[] = ['Ann'] 73 private arrayB: string[] = ['Ben', 'Bob'] 74 private arrayC: string[] = ['Calvin', 'Cameron', 'Charlie', 'Charlotte'] 75 private arrayL: string[] = ['Daisy', 'Daniel', 'Darla', 'David', 'Derek', 'Dorothy', 'Duke'] 76 private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 77 'H', 'I', 'J', 'K', 'L', 'M', 'N', 78 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 79 'V', 'W', 'X', 'Y', 'Z'] 80 81 build() { 82 Stack({ alignContent: Alignment.Start }) { 83 Row() { 84 List({ space: 20, initialIndex: 0 }) { 85 ForEach(this.arrayA, (item) => { 86 ListItem() { 87 Text(item) 88 .width('80%') 89 .height('5%') 90 .fontSize(30) 91 .textAlign(TextAlign.Center) 92 }.editable(true) 93 }, item => item) 94 95 ForEach(this.arrayB, (item) => { 96 ListItem() { 97 Text(item) 98 .width('80%') 99 .height('5%') 100 .fontSize(30) 101 .textAlign(TextAlign.Center) 102 }.editable(true) 103 }, item => item) 104 105 ForEach(this.arrayC, (item) => { 106 ListItem() { 107 Text(item) 108 .width('80%') 109 .height('5%') 110 .fontSize(30) 111 .textAlign(TextAlign.Center) 112 }.editable(true) 113 }, item => item) 114 115 ForEach(this.arrayL, (item) => { 116 ListItem() { 117 Text(item) 118 .width('80%') 119 .height('5%') 120 .fontSize(30) 121 .textAlign(TextAlign.Center) 122 }.editable(true) 123 }, item => item) 124 } 125 .width('50%') 126 .height('100%') 127 128 AlphabetIndexer({ arrayValue: this.value, selected: 0 }) 129 .selectedColor(0xFFFFFF) // Font color of the selected text. 130 .popupColor(0xFFFAF0) // Font color of the pop-up text. 131 .selectedBackgroundColor(0xCCCCCC) // Background color of the selected item. 132 .popupBackground(0xD2B48C) // Background color of the pop-up text. 133 .usingPopup(true) // Whether to use pop-up text. 134 .selectedFont({size: 16, weight: FontWeight.Bolder}) // Font style of the selected text. 135 .popupFont({ size: 30, weight: FontWeight.Bolder}) // Font style of the pop-up text. 136 .itemSize(28) // Size of an item in the alphabetic index bar. 137 .alignStyle(IndexerAlign.Left) // The pop-up window is displayed on the right of the alphabetic index bar. 138 .onSelect((index: number) => { 139 console.info(this.value[index] + ' Selected!') 140 }) 141 .onRequestPopupData((index: number) => { 142 if (this.value[index] == 'A') { 143 return this.arrayA // When index A is selected, the pop-up window displays arrayA corresponding to index A. The same applies when other indexes are selected. 144 } else if (this.value[index] == 'B') { 145 return this.arrayB 146 } else if (this.value[index] == 'C') { 147 return this.arrayC 148 } else if (this.value[index] == 'L') { 149 return this.arrayL 150 } else { 151 return [] // When no array is available for the selected index, the pop-up window is empty. 152 } 153 }) 154 .onPopupSelect((index: number) => { 155 console.info('onPopupSelected:' + index) 156 }) 157 } 158 .width('100%') 159 .height('100%') 160 } 161 } 162} 163``` 164 165 166
