1# AlphabetIndexer
2
3The **AlphabetIndexer** 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**Atomic service API**: This API can be used in atomic services since API version 11.
20
21**System capability**: SystemCapability.ArkUI.ArkUI.Full
22
23**Parameters**
24
25| Name| Type| Mandatory| Description|
26| -------- | -------- | -------- | -------- |
27| arrayValue | Array<string> | Yes| Array of strings to be displayed in the alphabetic index bar. The value cannot be null.|
28| 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 two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md).|
29
30## Attributes
31
32When the [width](ts-universal-attributes-size.md#width) attribute is set to **"auto"**, the width is adaptive. This means that the width will adjust according to the maximum width of the index items.
33
34The default value of the [padding](ts-universal-attributes-size.md#padding) attribute is 4 vp.
35
36In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
37
38### color
39
40color(value: ResourceColor)
41
42Sets the font color.
43
44**Atomic service API**: This API can be used in atomic services since API version 11.
45
46**System capability**: SystemCapability.ArkUI.ArkUI.Full
47
48**Parameters**
49
50| Name| Type                                      | Mandatory| Description                               |
51| ------ | ------------------------------------------ | ---- | ----------------------------------- |
52| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Font color.<br>Default value: **0x99182431**|
53
54### selectedColor
55
56selectedColor(value: ResourceColor)
57
58Sets the font color of the selected item.
59
60**Atomic service API**: This API can be used in atomic services since API version 11.
61
62**System capability**: SystemCapability.ArkUI.ArkUI.Full
63
64**Parameters**
65
66| Name| Type                                      | Mandatory| Description                                     |
67| ------ | ------------------------------------------ | ---- | ----------------------------------------- |
68| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Font color of the selected item.<br>Default value: **0xFF007DFF**|
69
70### popupColor
71
72popupColor(value: ResourceColor)
73
74Sets the font color of the pop-up text.
75
76**Atomic service API**: This API can be used in atomic services since API version 11.
77
78**System capability**: SystemCapability.ArkUI.ArkUI.Full
79
80**Parameters**
81
82| Name| Type                                      | Mandatory| Description                                       |
83| ------ | ------------------------------------------ | ---- | ------------------------------------------- |
84| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Font color of the pop-up text.<br>Default value: **0xFF007DFF**|
85
86### selectedBackgroundColor
87
88selectedBackgroundColor(value: ResourceColor)
89
90Sets the background color of the selected item.
91
92**Atomic service API**: This API can be used in atomic services since API version 11.
93
94**System capability**: SystemCapability.ArkUI.ArkUI.Full
95
96**Parameters**
97
98| Name| Type                                      | Mandatory| Description                                     |
99| ------ | ------------------------------------------ | ---- | ----------------------------------------- |
100| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Background color of the selected item.<br>Default value: **0x1A007DFF**|
101
102### popupBackground
103
104popupBackground(value: ResourceColor)
105
106Sets the background color of the pop-up text.
107
108**Atomic service API**: This API can be used in atomic services since API version 11.
109
110**System capability**: SystemCapability.ArkUI.ArkUI.Full
111
112**Parameters**
113
114| Name| Type                                      | Mandatory| Description                                                        |
115| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ |
116| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Background color of the pop-up text.<br>Default value:<br>API version 11 and earlier: **0xFFFFFFFF**<br>API version 12 and later: **#66808080**|
117
118### usingPopup
119
120usingPopup(value: boolean)
121
122Sets whether to use pop-up text.
123
124**Atomic service API**: This API can be used in atomic services since API version 11.
125
126**System capability**: SystemCapability.ArkUI.ArkUI.Full
127
128**Parameters**
129
130| Name| Type   | Mandatory| Description                                  |
131| ------ | ------- | ---- | -------------------------------------- |
132| value  | boolean | Yes  | Whether to use pop-up text.<br>Default value: **false**|
133
134### selectedFont
135
136selectedFont(value: Font)
137
138Sets the font style of the selected item.
139
140**Atomic service API**: This API can be used in atomic services since API version 11.
141
142**System capability**: SystemCapability.ArkUI.ArkUI.Full
143
144**Parameters**
145
146| Name| Type                    | Mandatory| Description                                                        |
147| ------ | ------------------------ | ---- | ------------------------------------------------------------ |
148| value  | [Font](ts-types.md#font) | Yes  | Font style of the selected item.<br>Default value:<br>API version 11 and earlier:<br>{<br>size:'12.0fp',<br> style:FontStyle.Normal,<br> weight:FontWeight.Normal,<br> family:'HarmonyOS Sans'<br>}<br>API version 12 and later:<br>{<br>size:'10.0vp',<br> style:FontStyle.Normal,<br> weight:FontWeight.Medium,<br> family:'HarmonyOS Sans'<br>} |
149
150### popupFont
151
152popupFont(value: Font)
153
154Sets the font style of the pop-up text.
155
156**Atomic service API**: This API can be used in atomic services since API version 11.
157
158**System capability**: SystemCapability.ArkUI.ArkUI.Full
159
160**Parameters**
161
162| Name| Type                    | Mandatory| Description                                                        |
163| ------ | ------------------------ | ---- | ------------------------------------------------------------ |
164| value  | [Font](ts-types.md#font) | Yes  | 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>} |
165
166### font
167
168font(value: Font)
169
170Sets the default font style of the alphabetic index bar.
171
172**Atomic service API**: This API can be used in atomic services since API version 11.
173
174**System capability**: SystemCapability.ArkUI.ArkUI.Full
175
176**Parameters**
177
178| Name| Type                    | Mandatory| Description                                                        |
179| ------ | ------------------------ | ---- | ------------------------------------------------------------ |
180| value  | [Font](ts-types.md#font) | Yes  | Default font style of the alphabetic index bar.<br>Default value:<br>API version 11 and earlier:<br>{<br>size:'12.0fp',<br> style:FontStyle.Normal,<br> weight:FontWeight.Normal,<br> family:'HarmonyOS Sans'<br>}<br>API version 12 and later:<br>{<br>size:'10.0vp',<br> style:FontStyle.Normal,<br> weight:FontWeight.Medium,<br> family:'HarmonyOS Sans'<br>} |
181
182### itemSize
183
184itemSize(value: string | number)
185
186Sets the size for the item in the alphabetic index bar.
187
188**Atomic service API**: This API can be used in atomic services since API version 11.
189
190**System capability**: SystemCapability.ArkUI.ArkUI.Full
191
192**Parameters**
193
194| Name| Type                      | Mandatory| Description                                                        |
195| ------ | -------------------------- | ---- | ------------------------------------------------------------ |
196| value  | string \| number | Yes  | Size of the item in the alphabetic index bar. The item is a square, and the side length needs to be set. This attribute cannot be set in percentage.<br>Default value: **16.0**<br>Unit: vp|
197
198### alignStyle
199
200alignStyle(value: IndexerAlign, offset?: Length)
201
202Sets the alignment style of the alphabetic index bar.
203
204**Atomic service API**: This API can be used in atomic services since API version 11.
205
206**System capability**: SystemCapability.ArkUI.ArkUI.Full
207
208**Parameters**
209
210| Name              | Type                                 | Mandatory| Description                                                        |
211| -------------------- | ------------------------------------- | ---- | ------------------------------------------------------------ |
212| value                | [IndexerAlign](#indexeralign) | Yes  | Alignment style of the alphabetic index bar. The pop-up window can be displayed on the right or left of the alphabetic index bar.<br>Default value: **IndexerAlign.END**|
213| offset<sup>10+</sup> | [Length](ts-types.md#length)          | No  | 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**. 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.|
214
215### selected<sup>8+</sup>
216
217selected(index: number)
218
219Sets the index of the selected item.
220
221Since API version 10, this attribute supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md).
222
223**Atomic service API**: This API can be used in atomic services since API version 11.
224
225**System capability**: SystemCapability.ArkUI.ArkUI.Full
226
227**Parameters**
228
229| Name| Type  | Mandatory| Description                        |
230| ------ | ------ | ---- | ---------------------------- |
231| index  | number | Yes  | Index of the selected item.<br>Default value: **0**|
232
233### popupPosition<sup>8+</sup>
234
235popupPosition(value: Position)
236
237Sets the position of the pop-up window relative to the center of the indexer bar's top border.
238
239**Atomic service API**: This API can be used in atomic services since API version 11.
240
241**System capability**: SystemCapability.ArkUI.ArkUI.Full
242
243**Parameters**
244
245| Name| Type                             | Mandatory| Description                                                        |
246| ------ | --------------------------------- | ---- | ------------------------------------------------------------ |
247| value  | [Position](ts-types.md#position) | Yes  | 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}**|
248
249### popupSelectedColor<sup>10+</sup>
250
251popupSelectedColor(value: ResourceColor)
252
253Sets the color of the selected text in the non-alphabetic part in the pop-up window.
254
255**Atomic service API**: This API can be used in atomic services since API version 11.
256
257**System capability**: SystemCapability.ArkUI.ArkUI.Full
258
259**Parameters**
260
261| Name| Type                                      | Mandatory| Description                                                 |
262| ------ | ------------------------------------------ | ---- | ----------------------------------------------------- |
263| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Color of the selected text in the non-alphabetic part in the pop-up window.<br>Default value: **#FF182431**|
264
265### popupUnselectedColor<sup>10+</sup>
266
267popupUnselectedColor(value: ResourceColor)
268
269Sets the color of the unselected text in the non-alphabetic part in the pop-up window.
270
271**Atomic service API**: This API can be used in atomic services since API version 11.
272
273**System capability**: SystemCapability.ArkUI.ArkUI.Full
274
275**Parameters**
276
277| Name| Type                                      | Mandatory| Description                                                   |
278| ------ | ------------------------------------------ | ---- | ------------------------------------------------------- |
279| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Color of the unselected text in the non-alphabetic part in the pop-up window.<br>Default value: **#FF182431**|
280
281### popupItemFont<sup>10+</sup>
282
283popupItemFont(value: Font)
284
285Sets the font style of the non-alphabetic part in the pop-up window.
286
287**Atomic service API**: This API can be used in atomic services since API version 11.
288
289**System capability**: SystemCapability.ArkUI.ArkUI.Full
290
291**Parameters**
292
293| Name| Type                    | Mandatory| Description                                                        |
294| ------ | ------------------------ | ---- | ------------------------------------------------------------ |
295| value  | [Font](ts-types.md#font) | Yes  | Font style of the non-alphabetic part in the pop-up window.<br>Default value:<br>{<br>size:24,<br>weight:FontWeight.Medium<br>} |
296
297### popupItemBackgroundColor<sup>10+</sup>
298
299popupItemBackgroundColor(value: ResourceColor)
300
301Sets the background color of the non-alphabetic part in the pop-up window.
302
303**Atomic service API**: This API can be used in atomic services since API version 11.
304
305**System capability**: SystemCapability.ArkUI.ArkUI.Full
306
307**Parameters**
308
309| Name| Type                    | Mandatory| Description                                           |
310| ------ | ------------------------ | ---- | ----------------------------------------------- |
311| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Background color of the non-alphabetic part in the pop-up window.<br>Default value:<br>API version 11 and earlier: **#FFFFFFFF**<br>API version 12 and later: **#00000000**|
312
313### autoCollapse<sup>11+</sup>   
314
315autoCollapse(value: boolean)
316
317Sets whether to auto-collapse or expand the indexer bar.
318
319If the initial character is **#**, it is excluded. Number of remaining characters $\leq$ 9: The index bar is expanded. 9 < Number of remaining characters $\leq$ 13: The index bar is expanded or partially collapsed, depending on its height. Number of remaining characters > 13: The index bar is fully or partially collapsed, depending on its height.
320
321If the initial character is not **#**: Number of all characters $\leq$ 9: The index bar is expanded. 9 < Number of all characters $\leq$ 13: The index bar is expanded or partially collapsed, depending on its height. Number of all characters > 13: The index bar is fully or partially collapsed, depending on its height.
322
323**Atomic service API**: This API can be used in atomic services since API version 12.
324
325**System capability**: SystemCapability.ArkUI.ArkUI.Full
326
327**Parameters**
328
329| Name| Type   | Mandatory| Description                                      |
330| ------ | ------- | ---- | ------------------------------------------ |
331| value  | boolean | Yes  | Whether to auto-collapse or expand the indexer bar.<br>Default value:<br>In versions earlier than API version 12: **false**<br>API version 12 and later: **true**|
332
333### popupItemBorderRadius<sup>12+</sup>   
334
335popupItemBorderRadius(value: number)
336
337Sets the radius of the index border corners in the pop-up window.
338
339**Atomic service API**: This API can be used in atomic services since API version 12.
340
341**System capability**: SystemCapability.ArkUI.ArkUI.Full
342
343**Parameters**
344
345| Name| Type  | Mandatory| Description                                                        |
346| ------ | ------ | ---- | ------------------------------------------------------------ |
347| value  | number | Yes  | Radius of the index background border corners in the pop-up window.<br>Default value: **24vp**<br>This parameter cannot be set in percentage. If the value specified is less than **0**, **0** is used.<br>The radius of the index background border corners in the pop-up window is automatically adaptive (radius of the index rounded corners + 4 vp).|
348
349### itemBorderRadius<sup>12+</sup>   
350
351itemBorderRadius(value: number)
352
353Sets the radius of the index background border corners in the alphabetic index bar.
354
355**Atomic service API**: This API can be used in atomic services since API version 12.
356
357**System capability**: SystemCapability.ArkUI.ArkUI.Full
358
359**Parameters**
360
361| Name| Type  | Mandatory| Description                                                        |
362| ------ | ------ | ---- | ------------------------------------------------------------ |
363| value  | number | Yes  | Radius of the index background border corners in the alphabetic index bar.<br>Default value: **8vp**<br>This parameter cannot be set in percentage. If the value specified is less than **0**, **0** is used.<br>The radius of the index background border corners in the alphabetic index bar is automatically adaptive (radius of the index rounded corners + 4 vp).|
364
365### popupBackgroundBlurStyle<sup>12+</sup>   
366
367popupBackgroundBlurStyle(value: BlurStyle)
368
369Sets the background blur style of the pop-up window.
370
371**Atomic service API**: This API can be used in atomic services since API version 12.
372
373**System capability**: SystemCapability.ArkUI.ArkUI.Full
374
375**Parameters**
376
377| Name| Type                                        | Mandatory| Description                                                        |
378| ------ | -------------------------------------------- | ---- | ------------------------------------------------------------ |
379| value  | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | Yes  | Background blur style of the pop-up window.<br>Default value: **COMPONENT_REGULAR**|
380
381### popupTitleBackground<sup>12+</sup>   
382
383popupTitleBackground(value: ResourceColor)
384
385Sets the background color of the first index in the pop-up window.
386
387**Atomic service API**: This API can be used in atomic services since API version 12.
388
389**System capability**: SystemCapability.ArkUI.ArkUI.Full
390
391**Parameters**
392
393| Name| Type                                      | Mandatory| Description                                                        |
394| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ |
395| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Background color of the first index in the pop-up window.<br>Default value:<br>If the pop-up window has only one index: **#00FFFFFF**.<br>If the pop-up window has multiple indexes: **#0c182431**.|
396
397### enableHapticFeedback<sup>12+</sup>
398
399enableHapticFeedback(value: boolean)
400
401**Atomic service API**: This API can be used in atomic services since API version 12.
402
403**System capability**: SystemCapability.ArkUI.ArkUI.Full
404
405| Name        | Type                                                 | Mandatory| Description                        |
406|-------------|-----------------------------------------------------|----|----------------------------|
407| value | boolean | No | Whether haptic feedback is enabled.<br>Default value: **true**<br>|
408
409## IndexerAlign
410
411**System capability**: SystemCapability.ArkUI.ArkUI.Full
412
413| Name| Description|
414| -------- | -------- |
415| Left | The pop-up window is displayed on the right of the alphabetic indexer bar.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
416| Right | The pop-up window is displayed on the left of the alphabetic indexer bar.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
417| START<sup>12+</sup> | The pop-up window is displayed on the right of the alphabetic indexer bar for left-to-right scripts, and on the left of the alphabetic indexer bar for right-to-left scripts.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
418| END<sup>12+</sup> | The pop-up window is displayed on the left of the alphabetic indexer bar for left-to-right scripts, and on the right of the alphabetic indexer bar for right-to-left scripts.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
419
420## Events
421
422In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
423
424### onSelected<sup>(deprecated)</sup>
425
426onSelected(callback: (index: number) =&gt; void)
427
428Invoked when an item in the alphabetic indexer bar is selected. The return value is the index of the selected item.
429
430This API is deprecated since API version 8. You are advised to use [onSelect](#onselect8) instead.
431
432**System capability**: SystemCapability.ArkUI.ArkUI.Full
433
434**Parameters**
435
436| Name| Type  | Mandatory| Description            |
437| ------ | ------ | ---- | ---------------- |
438| index  | number | Yes  | Index of the selected item.|
439
440### onSelect<sup>8+</sup>
441
442onSelect(callback: (index: number) =&gt; void)
443
444Invoked when an item in the alphabetic indexer bar is selected. The return value is the index of the selected item.
445
446**Atomic service API**: This API can be used in atomic services since API version 11.
447
448**System capability**: SystemCapability.ArkUI.ArkUI.Full
449
450**Parameters**
451
452| Name| Type  | Mandatory| Description            |
453| ------ | ------ | ---- | ---------------- |
454| index  | number | Yes  | Index of the selected item.|
455
456### onRequestPopupData<sup>8+</sup>
457
458onRequestPopupData(callback: (index: number) =&gt; Array&lt;string&gt;)
459
460Invoked when a request for displaying content in the index pop-up window is sent after an item in the alphabetic indexer bar is selected.
461
462**Atomic service API**: This API can be used in atomic services since API version 11.
463
464**System capability**: SystemCapability.ArkUI.ArkUI.Full
465
466**Parameters**
467
468| Name| Type  | Mandatory| Description                                                        |
469| ------ | ------ | ---- | ------------------------------------------------------------ |
470| index  | number | Yes  | Index of the selected item.|
471
472**Return value**
473
474| Type  | Description                                                        |
475| ------ | ------------------------------------------------------------ |
476| Array&lt;string&gt; | 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.|
477
478### onPopupSelect<sup>8+</sup>
479
480onPopupSelect(callback: (index: number) =&gt; void)
481
482Invoked when an item in the index pop-up window is selected.
483
484**Atomic service API**: This API can be used in atomic services since API version 11.
485
486**System capability**: SystemCapability.ArkUI.ArkUI.Full
487
488**Parameters**
489
490| Name| Type  | Mandatory| Description            |
491| ------ | ------ | ---- | ---------------- |
492| index  | number | Yes  | Index of the selected item.|
493
494
495## Example
496### Example 1
497
498```ts
499// xxx.ets
500@Entry
501@Component
502struct AlphabetIndexerSample {
503  private arrayA:string[] = ['Ann']
504  private arrayB: string[] = ['Ben', 'Bob']
505  private arrayC: string[] = ['Calvin', 'Cameron', 'Charlie', 'Charlotte']
506  private arrayL: string[] = ['Daisy', 'Daniel', 'Darla', 'David', 'Derek', 'Dorothy', 'Duke']
507  private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
508  'H', 'I', 'J', 'K', 'L', 'M', 'N',
509  'O', 'P', 'Q', 'R', 'S', 'T', 'U',
510  'V', 'W', 'X', 'Y', 'Z']
511
512  build() {
513    Stack({ alignContent: Alignment.Start }) {
514      Row() {
515        List({ space: 20, initialIndex: 0 }) {
516          ForEach(this.arrayA, (item: string) => {
517            ListItem() {
518              Text(item)
519                .width('80%')
520                .height('5%')
521                .fontSize(30)
522                .textAlign(TextAlign.Center)
523            }
524          }, (item: string) => item)
525
526          ForEach(this.arrayB, (item: string) => {
527            ListItem() {
528              Text(item)
529                .width('80%')
530                .height('5%')
531                .fontSize(30)
532                .textAlign(TextAlign.Center)
533            }
534          }, (item: string) => item)
535
536          ForEach(this.arrayC, (item: string) => {
537            ListItem() {
538              Text(item)
539                .width('80%')
540                .height('5%')
541                .fontSize(30)
542                .textAlign(TextAlign.Center)
543            }
544          }, (item: string) => item)
545
546          ForEach(this.arrayL, (item: string) => {
547            ListItem() {
548              Text(item)
549                .width('80%')
550                .height('5%')
551                .fontSize(30)
552                .textAlign(TextAlign.Center)
553            }
554          }, (item: string) => item)
555        }
556        .width('50%')
557        .height('100%')
558
559        AlphabetIndexer({ arrayValue: this.value, selected: 0 })
560          .autoCollapse(false)
561          .selectedColor(0xFFFFFF) // Font color of the selected text.
562          .popupColor(0xFFFAF0) // Font color of the pop-up text.
563          .selectedBackgroundColor(0xCCCCCC) // Background color of the selected item.
564          .popupBackground(0xD2B48C) // Background color of the pop-up text.
565          .usingPopup(true) // Whether to use pop-up text.
566          .selectedFont({size: 16, weight: FontWeight.Bolder}) // Font style of the selected text.
567          .popupFont({ size: 30, weight: FontWeight.Bolder}) // Font style of the pop-up text.
568          .itemSize(28) // Size of an item in the alphabetic index bar.
569          .alignStyle(IndexerAlign.Left) // The pop-up window is displayed on the right of the alphabetic index bar.
570          .popupItemBorderRadius(24) // Set the radius of the index background rounded corners in the pop-up window.
571          .itemBorderRadius(14) // Set the radius of the index background rounded corners in the alphabetic indexer bar.
572          .popupBackgroundBlurStyle(BlurStyle.NONE) // Set the background blur style of the pop-up window.
573          .popupTitleBackground(0xCCCCCC) // Set the background color of the first index in the pop-up window.
574          .popupSelectedColor(0x00FF00)
575          .popupUnselectedColor(0x0000FF)
576          .popupItemFont({ size: 30, style: FontStyle.Normal })
577          .popupItemBackgroundColor(0xCCCCCC)
578          .onSelect((index: number) => {
579            console.info(this.value[index] + ' Selected!')
580          })
581          .onRequestPopupData((index: number) => {
582            if (this.value[index] == 'A') {
583              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.
584            } else if (this.value[index] == 'B') {
585              return this.arrayB
586            } else if (this.value[index] == 'C') {
587              return this.arrayC
588            } else if (this.value[index] == 'L') {
589              return this.arrayL
590            } else {
591              return [] // When no array is available for the selected index, the pop-up window is empty.
592            }
593          })
594          .onPopupSelect((index: number) => {
595            console.info('onPopupSelected:' + index)
596          })
597      }
598      .width('100%')
599      .height('100%')
600    }
601  }
602}
603```
604
605![alphabet](figures/alphabet.gif)
606
607### Example 2
608```ts
609// xxx.ets
610@Entry
611@Component
612struct AlphabetIndexerSample {
613  private arrayA:string[] = ['Ann']
614  private arrayB: string[] = ['Ben', 'Bob']
615  private arrayC: string[] = ['Calvin', 'Cameron', 'Charlie', 'Charlotte']
616  private arrayJ: string[] = ['Jack', 'James']
617  private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
618    'H', 'I', 'J', 'K', 'L', 'M', 'N',
619    'O', 'P', 'Q', 'R', 'S', 'T', 'U',
620    'V', 'W', 'X', 'Y', 'Z']
621  @State isNeedAutoCollapse: boolean = false;
622  @State indexerHeight: string = '75%';
623
624  build() {
625    Stack({ alignContent: Alignment.Start }) {
626      Row() {
627        List({ space: 20, initialIndex: 0 }) {
628          ForEach(this.arrayA, (item: string) => {
629            ListItem() {
630              Text(item)
631                .width('80%')
632                .height('5%')
633                .fontSize(30)
634                .textAlign(TextAlign.Center)
635            }
636          }, (item: string) => item)
637
638          ForEach(this.arrayB, (item: string) => {
639            ListItem() {
640              Text(item)
641                .width('80%')
642                .height('5%')
643                .fontSize(30)
644                .textAlign(TextAlign.Center)
645            }
646          }, (item: string) => item)
647
648          ForEach(this.arrayC, (item: string) => {
649            ListItem() {
650              Text(item)
651                .width('80%')
652                .height('5%')
653                .fontSize(30)
654                .textAlign(TextAlign.Center)
655            }
656          }, (item: string) => item)
657
658          ForEach(this.arrayJ, (item: string) => {
659            ListItem() {
660              Text(item)
661                .width('80%')
662                .height('5%')
663                .fontSize(30)
664                .textAlign(TextAlign.Center)
665            }
666          }, (item: string) => item)
667        }
668        .width('50%')
669        .height('100%')
670
671        Column() {
672          Column() {
673            AlphabetIndexer({ arrayValue: this.value, selected: 0 })
674              .autoCollapse(this.isNeedAutoCollapse)
675              .height(this.indexerHeight)
676              .selectedColor(0xFFFFFF)// Font color of the selected item.
677              .popupColor(0xFFFAF0)// Font color of the pop-up text.
678              .selectedBackgroundColor(0xCCCCCC)// Background color of the selected item.
679              .popupBackground(0xD2B48C)// Background color of the pop-up text.
680              .usingPopup(true)// Whether to use pop-up text.
681              .selectedFont({size: 16, weight: FontWeight.Bolder})// Font style of the selected item.
682              .popupFont({ size: 30, weight: FontWeight.Bolder})// Font style of the pop-up text.
683              .itemSize(28)// Size of an item in the alphabetic index bar.
684              .alignStyle(IndexerAlign.Right)// The pop-up window is displayed on the left of the alphabetic index bar.
685              .popupTitleBackground("#D2B48C") // Background color of the first index in the pop-up window.
686              .popupSelectedColor(0x00FF00)
687              .popupUnselectedColor(0x0000FF)
688              .popupItemFont({ size: 30, style: FontStyle.Normal })
689              .popupItemBackgroundColor(0xCCCCCC)
690              .onSelect((index: number) => {
691                console.info(this.value[index] + ' Selected!');
692              })
693              .onRequestPopupData((index: number) => {
694                if (this.value[index] == 'A') {
695                  return this.arrayA;
696                } else if (this.value[index] == 'B') {
697                  return this.arrayB;
698                } else if (this.value[index] == 'C') {
699                  return this.arrayC;
700                } else if (this.value[index] == 'J') {
701                  return this.arrayJ;
702                } else {
703                  return [];
704                }
705              })
706              .onPopupSelect((index: number) => {
707                console.info('onPopupSelected:' + index);
708              })
709          }
710          .height('80%')
711          .justifyContent(FlexAlign.Center)
712
713          Column() {
714            Button ('Collapse')
715              .margin('5vp')
716              .onClick(() => {
717                this.isNeedAutoCollapse = true;
718              })
719            Button ('30% of Index Bar Height')
720              .margin('5vp')
721              .onClick(() => {
722                this.indexerHeight = '30%';
723              })
724            Button ('70% of Index Bar Height')
725              .margin('5vp')
726              .onClick(() => {
727                this.indexerHeight = '70%';
728              })
729          }.height('20%')
730        }
731        .width('50%')
732        .justifyContent(FlexAlign.Center)
733      }
734      .width('100%')
735      .height('100%')
736    }
737  }
738}
739```
740
741![alphabetIndexerAutoCollapseSample](figures/alphabetIndexerAutoCollapseSample.gif)
742
743### Example 3
744
745```ts
746// This example implements a pop-up window in the custom background blur style.
747@Entry
748@Component
749struct AlphabetIndexerSample {
750  private arrayA:string[] = ['Ann']
751  private arrayB: string[] = ['Ben', 'Bob']
752  private arrayC: string[] = ['Calvin', 'Cameron', 'Charlie', 'Charlotte']
753  private arrayL: string[] = ['Daisy', 'Daniel', 'Darla', 'David', 'Derek', 'Dorothy', 'Duke']
754  private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
755    'H', 'I', 'J', 'K', 'L', 'M', 'N',
756    'O', 'P', 'Q', 'R', 'S', 'T', 'U',
757    'V', 'W', 'X', 'Y', 'Z']
758  @State customBlurStyle: BlurStyle = BlurStyle.NONE;
759
760  build() {
761    Stack({ alignContent: Alignment.Start }) {
762      Row() {
763        List({ space: 20, initialIndex: 0 }) {
764          ForEach(this.arrayA, (item: string) => {
765            ListItem() {
766              Text(item)
767                .width('80%')
768                .height('5%')
769                .fontSize(30)
770                .textAlign(TextAlign.Center)
771            }
772          }, (item: string) => item)
773
774          ForEach(this.arrayB, (item: string) => {
775            ListItem() {
776              Text(item)
777                .width('80%')
778                .height('5%')
779                .fontSize(30)
780                .textAlign(TextAlign.Center)
781            }
782          }, (item: string) => item)
783
784          ForEach(this.arrayC, (item: string) => {
785            ListItem() {
786              Text(item)
787                .width('80%')
788                .height('5%')
789                .fontSize(30)
790                .textAlign(TextAlign.Center)
791            }
792          }, (item: string) => item)
793
794          ForEach(this.arrayL, (item: string) => {
795            ListItem() {
796              Text(item)
797                .width('80%')
798                .height('5%')
799                .fontSize(30)
800                .textAlign(TextAlign.Center)
801            }
802          }, (item: string) => item)
803        }
804        .width('30%')
805        .height('100%')
806        Column(){
807          Column() {
808            Text('Switch Blue Style:')
809              .fontSize(24)
810              .fontColor(0xcccccc)
811              .width('100%')
812            Button('COMPONENT_REGULAR')
813              .margin('5vp')
814              .width(200)
815              .onClick(() => {
816                this.customBlurStyle = BlurStyle.COMPONENT_REGULAR;
817              })
818            Button('BACKGROUND_THIN')
819              .margin('5vp')
820              .width(200)
821              .onClick(() => {
822                this.customBlurStyle = BlurStyle.BACKGROUND_THIN;
823              })
824          }.height('20%')
825
826          Column(){
827            AlphabetIndexer({ arrayValue: this.value, selected: 0 })
828              .usingPopup(true) // Whether to use pop-up text.
829              .alignStyle(IndexerAlign.Left) // The pop-up window is displayed on the right of the alphabetic index bar.
830              .popupItemBorderRadius(24) // Set the radius of the index background rounded corners in the pop-up window.
831              .itemBorderRadius(14) // Set the radius of the index background rounded corners in the alphabetic indexer bar.
832              .popupBackgroundBlurStyle(this.customBlurStyle) // Set the background blur style of the pop-up window.
833              .popupTitleBackground(0xCCCCCC) // Set the background color of the first index in the pop-up window.
834              .onSelect((index: number) => {
835                console.info(this.value[index] + ' Selected!')
836              })
837              .onRequestPopupData((index: number) => {
838                if (this.value[index] == 'A') {
839                  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.
840                } else if (this.value[index] == 'B') {
841                  return this.arrayB
842                } else if (this.value[index] == 'C') {
843                  return this.arrayC
844                } else if (this.value[index] == 'L') {
845                  return this.arrayL
846                } else {
847                  return [] // When no array is available for the selected index, the pop-up window is empty.
848                }
849              })
850              .onPopupSelect((index: number) => {
851                console.info('onPopupSelected:' + index)
852              })
853          }
854          .height('80%')
855        }
856        .width('70%')
857      }
858      .width('100%')
859      .height('100%')
860      .backgroundImage($r("app.media.image"))
861    }
862  }
863}
864```
865
866![alphabetIndexerBlurStyleSample](figures/alphabetIndexerBlurStyleSample.gif)
867