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