AlphabetIndexer
The <Indexer> component can create a logically indexed array of items in a container for instant location.
NOTE
This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Child Components
Not supported
APIs
AlphabetIndexer(value: {arrayValue: Array<string>, selected: number})
Parameters
Name | Type | Mandatory | Description |
---|---|---|---|
arrayValue | Array<string> | Yes | Array of strings to be displayed in the alphabetic index bar. The value cannot be null. |
selected | number | Yes | Index of the initially selected item. If the value exceeds the value range, the default value 0 is used. |
Attributes
In addition to the universal attributes, the following attributes are supported.
Name | Type | Description |
---|---|---|
color | ResourceColor | Font color. Default value: 0x99000000 |
selectedColor | ResourceColor | Font color of the selected text. Default value: 0xFF254FF7 |
popupColor | ResourceColor | Font color of the pop-up text. Default value: 0xFF254FF7 |
selectedBackgroundColor | ResourceColor | Background color of the selected item. Default value: 0x1F0A59F7 |
popupBackground | ResourceColor | Background color of the pop-up text. Default value: 0xFFF1F3F5 |
usingPopup | boolean | Whether to use pop-up text. Default value: false |
selectedFont | Font | Font style of the selected text. Default value: { fontSize:10, fontStyle:FontStyle.Normal, fontWeight:FontWeight.Normal, fontFamily:HarmonyOS Sans } |
popupFont | Font | Font style of the pop-up text. Default value: { fontSize:10, fontStyle:FontStyle.Normal, fontWeight:FontWeight.Normal, fontFamily:HarmonyOS Sans } |
font | Font | Default font style of the alphabetic index bar. Default value: { fontSize:10, fontStyle:FontStyle.Normal, fontWeight:FontWeight.Normal, fontFamily:HarmonyOS Sans } |
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. Default value: 24.0 |
alignStyle | IndexerAlign | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported. Default value: IndexerAlign.Right |
selected | number | Index of the selected item. Default value: 0 |
popupPosition | Position | Position of the pop-up window relative to the center of the indexer bar's top border. Default value: {x:96.0, y:48.0} |
IndexerAlign
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
Only the following events are supported.
Name | Description |
---|---|
onSelected(callback: (index: number) => void)(deprecated) | Invoked when an item in the alphabetic indexer bar is selected. The return value is the index of the selected item. |
onSelect(callback: (index: number) => void)8+ | Invoked when an item in the alphabetic indexer bar is selected. The return value is the index of the selected item. |
onRequestPopupData(callback: (index: number) => Array<string>)8+ | Invoked when a request for displaying content in the index prompt window is sent after an item in the alphabetic indexer bar is selected. 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)8+ | Invoked when an item in the index pop-up window is selected. |
Example
// xxx.ets
@Entry
@Component
struct AlphabetIndexerSample {
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
.onSelect((index: number) => {
console.info(this.value[index] + 'Selected') // Event indicating that an item is selected
})
.margin({ left: 50 })
}
}