1# ChipGroup 2 3**ChipGroup** is an advanced component that provides a group of chips for scenarios such as categorizing files or resource content. 4 5> **NOTE** 6> 7> This component is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Modules to Import 10 11```typescript 12import { ChipSize, ChipGroup } from '@kit.ArkUI' 13``` 14 15## Child Components 16 17Not supported 18 19## ChipGroup 20 21``` 22ChipGroup({ 23 items: ChipGroupItemOptions[], 24 itemStyle?: ChipItemStyle, 25 selectedIndexes?: Array<number>, 26 multiple?: boolean, 27 chipGroupSpace?: ChipGroupSpaceOptions, 28 chipGroupPadding?: ChipGroupPaddingOptions, 29 onChange?: (selectedIndexes: Array<number>) => void, 30 suffix?: Callback<void> 31}) 32``` 33 34**Decorator**: @Component 35 36**Atomic service API**: This API can be used in atomic services since API version 12. 37 38**System capability**: SystemCapability.ArkUI.ArkUI.Full 39 40| Name | Type | Mandatory| Description | 41| --------------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 42| items | [ChipGroupItemOptions[]](#chipgroupitemoptions) | Yes | Specific attributes of individual chips. For details, see [ChipGroupItemOptions[]](#chipgroupitemoptions).<br>If this parameter is set to **undefined**, the chip group is empty by default. | 43| itemStyle | [ChipItemStyle](#chipitemstyle) | No | Chip style, including the color and size. For details, see [ChipItemStyle](#chipitemstyle).<br>If this parameter is set to **undefined**, the default chip style is used. | 44| selectedIndexes | Array<number> | No | Index of the selected chip.<br>If this parameter is set to **undefined**, the first chip is selected. | 45| multiple | boolean | No | Whether multiple chips can be selected.<br>**true**: Multiple chips can be selected.<br>**false**: Only one chip can be selected.<br>Default value: **false**<br>If this parameter is set to **undefined**, the default value is used. | 46| chipGroupSpace | [ChipGroupSpaceOptions](#chipgroupspaceoptions) | No | Left and right padding, and the spacing between chips. For details, see [ChipGroupSpaceOptions](#chipgroupspaceoptions).<br>If this parameter is set to **undefined**, the default value is used.| 47| chipGroupPadding | [ChipGroupPaddingOptions](#chipgrouppaddingoptions) | No | Top and bottom padding, used to control the overall height. For details, see [ChipGroupPaddingOptions](#chipgrouppaddingoptions).<br>If this parameter is set to **undefined**, the default value is used.| 48| onChange | Callback\<Array\<number>> | No | Callback invoked when the chip status changes.<br>If the value is **undefined**, the event is unbound. | 49| suffix | ()=>void | No | Suffix, which is a builder customized by the user and requires importing the [IconGroupSuffix](#icongroupsuffix) API when used.<br>Default value: The suffix is not displayed if not passed.| 50 51> **NOTE** 52> 53> 1. When **multiple** is set to **false**, if **selectedIndexes** is not passed in, the first chip is automatically selected by default. However, if the provided **selectedIndexes** includes multiple elements, the chip at the first index is selected by default. 54> 55> 2. For the **suffix** API to work, you must include the **IconGroupSuffix** API when implementing it. If no value is specified for **suffix**, no suffix will be displayed. 56> 57> 3. The icon fill colors, such as **fillColor** and **activedFillColor**, are set to be consistent with the font color (**fontColor**). To differentiate the icon colors from the font color, include **prefixSymbol** when you pass in [ChipGroupSpaceOptions](#chipgroupspaceoptions). 58 59## ChipGroupItemOptions 60 61Defines the specific attributes of individual chips. 62 63**Atomic service API**: This API can be used in atomic services since API version 12. 64 65**System capability**: SystemCapability.ArkUI.ArkUI.Full 66 67| Name | Type | Mandatory| Description | 68| ---------- | ----------------------------- | ---- | ----------------------------------- | 69| prefixIcon | [IconOptions](#iconoptions) | No | Prefix image icon of the chip. | 70| prefixSymbol | [ChipSymbolGlyphOptions](ohos-arkui-advanced-Chip.md#chipsymbolglyphoptions12) | No | Prefix symbol glyph icon of the chip. | 71| label | [LabelOptions](#labeloptions) | Yes | Text of the chip. | 72| suffixIcon<sup>(deprecated)</sup> | [IconOptions](#iconoptions) | No | Suffix image icon of the chip.<br>**NOTE**<br>This API is supported since API version 12 and deprecated since API version 14. You are advised to use **suffixImageIcon** instead.| 73| suffixSymbol | [ChipSymbolGlyphOptions](ohos-arkui-advanced-Chip.md#chipsymbolglyphoptions12) | No | Suffix symbol glyph icon of the chip. | 74| allowClose | boolean | No | Whether to show the close icon.<br>Default value: **false** | 75| suffixImageIcon<sup>14+</sup> | [SuffixImageIconOptions](#suffiximageiconoptions14) | No| Suffix image icon of the chip.| 76| suffixSymbolOptions<sup>14+</sup> | [ChipSuffixSymbolGlyphOptions](ohos-arkui-advanced-Chip.md#chipsuffixsymbolglyphoptions14) | No| Suffix symbol icon of the chip.| 77| closeOptions<sup>14+</sup> | [CloseOptions](ohos-arkui-advanced-Chip.md#closeoptions14) | No| Accessibility options of the default close icon.| 78| accessibilityDescription<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility description of the chip.| 79| accessibilityLevel<sup>14+</sup> | string | No| Accessibility level of the chip.<br>Default value: **"auto"**| 80 81 82>**NOTE** 83> 84>If **suffixIcon** is specified, **allowClose** has no effect. 85 86## ChipItemStyle 87 88Defines the common attributes shared by all chips in the chip group. 89 90**Atomic service API**: This API can be used in atomic services since API version 12. 91 92**System capability**: SystemCapability.ArkUI.ArkUI.Full 93 94| Name | Type | Mandatory| Description | 95| ----------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 96| size | [ChipSize](ohos-arkui-advanced-Chip.md#chipsize) \| [SizeOptions](ts-types.md#sizeoptions) | No | Chip size. To use this API, you must import the **ChipSize** type from the **Chip** component.<br>Default value: **ChipSize**: **ChipSize.NORMAL**<br> If this parameter is set to **undefined**, the default value is used.| 97| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the chip.<br>Default value: **$r('sys.color.ohos_id_color_button_normal')**<br>If this parameter is set to **undefined**, the default value is used.| 98| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the chip.<br>Default value: **$r('sys.color.ohos_id_color_text_primary')**<br>If this parameter is set to **undefined**, the default value is used.| 99| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the chip when it is activated or selected.<br>Default value: **$r('sys.color.ohos_id_color_text_primary_contrary')**<br>If this parameter is set to **undefined**, the default value is used.| 100| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the chip when it is activated or selected.<br>Default value: **$r('sys.color.ohos_id_color_emphasize').**<br>If this parameter is set to **undefined**, the default value is used.| 101 102> **NOTE** 103> 104> 1. The size settings for chips can be of two types: (1) **ChipSize**, which conveniently offers two size options, **NORMAL** and **SMALL**; (2) **SizeOptions**. 105> 106> 2. If **undefined** is assigned to **backgroundColor** or **selectedBackgroundColor**, the default background color is used. If an invalid value is assigned, the background color is transparent. 107 108## ChipGroupSpaceOptions 109 110Defines the left and right padding of the chip group, and the spacing between chips. 111 112**Atomic service API**: This API can be used in atomic services since API version 12. 113 114**System capability**: SystemCapability.ArkUI.ArkUI.Full 115 116| Name | Type | Mandatory| Description | 117| ---------- | -------------- | ---- | ------------------------------------------------ | 118| itemSpace | string \| number | No | Spacing between chips. Percentage values are not supported.<br>Default value: **8**<br>Unit: vp<br>If this parameter is set to **undefined**, the default value is used. | 119| startSpace | [Length](ts-types.md#length) | No | Left padding. Percentage values are not supported.<br>Default value: **16**<br>Unit: vp<br>If this parameter is set to **undefined**, the default value is used. | 120| endSpace | [Length](ts-types.md#length) | No | Right padding. Percentage values are not supported.<br>Default value: **16**<br>Unit: vp<br>If this parameter is set to **undefined**, the default value is used.| 121 122## ChipGroupPaddingOptions 123 124Defines the top and bottom padding of the chip group, used to control the overall height. 125 126**Atomic service API**: This API can be used in atomic services since API version 12. 127 128**System capability**: SystemCapability.ArkUI.ArkUI.Full 129 130| Name | Type | Mandatory| Description | 131| ------ | -------------- | ---- | ------------------------------------------------ | 132| top | [Length](ts-types.md#length) | Yes | Top padding. Percentage values are not supported.<br>Default value: **14**<br>If this parameter is set to **undefined**, the default value is used. | 133| bottom | [Length](ts-types.md#length) | Yes | Bottom padding. Percentage values are not supported.<br>Default value: **14**<br>If this parameter is set to **undefined**, the default value is used. | 134 135## SuffixImageIconOptions<sup>14+</sup> 136 137Defines the suffix iconoptions. 138 139Inherits [IconOptions](#iconoptions). 140 141**Atomic service API**: This API can be used in atomic services since API version 14. 142 143**System capability**: SystemCapability.ArkUI.ArkUI.Full 144 145| Name| Type| Mandatory| Description| 146| ---- | ---- | --- | ---- | 147| action | [VoidCallback](ts-types.md#voidcallback12) | No| Action of the suffix icon.| 148| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility text of the suffix icon.| 149| accessibilityLevel | string | No| Accessibility level of the suffix icon.<br>Default value: **"auto"**| 150 151## SymbolItemOptions<sup>14+</sup> 152 153Defines the options for the trailing symbol item in a chip group. 154 155**Atomic service API**: This API can be used in atomic services since API version 14. 156 157**System capability**: SystemCapability.ArkUI.ArkUI.Full 158 159| Name| Type| Mandatory| Description| 160| ---- | ---- | --- | ---- | 161| symbol | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No| Settings of the trailing symbol item.| 162| action | [VoidCallback](ts-types.md#voidcallback12) | No| Action of the trailing symbol item.| 163| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility text of the trailing symbol item.| 164| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility description of the trailing symbol item.| 165| accessibilityLevel | string | No| Accessibility level of the trailing symbol item.<br>Default value: **"auto"**| 166 167## IconGroupSuffix 168 169**Decorator**: @Component 170 171**Atomic service API**: This API can be used in atomic services since API version 12. 172 173**System capability**: SystemCapability.ArkUI.ArkUI.Full 174 175| Name | Type | Mandatory| Description | 176| -------- | ---------------------- | ---- | ----------------------------------------------| 177| items | Array<[IconItemOptions](#iconitemoptions) \| [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) \| [ SymbolItemOptions](#symbolItemoptions14)> | Yes | Custom builder items.| 178 179> **NOTE** 180> 181> With **SymbolGlyphModifier**, neither modifying the animation type with **symbolEffect** nor setting the effect strategy with **effectStrategy** is supported. 182> 183 184## IconItemOptions 185 186Defines the tail builder, which imposes limitations on the settings for the background size and color. 187 188**Atomic service API**: This API can be used in atomic services since API version 12. 189 190**System capability**: SystemCapability.ArkUI.ArkUI.Full 191 192| Name | Type | Mandatory| Description | 193| -------- | -------------- | ---- | ------------------------------ | 194| icon | [IconOptions](#iconoptions) | Yes | Custom builder icon.<br>When the chip size is **ChipSize.SMALL**, the default suffix is at {width: 16, height: 16}.<br>When the chip size is **ChipSize.NORMAL**, the default suffix is at {width: 24, height: 24}.<br> To dynamically change the size, you must use the [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) type when importing the [IconGroupSuffix](#icongroupsuffix) API. | 195| action | Callback\<void> | Yes | Callback of custom builder items.<br>If the value is **undefined**, the event is unbound. | 196| accessibilityText<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility text of the trailing symbol item.| 197| accessibilityDescription<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility description of the trailing symbol item.| 198| accessibilityLevel<sup>14+</sup> | string | No| Accessibility level of the trailing symbol item.<br>Default value: **"auto"**| 199 200## IconOptions 201 202Defines the common attributes of icons. 203 204**Atomic service API**: This API can be used in atomic services since API version 12. 205 206**System capability**: SystemCapability.ArkUI.ArkUI.Full 207 208| Name| Type | Mandatory| Description | 209| ---- | -------------------------------------- | ---- | ------------------------------------------------------------ | 210| src | [ResourceStr](ts-types.md#resourcestr) | Yes | Icon source, which can be a specific image path or an image reference. | 211| size | [SizeOptions](ts-types.md#sizeoptions) | No | Icon size. This parameter cannot be set in percentage.| 212 213## LabelOptions 214 215Defines the common attributes of labels. 216 217**Atomic service API**: This API can be used in atomic services since API version 12. 218 219**System capability**: SystemCapability.ArkUI.ArkUI.Full 220 221| Name| Type | Mandatory | Description | 222| ---- | ------ | ---- | -------- | 223| text | string | Yes | Text of the chip. | 224 225## Example 226 227### Example 1: Suffix Not Included 228 229```typescript 230import { ChipSize, ChipGroup } from '@kit.ArkUI' 231 232@Entry 233@Preview 234@Component 235struct Index { 236 @State selected_index: Array<number> = [0, 1, 2, 3, 4, 5, 6] 237 build() { 238 Column() { 239 ChipGroup({ 240 items: [ 241 { 242 prefixIcon: { src: $r('app.media.icon') }, 243 label: { text: "Chip 1" }, 244 suffixIcon: { src: $r('sys.media.ohos_ic_public_cut') }, 245 allowClose: false 246 }, 247 { 248 prefixIcon: { src: $r('sys.media.ohos_ic_public_copy') }, 249 label: { text: "Chip 2" }, 250 allowClose: true 251 }, 252 { 253 prefixIcon: { src: $r('sys.media.ohos_ic_public_clock') }, 254 label: { text: "Chip 3" }, 255 allowClose: true 256 }, 257 { 258 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') }, 259 label: { text: "Chip 4" }, 260 allowClose: true 261 }, 262 { 263 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_mirror') }, 264 label: { text: "Chip 5" }, 265 allowClose: true 266 }, 267 { 268 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') }, 269 label: { text: "Chip 6" }, 270 allowClose: true 271 }, 272 ], 273 itemStyle: { 274 size: ChipSize.SMALL, 275 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 276 fontColor: $r('sys.color.ohos_id_color_text_primary'), 277 selectedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), 278 selectedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), 279 }, 280 selectedIndexes: this.selected_index, 281 multiple: false, 282 chipGroupSpace: { itemSpace: 8, endSpace: 0 }, 283 chipGroupPadding: { top: 10, bottom: 10 }, 284 onChange: (activatedChipsIndex:Array<number>) => { 285 console.log('chips on clicked, activated index ' + activatedChipsIndex) 286 }, 287 }) 288 } 289 } 290} 291``` 292 293 294 295### Example 2: Suffix Included 296 297```typescript 298import { ChipSize, ChipGroup, IconGroupSuffix } from '@kit.ArkUI' 299 300@Entry 301@Preview 302@Component 303struct Index { 304 @State selected_index: Array<number> = [0, 1, 2, 3, 4, 5, 6] 305 @State selected_state: boolean = true; 306 307 @LocalBuilder 308 ChipGroupSuffix(): void { 309 IconGroupSuffix({ 310 items: [{ 311 icon: { src: $r('sys.media.ohos_ic_public_search_filled'), size: { width: 36, height: 36 } }, 312 action: () => { 313 if (this.selected_state == false) { 314 this.selected_index = [0, 1, 2, 3, 4, 5, 6] 315 this.selected_state = true 316 } else { 317 this.selected_index = [] 318 this.selected_state = false 319 } 320 } 321 } 322 ] 323 }) 324 } 325 326 build() { 327 Column() { 328 ChipGroup({ 329 items: [ 330 { 331 prefixIcon: { src: $r('app.media.icon') }, 332 label: { text: "Chip 1" }, 333 suffixIcon: { src: $r('sys.media.ohos_ic_public_cut') }, 334 allowClose: false 335 }, 336 { 337 prefixIcon: { src: $r('sys.media.ohos_ic_public_copy') }, 338 label: { text: "Chip 2" }, 339 allowClose: true 340 }, 341 { 342 prefixIcon: { src: $r('sys.media.ohos_ic_public_clock') }, 343 label: { text: "Chip 3" }, 344 allowClose: true 345 }, 346 { 347 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') }, 348 label: { text: "Chip 4" }, 349 allowClose: true 350 }, 351 { 352 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_mirror') }, 353 label: { text: "Chip 5" }, 354 allowClose: true 355 }, 356 { 357 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') }, 358 label: { text: "Chip 6" }, 359 allowClose: true 360 }, 361 ], 362 itemStyle: { 363 size: ChipSize.NORMAL, 364 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 365 fontColor: $r('sys.color.ohos_id_color_text_primary'), 366 selectedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), 367 selectedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), 368 }, 369 selectedIndexes: this.selected_index, 370 multiple: true, 371 chipGroupSpace: { itemSpace: 8, endSpace: 0 }, 372 chipGroupPadding: { top: 10, bottom: 10 }, 373 onChange: (activatedChipsIndex: Array<number>) => { 374 console.log('chips on clicked, activated index ' + activatedChipsIndex) 375 }, 376 suffix: this.ChipGroupSuffix 377 }) 378 } 379 } 380} 381``` 382 383 384 385### Example 3 386This example implements **IconGroupSuffix** and **ChipGroup** with **SymbolGlyph** resources. 387```typescript 388import { ChipSize, ChipGroup, IconGroupSuffix, SymbolGlyphModifier } from '@kit.ArkUI' 389 390@Entry 391@Preview 392@Component 393struct Index { 394 @State selected_index: Array<number> = [0, 1, 2, 3, 4, 5, 6]; 395 @State selected_state: boolean = true; 396 @State prefixModifierNormal: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_star')); 397 @State prefixModifierActivated: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]); 398 @State suffixModifierNormal: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')); 399 @State suffixModifierActivated: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')).fontColor([Color.Red]); 400 401 @LocalBuilder 402 ChipGroupSuffix(): void { 403 IconGroupSuffix({ 404 items: [ 405 new SymbolGlyphModifier($r('sys.symbol.magnifyingglass')) 406 .onClick(() => { 407 if (this.selected_state == false) { 408 this.selected_index = [0, 1, 2, 3, 4, 5, 6]; 409 this.selected_state = true; 410 } else { 411 this.selected_index = []; 412 this.selected_state = false; 413 } 414 }) 415 ] 416 }) 417 } 418 419 build() { 420 Column() { 421 ChipGroup({ 422 items: [ 423 { 424 prefixSymbol: { normal: this.prefixModifierNormal, activated: this.prefixModifierActivated }, 425 label: { text: "Chip 1" }, 426 suffixSymbol: { normal: this.suffixModifierNormal, activated: this.suffixModifierActivated }, 427 allowClose: false, 428 }, 429 { 430 prefixSymbol: { normal: this.prefixModifierNormal, activated: this.prefixModifierActivated }, 431 label: { text: "Chip 2" }, 432 allowClose: true, 433 }, 434 { 435 prefixIcon: { src: $r('sys.media.ohos_ic_public_clock') }, 436 label: { text: "Chip 3" }, 437 allowClose: true, 438 }, 439 { 440 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') }, 441 label: { text: "Chip 4" }, 442 allowClose: true, 443 }, 444 { 445 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_mirror') }, 446 label: { text: "Chip 5" }, 447 allowClose: true, 448 }, 449 { 450 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') }, 451 label: { text: "Chip 6" }, 452 allowClose: true, 453 }, 454 ], 455 itemStyle: { 456 size: ChipSize.NORMAL, 457 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 458 fontColor: $r('sys.color.ohos_id_color_text_primary'), 459 selectedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), 460 selectedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), 461 }, 462 selectedIndexes: this.selected_index, 463 multiple: true, 464 chipGroupSpace: { itemSpace: 8, endSpace: 0 }, 465 chipGroupPadding: { top: 10, bottom: 10 }, 466 onChange: (activatedChipsIndex: Array<number>) => { 467 console.log('chips on clicked, activated index ' + activatedChipsIndex) 468 }, 469 suffix: this.ChipGroupSuffix 470 }) 471 } 472 } 473} 474 475``` 476 477 478### Example 4 479 480This example implements the screen reader feature for a chip group with and without a suffix area in a single-selection scenario. 481 482```typescript 483import { ChipGroup, IconGroupSuffix, SymbolGlyphModifier } from '@kit.ArkUI'; 484 485@Builder function DefaultFunction(): void {} 486 487@Component 488struct SectionGroup { 489 @Prop 490 @Require 491 title: ResourceStr; 492 @BuilderParam 493 @Require 494 content: () => void = DefaultFunction; 495 496 build() { 497 Column({ space: 4 }) { 498 Text(this.title) 499 .fontColor('#FF666666') 500 .fontSize(12) 501 Column({ space: 8 }) { 502 this.content() 503 } 504 } 505 .alignItems(HorizontalAlign.Start) 506 .width('100%') 507 } 508} 509@Component 510struct SectionItem { 511 @Prop 512 @Require 513 title: ResourceStr; 514 @BuilderParam 515 @Require 516 content: () => void = DefaultFunction; 517 518 build() { 519 Column({ space: 12 }) { 520 Text(this.title) 521 this.content() 522 } 523 .backgroundColor('#FFFFFFFF') 524 .borderRadius(12) 525 .padding(12) 526 .width('100%') 527 } 528} 529 530@Entry 531@Component 532export struct ChipGroupExample2 { 533 @LocalBuilder 534 Suffix() { 535 IconGroupSuffix({ 536 items: [ 537 { 538 icon: { src: $r('sys.media.ohos_ic_public_more'), }, 539 accessibilityText: 'More', 540 accessibilityDescription: 'Speak usage hints', 541 action: () => { 542 this.getUIContext().getPromptAction().showToast({ 543 message: 'More icon touched.' 544 }); 545 } 546 }, 547 { 548 symbol: new SymbolGlyphModifier($r('sys.symbol.more')) 549 .accessibilityText('More') 550 .accessibilityDescription('Speak usage hints'), 551 action: () => { 552 this.getUIContext().getPromptAction().showToast({ 553 message: 'More icon touched.' 554 }); 555 } 556 }, 557 { 558 icon: { src: $r('sys.media.ohos_ic_public_more'), }, 559 accessibilityText: 'More', 560 accessibilityDescription: 'Speak usage hints', 561 accessibilityLevel: 'no', 562 action: () => { 563 this.getUIContext().getPromptAction().showToast({ 564 message: 'More icon touched.' 565 }); 566 } 567 } 568 ] 569 }) 570 } 571 572 build() { 573 NavDestination() { 574 Scroll() { 575 Column({ space: 12 }) { 576 SectionGroup({ title: 'Available' }) { 577 SectionItem({ title: 'Single selection without suffix area' }) { 578 ChipGroup({ 579 items: [ 580 { 581 prefixIcon: { 582 src: $r('app.media.startIcon') 583 }, 584 label: { text: "Option 1" }, 585 suffixImageIcon: { 586 src: $r('sys.media.save_button_picture'), 587 accessibilityText: 'Save', 588 action: () => { 589 this.getUIContext().getPromptAction().showToast({ 590 message: 'Suffix icon touched.' 591 }); 592 }, 593 } 594 }, 595 { 596 label: { text: "Option 2" }, 597 suffixSymbol: { 598 normal: new SymbolGlyphModifier($r('sys.symbol.save')), 599 activated: new SymbolGlyphModifier($r('sys.symbol.save')) 600 }, 601 suffixSymbolOptions: { 602 normalAccessibility: { 603 accessibilityText: 'Save' 604 }, 605 action: () => { 606 this.getUIContext().getPromptAction().showToast({ 607 message: 'Suffix icon touched.' 608 }); 609 } 610 } 611 }, 612 { 613 label: { text: "Option 3" }, 614 suffixIcon: { src: $r('sys.media.save_button_picture'), } 615 }, 616 { label: { text: "Option 4" } }, 617 { label: { text: "Option 5" } }, 618 { label: { text: "Option 6" } }, 619 { label: { text: "Option 7" } }, 620 { label: { text: "Option 8" } }, 621 { label: { text: "Option 9" } }, 622 ] 623 }) 624 } 625 SectionItem({ title: 'Single selection with suffix area' }) { 626 ChipGroup({ 627 items: [ 628 { label: { text: "Option 1" } }, 629 { label: { text: "Option 2" } }, 630 { label: { text: "Option 3" } }, 631 { label: { text: "Option 4" } }, 632 { label: { text: "Option 5" } }, 633 { label: { text: "Option 6" } }, 634 { label: { text: "Option 7" } }, 635 { label: { text: "Option 8" } }, 636 { label: { text: "Option 9" } }, 637 ], 638 suffix: this.Suffix.bind(this), 639 }) 640 } 641 } 642 } 643 } 644 .padding({ 645 top: 8, 646 bottom: 8, 647 left: 16, 648 right: 16, }) 649 } 650 .title('Basic usage') 651 .backgroundColor('#F1F3F5') 652 } 653} 654``` 655 656### Example 5 657 658This example implements the screen reader feature for a chip group with and without a suffix area in a multi-selection scenario. 659 660```typescript 661import { ChipGroup, IconGroupSuffix, SymbolGlyphModifier } from '@kit.ArkUI'; 662 663@Builder function DefaultFunction(): void {} 664 665@Component 666struct SectionGroup { 667 @Prop 668 @Require 669 title: ResourceStr; 670 @BuilderParam 671 @Require 672 content: () => void = DefaultFunction; 673 674 build() { 675 Column({ space: 4 }) { 676 Text(this.title) 677 .fontColor('#FF666666') 678 .fontSize(12) 679 Column({ space: 8 }) { 680 this.content() 681 } 682 } 683 .alignItems(HorizontalAlign.Start) 684 .width('100%') 685 } 686} 687@Component 688struct SectionItem { 689 @Prop 690 @Require 691 title: ResourceStr; 692 @BuilderParam 693 @Require 694 content: () => void = DefaultFunction; 695 696 build() { 697 Column({ space: 12 }) { 698 Text(this.title) 699 this.content() 700 } 701 .backgroundColor('#FFFFFFFF') 702 .borderRadius(12) 703 .padding(12) 704 .width('100%') 705 } 706} 707 708@Entry 709@Component 710export struct ChipGroupExample2 { 711 @LocalBuilder 712 Suffix() { 713 IconGroupSuffix({ 714 items: [ 715 { 716 icon: { src: $r('sys.media.ohos_ic_public_more'), }, 717 accessibilityText: 'More', 718 accessibilityDescription: 'Speak usage hints', 719 action: () => { 720 this.getUIContext().getPromptAction().showToast({ 721 message: 'More icon touched.' 722 }); 723 } 724 }, 725 { 726 symbol: new SymbolGlyphModifier($r('sys.symbol.more')) 727 .accessibilityText('More') 728 .accessibilityDescription('Speak usage hints'), 729 action: () => { 730 this.getUIContext().getPromptAction().showToast({ 731 message: 'More icon touched.' 732 }); 733 } 734 }, 735 { 736 icon: { src: $r('sys.media.ohos_ic_public_more'), }, 737 accessibilityText: 'More', 738 accessibilityDescription: 'Speak usage hints', 739 accessibilityLevel: 'no', 740 action: () => { 741 this.getUIContext().getPromptAction().showToast({ 742 message: 'More icon touched.' 743 }); 744 } 745 } 746 ] 747 }) 748 } 749 750 build() { 751 NavDestination() { 752 Scroll() { 753 Column({ space: 12 }) { 754 SectionGroup({ title: 'Available' }) { 755 SectionItem({ title: 'Multi-selection without suffix area' }) { 756 ChipGroup({ 757 items: [ 758 { label: { text: "Option 1" } }, 759 { label: { text: "Option 2" } }, 760 { label: { text: "Option 3" } }, 761 { label: { text: "Option 4" } }, 762 { label: { text: "Option 5" } }, 763 { label: { text: "Option 6" } }, 764 { label: { text: "Option 7" } }, 765 { label: { text: "Option 8" } }, 766 { label: { text: "Option 9" } }, 767 ], 768 multiple: true 769 }) 770 } 771 SectionItem({ title: 'Multi-selection with suffix area' }) { 772 ChipGroup({ 773 items: [ 774 { label: { text: "Option 1" } }, 775 { label: { text: "Option 2" } }, 776 { label: { text: "Option 3" } }, 777 { label: { text: "Option 4" } }, 778 { label: { text: "Option 5" } }, 779 { label: { text: "Option 6" } }, 780 { label: { text: "Option 7" } }, 781 { label: { text: "Option 8" } }, 782 { label: { text: "Option 9" } }, 783 ], 784 suffix: this.Suffix.bind(this), 785 multiple: true, 786 }) 787 } 788 } 789 } 790 } 791 .padding({ 792 top: 8, 793 bottom: 8, 794 left: 16, 795 right: 16, }) 796 } 797 .title('Basic usage') 798 .backgroundColor('#F1F3F5') 799 } 800} 801``` 802