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## Child Components 10 11Not supported 12 13## Chip 14 15Chip({options:ChipOptions}) 16 17**Decorator**: @Builder 18 19**Atomic service API**: This API can be used in atomic services since API version 12. 20 21**System capability**: SystemCapability.ArkUI.ArkUI.Full 22 23**Parameters** 24 25| Name | Type | Mandatory| Decorator| Description | 26| ------- | --------------------------- | ---- | ---------- | -------------------- | 27| options | [ChipOptions](#chipoptions) | Yes | @Builder | Parameters of the chip.| 28 29## ChipOptions 30 31Defines the type and style parameters of the chip. 32 33**Atomic service API**: This API can be used in atomic services since API version 12. 34 35**System capability**: SystemCapability.ArkUI.ArkUI.Full 36 37| Name | Type | Mandatory| Description | 38| --------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 39| 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.| 40| enabled | boolean | No | Whether the chip can be selected.<br>Default value: **true**| 41| activated<sup>12+</sup> | boolean | No | Whether the chip is activated.<br>Default value: **false** | 42| prefixIcon | [PrefixIconOptions](#prefixiconoptions) | No | Prefix icon of the chip.| 43| prefixSymbol<sup>12+</sup> | [ChipSymbolGlyphOptions](#chipsymbolglyphoptions12) | No | Symbol-type prefix icon of the chip.| 44| label | [LabelOptions](#labeloptions) | Yes | Text of the chip. | 45| suffixIcon | [SuffixIconOptions](#suffixiconoptions) | No | Suffix icon of the chip.| 46| suffixSymbol<sup>12+</sup> | [ChipSymbolGlyphOptions](#chipsymbolglyphoptions12) | No | Symbol-type suffix icon of the chip.| 47| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the chip.<br>Default value: **$r('sys.color.ohos_id_color_button_normal').**| 48| 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').**| 49| 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')**| 50| allowClose | boolean | No | Whether to show the close icon.<br>Default value: **true** | 51| onClose | ()=>void | No | Event triggered when the close icon is clicked.| 52| onClicked<sup>12+</sup> | ()=>void | No | Event triggered when the chip is clicked. | 53| direction<sup>12+</sup> | [Direction](ts-appendix-enums.md#direction) | No| Layout direction.<br>Default value: **Direction.Auto**| 54 55> **NOTE** 56> 57> 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. 58> 59> 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. 60> 61> 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**. 62> 63> 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. 64> 65> 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. 66 67## ChipSize 68 69Defines the size type of the chip. 70 71**Atomic service API**: This API can be used in atomic services since API version 12. 72 73**System capability**: SystemCapability.ArkUI.ArkUI.Full 74 75| Name | Value | Description | 76| ------ | -------- | ------------------ | 77| NORMAL | "NORMAL" | Normal size.| 78| SMALL | "SMALL" | Small size. | 79 80## IconCommonOptions 81 82Defines the common icon attributes of the chip. 83 84**Atomic service API**: This API can be used in atomic services since API version 12. 85 86**System capability**: SystemCapability.ArkUI.ArkUI.Full 87 88| Name | Type | Mandatory| Description | 89| --------- | ------------------------------------------ | ---- | ------------------------------------------------------------ | 90| src | [ResourceStr](ts-types.md#resourcestr) | Yes | Icon source, which can be a specific image path or an image reference.| 91| size | [SizeOptions](ts-types.md#sizeoptions) | No | Icon size. This parameter cannot be set in percentage.<br>Default value: **{width: 16,height: 16}**| 92| fillColor | [ResourceColor](ts-types.md#resourcecolor) | No | Icon fill color.| 93| activatedFillColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Icon fill color when the chip is activated. | 94 95> **NOTE** 96> 97> **fillColor** and **activatedFillColor** take effect only when the icon format is SVG. 98> 99 100## PrefixIconOptions 101 102Defines the attributes of the prefix icon. 103 104Inherits from [IconCommonOptions](#iconcommonoptions). 105 106**Atomic service API**: This API can be used in atomic services since API version 12. 107 108**System capability**: SystemCapability.ArkUI.ArkUI.Full 109 110## SuffixIconOptions 111 112Defines the attributes of the suffix icon. 113 114Inherits from [IconCommonOptions](#iconcommonoptions). 115 116**Atomic service API**: This API can be used in atomic services since API version 12. 117 118**System capability**: SystemCapability.ArkUI.ArkUI.Full 119 120| Name | Type | Mandatory| Description | 121| ------ | ---------- | ---- | ------------------ | 122| action | () => void | No | Action of the suffix icon.| 123 124## ChipSymbolGlyphOptions<sup>12+</sup> 125 126Defines the options for prefix and suffix icons. 127 128**Atomic service API**: This API can be used in atomic services since API version 12. 129 130**System capability**: SystemCapability.ArkUI.ArkUI.Full 131 132| Name | Type | Mandatory| Description | 133| ------ | ---------- | ---- | ------------------ | 134| normal | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Icon setup event.| 135| activated | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Icon setup event when the icon is activated.| 136 137> **NOTE** 138> 139> Modifying the animation type with **symbolEffect** and setting the animation with **effectStrategy** are not supported. 140> 141 142## LabelOptions 143 144Defines the text attributes of the chip. 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| Name | Type | Mandatory| Description | 151| ----------- | ------------------------------------------ | ---- | ------------------------------------------------------------ | 152| text | string | Yes | Text content.| 153| 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')**| 154| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color.<br>Default value: **$r('sys.color.ohos_id_color_text_primary')**| 155| 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').**| 156| fontFamily | string | No | Font family.<br>Default value: **"HarmonyOS Sans"**| 157| labelMargin | [LabelMarginOptions](#labelmarginoptions) | No | Spacing between the text and the left and right icons.| 158| 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>} | 159 160## LabelMarginOptions 161 162Defines the spacing between the text and the left and right icons. 163 164**Atomic service API**: This API can be used in atomic services since API version 12. 165 166**System capability**: SystemCapability.ArkUI.ArkUI.Full 167 168| Name | Type | Mandatory| Description | 169| ----- | ------------------------------------ | ---- | -------------------------------------- | 170| left | [Dimension](ts-types.md#dimension10) | No | Spacing between the text and the left icon. This parameter cannot be set in percentage.| 171| right | [Dimension](ts-types.md#dimension10) | No | Spacing between the text and the right icon. This parameter cannot be set in percentage.| 172 173## LocalizedLabelMarginOptions<sup>12+</sup> 174 175Defines the spacing between the localized text and the left and right icons. 176 177**Atomic service API**: This API can be used in atomic services since API version 12. 178 179**System capability**: SystemCapability.ArkUI.ArkUI.Full 180 181| Name | Type | Mandatory| Description | 182| ----- | ------------------------------------------------------------ | ---- | -------------------------------------- | 183| start | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Spacing between the text and the left icon. This parameter cannot be set in percentage.| 184| end | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Spacing between the text and the right icon. This parameter cannot be set in percentage.| 185 186## Example 187 188### Example 1 189 190This example defines a custom chip for the deletion icon. 191 192```ts 193import { Chip, ChipSize } from '@kit.ArkUI'; 194 195@Entry 196@Component 197struct Index { 198 build() { 199 Column({ space: 10 }) { 200 Chip({ 201 prefixIcon: { 202 src: $r('app.media.chips'), 203 size: { width: 16, height: 16 }, 204 fillColor: Color.Red 205 }, 206 label: { 207 text: "Chip", 208 fontSize: 12, 209 fontColor: Color.Blue, 210 fontFamily: "HarmonyOS Sans", 211 labelMargin: { left: 20, right: 30 } 212 }, 213 suffixIcon: { 214 src: $r('app.media.close'), 215 size: { width: 16, height: 16 }, 216 fillColor: Color.Red 217 }, 218 size: ChipSize.NORMAL, 219 allowClose: false, 220 enabled: true, 221 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 222 borderRadius: $r('sys.float.ohos_id_corner_radius_button') 223 }) 224 } 225 } 226} 227``` 228 229 230 231 232### Example 2 233 234This example implements the default chip for the deletion icon. 235 236```ts 237import { Chip, ChipSize } from '@kit.ArkUI'; 238 239@Entry 240@Component 241struct Index { 242 build() { 243 Column({ space: 10 }) { 244 Chip({ 245 prefixIcon: { 246 src: $r('app.media.chips'), 247 size: { width: 16, height: 16 }, 248 fillColor: Color.Blue 249 }, 250 label: { 251 text: "Chip", 252 fontSize: 12, 253 fontColor: Color.Blue, 254 fontFamily: "HarmonyOS Sans", 255 labelMargin: { left: 20, right: 30 } 256 }, 257 size: ChipSize.NORMAL, 258 allowClose: true, 259 enabled: true, 260 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 261 borderRadius: $r('sys.float.ohos_id_corner_radius_button') 262 }) 263 } 264 } 265} 266``` 267 268 269 270 271### Example 3 272 273This example shows how to hide the chip for the deletion icon. 274 275```ts 276import { Chip, ChipSize } from '@kit.ArkUI'; 277 278@Entry 279@Component 280struct Index { 281 build() { 282 Column({ space: 10 }) { 283 Chip({ 284 prefixIcon: { 285 src: $r('app.media.chips'), 286 size: { width: 16, height: 16 }, 287 fillColor: Color.Blue 288 }, 289 label: { 290 text: "Chip", 291 fontSize: 12, 292 fontColor: Color.Blue, 293 fontFamily: "HarmonyOS Sans", 294 labelMargin: { left: 20, right: 30 } 295 }, 296 size: ChipSize.SMALL, 297 allowClose: false, 298 enabled: true, 299 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 300 borderRadius: $r('sys.float.ohos_id_corner_radius_button'), 301 onClose:()=>{ 302 console.log("chip on close") 303 } 304 }) 305 } 306 } 307} 308``` 309 310 311 312 313### Example 4 314 315This example implements a chip in the activated state. 316 317```ts 318import { Chip, ChipSize } from '@kit.ArkUI'; 319 320@Entry 321@Component 322struct Index { 323 @State isActivated: boolean = false 324 325 build() { 326 Column({ space: 10 }) { 327 Chip({ 328 prefixIcon: { 329 src: $r('app.media.chips'), 330 size: { width: 16, height: 16 }, 331 fillColor: Color.Blue, 332 activatedFillColor: $r('sys.color.ohos_id_color_text_primary_contrary') 333 }, 334 label: { 335 text: "Chip", 336 fontSize: 12, 337 fontColor: Color.Blue, 338 activatedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), 339 fontFamily: "HarmonyOS Sans", 340 labelMargin: { left: 20, right: 30 } 341 }, 342 size: ChipSize.NORMAL, 343 allowClose: true, 344 enabled: true, 345 activated: this.isActivated, 346 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 347 activatedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), 348 borderRadius: $r('sys.float.ohos_id_corner_radius_button'), 349 onClose:()=>{ 350 console.log("chip on close") 351 }, 352 onClicked:()=>{ 353 console.log("chip on clicked") 354 } 355 }) 356 357 Button('Activate/Deactivate').onClick(()=>{ 358 this.isActivated = !this.isActivated 359 }) 360 } 361 } 362} 363``` 364 365 366 367 368### Example 5 369 370This example implements symbol-type prefix and suffix icons for the **Chip** component. 371 372```ts 373import { Chip, ChipSize, SymbolGlyphModifier } from '@kit.ArkUI'; 374 375@Entry 376@Component 377struct Index { 378 @State isActivated: boolean = false 379 380 build() { 381 Column({ space: 10 }) { 382 Chip({ 383 prefixIcon: { 384 src: $r('app.media.chips'), 385 size: { width: 16, height: 16 }, 386 fillColor: Color.Blue, 387 activatedFillColor: $r('sys.color.ohos_id_color_text_primary_contrary') 388 }, 389 prefixSymbol: { 390 normal: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontSize(16).fontColor([Color.Green]), 391 activated: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontSize(16).fontColor([Color.Red]), 392 }, 393 label: { 394 text: "Chip", 395 fontSize: 12, 396 fontColor: Color.Blue, 397 activatedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), 398 fontFamily: "HarmonyOS Sans", 399 labelMargin: { left: 20, right: 30 }, 400 }, 401 size: ChipSize.NORMAL, 402 allowClose: true, 403 enabled: true, 404 activated: this.isActivated, 405 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 406 activatedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), 407 borderRadius: $r('sys.float.ohos_id_corner_radius_button'), 408 onClose:()=>{ 409 console.log("chip on close") 410 }, 411 onClicked:()=>{ 412 console.log("chip on clicked") 413 } 414 }) 415 416 Button('Activate/Deactivate').onClick(()=>{ 417 this.isActivated = !this.isActivated 418 }) 419 } 420 } 421} 422``` 423 424 425 426### Example 6 427 428This example mirrors the layout of the **Chip** component. 429 430```ts 431 432import { Chip, ChipSize,LengthMetrics } from '@kit.ArkUI'; 433 434@Entry 435@Component 436struct ChipPage { 437 438 build() { 439 Column() { 440 Chip({ 441 direction: Direction.Rtl, 442 prefixIcon: { 443 src: $r('app.media.chips'), 444 size: { width: 16, height: 16 }, 445 fillColor: Color.Red, 446 }, 447 label: { 448 text: "Chip", 449 fontSize: 12, 450 fontColor: Color.Blue, 451 fontFamily: "HarmonyOS Sans", 452 localizedLabelMargin: { start: LengthMetrics.vp(20), end: LengthMetrics.vp(20) }, 453 }, 454 suffixIcon: { 455 src: $r('app.media.close'), 456 size: { width: 16, height: 16 }, 457 fillColor: Color.Red, 458 }, 459 size: ChipSize.NORMAL, 460 allowClose: false, 461 enabled: true, 462 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 463 borderRadius: $r('sys.float.ohos_id_corner_radius_button') 464 }) 465 }.justifyContent(FlexAlign.Center) 466 .width('100%') 467 .height('100%') 468 } 469} 470``` 471 472 473 474
