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>**Atomic service API**: This API can be used in atomic services since API version 12.<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) | Yes| Settings of the trailing symbol item.| 161| action | [VoidCallback](ts-types.md#voidcallback12) | Yes| 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 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.| 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 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.| 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 // Replace 'app.media.icon' with your actual icon resource. 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: Implementing a Chip Group with a Builder-defined Suffix 296 297This example shows how to implement a chip group with a builder-defined suffix. 298 299```typescript 300import { ChipSize, ChipGroup, IconGroupSuffix } from '@kit.ArkUI' 301 302@Entry 303@Preview 304@Component 305struct Index { 306 @State selected_index: Array<number> = [0, 1, 2, 3, 4, 5, 6] 307 @State selected_state: boolean = true; 308 309 @LocalBuilder 310 ChipGroupSuffix(): void { 311 IconGroupSuffix({ 312 items: [{ 313 icon: { src: $r('sys.media.ohos_ic_public_search_filled'), size: { width: 36, height: 36 } }, 314 action: () => { 315 if (this.selected_state == false) { 316 this.selected_index = [0, 1, 2, 3, 4, 5, 6] 317 this.selected_state = true 318 } else { 319 this.selected_index = [] 320 this.selected_state = false 321 } 322 } 323 } 324 ] 325 }) 326 } 327 328 build() { 329 Column() { 330 ChipGroup({ 331 items: [ 332 { 333 prefixIcon: { src: $r('app.media.icon') }, 334 label: { text: "Chip 1" }, 335 suffixIcon: { src: $r('sys.media.ohos_ic_public_cut') }, 336 allowClose: false 337 }, 338 { 339 prefixIcon: { src: $r('sys.media.ohos_ic_public_copy') }, 340 label: { text: "Chip 2" }, 341 allowClose: true 342 }, 343 { 344 prefixIcon: { src: $r('sys.media.ohos_ic_public_clock') }, 345 label: { text: "Chip 3" }, 346 allowClose: true 347 }, 348 { 349 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') }, 350 label: { text: "Chip 4" }, 351 allowClose: true 352 }, 353 { 354 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_mirror') }, 355 label: { text: "Chip 5" }, 356 allowClose: true 357 }, 358 { 359 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') }, 360 label: { text: "Chip 6" }, 361 allowClose: true 362 }, 363 ], 364 itemStyle: { 365 size: ChipSize.NORMAL, 366 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 367 fontColor: $r('sys.color.ohos_id_color_text_primary'), 368 selectedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), 369 selectedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), 370 }, 371 selectedIndexes: this.selected_index, 372 multiple: true, 373 chipGroupSpace: { itemSpace: 8, endSpace: 0 }, 374 chipGroupPadding: { top: 10, bottom: 10 }, 375 onChange: (activatedChipsIndex: Array<number>) => { 376 console.log('chips on clicked, activated index ' + activatedChipsIndex) 377 }, 378 suffix: this.ChipGroupSuffix 379 }) 380 } 381 } 382} 383``` 384 385 386 387### Example 3: Setting the Symbol Icon 388This example implements **IconGroupSuffix** and **ChipGroup** with **SymbolGlyph** resources. 389```typescript 390import { ChipSize, ChipGroup, IconGroupSuffix, SymbolGlyphModifier } from '@kit.ArkUI' 391 392@Entry 393@Preview 394@Component 395struct Index { 396 @State selected_index: Array<number> = [0, 1, 2, 3, 4, 5, 6]; 397 @State selected_state: boolean = true; 398 @State prefixModifierNormal: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_star')); 399 @State prefixModifierActivated: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]); 400 @State suffixModifierNormal: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')); 401 @State suffixModifierActivated: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')).fontColor([Color.Red]); 402 403 @LocalBuilder 404 ChipGroupSuffix(): void { 405 IconGroupSuffix({ 406 items: [ 407 new SymbolGlyphModifier($r('sys.symbol.magnifyingglass')) 408 .onClick(() => { 409 if (this.selected_state == false) { 410 this.selected_index = [0, 1, 2, 3, 4, 5, 6]; 411 this.selected_state = true; 412 } else { 413 this.selected_index = []; 414 this.selected_state = false; 415 } 416 }) 417 ] 418 }) 419 } 420 421 build() { 422 Column() { 423 ChipGroup({ 424 items: [ 425 { 426 prefixSymbol: { normal: this.prefixModifierNormal, activated: this.prefixModifierActivated }, 427 label: { text: "Chip 1" }, 428 suffixSymbol: { normal: this.suffixModifierNormal, activated: this.suffixModifierActivated }, 429 allowClose: false, 430 }, 431 { 432 prefixSymbol: { normal: this.prefixModifierNormal, activated: this.prefixModifierActivated }, 433 label: { text: "Chip 2" }, 434 allowClose: true, 435 }, 436 { 437 prefixIcon: { src: $r('sys.media.ohos_ic_public_clock') }, 438 label: { text: "Chip 3" }, 439 allowClose: true, 440 }, 441 { 442 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') }, 443 label: { text: "Chip 4" }, 444 allowClose: true, 445 }, 446 { 447 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_mirror') }, 448 label: { text: "Chip 5" }, 449 allowClose: true, 450 }, 451 { 452 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') }, 453 label: { text: "Chip 6" }, 454 allowClose: true, 455 }, 456 ], 457 itemStyle: { 458 size: ChipSize.NORMAL, 459 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 460 fontColor: $r('sys.color.ohos_id_color_text_primary'), 461 selectedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), 462 selectedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), 463 }, 464 selectedIndexes: this.selected_index, 465 multiple: true, 466 chipGroupSpace: { itemSpace: 8, endSpace: 0 }, 467 chipGroupPadding: { top: 10, bottom: 10 }, 468 onChange: (activatedChipsIndex: Array<number>) => { 469 console.log('chips on clicked, activated index ' + activatedChipsIndex) 470 }, 471 suffix: this.ChipGroupSuffix 472 }) 473 } 474 } 475} 476 477``` 478 479 480### Example 4: Implementing the Screen Reader Feature for the Single-selection Scenario 481 482This example implements the screen reader feature for a chip group with and without a suffix area in a single-selection scenario. 483 484```typescript 485import { ChipGroup, IconGroupSuffix, SymbolGlyphModifier } from '@kit.ArkUI'; 486 487@Builder function DefaultFunction(): void {} 488 489@Component 490struct SectionGroup { 491 @Prop 492 @Require 493 title: ResourceStr; 494 @BuilderParam 495 @Require 496 content: () => void = DefaultFunction; 497 498 build() { 499 Column({ space: 4 }) { 500 Text(this.title) 501 .fontColor('#FF666666') 502 .fontSize(12) 503 Column({ space: 8 }) { 504 this.content() 505 } 506 } 507 .alignItems(HorizontalAlign.Start) 508 .width('100%') 509 } 510} 511@Component 512struct SectionItem { 513 @Prop 514 @Require 515 title: ResourceStr; 516 @BuilderParam 517 @Require 518 content: () => void = DefaultFunction; 519 520 build() { 521 Column({ space: 12 }) { 522 Text(this.title) 523 this.content() 524 } 525 .backgroundColor('#FFFFFFFF') 526 .borderRadius(12) 527 .padding(12) 528 .width('100%') 529 } 530} 531 532@Entry 533@Component 534export struct ChipGroupExample2 { 535 @LocalBuilder 536 Suffix() { 537 IconGroupSuffix({ 538 items: [ 539 { 540 icon: { src: $r('sys.media.ohos_ic_public_more'), }, 541 accessibilityText: 'More', 542 accessibilityDescription: 'Speak usage hints', 543 action: () => { 544 this.getUIContext().getPromptAction().showToast({ 545 message: 'More icon touched.' 546 }); 547 } 548 }, 549 { 550 symbol: new SymbolGlyphModifier($r('sys.symbol.more')), 551 accessibilityText: 'More', 552 accessibilityDescription: 'Speak usage hints', 553 action: () => { 554 this.getUIContext().getPromptAction().showToast({ 555 message: 'More icon touched.' 556 }); 557 } 558 }, 559 { 560 icon: { src: $r('sys.media.ohos_ic_public_more'), }, 561 accessibilityText: 'More', 562 accessibilityDescription: 'Speak usage hints', 563 accessibilityLevel: 'no', 564 action: () => { 565 this.getUIContext().getPromptAction().showToast({ 566 message: 'More icon touched.' 567 }); 568 } 569 } 570 ] 571 }) 572 } 573 574 build() { 575 NavDestination() { 576 Scroll() { 577 Column({ space: 12 }) { 578 SectionGroup({ title: 'Available' }) { 579 SectionItem({ title: 'Single selection without suffix area' }) { 580 ChipGroup({ 581 items: [ 582 { 583 prefixIcon: { 584 src: $r('app.media.startIcon') 585 }, 586 label: { text: "Option 1" }, 587 suffixImageIcon: { 588 src: $r('sys.media.save_button_picture'), 589 accessibilityText: 'Save', 590 action: () => { 591 this.getUIContext().getPromptAction().showToast({ 592 message: 'Suffix icon touched.' 593 }); 594 }, 595 } 596 }, 597 { 598 label: { text: "Option 2" }, 599 suffixSymbol: { 600 normal: new SymbolGlyphModifier($r('sys.symbol.save')), 601 activated: new SymbolGlyphModifier($r('sys.symbol.save')) 602 }, 603 suffixSymbolOptions: { 604 normalAccessibility: { 605 accessibilityText: 'Save' 606 }, 607 action: () => { 608 this.getUIContext().getPromptAction().showToast({ 609 message: 'Suffix icon touched.' 610 }); 611 } 612 } 613 }, 614 { 615 label: { text: "Option 3" }, 616 suffixIcon: { src: $r('sys.media.save_button_picture'), } 617 }, 618 { label: { text: "Option 4" } }, 619 { label: { text: "Option 5" } }, 620 { label: { text: "Option 6" } }, 621 { label: { text: "Option 7" } }, 622 { label: { text: "Option 8" } }, 623 { label: { text: "Option 9" } }, 624 ] 625 }) 626 } 627 SectionItem({ title: 'Single selection with suffix area' }) { 628 ChipGroup({ 629 items: [ 630 { label: { text: "Option 1" } }, 631 { label: { text: "Option 2" } }, 632 { label: { text: "Option 3" } }, 633 { label: { text: "Option 4" } }, 634 { label: { text: "Option 5" } }, 635 { label: { text: "Option 6" } }, 636 { label: { text: "Option 7" } }, 637 { label: { text: "Option 8" } }, 638 { label: { text: "Option 9" } }, 639 ], 640 suffix: this.Suffix.bind(this), 641 }) 642 } 643 } 644 } 645 } 646 .padding({ 647 top: 8, 648 bottom: 8, 649 left: 16, 650 right: 16, }) 651 } 652 .title('Basic usage') 653 .backgroundColor('#F1F3F5') 654 } 655} 656``` 657 658### Example 5: Implementing the Screen Reader Feature for the Multi-selection Scenario 659 660This example implements the screen reader feature for a chip group with and without a suffix area in a multi-selection scenario. 661 662```typescript 663import { ChipGroup, IconGroupSuffix, SymbolGlyphModifier } from '@kit.ArkUI'; 664 665@Builder function DefaultFunction(): void {} 666 667@Component 668struct SectionGroup { 669 @Prop 670 @Require 671 title: ResourceStr; 672 @BuilderParam 673 @Require 674 content: () => void = DefaultFunction; 675 676 build() { 677 Column({ space: 4 }) { 678 Text(this.title) 679 .fontColor('#FF666666') 680 .fontSize(12) 681 Column({ space: 8 }) { 682 this.content() 683 } 684 } 685 .alignItems(HorizontalAlign.Start) 686 .width('100%') 687 } 688} 689@Component 690struct SectionItem { 691 @Prop 692 @Require 693 title: ResourceStr; 694 @BuilderParam 695 @Require 696 content: () => void = DefaultFunction; 697 698 build() { 699 Column({ space: 12 }) { 700 Text(this.title) 701 this.content() 702 } 703 .backgroundColor('#FFFFFFFF') 704 .borderRadius(12) 705 .padding(12) 706 .width('100%') 707 } 708} 709 710@Entry 711@Component 712export struct ChipGroupExample2 { 713 @LocalBuilder 714 Suffix() { 715 IconGroupSuffix({ 716 items: [ 717 { 718 icon: { src: $r('sys.media.ohos_ic_public_more'), }, 719 accessibilityText: 'More', 720 accessibilityDescription: 'Speak usage hints', 721 action: () => { 722 this.getUIContext().getPromptAction().showToast({ 723 message: 'More icon touched.' 724 }); 725 } 726 }, 727 { 728 symbol: new SymbolGlyphModifier($r('sys.symbol.more')), 729 accessibilityText: 'More', 730 accessibilityDescription: 'Speak usage hints', 731 action: () => { 732 this.getUIContext().getPromptAction().showToast({ 733 message: 'More icon touched.' 734 }); 735 } 736 }, 737 { 738 icon: { src: $r('sys.media.ohos_ic_public_more'), }, 739 accessibilityText: 'More', 740 accessibilityDescription: 'Speak usage hints', 741 accessibilityLevel: 'no', 742 action: () => { 743 this.getUIContext().getPromptAction().showToast({ 744 message: 'More icon touched.' 745 }); 746 } 747 } 748 ] 749 }) 750 } 751 752 build() { 753 NavDestination() { 754 Scroll() { 755 Column({ space: 12 }) { 756 SectionGroup({ title: 'Available' }) { 757 SectionItem({ title: 'Multi-selection without suffix area' }) { 758 ChipGroup({ 759 items: [ 760 { label: { text: "Option 1" } }, 761 { label: { text: "Option 2" } }, 762 { label: { text: "Option 3" } }, 763 { label: { text: "Option 4" } }, 764 { label: { text: "Option 5" } }, 765 { label: { text: "Option 6" } }, 766 { label: { text: "Option 7" } }, 767 { label: { text: "Option 8" } }, 768 { label: { text: "Option 9" } }, 769 ], 770 multiple: true 771 }) 772 } 773 SectionItem({ title: 'Multi-selection with suffix area' }) { 774 ChipGroup({ 775 items: [ 776 { label: { text: "Option 1" } }, 777 { label: { text: "Option 2" } }, 778 { label: { text: "Option 3" } }, 779 { label: { text: "Option 4" } }, 780 { label: { text: "Option 5" } }, 781 { label: { text: "Option 6" } }, 782 { label: { text: "Option 7" } }, 783 { label: { text: "Option 8" } }, 784 { label: { text: "Option 9" } }, 785 ], 786 suffix: this.Suffix.bind(this), 787 multiple: true, 788 }) 789 } 790 } 791 } 792 } 793 .padding({ 794 top: 8, 795 bottom: 8, 796 left: 16, 797 right: 16, }) 798 } 799 .title('Basic usage') 800 .backgroundColor('#F1F3F5') 801 } 802} 803``` 804
