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