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