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}) 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| Decorator| Description | 32| ------- | --------------------------- | ---- | ---------- | -------------------- | 33| options | [ChipOptions](#chipoptions) | Yes | @Builder | 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>**Atomic service API**: This API can be used in atomic services since API version 12.| 45| activated | boolean | No | Whether the chip is activated.<br>Default value: **false**<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 | [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 | [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 | [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 | 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 | [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| Accessibility description of the chip.<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.<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>**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. 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 | Default selected state type of the chip.| 100| CHECKED | 1 | Selected state type of the chip when used as a check box.| 101| SELECTED | 2 | Selected state type of the chip when used as a radio button.| 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 of the suffix icon.<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| Accessibility description of the suffix icon.<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.<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.| 159| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility description.| 160| accessibilityLevel | string | No| Accessibility level.<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 251 252This example defines a custom chip for the deletion icon. 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 src: $r('app.media.chips'), 265 size: { width: 16, height: 16 }, 266 fillColor: Color.Red 267 }, 268 label: { 269 text: "Chip", 270 fontSize: 12, 271 fontColor: Color.Blue, 272 fontFamily: "HarmonyOS Sans", 273 labelMargin: { left: 20, right: 30 } 274 }, 275 suffixIcon: { 276 src: $r('app.media.close'), 277 size: { width: 16, height: 16 }, 278 fillColor: Color.Red 279 }, 280 size: ChipSize.NORMAL, 281 allowClose: false, 282 enabled: true, 283 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 284 borderRadius: $r('sys.float.ohos_id_corner_radius_button') 285 }) 286 } 287 } 288} 289``` 290 291 292 293 294### Example 2 295 296This example implements the default chip for the deletion icon. 297 298```ts 299import { Chip, ChipSize } from '@kit.ArkUI'; 300 301@Entry 302@Component 303struct Index { 304 build() { 305 Column({ space: 10 }) { 306 Chip({ 307 prefixIcon: { 308 src: $r('app.media.chips'), 309 size: { width: 16, height: 16 }, 310 fillColor: Color.Blue 311 }, 312 label: { 313 text: "Chip", 314 fontSize: 12, 315 fontColor: Color.Blue, 316 fontFamily: "HarmonyOS Sans", 317 labelMargin: { left: 20, right: 30 } 318 }, 319 size: ChipSize.NORMAL, 320 allowClose: true, 321 enabled: true, 322 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 323 borderRadius: $r('sys.float.ohos_id_corner_radius_button') 324 }) 325 } 326 } 327} 328``` 329 330 331 332 333### Example 3 334 335This example shows how to hide the chip for the deletion icon. 336 337```ts 338import { Chip, ChipSize } from '@kit.ArkUI'; 339 340@Entry 341@Component 342struct Index { 343 build() { 344 Column({ space: 10 }) { 345 Chip({ 346 prefixIcon: { 347 src: $r('app.media.chips'), 348 size: { width: 16, height: 16 }, 349 fillColor: Color.Blue 350 }, 351 label: { 352 text: "Chip", 353 fontSize: 12, 354 fontColor: Color.Blue, 355 fontFamily: "HarmonyOS Sans", 356 labelMargin: { left: 20, right: 30 } 357 }, 358 size: ChipSize.SMALL, 359 allowClose: false, 360 enabled: true, 361 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 362 borderRadius: $r('sys.float.ohos_id_corner_radius_button'), 363 onClose:()=>{ 364 console.log("chip on close") 365 } 366 }) 367 } 368 } 369} 370``` 371 372 373 374 375### Example 4 376 377This example implements a chip in the activated state. 378 379```ts 380import { Chip, ChipSize } from '@kit.ArkUI'; 381 382@Entry 383@Component 384struct Index { 385 @State isActivated: boolean = false 386 387 build() { 388 Column({ space: 10 }) { 389 Chip({ 390 prefixIcon: { 391 src: $r('app.media.chips'), 392 size: { width: 16, height: 16 }, 393 fillColor: Color.Blue, 394 activatedFillColor: $r('sys.color.ohos_id_color_text_primary_contrary') 395 }, 396 label: { 397 text: "Chip", 398 fontSize: 12, 399 fontColor: Color.Blue, 400 activatedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), 401 fontFamily: "HarmonyOS Sans", 402 labelMargin: { left: 20, right: 30 } 403 }, 404 size: ChipSize.NORMAL, 405 allowClose: true, 406 enabled: true, 407 activated: this.isActivated, 408 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 409 activatedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), 410 borderRadius: $r('sys.float.ohos_id_corner_radius_button'), 411 onClose:()=>{ 412 console.log("chip on close") 413 }, 414 onClicked:()=>{ 415 console.log("chip on clicked") 416 } 417 }) 418 419 Button('Activate/Deactivate').onClick(()=>{ 420 this.isActivated = !this.isActivated 421 }) 422 } 423 } 424} 425``` 426 427 428 429 430### Example 5 431 432This example implements symbol-type prefix and suffix icons for the **Chip** component. 433 434```ts 435import { Chip, ChipSize, SymbolGlyphModifier } from '@kit.ArkUI'; 436 437@Entry 438@Component 439struct Index { 440 @State isActivated: boolean = false 441 442 build() { 443 Column({ space: 10 }) { 444 Chip({ 445 prefixIcon: { 446 src: $r('app.media.chips'), 447 size: { width: 16, height: 16 }, 448 fillColor: Color.Blue, 449 activatedFillColor: $r('sys.color.ohos_id_color_text_primary_contrary') 450 }, 451 prefixSymbol: { 452 normal: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontSize(16).fontColor([Color.Green]), 453 activated: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontSize(16).fontColor([Color.Red]), 454 }, 455 label: { 456 text: "Chip", 457 fontSize: 12, 458 fontColor: Color.Blue, 459 activatedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), 460 fontFamily: "HarmonyOS Sans", 461 labelMargin: { left: 20, right: 30 }, 462 }, 463 size: ChipSize.NORMAL, 464 allowClose: true, 465 enabled: true, 466 activated: this.isActivated, 467 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 468 activatedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), 469 borderRadius: $r('sys.float.ohos_id_corner_radius_button'), 470 onClose:()=>{ 471 console.log("chip on close") 472 }, 473 onClicked:()=>{ 474 console.log("chip on clicked") 475 } 476 }) 477 478 Button('Activate/Deactivate').onClick(()=>{ 479 this.isActivated = !this.isActivated 480 }) 481 } 482 } 483} 484``` 485 486 487 488### Example 6 489 490This example mirrors the layout of the **Chip** component. 491 492```ts 493 494import { Chip, ChipSize,LengthMetrics } from '@kit.ArkUI'; 495 496@Entry 497@Component 498struct ChipPage { 499 500 build() { 501 Column() { 502 Chip({ 503 direction: Direction.Rtl, 504 prefixIcon: { 505 src: $r('app.media.chips'), 506 size: { width: 16, height: 16 }, 507 fillColor: Color.Red, 508 }, 509 label: { 510 text: "Chip", 511 fontSize: 12, 512 fontColor: Color.Blue, 513 fontFamily: "HarmonyOS Sans", 514 localizedLabelMargin: { start: LengthMetrics.vp(20), end: LengthMetrics.vp(20) }, 515 }, 516 suffixIcon: { 517 src: $r('app.media.close'), 518 size: { width: 16, height: 16 }, 519 fillColor: Color.Red, 520 }, 521 size: ChipSize.NORMAL, 522 allowClose: false, 523 enabled: true, 524 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 525 borderRadius: $r('sys.float.ohos_id_corner_radius_button') 526 }) 527 }.justifyContent(FlexAlign.Center) 528 .width('100%') 529 .height('100%') 530 } 531} 532``` 533 534 535 536 537### Example 7 538 539This example implements the accessibility feature for a chip with an image-type suffix icon. 540 541```ts 542 543import { Chip, SymbolGlyphModifier } from '@kit.ArkUI'; 544 545@Builder 546function DefaultFunction(): void { 547} 548 549@Component 550struct SectionGroup { 551 @Prop 552 @Require 553 title: ResourceStr; 554 @BuilderParam 555 @Require 556 content: () => void = DefaultFunction; 557 558 build() { 559 Column({ space: 4 }) { 560 Text(this.title) 561 .fontColor('#FF666666') 562 .fontSize(12) 563 Column({ space: 8 }) { 564 this.content() 565 } 566 } 567 .alignItems(HorizontalAlign.Start) 568 .width('100%') 569 } 570} 571 572@Component 573struct SectionItem { 574 @Prop 575 @Require 576 title: ResourceStr; 577 @BuilderParam 578 @Require 579 content: () => void = DefaultFunction; 580 581 build() { 582 Column({ space: 12 }) { 583 Text(this.title) 584 this.content() 585 } 586 .backgroundColor('#FFFFFFFF') 587 .borderRadius(12) 588 .padding(12) 589 .width('100%') 590 } 591} 592 593@Entry 594@Component 595struct ChipExample2 { 596 @State activated: boolean = false; 597 598 build() { 599 NavDestination() { 600 Scroll() { 601 SectionGroup({ title: 'Suffix icon readout' }) { 602 SectionItem({ title: 'Custom Readout' }) { 603 Chip({ 604 label: { text: 'Chip' }, 605 suffixIcon: { 606 src: $r('sys.media.ohos_ic_public_cut'), 607 accessibilityText: 'Icon', 608 accessibilityDescription: 'Usage hints', 609 action: () => { 610 this.getUIContext().getPromptAction().showToast({ 611 message: 'Suffix icon touched.' 612 }); 613 } 614 }, 615 onClicked: () => { 616 this.getUIContext().getPromptAction().showToast({ 617 message: 'Chip touched.' 618 }); 619 } 620 }) 621 } 622 } 623 } 624 } 625 } 626} 627``` 628 629### Example 8 630 631This example implements the accessibility feature for a chip with a symbol-type suffix icon. 632 633```ts 634 635import { Chip, SymbolGlyphModifier } from '@kit.ArkUI'; 636 637@Builder 638function DefaultFunction(): void { 639} 640 641@Component 642struct SectionGroup { 643 @Prop 644 @Require 645 title: ResourceStr; 646 @BuilderParam 647 @Require 648 content: () => void = DefaultFunction; 649 650 build() { 651 Column({ space: 4 }) { 652 Text(this.title) 653 .fontColor('#FF666666') 654 .fontSize(12) 655 Column({ space: 8 }) { 656 this.content() 657 } 658 } 659 .alignItems(HorizontalAlign.Start) 660 .width('100%') 661 } 662} 663 664@Component 665struct SectionItem { 666 @Prop 667 @Require 668 title: ResourceStr; 669 @BuilderParam 670 @Require 671 content: () => void = DefaultFunction; 672 673 build() { 674 Column({ space: 12 }) { 675 Text(this.title) 676 this.content() 677 } 678 .backgroundColor('#FFFFFFFF') 679 .borderRadius(12) 680 .padding(12) 681 .width('100%') 682 } 683} 684 685@Entry 686@Component 687struct ChipExample2 { 688 @State activated: boolean = false; 689 690 build() { 691 NavDestination() { 692 Scroll() { 693 SectionGroup({ title: 'Suffix symbol readout' }) { 694 SectionItem({ title: 'activatedAccessibility' }) { 695 Chip({ 696 label: { text: 'Chip' }, 697 activated: true, 698 suffixSymbol: { 699 activated: new SymbolGlyphModifier($r('sys.symbol.media_sound')) 700 .fontSize(72), 701 }, 702 suffixSymbolOptions: { 703 activatedAccessibility: { 704 accessibilityText: 'Music', 705 accessibilityDescription: 'Usage hints' 706 }, 707 action: () => { 708 this.getUIContext().getPromptAction().showToast({ 709 message: 'Suffix symbol touched.' 710 }); 711 } 712 }, 713 onClicked: () => { 714 this.getUIContext().getPromptAction().showToast({ 715 message: 'Chip touched.' 716 }); 717 } 718 }) 719 } 720 SectionItem({ title: 'normalAccessibility' }) { 721 Chip({ 722 label: { text: 'Chip' }, 723 suffixSymbol: { 724 normal: new SymbolGlyphModifier($r('sys.symbol.media_sound')) 725 .fontSize(72), 726 }, 727 suffixSymbolOptions: { 728 normalAccessibility: { 729 accessibilityText: 'Music', 730 accessibilityDescription: 'Usage hints' 731 }, 732 action: () => { 733 this.getUIContext().getPromptAction().showToast({ 734 message: 'Suffix symbol touched.' 735 }); 736 } 737 }, 738 onClicked: () => { 739 this.getUIContext().getPromptAction().showToast({ 740 message: 'Chip touched.' 741 }); 742 } 743 }) 744 } 745 } 746 } 747 } 748 .padding({ 749 top: 8, 750 bottom: 8, 751 left: 16, 752 right: 16, 753 }) 754 } 755} 756``` 757
