# AlphabetIndexer The **** component provides an alphabetic index bar. ## Applicable Devices

Phone	Tablet	Head Unit	Smart TV	Wearable
Yes	Yes	Yes	No	No

## Child Components None ## APIs AlphabetIndexer\(value: \{arrayValue : Array, selected : number\}\) - Parameters

Name	Type	Mandatory	Default Value	Description
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
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	{ size?: number, weight?: FontWeight, family?: string, style?: FontStyle }	Font style of the selected text.
popupFont	{ size?: number, weight?: FontWeight, family?: string, style?: FontStyle }	Font style of the pop-up text.
font	{ size?: number, weight?: FontWeight, family?: string, style?: FontStyle }	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
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
onSelected(index: number) => void	Callback invoked when an item in the alphabetic indexer bar is selected.

## Example ``` @Entry @Component struct AlphabetIndexerComponent { private value: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'] build() { AlphabetIndexer({ ArrayValue: this.value, selected: 0 }) .selectedColor(0xffffff) // Font color of the selected text .popupColor(0xFFFAF0) // Font color of the pop-up text .selectedBackgroundColor(0xCCCCCC) // Background color of the selected text .popupBackground(0xD2B48C) // Background color of the pop-up text .usingPopup(true) // Whether to use pop-up text .selectedFont({ size: 16, weight: FontWeight.Bolder }) // Font style of the selected text .popupFont({ size: 30, weight: FontWeight.Bolder }) // Font style of the pop-up text .itemSize(28) // Size of each item (square) .alignStyle(IndexerAlign.Left) // Left aligned .onSelected((index: number) => { console.info(this.value[index] + 'Selected') // Event indicating that an item is selected }) .margin({ left: 50 }) } } ``` ![](figures/alphabetindexer.gif)