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.<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 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: **0xFFFFFFFF** | 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:'12.0fp',<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:'24.0vp',<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:'12.0fp',<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: **16.0**<br>Unit: vp| 42| alignStyle | value: [IndexerAlign](#indexeralign),<br>offset<sup>10+</sup>?: [Length](ts-types.md#length) | Alignment style of the alphabetic index bar.<br>**value**: alignment of the alphabetic index bar with the pop-up window, which can be left-aligned or right-aligned.<br>Default value: **IndexerAlign.Right**<br>**offset**: spacing between the pop-up window and the alphabetic index bar. A value greater than or equal to 0 is valid. If this parameter is set to a value less than 0 or is not set, the spacing is the same as **popupPosition.x**. If this parameter and **popupPosition** are set at the same time, **offset** takes effect in the horizontal direction and **popupPosition.y** takes effect in the vertical direction.| 43| selected | number | Index of the selected item.<br>Default value: **0**<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 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:60.0, y:48.0}**| 45| popupSelectedColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected text excluding the initial letter in the pop-up window.<br>Default value: **#FF182431**| 46| popupUnselectedColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Color of the unselected text in the pop-up window.<br>Default value: **#FF182431**| 47| popupItemFont<sup>10+</sup> | [Font](ts-types.md#font) | Font of the text excluding the initial letter in the pop-up window.<br>Default value:<br>{<br>size:24,<br>weight:FontWeight.Medium<br>}| 48| popupItemBackgroundColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Background color of the portion excluding the initial letter in the pop-up window.<br>Default value: **#FFFFFF**| 49 50## IndexerAlign 51 52| Name| Description| 53| -------- | -------- | 54| Left | The pop-up window is displayed on the right of the alphabetic indexer bar.| 55| Right | The pop-up window is displayed on the left of the alphabetic indexer bar.| 56 57## Events 58 59In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 60 61| Name| Description| 62| -------- | -------- | 63| 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**. | 64| 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. | 65| 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 once and allows scrolling.| 66| onPopupSelect(callback: (index: number) => void)<sup>8+</sup> | Invoked when an item in the index pop-up window is selected. | 67 68 69## Example 70 71```ts 72// xxx.ets 73@Entry 74@Component 75struct AlphabetIndexerSample { 76 private arrayA:string[] = ['Ann'] 77 private arrayB: string[] = ['Ben', 'Bob'] 78 private arrayC: string[] = ['Calvin', 'Cameron', 'Charlie', 'Charlotte'] 79 private arrayL: string[] = ['Daisy', 'Daniel', 'Darla', 'David', 'Derek', 'Dorothy', 'Duke'] 80 private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 81 'H', 'I', 'J', 'K', 'L', 'M', 'N', 82 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 83 'V', 'W', 'X', 'Y', 'Z'] 84 85 build() { 86 Stack({ alignContent: Alignment.Start }) { 87 Row() { 88 List({ space: 20, initialIndex: 0 }) { 89 ForEach(this.arrayA, (item: string) => { 90 ListItem() { 91 Text(item) 92 .width('80%') 93 .height('5%') 94 .fontSize(30) 95 .textAlign(TextAlign.Center) 96 } 97 }, (item: string) => item) 98 99 ForEach(this.arrayB, (item: string) => { 100 ListItem() { 101 Text(item) 102 .width('80%') 103 .height('5%') 104 .fontSize(30) 105 .textAlign(TextAlign.Center) 106 } 107 }, (item: string) => item) 108 109 ForEach(this.arrayC, (item: string) => { 110 ListItem() { 111 Text(item) 112 .width('80%') 113 .height('5%') 114 .fontSize(30) 115 .textAlign(TextAlign.Center) 116 } 117 }, (item: string) => item) 118 119 ForEach(this.arrayL, (item: string) => { 120 ListItem() { 121 Text(item) 122 .width('80%') 123 .height('5%') 124 .fontSize(30) 125 .textAlign(TextAlign.Center) 126 } 127 }, (item: string) => item) 128 } 129 .width('50%') 130 .height('100%') 131 132 AlphabetIndexer({ arrayValue: this.value, selected: 0 }) 133 .selectedColor(0xFFFFFF) // Font color of the selected text. 134 .popupColor(0xFFFAF0) // Font color of the pop-up text. 135 .selectedBackgroundColor(0xCCCCCC) // Background color of the selected item. 136 .popupBackground(0xD2B48C) // Background color of the pop-up text. 137 .usingPopup(true) // Whether to use pop-up text. 138 .selectedFont({size: 16, weight: FontWeight.Bolder}) // Font style of the selected text. 139 .popupFont({ size: 30, weight: FontWeight.Bolder}) // Font style of the pop-up text. 140 .itemSize(28) // Size of an item in the alphabetic index bar. 141 .alignStyle(IndexerAlign.Left) // The pop-up window is displayed on the right of the alphabetic index bar. 142 .popupSelectedColor(0x00FF00) 143 .popupUnselectedColor(0x0000FF) 144 .popupItemFont({ size: 30, style: FontStyle.Normal }) 145 .popupItemBackgroundColor(0xCCCCCC) 146 .onSelect((index: number) => { 147 console.info(this.value[index] + ' Selected!') 148 }) 149 .onRequestPopupData((index: number) => { 150 if (this.value[index] == 'A') { 151 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. 152 } else if (this.value[index] == 'B') { 153 return this.arrayB 154 } else if (this.value[index] == 'C') { 155 return this.arrayC 156 } else if (this.value[index] == 'L') { 157 return this.arrayL 158 } else { 159 return [] // When no array is available for the selected index, the pop-up window is empty. 160 } 161 }) 162 .onPopupSelect((index: number) => { 163 console.info('onPopupSelected:' + index) 164 }) 165 } 166 .width('100%') 167 .height('100%') 168 } 169 } 170} 171``` 172 173 174
