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: {arrayValue: Array<string>, selected: number}) 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| arrayValue | Array<string> | Yes| Array of index items.| 28| 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).| 29 30## Attributes 31 32When 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. 33 34The default value of the [padding](ts-universal-attributes-size.md#padding) attribute is 4 vp. 35 36The [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. 37 38In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 39 40### color 41 42color(value: ResourceColor) 43 44Sets the text color for unselected items. 45 46**Atomic service API**: This API can be used in atomic services since API version 11. 47 48**System capability**: SystemCapability.ArkUI.ArkUI.Full 49 50**Parameters** 51 52| Name| Type | Mandatory| Description | 53| ------ | ------------------------------------------ | ---- | ----------------------------------- | 54| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Text color of unselected items.<br>Default value: **0x99182431**| 55 56### selectedColor 57 58selectedColor(value: ResourceColor) 59 60Sets the text color for the selected item. 61 62**Atomic service API**: This API can be used in atomic services since API version 11. 63 64**System capability**: SystemCapability.ArkUI.ArkUI.Full 65 66**Parameters** 67 68| Name| Type | Mandatory| Description | 69| ------ | ------------------------------------------ | ---- | ----------------------------------------- | 70| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Text color of the selected item.<br>Default value: **0xFF007DFF**| 71 72### popupColor 73 74popupColor(value: ResourceColor) 75 76Sets the text color for the primary index item in the pop-up window. 77 78**Atomic service API**: This API can be used in atomic services since API version 11. 79 80**System capability**: SystemCapability.ArkUI.ArkUI.Full 81 82**Parameters** 83 84| Name| Type | Mandatory| Description | 85| ------ | ------------------------------------------ | ---- | ------------------------------------------- | 86| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Text color of the primary index item in the pop-up window.<br>Default value: **0xFF007DFF**| 87 88### selectedBackgroundColor 89 90selectedBackgroundColor(value: ResourceColor) 91 92Sets the background color of the selected item. 93 94**Atomic service API**: This API can be used in atomic services since API version 11. 95 96**System capability**: SystemCapability.ArkUI.ArkUI.Full 97 98**Parameters** 99 100| Name| Type | Mandatory| Description | 101| ------ | ------------------------------------------ | ---- | ----------------------------------------- | 102| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Background color of the selected item.<br>Default value: **0x1A007DFF**| 103 104### popupBackground 105 106popupBackground(value: ResourceColor) 107 108Sets the background color for the pop-up window. 109 110**Atomic service API**: This API can be used in atomic services since API version 11. 111 112**System capability**: SystemCapability.ArkUI.ArkUI.Full 113 114**Parameters** 115 116| Name| Type | Mandatory| Description | 117| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 118| 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**| 119 120### usingPopup 121 122usingPopup(value: boolean) 123 124Sets whether to display the pop-up window. 125 126**Atomic service API**: This API can be used in atomic services since API version 11. 127 128**System capability**: SystemCapability.ArkUI.ArkUI.Full 129 130**Parameters** 131 132| Name| Type | Mandatory| Description | 133| ------ | ------- | ---- | -------------------------------------- | 134| value | boolean | Yes | Whether to display the pop-up window.<br>Default value: **false**| 135 136### selectedFont 137 138selectedFont(value: Font) 139 140Sets the text style for the selected item. 141 142**Atomic service API**: This API can be used in atomic services since API version 11. 143 144**System capability**: SystemCapability.ArkUI.ArkUI.Full 145 146**Parameters** 147 148| Name| Type | Mandatory| Description | 149| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 150| 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.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>} | 151 152### popupFont 153 154popupFont(value: Font) 155 156Sets the text style for the primary index item in the pop-up window. 157 158**Atomic service API**: This API can be used in atomic services since API version 11. 159 160**System capability**: SystemCapability.ArkUI.ArkUI.Full 161 162**Parameters** 163 164| Name| Type | Mandatory| Description | 165| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 166| 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.Normal,<br> family:'HarmonyOS Sans'<br>} | 167 168### font 169 170font(value: Font) 171 172Sets the text style for unselected items. 173 174**Atomic service API**: This API can be used in atomic services since API version 11. 175 176**System capability**: SystemCapability.ArkUI.ArkUI.Full 177 178**Parameters** 179 180| Name| Type | Mandatory| Description | 181| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 182| 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.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>} | 183 184### itemSize 185 186itemSize(value: string | number) 187 188Sets the size of the index item area. 189 190**Atomic service API**: This API can be used in atomic services since API version 11. 191 192**System capability**: SystemCapability.ArkUI.ArkUI.Full 193 194**Parameters** 195 196| Name| Type | Mandatory| Description | 197| ------ | -------------------------- | ---- | ------------------------------------------------------------ | 198| 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| 199 200### alignStyle 201 202alignStyle(value: IndexerAlign, offset?: Length) 203 204Sets the alignment style of the indexer pop-up window. 205 206**Atomic service API**: This API can be used in atomic services since API version 11. 207 208**System capability**: SystemCapability.ArkUI.ArkUI.Full 209 210**Parameters** 211 212| Name | Type | Mandatory| Description | 213| -------------------- | ------------------------------------- | ---- | ------------------------------------------------------------ | 214| 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**| 215| 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.| 216 217### selected<sup>8+</sup> 218 219selected(index: number) 220 221Sets the index of the selected item. 222 223Since API version 10, this attribute supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md). 224 225**Atomic service API**: This API can be used in atomic services since API version 11. 226 227**System capability**: SystemCapability.ArkUI.ArkUI.Full 228 229**Parameters** 230 231| Name| Type | Mandatory| Description | 232| ------ | ------ | ---- | ---------------------------- | 233| index | number | Yes | Index of the selected item.<br>Default value: **0**| 234 235### popupPosition<sup>8+</sup> 236 237popupPosition(value: Position) 238 239Sets the position of the pop-up window relative to the center of the indexer's top border. 240 241**Atomic service API**: This API can be used in atomic services since API version 11. 242 243**System capability**: SystemCapability.ArkUI.ArkUI.Full 244 245**Parameters** 246 247| Name| Type | Mandatory| Description | 248| ------ | --------------------------------- | ---- | ------------------------------------------------------------ | 249| 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}**| 250 251### popupSelectedColor<sup>10+</sup> 252 253popupSelectedColor(value: ResourceColor) 254 255Sets the text color for the selected secondary index item in the pop-up window. 256 257**Atomic service API**: This API can be used in atomic services since API version 11. 258 259**System capability**: SystemCapability.ArkUI.ArkUI.Full 260 261**Parameters** 262 263| Name| Type | Mandatory| Description | 264| ------ | ------------------------------------------ | ---- | ----------------------------------------------------- | 265| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Text color of the selected secondary index item in the pop-up window.<br>Default value: **#FF182431**| 266 267### popupUnselectedColor<sup>10+</sup> 268 269popupUnselectedColor(value: ResourceColor) 270 271Sets the text color for the unselected secondary index items in the pop-up window. 272 273**Atomic service API**: This API can be used in atomic services since API version 11. 274 275**System capability**: SystemCapability.ArkUI.ArkUI.Full 276 277**Parameters** 278 279| Name| Type | Mandatory| Description | 280| ------ | ------------------------------------------ | ---- | ------------------------------------------------------- | 281| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Text color of the unselected secondary index items in the pop-up window.<br>Default value: **#FF182431**| 282 283### popupItemFont<sup>10+</sup> 284 285popupItemFont(value: Font) 286 287Sets the text style for the secondary index item in the pop-up window. 288 289**Atomic service API**: This API can be used in atomic services since API version 11. 290 291**System capability**: SystemCapability.ArkUI.ArkUI.Full 292 293**Parameters** 294 295| Name| Type | Mandatory| Description | 296| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 297| 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>} | 298 299### popupItemBackgroundColor<sup>10+</sup> 300 301popupItemBackgroundColor(value: ResourceColor) 302 303Sets the background color for the secondary index item in the pop-up window. 304 305**Atomic service API**: This API can be used in atomic services since API version 11. 306 307**System capability**: SystemCapability.ArkUI.ArkUI.Full 308 309**Parameters** 310 311| Name| Type | Mandatory| Description | 312| ------ | ------------------------ | ---- | ----------------------------------------------- | 313| 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**| 314 315### autoCollapse<sup>11+</sup> 316 317autoCollapse(value: boolean) 318 319Sets whether to auto-collapse or expand the indexer bar. 320 321When the first index item is **#**: 322 323- 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. 324- 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. 325- 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. 326 327When the first index item is not **#**: 328 329- If the total number of index items is less than or equal to 9, the full display mode is used. 330- 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. 331- 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. 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 for the primary index item 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 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**.| 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 | Yes | 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 indexer.<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 indexer.<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 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.| 428| 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.| 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) => void) 437 438Triggered when an index item is selected, with the callback parameter being the index of the currently 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: (index: number) => void) 453 454Triggered when an index item is selected, with the callback parameter being the index of the currently 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| index | number | Yes | Index of the selected item.| 465 466### onRequestPopupData<sup>8+</sup> 467 468onRequestPopupData(callback: (index: number) => Array<string>) 469 470Triggered 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. 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| index | number | Yes | Index of the selected item.| 481 482**Return value** 483 484| Type | Description | 485| ------ | ------------------------------------------------------------ | 486| 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 a time and allows scrolling. | 487 488### onPopupSelect<sup>8+</sup> 489 490onPopupSelect(callback: (index: number) => void) 491 492Triggered when a secondary index item in the pop-up window is selected. The callback parameter is the index of the selected secondary index item. 493 494**Atomic service API**: This API can be used in atomic services since API version 11. 495 496**System capability**: SystemCapability.ArkUI.ArkUI.Full 497 498**Parameters** 499 500| Name| Type | Mandatory| Description | 501| ------ | ------ | ---- | ---------------- | 502| index | number | Yes | Index of the selected item..| 503 504 505## Example 506 507### Example 1: Setting the Display Text for the Index Pop-up Window 508 509This example demonstrates how to customize the display text for the index pop-up window using the [onRequestPopupData](#onrequestpopupdata8) event. 510 511```ts 512// xxx.ets 513@Entry 514@Component 515struct AlphabetIndexerSample { 516 private arrayA: string[] = ['Ann'] 517 private arrayB: string[] = ['Ben', 'Bob'] 518 private arrayC: string[] = ['Calvin', 'Cameron', 'Charlie', 'Charlotte'] 519 private arrayL: string[] = ['Daisy', 'Daniel', 'Darla', 'David', 'Derek', 'Dorothy', 'Duke'] 520 private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 521 'H', 'I', 'J', 'K', 'L', 'M', 'N', 522 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 523 'V', 'W', 'X', 'Y', 'Z'] 524 525 build() { 526 Stack({ alignContent: Alignment.Start }) { 527 Row() { 528 List({ space: 20, initialIndex: 0 }) { 529 ForEach(this.arrayA, (item: string) => { 530 ListItem() { 531 Text(item) 532 .width('80%') 533 .height('5%') 534 .fontSize(30) 535 .textAlign(TextAlign.Center) 536 } 537 }, (item: string) => item) 538 539 ForEach(this.arrayB, (item: string) => { 540 ListItem() { 541 Text(item) 542 .width('80%') 543 .height('5%') 544 .fontSize(30) 545 .textAlign(TextAlign.Center) 546 } 547 }, (item: string) => item) 548 549 ForEach(this.arrayC, (item: string) => { 550 ListItem() { 551 Text(item) 552 .width('80%') 553 .height('5%') 554 .fontSize(30) 555 .textAlign(TextAlign.Center) 556 } 557 }, (item: string) => item) 558 559 ForEach(this.arrayL, (item: string) => { 560 ListItem() { 561 Text(item) 562 .width('80%') 563 .height('5%') 564 .fontSize(30) 565 .textAlign(TextAlign.Center) 566 } 567 }, (item: string) => item) 568 } 569 .width('50%') 570 .height('100%') 571 572 AlphabetIndexer({ arrayValue: this.value, selected: 0 }) 573 .autoCollapse (false) // Disable the auto-collapse mode. 574 .enableHapticFeedback(false) // Disable haptic feedback. 575 .selectedColor(0xFFFFFF) // Font color of the selected text. 576 .popupColor(0xFFFAF0) // Text color of the primary index item in the pop-up window. 577 .selectedBackgroundColor(0xCCCCCC) // Background color of the selected item. 578 .popupBackground (0xD2B48C) // Background color of the pop-up window. 579 .usingPopup(true) // Display a pop-up window when an index item is selected. 580 .selectedFont({ size: 16, weight: FontWeight.Bolder }) // Text style of the selected item. 581 .popupFont({ size: 30, weight: FontWeight.Bolder }) // Text style of the primary index item in the pop-up window. 582 .itemSize(28) // Size of each index item. 583 .alignStyle (IndexerAlign.Left) // The pop-up window is displayed on the right of the indexer. 584 .popupItemBorderRadius(24) // Set the radius of the index background rounded corners in the pop-up window. 585 .itemBorderRadius(14) // Set the radius of the index background rounded corners in the alphabetic indexer bar. 586 .popupBackgroundBlurStyle(BlurStyle.NONE) // Set the background blur style of the pop-up window. 587 .popupTitleBackground(0xCCCCCC) // Background color of the primary index item in the pop-up window. 588 .popupSelectedColor(0x00FF00) // Text color of the unselected secondary index items in the pop-up window. 589 .popupUnselectedColor(0x0000FF) // Text color of the selected secondary index item in the pop-up window. 590 .popupItemFont({ size: 30, style: FontStyle.Normal }) // Text style of the secondary index item in the pop-up window. 591 .popupItemBackgroundColor(0xCCCCCC) // Background color of the secondary index item in the pop-up window. 592 .onSelect((index: number) => { 593 console.info(this.value[index] + ' Selected!') 594 }) 595 .onRequestPopupData((index: number) => { 596 // 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. 597 // For other index items, the pop-up window will only show the primary index item. 598 if (this.value[index] == 'A') { 599 return this.arrayA 600 } else if (this.value[index] == 'B') { 601 return this.arrayB 602 } else if (this.value[index] == 'C') { 603 return this.arrayC 604 } else if (this.value[index] == 'L') { 605 return this.arrayL 606 } else { 607 return [] 608 } 609 }) 610 .onPopupSelect((index: number) => { 611 console.info('onPopupSelected:' + index) 612 }) 613 } 614 .width('100%') 615 .height('100%') 616 } 617 } 618} 619``` 620 621 622 623### Example 2: Enabling Adaptive Collapse Mode 624 625This example demonstrates how to enable adaptive collapse mode using the [autoCollapse](#autocollapse11) attribute. 626 627```ts 628// xxx.ets 629@Entry 630@Component 631struct AlphabetIndexerSample { 632 private arrayA:string[] = ['Ann'] 633 private arrayB: string[] = ['Ben', 'Bob'] 634 private arrayC: string[] = ['Calvin', 'Cameron', 'Charlie', 'Charlotte'] 635 private arrayJ: string[] = ['Jack', 'James'] 636 private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 637 'H', 'I', 'J', 'K', 'L', 'M', 'N', 638 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 639 'V', 'W', 'X', 'Y', 'Z'] 640 @State isNeedAutoCollapse: boolean = false; 641 @State indexerHeight: string = '75%'; 642 643 build() { 644 Stack({ alignContent: Alignment.Start }) { 645 Row() { 646 List({ space: 20, initialIndex: 0 }) { 647 ForEach(this.arrayA, (item: string) => { 648 ListItem() { 649 Text(item) 650 .width('80%') 651 .height('5%') 652 .fontSize(30) 653 .textAlign(TextAlign.Center) 654 } 655 }, (item: string) => item) 656 657 ForEach(this.arrayB, (item: string) => { 658 ListItem() { 659 Text(item) 660 .width('80%') 661 .height('5%') 662 .fontSize(30) 663 .textAlign(TextAlign.Center) 664 } 665 }, (item: string) => item) 666 667 ForEach(this.arrayC, (item: string) => { 668 ListItem() { 669 Text(item) 670 .width('80%') 671 .height('5%') 672 .fontSize(30) 673 .textAlign(TextAlign.Center) 674 } 675 }, (item: string) => item) 676 677 ForEach(this.arrayJ, (item: string) => { 678 ListItem() { 679 Text(item) 680 .width('80%') 681 .height('5%') 682 .fontSize(30) 683 .textAlign(TextAlign.Center) 684 } 685 }, (item: string) => item) 686 } 687 .width('50%') 688 .height('100%') 689 690 Column() { 691 Column() { 692 AlphabetIndexer({ arrayValue: this.value, selected: 0 }) 693 .autoCollapse (this.isNeedAutoCollapse) // Enable or disable adaptive collapse mode. 694 .height (this.indexerHeight) // Indexer height. 695 .enableHapticFeedback(false) // Disable haptic feedback. 696 .selectedColor(0xFFFFFF) // Font color of the selected text. 697 .popupColor(0xFFFAF0) // Text color of the primary index item in the pop-up window. 698 .selectedBackgroundColor(0xCCCCCC) // Background color of the selected item. 699 .popupBackground (0xD2B48C) // Background color of the pop-up window. 700 .usingPopup(true) // Display a pop-up window when an index item is selected. 701 .selectedFont({ size: 16, weight: FontWeight.Bolder }) // Text style of the selected item. 702 .popupFont({ size: 30, weight: FontWeight.Bolder }) // Text style of the pop-up window. 703 .itemSize(28) // Size of an item in the alphabetic index bar. 704 .alignStyle(IndexerAlign.Right) // The pop-up window is displayed on the left of the indexer. 705 .popupTitleBackground("#D2B48C") // Background color of the primary index item in the pop-up window. 706 .popupSelectedColor(0x00FF00) // Text color of the unselected secondary index items in the pop-up window. 707 .popupUnselectedColor(0x0000FF) // Text color of the selected secondary index item in the pop-up window. 708 .popupItemFont({ size: 30, style: FontStyle.Normal }) // Text style of the secondary index item in the pop-up window. 709 .popupItemBackgroundColor(0xCCCCCC) // Background color of the secondary index item in the pop-up window. 710 .onSelect((index: number) => { 711 console.info(this.value[index] + ' Selected!'); 712 }) 713 .onRequestPopupData((index: number) => { 714 // 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. 715 // For other index items, the pop-up window will only show the primary index item. 716 if (this.value[index] == 'A') { 717 return this.arrayA; 718 } else if (this.value[index] == 'B') { 719 return this.arrayB; 720 } else if (this.value[index] == 'C') { 721 return this.arrayC; 722 } else if (this.value[index] == 'J') { 723 return this.arrayJ; 724 } else { 725 return []; 726 } 727 }) 728 .onPopupSelect((index: number) => { 729 console.info('onPopupSelected:' + index); 730 }) 731 } 732 .height('80%') 733 .justifyContent(FlexAlign.Center) 734 735 Column() { 736 Button('Collapse') 737 .margin('5vp') 738 .onClick(() => { 739 this.isNeedAutoCollapse = true; 740 }) 741 Button('30% of Index Bar Height') 742 .margin('5vp') 743 .onClick(() => { 744 this.indexerHeight = '30%'; 745 }) 746 Button('70% of Index Bar Height') 747 .margin('5vp') 748 .onClick(() => { 749 this.indexerHeight = '70%'; 750 }) 751 }.height('20%') 752 } 753 .width('50%') 754 .justifyContent(FlexAlign.Center) 755 } 756 .width('100%') 757 .height(720) 758 } 759 } 760} 761``` 762 763 764 765### Example 3: Setting the Background Blur Style of the Pop-up Window 766 767This example demonstrates how to apply a background blur effect to the pop-up window using the [popupBackgroundBlurStyle](#popupbackgroundblurstyle12) attribute. 768 769```ts 770// xxx.ets 771@Entry 772@Component 773struct AlphabetIndexerSample { 774 private arrayA:string[] = ['Ann'] 775 private arrayB: string[] = ['Ben', 'Bob'] 776 private arrayC: string[] = ['Calvin', 'Cameron', 'Charlie', 'Charlotte'] 777 private arrayL: string[] = ['Daisy', 'Daniel', 'Darla', 'David', 'Derek', 'Dorothy', 'Duke'] 778 private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 779 'H', 'I', 'J', 'K', 'L', 'M', 'N', 780 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 781 'V', 'W', 'X', 'Y', 'Z'] 782 @State customBlurStyle: BlurStyle = BlurStyle.NONE; 783 784 build() { 785 Stack({ alignContent: Alignment.Start }) { 786 Row() { 787 List({ space: 20, initialIndex: 0 }) { 788 ForEach(this.arrayA, (item: string) => { 789 ListItem() { 790 Text(item) 791 .width('80%') 792 .height('5%') 793 .fontSize(30) 794 .textAlign(TextAlign.Center) 795 } 796 }, (item: string) => item) 797 798 ForEach(this.arrayB, (item: string) => { 799 ListItem() { 800 Text(item) 801 .width('80%') 802 .height('5%') 803 .fontSize(30) 804 .textAlign(TextAlign.Center) 805 } 806 }, (item: string) => item) 807 808 ForEach(this.arrayC, (item: string) => { 809 ListItem() { 810 Text(item) 811 .width('80%') 812 .height('5%') 813 .fontSize(30) 814 .textAlign(TextAlign.Center) 815 } 816 }, (item: string) => item) 817 818 ForEach(this.arrayL, (item: string) => { 819 ListItem() { 820 Text(item) 821 .width('80%') 822 .height('5%') 823 .fontSize(30) 824 .textAlign(TextAlign.Center) 825 } 826 }, (item: string) => item) 827 } 828 .width('30%') 829 .height('100%') 830 831 Column() { 832 Column() { 833 Text('Switch Blue Style:') 834 .fontSize(24) 835 .fontColor(0xcccccc) 836 .width('100%') 837 Button('COMPONENT_REGULAR') 838 .margin('5vp') 839 .width(200) 840 .onClick(() => { 841 this.customBlurStyle = BlurStyle.COMPONENT_REGULAR; 842 }) 843 Button('BACKGROUND_THIN') 844 .margin('5vp') 845 .width(200) 846 .onClick(() => { 847 this.customBlurStyle = BlurStyle.BACKGROUND_THIN; 848 }) 849 }.height('20%') 850 851 Column() { 852 AlphabetIndexer({ arrayValue: this.value, selected: 0 }) 853 .usingPopup(true) // Display a pop-up window when an index item is selected. 854 .alignStyle (IndexerAlign.Left) // The pop-up window is displayed on the right of the indexer. 855 .popupItemBorderRadius(24) // Set the radius of the index background rounded corners in the pop-up window. 856 .itemBorderRadius(14) // Set the radius of the index background rounded corners in the alphabetic indexer bar. 857 .popupBackgroundBlurStyle(this.customBlurStyle) // Set the background blur style of the pop-up window. 858 .popupTitleBackground(0xCCCCCC) // Background color of the primary index item in the pop-up window. 859 .onSelect((index: number) => { 860 console.info(this.value[index] + ' Selected!') 861 }) 862 .onRequestPopupData((index: number) => { 863 // 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. 864 // For other index items, the pop-up window will only show the primary index item. 865 if (this.value[index] == 'A') { 866 return this.arrayA 867 } else if (this.value[index] == 'B') { 868 return this.arrayB 869 } else if (this.value[index] == 'C') { 870 return this.arrayC 871 } else if (this.value[index] == 'L') { 872 return this.arrayL 873 } else { 874 return [] 875 } 876 }) 877 .onPopupSelect((index: number) => { 878 console.info('onPopupSelected:' + index) 879 }) 880 } 881 .height('80%') 882 } 883 .width('70%') 884 } 885 .width('100%') 886 .height('100%') 887 .backgroundImage($r("app.media.image")) 888 } 889 } 890} 891``` 892 893 894
