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