1# Chip 2 3The chip component is typically used in the search box history or email address list. 4 5> **NOTE** 6> 7> This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Modules to Import 10 11```ts 12import { Chip, ChipOptions, ChipSize } from '@kit.ArkUI'; 13``` 14 15## Child Components 16 17Not supported 18 19## Chip 20 21Chip(options:ChipOptions): void 22 23**Decorator**: @Builder 24 25**Atomic service API**: This API can be used in atomic services since API version 12. 26 27**System capability**: SystemCapability.ArkUI.ArkUI.Full 28 29**Parameters** 30 31| Name | Type | Mandatory| Description | 32| ------- | --------------------------- | ---- | -------------------- | 33| options | [ChipOptions](#chipoptions) | Yes | Parameters of the chip.| 34 35## ChipOptions 36 37Defines the type and style parameters of the chip. 38 39**System capability**: SystemCapability.ArkUI.ArkUI.Full 40 41| Name | Type | Mandatory| Description | 42| --------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 43| size | [ChipSize](#chipsize) \| [SizeOptions](ts-types.md#sizeoptions) | No | Size of the chip.<br>Default value: **ChipSize**: **ChipSize.NORMAL**<br> If of the SizeOptions type, this parameter cannot be set in percentage.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 44| enabled | boolean | No | Whether the chip can be selected.<br>Default value: **true**<br>**true**: The chip can be selected.<br>**false**: The chip cannot be selected.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 45| activated<sup>12+</sup> | boolean | No | Whether the chip is activated.<br>Default value: **false**<br>**true**: The chip is activated.<br>**false**: The chip is not activated.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 46| prefixIcon | [PrefixIconOptions](#prefixiconoptions) | No | Prefix icon of the chip.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 47| prefixSymbol<sup>12+</sup> | [ChipSymbolGlyphOptions](#chipsymbolglyphoptions12) | No | Symbol-type prefix icon of the chip.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 48| label | [LabelOptions](#labeloptions) | Yes | Text of the chip.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 49| suffixIcon | [SuffixIconOptions](#suffixiconoptions) | No | Suffix icon of the chip.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 50| suffixSymbol<sup>12+</sup> | [ChipSymbolGlyphOptions](#chipsymbolglyphoptions12) | No | Symbol-type suffix icon of the chip.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 51| suffixSymbolOptions<sup>14+</sup> | [ChipSuffixSymbolGlyphOptions](#chipsuffixsymbolglyphoptions14) | No| Accessibility settings of the symbol-type suffix icon.<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 52| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the chip.<br>Default value: **$r('sys.color.ohos_id_color_button_normal')**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 53| activatedBackgroundColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the chip when it is activated.<br>Default value: **$r('sys.color.ohos_id_color_emphasize').**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 54| borderRadius | [Dimension](ts-types.md#dimension10) | No | Border radius of the chip. This parameter cannot be set in percentage.<br>Default value: **$r('sys.float.ohos_id_corner_radius_button')**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 55| allowClose | boolean | No | Whether to show the close icon.<br>Default value: **true**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 56| onClose | ()=>void | No | Event triggered when the close icon is clicked.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 57| onClicked<sup>12+</sup> | Callback\<void> | No | Event triggered when the chip is clicked.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 58| direction<sup>12+</sup> | [Direction](ts-appendix-enums.md#direction) | No| Layout direction.<br>Default value: **Direction.Auto**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 59| closeOptions<sup>14+</sup> | [CloseOptions](#closeoptions14) | No| Accessibility settings of the default close icon.<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 60| 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 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.<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 61| accessibilityLevel<sup>14+</sup> | string | No| Accessibility level of the chip. It determines whether the component 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 component can be recognized by accessibility services.<br>**"no"**: The component cannot be recognized by accessibility services.<br>**"no-hide-descendants"**: Neither the component 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.| 62| accessibilitySelectedType<sup>14+</sup> | [AccessibilitySelectedType](#accessibilityselectedtype14) | No| Type of selected state for the chip.<br>Default value:<br>If the **activated** property is set but **accessibilitySelectedType** is not specified, the default type is **CHECKED**. If the **activated** property is not set, the default type is **CLICKED**.<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 63 64> **NOTE** 65> 66> 1. When **suffixSymbol** is provided with an argument, **suffixIcon** and **allowClose** will not take effect. If **suffixSymbol** is not provided, but **suffixIcon** is, **allowClose** still will not take effect. When neither **suffixSymbol** nor **suffixIcon** is provided with arguments, **allowClose** determines whether the deletion icon is displayed. 67> 68> 2. If **undefined** is assigned to **backgroundColor** or **activatedBackgroundColor**, the default background color is used. If an invalid value is specified, the background color is transparent. 69> 70> 3. Default font colors for **prefixSymbol** and **suffixSymbol**: **normalFontColor**: **[$r('sys.color.ohos_id_color_primary')]**; **activatedFontColor**: **[$r('sys.color.ohos_id_color_text_primary_contrary')]**. The default value of **fontColor** is **16**. 71> 72> 4. The default value of **fillColor** is **$r('sys.color.ohos_id_color_secondary')** for **prefixIcon** and **$r('sys.color.ohos_id_color_primary')** for **suffixIcon**. The color parsing of **fillColor** is the same as that of the **Image** component. 73> 74> 5. The default value of **activatedFillColor** is **$r('sys.color.ohos_id_color_text_primary_contrary')** for **prefixIcon** and **$r('sys.color.ohos_id_color_text_primary_contrary')** for **suffixIcon**. The color parsing of **activatedFillColor** is the same as that of the **Image** component. 75 76## ChipSize 77 78Enumerates the size types of the chip. 79 80**Atomic service API**: This API can be used in atomic services since API version 12. 81 82**System capability**: SystemCapability.ArkUI.ArkUI.Full 83 84| Name | Value | Description | 85| ------ | -------- | ------------------ | 86| NORMAL | "NORMAL" | Normal size.| 87| SMALL | "SMALL" | Small size. | 88 89## AccessibilitySelectedType<sup>14+</sup> 90 91Enumerates the selected state types of the chip. It allows you to specify how accessibility services convey the component's selected state to users. Different selected state types provide distinct semantics and user experiences. 92 93**Atomic service API**: This API can be used in atomic services since API version 14. 94 95**System capability**: SystemCapability.ArkUI.ArkUI.Full 96 97| Name| Value| Description| 98| ---- | -- | ---- | 99| CLICKED | 0 | Clickable type. The chip acts as a regular button, without reporting any selected state to accessibility services. Use this type when the chip triggers an action but does not maintain a selected state.| 100| CHECKED | 1 | Checkbox type. The chip reports its selected state to accessibility services using the [accessibilityChecked](ts-universal-attributes-accessibility.md#accessibilitychecked13) attribute. Use this type for multi-select scenarios, such as tag filtering and attribute selection.| 101| SELECTED | 2 | Radio type. The chip reports its selected state to accessibility services using the [accessibilitySelected](ts-universal-attributes-accessibility.md#accessibilityselected13) attribute. Use this type for single-select scenarios, such as navigation bar tabs and radio buttons.| 102 103## IconCommonOptions 104 105Defines the common icon options of the chip. 106 107**Atomic service API**: This API can be used in atomic services since API version 12. 108 109**System capability**: SystemCapability.ArkUI.ArkUI.Full 110 111| Name | Type | Mandatory| Description | 112| --------- | ------------------------------------------ | ---- | ------------------------------------------------------------ | 113| src | [ResourceStr](ts-types.md#resourcestr) | Yes | Icon source, which can be a specific image path or an image reference.| 114| size | [SizeOptions](ts-types.md#sizeoptions) | No | Icon size. This parameter cannot be set in percentage.<br>Default value: **{width: 16,height: 16}**| 115| fillColor | [ResourceColor](ts-types.md#resourcecolor) | No | Icon fill color.| 116| activatedFillColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Icon fill color when the chip is activated. | 117 118> **NOTE** 119> 120> **fillColor** and **activatedFillColor** take effect only when the icon format is SVG. 121> 122 123## PrefixIconOptions 124 125Defines the prefix icon options. 126 127Inherits [IconCommonOptions](#iconcommonoptions). 128 129**Atomic service API**: This API can be used in atomic services since API version 12. 130 131**System capability**: SystemCapability.ArkUI.ArkUI.Full 132 133## SuffixIconOptions 134 135Defines the suffix icon options. 136 137Inherits [IconCommonOptions](#iconcommonoptions). 138 139**System capability**: SystemCapability.ArkUI.ArkUI.Full 140 141| Name | Type | Mandatory| Description | 142| ------ | ---------- | ---- | ------------------ | 143| action | () => void | No | Action of the suffix icon.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 144| accessibilityText<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility text, that is, accessibility label name, of the suffix icon. 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 components 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.| 145| accessibilityDescription<sup>14+</sup> | [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 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.<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 146| accessibilityLevel<sup>14+</sup> | string | No| Accessibility level of the suffix icon. It determines whether the component 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 component and as "no" otherwise.<br>**"yes"**: The component can be recognized by accessibility services.<br>**"no"**: The component cannot be recognized by accessibility services.<br>**"no-hide-descendants"**: Neither the component 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.| 147 148## AccessibilityOptions<sup>14+</sup> 149 150Defines the accessibility options of the suffix icon. 151 152**Atomic service API**: This API can be used in atomic services since API version 14. 153 154**System capability**: SystemCapability.ArkUI.ArkUI.Full 155 156| Name| Type| Mandatory| Description| 157| ------ | ---------- | ---- | ------------------ | 158| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility text, that is, accessible label name. 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 components without text information. When such a component is selected, the screen reader announces the specified accessibility text, informing the user which component is selected.| 159| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility description. 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.| 160| accessibilityLevel | string | No| Accessibility level. It determines whether the component 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 component can be recognized by accessibility services.<br>**"no"**: The component cannot be recognized by accessibility services.<br>**"no-hide-descendants"**: Neither the component nor its child components can be recognized by accessibility services.<br>Default value: **"auto"**| 161 162## ChipSuffixSymbolGlyphOptions<sup>14+</sup> 163 164Defines the accessibility options of the symbol-type suffix icon. 165 166**Atomic service API**: This API can be used in atomic services since API version 14. 167 168**System capability**: SystemCapability.ArkUI.ArkUI.Full 169 170| Name| Type| Mandatory| Description| 171| ---- | ---- | --- | ---- | 172| action | [VoidCallback](ts-types.md#voidcallback12) | No| Action of the suffix icon.| 173| normalAccessibility | [AccessibilityOptions](#accessibilityoptions14) | No| Accessibility settings for the normal state.| 174| activatedAccessibility | [AccessibilityOptions](#accessibilityoptions14) | No| Accessibility settings for the activated state.| 175 176## ChipSymbolGlyphOptions<sup>12+</sup> 177 178Defines the prefix and suffix icon options. 179 180**Atomic service API**: This API can be used in atomic services since API version 12. 181 182**System capability**: SystemCapability.ArkUI.ArkUI.Full 183 184| Name | Type | Mandatory| Description | 185| ------ | ---------- | ---- | ------------------ | 186| normal | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Icon setup event.| 187| activated | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Icon setup event when the icon is activated.| 188 189> **NOTE** 190> 191> Modifying the animation type with **symbolEffect** and setting the animation with **effectStrategy** are not supported. 192> 193 194## LabelOptions 195 196Defines the label options of the chip. 197 198**Atomic service API**: This API can be used in atomic services since API version 12. 199 200**System capability**: SystemCapability.ArkUI.ArkUI.Full 201 202| Name | Type | Mandatory| Description | 203| ----------- | ------------------------------------------ | ---- | ------------------------------------------------------------ | 204| text | string | Yes | Text content.| 205| fontSize | [Dimension](ts-types.md#dimension10) | No | Font size. This parameter cannot be set in percentage.<br>Default value: **$r('sys.float.ohos_id_text_size_button2')**| 206| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color.<br>Default value: **$r('sys.color.ohos_id_color_text_primary')**| 207| activatedFontColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Font color when the chip is activated.<br>Default value: **$r('sys.color.ohos_id_color_text_primary_contrary').**| 208| fontFamily | string | No | Font family.<br>Default value: **"HarmonyOS Sans"**| 209| labelMargin | [LabelMarginOptions](#labelmarginoptions) | No | Spacing between the text and the left and right icons.| 210| localizedLabelMargin<sup>12+</sup> | [LocalizedLabelMarginOptions](#localizedlabelmarginoptions12) | No| Spacing between the localized text and the left and right icons.<br>Default value: {<br>start: LengthMetrics.vp(6), end: LengthMetrics.vp(6)<br>} | 211 212## CloseOptions<sup>14+</sup> 213 214Defines the accessibility settings of the close icon. The default value of **accessibilityText** is **Delete**. 215 216Inherits [AccessibilityOptions](#accessibilityoptions14). 217 218**Atomic service API**: This API can be used in atomic services since API version 14. 219 220**System capability**: SystemCapability.ArkUI.ArkUI.Full 221 222## LabelMarginOptions 223 224Defines the spacing between the text and the left and right icons. 225 226**Atomic service API**: This API can be used in atomic services since API version 12. 227 228**System capability**: SystemCapability.ArkUI.ArkUI.Full 229 230| Name | Type | Mandatory| Description | 231| ----- | ------------------------------------ | ---- | -------------------------------------- | 232| left | [Dimension](ts-types.md#dimension10) | No | Spacing between the text and the left icon. This parameter cannot be set in percentage.| 233| right | [Dimension](ts-types.md#dimension10) | No | Spacing between the text and the right icon. This parameter cannot be set in percentage.| 234 235## LocalizedLabelMarginOptions<sup>12+</sup> 236 237Defines the spacing between the localized text and the left and right icons. 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| Name | Type | Mandatory| Description | 244| ----- | ------------------------------------------------------------ | ---- | -------------------------------------- | 245| start | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Spacing between the text and the left icon. This parameter cannot be set in percentage.| 246| end | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Spacing between the text and the right icon. This parameter cannot be set in percentage.| 247 248## Example 249 250### Example 1: Setting a Custom Suffix Icon 251 252This example shows how to implement a custom suffix icon for a chip. 253 254```ts 255import { Chip, ChipSize } from '@kit.ArkUI'; 256 257@Entry 258@Component 259struct Index { 260 build() { 261 Column({ space: 10 }) { 262 Chip({ 263 prefixIcon: { 264 // Replace 'app.media.chips' with your actual icon resource. 265 src: $r('app.media.chips'), 266 size: { width: 16, height: 16 }, 267 fillColor: Color.Red 268 }, 269 label: { 270 text: "Chip", 271 fontSize: 12, 272 fontColor: Color.Blue, 273 fontFamily: "HarmonyOS Sans", 274 labelMargin: { left: 20, right: 30 } 275 }, 276 suffixIcon: { 277 // Replace 'app.media.close' with your actual icon resource. 278 src: $r('app.media.close'), 279 size: { width: 16, height: 16 }, 280 fillColor: Color.Red 281 }, 282 size: ChipSize.NORMAL, 283 allowClose: false, 284 enabled: true, 285 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 286 borderRadius: $r('sys.float.ohos_id_corner_radius_button') 287 }) 288 } 289 } 290} 291``` 292 293 294 295 296### Example 2: Using the Default Suffix Icon 297 298This example demonstrates how to display a default suffix delete icon by setting **allowClose** to **true**. 299 300```ts 301import { Chip, ChipSize } from '@kit.ArkUI'; 302 303@Entry 304@Component 305struct Index { 306 build() { 307 Column({ space: 10 }) { 308 Chip({ 309 prefixIcon: { 310 // Replace 'app.media.chips' with your actual icon resource. 311 src: $r('app.media.chips'), 312 size: { width: 16, height: 16 }, 313 fillColor: Color.Blue 314 }, 315 label: { 316 text: "Chip", 317 fontSize: 12, 318 fontColor: Color.Blue, 319 fontFamily: "HarmonyOS Sans", 320 labelMargin: { left: 20, right: 30 } 321 }, 322 size: ChipSize.NORMAL, 323 allowClose: true, 324 enabled: true, 325 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 326 borderRadius: $r('sys.float.ohos_id_corner_radius_button') 327 }) 328 } 329 } 330} 331``` 332 333 334 335 336### Example 3: Displaying No Suffix Icon 337 338This example shows how to hide the suffix delete icon by setting **allowClose** to **false**. 339 340```ts 341import { Chip, ChipSize } from '@kit.ArkUI'; 342 343@Entry 344@Component 345struct Index { 346 build() { 347 Column({ space: 10 }) { 348 Chip({ 349 prefixIcon: { 350 // Replace 'app.media.chips' with your actual icon resource. 351 src: $r('app.media.chips'), 352 size: { width: 16, height: 16 }, 353 fillColor: Color.Blue 354 }, 355 label: { 356 text: "Chip", 357 fontSize: 12, 358 fontColor: Color.Blue, 359 fontFamily: "HarmonyOS Sans", 360 labelMargin: { left: 20, right: 30 } 361 }, 362 size: ChipSize.SMALL, 363 allowClose: false, 364 enabled: true, 365 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 366 borderRadius: $r('sys.float.ohos_id_corner_radius_button'), 367 onClose:()=>{ 368 console.log("chip on close") 369 } 370 }) 371 } 372 } 373} 374``` 375 376 377 378 379### Example 4: Implementing the Activated State 380 381This example shows how to implement the activated state for a chip by configuring **activated**. 382 383```ts 384import { Chip, ChipSize } from '@kit.ArkUI'; 385 386@Entry 387@Component 388struct Index { 389 @State isActivated: boolean = false 390 391 build() { 392 Column({ space: 10 }) { 393 Chip({ 394 prefixIcon: { 395 // Replace 'app.media.chips' with your actual icon resource. 396 src: $r('app.media.chips'), 397 size: { width: 16, height: 16 }, 398 fillColor: Color.Blue, 399 activatedFillColor: $r('sys.color.ohos_id_color_text_primary_contrary') 400 }, 401 label: { 402 text: "Chip", 403 fontSize: 12, 404 fontColor: Color.Blue, 405 activatedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), 406 fontFamily: "HarmonyOS Sans", 407 labelMargin: { left: 20, right: 30 } 408 }, 409 size: ChipSize.NORMAL, 410 allowClose: true, 411 enabled: true, 412 activated: this.isActivated, 413 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 414 activatedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), 415 borderRadius: $r('sys.float.ohos_id_corner_radius_button'), 416 onClose:()=>{ 417 console.log("chip on close") 418 }, 419 onClicked:()=>{ 420 console.log("chip on clicked") 421 } 422 }) 423 424 Button('Activate/Deactivate').onClick(()=>{ 425 this.isActivated = !this.isActivated 426 }) 427 } 428 } 429} 430``` 431 432 433 434 435### Example 5: Setting the Symbol Icon 436 437This example implements symbol-type prefix and suffix icons for the **Chip** component. 438 439```ts 440import { Chip, ChipSize, SymbolGlyphModifier } from '@kit.ArkUI'; 441 442@Entry 443@Component 444struct Index { 445 @State isActivated: boolean = false 446 447 build() { 448 Column({ space: 10 }) { 449 Chip({ 450 prefixIcon: { 451 // Replace 'app.media.chips' with your actual icon resource. 452 src: $r('app.media.chips'), 453 size: { width: 16, height: 16 }, 454 fillColor: Color.Blue, 455 activatedFillColor: $r('sys.color.ohos_id_color_text_primary_contrary') 456 }, 457 prefixSymbol: { 458 normal: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontSize(16).fontColor([Color.Green]), 459 activated: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontSize(16).fontColor([Color.Red]), 460 }, 461 label: { 462 text: "Chip", 463 fontSize: 12, 464 fontColor: Color.Blue, 465 activatedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), 466 fontFamily: "HarmonyOS Sans", 467 labelMargin: { left: 20, right: 30 }, 468 }, 469 size: ChipSize.NORMAL, 470 allowClose: true, 471 enabled: true, 472 activated: this.isActivated, 473 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 474 activatedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), 475 borderRadius: $r('sys.float.ohos_id_corner_radius_button'), 476 onClose:()=>{ 477 console.log("chip on close") 478 }, 479 onClicked:()=>{ 480 console.log("chip on clicked") 481 } 482 }) 483 484 Button('Activate/Deactivate').onClick(()=>{ 485 this.isActivated = !this.isActivated 486 }) 487 } 488 } 489} 490``` 491 492 493 494### Example 6: Implementing a Mirroring Effect 495 496This example shows how to achieve a mirroring effect for a chip by configuring **direction**. 497 498```ts 499 500import { Chip, ChipSize,LengthMetrics } from '@kit.ArkUI'; 501 502@Entry 503@Component 504struct ChipPage { 505 506 build() { 507 Column() { 508 Chip({ 509 direction: Direction.Rtl, 510 prefixIcon: { 511 // Replace 'app.media.chips' with your actual icon resource. 512 src: $r('app.media.chips'), 513 size: { width: 16, height: 16 }, 514 fillColor: Color.Red, 515 }, 516 label: { 517 text: "Chip", 518 fontSize: 12, 519 fontColor: Color.Blue, 520 fontFamily: "HarmonyOS Sans", 521 localizedLabelMargin: { start: LengthMetrics.vp(20), end: LengthMetrics.vp(20) }, 522 }, 523 suffixIcon: { 524 // Replace 'app.media.close' with your actual icon resource. 525 src: $r('app.media.close'), 526 size: { width: 16, height: 16 }, 527 fillColor: Color.Red, 528 }, 529 size: ChipSize.NORMAL, 530 allowClose: false, 531 enabled: true, 532 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 533 borderRadius: $r('sys.float.ohos_id_corner_radius_button') 534 }) 535 }.justifyContent(FlexAlign.Center) 536 .width('100%') 537 .height('100%') 538 } 539} 540``` 541 542 543 544 545### Example 7: Implementing Accessibility for an Image-Type Suffix Icon 546 547This example implements the accessibility feature for a chip with an image-type suffix icon. 548 549```ts 550// xxx.ets 551import { Chip } from '@kit.ArkUI'; 552 553@Builder 554function DefaultFunction(): void { 555} 556 557@Component 558struct SectionGroup { 559 @Prop 560 @Require 561 title: ResourceStr; 562 @BuilderParam 563 @Require 564 content: () => void = DefaultFunction; 565 566 build() { 567 Column({ space: 4 }) { 568 Text(this.title) 569 .fontColor('#FF666666') 570 .fontSize(12) 571 Column({ space: 8 }) { 572 this.content() 573 } 574 } 575 .alignItems(HorizontalAlign.Start) 576 .width('100%') 577 } 578} 579 580@Component 581struct SectionItem { 582 @Prop 583 @Require 584 title: ResourceStr; 585 @BuilderParam 586 @Require 587 content: () => void = DefaultFunction; 588 589 build() { 590 Column({ space: 12 }) { 591 Text(this.title) 592 this.content() 593 } 594 .backgroundColor('#FFFFFFFF') 595 .borderRadius(12) 596 .padding(12) 597 .width('100%') 598 } 599} 600 601@Entry 602@Component 603struct ChipExample2 { 604 @State activated: boolean = false; 605 606 build() { 607 NavDestination() { 608 Scroll() { 609 SectionGroup({ title: 'Suffix icon announcement' }) { 610 SectionItem({ title: 'Custom announcement' }) { 611 Chip({ 612 label: { text: 'Chip' }, 613 suffixIcon: { 614 src: $r('sys.media.ohos_ic_public_cut'), 615 accessibilityText: 'Icon', 616 accessibilityDescription: 'Usage hints', 617 action: () => { 618 this.getUIContext().getPromptAction().showToast({ 619 message: 'Suffix icon touched.' 620 }); 621 } 622 }, 623 onClicked: () => { 624 this.getUIContext().getPromptAction().showToast({ 625 message: 'Chip touched.' 626 }); 627 } 628 }) 629 } 630 } 631 } 632 } 633 } 634} 635``` 636 637### Example 8: Implementing Accessibility for a Symbol-Type Suffix Icon 638 639This example implements the accessibility feature for a chip with a symbol-type suffix icon. 640 641```ts 642 643import { Chip, SymbolGlyphModifier } from '@kit.ArkUI'; 644 645@Builder 646function DefaultFunction(): void { 647} 648 649@Component 650struct SectionGroup { 651 @Prop 652 @Require 653 title: ResourceStr; 654 @BuilderParam 655 @Require 656 content: () => void = DefaultFunction; 657 658 build() { 659 Column({ space: 4 }) { 660 Text(this.title) 661 .fontColor('#FF666666') 662 .fontSize(12) 663 Column({ space: 8 }) { 664 this.content() 665 } 666 } 667 .alignItems(HorizontalAlign.Start) 668 .width('100%') 669 } 670} 671 672@Component 673struct SectionItem { 674 @Prop 675 @Require 676 title: ResourceStr; 677 @BuilderParam 678 @Require 679 content: () => void = DefaultFunction; 680 681 build() { 682 Column({ space: 12 }) { 683 Text(this.title) 684 this.content() 685 } 686 .backgroundColor('#FFFFFFFF') 687 .borderRadius(12) 688 .padding(12) 689 .width('100%') 690 } 691} 692 693@Entry 694@Component 695struct ChipExample2 { 696 @State activated: boolean = false; 697 698 build() { 699 NavDestination() { 700 Scroll() { 701 SectionGroup({ title: 'Suffix symbol announcement' }) { 702 SectionItem({ title: 'activatedAccessibility' }) { 703 Chip({ 704 label: { text: 'Chip' }, 705 activated: true, 706 suffixSymbol: { 707 activated: new SymbolGlyphModifier($r('sys.symbol.media_sound')) 708 .fontSize(72), 709 }, 710 suffixSymbolOptions: { 711 activatedAccessibility: { 712 accessibilityText: 'Music', 713 accessibilityDescription: 'Usage hints' 714 }, 715 action: () => { 716 this.getUIContext().getPromptAction().showToast({ 717 message: 'Suffix symbol touched.' 718 }); 719 } 720 }, 721 onClicked: () => { 722 this.getUIContext().getPromptAction().showToast({ 723 message: 'Chip touched.' 724 }); 725 } 726 }) 727 } 728 SectionItem({ title: 'normalAccessibility' }) { 729 Chip({ 730 label: { text: 'Chip' }, 731 suffixSymbol: { 732 normal: new SymbolGlyphModifier($r('sys.symbol.media_sound')) 733 .fontSize(72), 734 }, 735 suffixSymbolOptions: { 736 normalAccessibility: { 737 accessibilityText: 'Music', 738 accessibilityDescription: 'Usage hints' 739 }, 740 action: () => { 741 this.getUIContext().getPromptAction().showToast({ 742 message: 'Suffix symbol touched.' 743 }); 744 } 745 }, 746 onClicked: () => { 747 this.getUIContext().getPromptAction().showToast({ 748 message: 'Chip touched.' 749 }); 750 } 751 }) 752 } 753 } 754 } 755 } 756 .padding({ 757 top: 8, 758 bottom: 8, 759 left: 16, 760 right: 16, 761 }) 762 } 763} 764``` 765 766### Example 9: Implementing Chip Accessibility 767 768This example demonstrates how to set accessibility properties for the chip, including different selected state types. 769 770```ts 771import { AccessibilitySelectedType, Chip, ChipSize } from '@kit.ArkUI'; 772 773@Entry 774@Component 775struct ChipAccessibilityExample { 776 @State clickedChipActivated: boolean = false; 777 @State checkedChipActivated: boolean = false; 778 @State selectedChipActivated: boolean = false; 779 780 build() { 781 Column({ space: 20 }) { 782 Text("Chip accessibility example").fontSize(20).fontWeight(FontWeight.Bold) 783 784 // Clickable chip - CLICKED type 785 Chip({ 786 label: { text: "Clickable chip" }, 787 prefixIcon: { 788 src: $r('sys.media.ohos_app_icon'), 789 fillColor: Color.Blue 790 }, 791 size: ChipSize.NORMAL, 792 accessibilitySelectedType: AccessibilitySelectedType.CLICKED, // Clickable type 793 accessibilityDescription: "This is a clickable chip", // Overall accessibility description 794 accessibilityLevel: "yes," // Make sure it can be recognized by accessibility services. 795 closeOptions: { 796 accessibilityDescription: "Remove this chip. This action cannot be undone" // Detailed description for the close icon. 797 }, 798 activated: this.clickedChipActivated, 799 onClicked: () => { 800 this.clickedChipActivated = !this.clickedChipActivated; 801 this.getUIContext().getPromptAction().showToast({ message: "Clickable chip is clicked" }); 802 }, 803 onClose: () => { 804 this.getUIContext().getPromptAction().showToast({ message: "The close icon of the clickable chip is clicked" }); 805 } 806 }) 807 808 // Checkbox chip - CHECKED type 809 Chip({ 810 label: { text: "Checkbox chip" }, 811 prefixIcon: { 812 src: $r('sys.media.ohos_app_icon'), 813 fillColor: Color.Green 814 }, 815 size: ChipSize.NORMAL, 816 accessibilitySelectedType: AccessibilitySelectedType.CHECKED, // Checkbox chip 817 accessibilityDescription: "This is a checkbox chip", // Overall accessibility description 818 activated: this.checkedChipActivated, 819 onClicked: () => { 820 this.checkedChipActivated = !this.checkedChipActivated; 821 this.getUIContext().getPromptAction().showToast({ 822 message: this.checkedChipActivated ? "Checkbox chip is selected" : "Checkbox chip is deselected" 823 }); 824 } 825 }) 826 827 // Radio chip - SELECTED type 828 Chip({ 829 label: { text: "Radio chip" }, 830 prefixIcon: { 831 src: $r('sys.media.ohos_app_icon'), 832 fillColor: Color.Red 833 }, 834 size: ChipSize.NORMAL, 835 accessibilitySelectedType: AccessibilitySelectedType.SELECTED, // Radio type 836 accessibilityDescription: "This is a radio chip", // Overall accessibility description 837 activated: this.selectedChipActivated, 838 onClicked: () => { 839 this.selectedChipActivated = !this.selectedChipActivated; 840 this.getUIContext().getPromptAction().showToast({ 841 message: this.checkedChipActivated ? "Radio chip is selected" : "Radio chip is deselected" 842 }); 843 } 844 }) 845 846 // Example of setting the accessibility level 847 Chip({ 848 label: { text: ""Accessibility level set to no" }, 849 size: ChipSize.NORMAL, 850 accessibilityLevel: "no," // This chip cannot be recognized by accessibility services. 851 closeOptions: { 852 accessibilityLevel: "no" 853 }, 854 backgroundColor: '#CCCCCC', 855 onClicked: () => { 856 this.getUIContext().getPromptAction().showToast({ message: "This chip cannot be recognized by accessibility services." }); 857 } 858 }) 859 } 860 .width('100%') 861 .padding(16) 862 } 863} 864``` 865
