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