| arrayValue | Array<string> | Yes | - | Array of strings to be displayed in the alphabetic index bar. |
| selected | number | Yes | - | ID of a selected item. |
| arrayValue | Array<string> | Yes| - | Array of strings to be displayed in the alphabetic index bar.|
| selected | number | Yes| - | ID of a selected item.|
## Attributes
| Name | Type | Description |
| Name| Type| Description|
| -------- | -------- | -------- |
| selectedColor | Color | Font color of the selected text. |
| popupColor | Color | Font color of the pop-up text. |
| selectedBackgroundColor | Color | Background color of the selected text. |
| popupBackground | Color | Background color of the pop-up text. |
| usingPopup | boolean | Whether to use pop-up text.|
| selectedFont | {<br/>size?: number,<br/>weight?: FontWeight,<br/>family?: string,<br/>style?: FontStyle<br/>} | Font style of the selected text. |
| popupFont | {<br/>size?: number,<br/>weight?: FontWeight,<br/>family?: string,<br/>style?: FontStyle<br/>} | Font style of the pop-up text. |
| font | {<br/>size?: number,<br/>weight?: FontWeight,<br/>family?: string,<br/>style?: FontStyle<br/>} | Default font style of the alphabetic index bar. |
| itemSize | Length | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set.|
| alignStyle | IndexerAlign | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported. The alignment style affects the position of the pop-up window.|
| selectedColor | [ResourceColor](../../ui/ts-types.md) | Font color of the selected text.|
| popupColor | [ResourceColor](../../ui/ts-types.md) | Font color of the pop-up text.|
| selectedBackgroundColor | [ResourceColor](../../ui/ts-types.md) | Background color of the selected text.|
| popupBackground | [ResourceColor](../../ui/ts-types.md) | Background color of the pop-up text.|
| usingPopup | boolean | Whether to use pop-up text.|
| selectedFont | {<br>size?: number,<br>weight?: FontWeight,<br>family?: string,<br>style?: FontStyle<br>} | Font style of the selected text.|
| popupFont | {<br>size?: number,<br>weight?: FontWeight,<br>family?: string,<br>style?: FontStyle<br>} | Font style of the pop-up text.|
| font | {<br>size?: number,<br>weight?: FontWeight,<br>family?: string,<br>style?: FontStyle<br>} | Default font style of the alphabetic index bar.|
| itemSize | Length | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set.|
| alignStyle | IndexerAlign | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported. The alignment style affects the position of the pop-up window.|
- IndexerAlign enums
| Name | Description |
| Name| Description|
| -------- | -------- |
| Left | The pop-up window is displayed on the right of the alphabetic indexer bar.|
| Right | The pop-up window is displayed on the left of the alphabetic indexer bar.|
| Left | The pop-up window is displayed on the right of the alphabetic indexer bar.|
| Right | The pop-up window is displayed on the left of the alphabetic indexer bar.|
## Events
| Name | Description |
| Name| Description|
| -------- | -------- |
| onSelected(index: number) => void<sup>(deprecated) </sup> | Invoked when an item in the alphabetic indexer bar is selected. |
| onSelect(index: number) => void<sup>8+</sup> | Invoked when an item in the alphabetic indexer bar is selected. |
| onRequestPopupData(callback: (index: number) => Array<string>)<sup>8+</sup> | Invoked when a request for displaying content in the index prompt window is sent when an item in the alphabetic indexer bar is selected.<br/>The return value is a string array corresponding to the indexes. The string array is displayed vertically in the pop-up window. It can display up to five strings at a time and allows scrolling. |
| onPopupSelect(callback: (index: number) => void)<sup>8+</sup> | Invoked when an item in the index pop-up window is selected.|
| onSelected(index: number) => void<sup>(deprecated) </sup>| Invoked when an item in the alphabetic indexer bar is selected.|
| onSelect(index: number) => void<sup>8+</sup> | Invoked when an item in the alphabetic indexer bar is selected.|
| onRequestPopupData(callback: (index: number) => Array<string>)<sup>8+</sup> | Invoked when a request for displaying content in the index prompt window is sent when an item in the alphabetic indexer bar is selected.<br>The return value is a string array corresponding to the indexes. The string array is displayed vertically in the pop-up window. It can display up to five strings at a time and allows scrolling.|
| onPopupSelect(callback: (index: number) => void)<sup>8+</sup> | Invoked when an item in the index pop-up window is selected.|
