1# @ohos.arkui.advanced.Chip (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**System capability**: SystemCapability.ArkUI.ArkUI.Full 20 21**Parameters** 22 23| Name | Type | Mandatory| Decorator| Description | 24| ------- | --------------------------- | ---- | ---------- | -------------------- | 25| options | [ChipOptions](#chipoptions) | Yes | @Builder | Parameters of the chip.| 26 27## ChipOptions 28 29Defines the type and style parameters of the chip. 30 31**System capability**: SystemCapability.ArkUI.ArkUI.Full 32 33| Name | Type | Mandatory| Description | 34| --------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 35| 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.| 36| enabled | boolean | No | Whether the chip can be selected.<br>Default value: **true** | 37| prefixIcon | [PrefixIconOptions](#prefixiconoptions) | No | Prefix icon of the chip. | 38| label | [LabelOptions](#labeloptions) | Yes | Text of the chip. | 39| suffixIcon | [SuffixIconOptions](#suffixiconoptions) | No | Suffix icon of the chip. | 40| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the chip.<br>Default value: **$r('sys.float.ohos_id_color_button_normal')**| 41| 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')**| 42| allowClose | boolean | No | Whether to show the deletion icon.<br>Default value: **true** | 43| onClose | ()=>void | No | Event triggered when the close icon is clicked. | 44 45> **NOTE** 46> 47> 1. If the width set for the chip is less than the minimum width, the chip is displayed at the minimum width. 48> 49> 2. If **suffixIcon** is specified, **allowClose** has no effect. 50> 51> 3. If **undefined** is assigned to **backgroundColor**, the default background color is used. If an invalid value is assigned to **backgroundColor**, the background color is transparent. 52> 53> 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. 54 55## ChipSize 56 57Defines the size type of the chip. 58 59| Name | Value | Description | 60| ------ | -------- | ------------------ | 61| NORMAL | "NORMAL" | Normal size.| 62| SMALL | "SMALL" | Small size. | 63 64## IconCommonOptions 65 66Defines the common icon attributes of the chip. 67 68| Name | Type | Mandatory| Description | 69| --------- | ------------------------------------------ | ---- | ------------------------------------------------------------ | 70| src | [ResourceStr](ts-types.md#resourcestr) | Yes | Icon source, which can be a specific image path or an image reference. | 71| size | [SizeOptions](ts-types.md#sizeoptions) | No | Icon size. This parameter cannot be set in percentage.<br>Default value: **{width: 16,height: 16}**| 72| fillColor | [ResourceColor](ts-types.md#resourcecolor) | No | Icon fill color. | 73 74> **NOTE** 75> 76> **fillColor** takes effect only when the icon format is **svg**. 77 78 79## PrefixIconOptions 80 81Defines the attributes of the prefix icon. 82 83Inherited from [IconCommonOptions](#iconcommonoptions). 84 85## SuffixIconOptions 86 87Defines the attributes of the suffix icon. 88 89Inherited from [IconCommonOptions](#iconcommonoptions). 90 91| Name | Type | Mandatory| Description | 92| ------ | ---------- | ---- | ------------------ | 93| action | () => void | No | Action of the suffix icon.| 94 95## LabelOptions 96 97Defines the text attributes of the chip. 98 99| Name | Type | Mandatory| Description | 100| ----------- | ------------------------------------------ | ---- | ------------------------------------------------------------ | 101| text | string | Yes | Text content. | 102| 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_button3')**| 103| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color.<br>Default value: **$r('sys.color.ohos_id_color_text_primary')**| 104| fontFamily | string | No | Font family.<br>Default value: **"HarmonyOS Sans"** | 105| labelMargin | [LabelMarginOptions](#labelmarginoptions) | No | Spacing between the text and the left and right icons. | 106 107## LabelMarginOptions 108 109Defines the spacing between the text and the left and right icons. 110 111| Name | Type | Mandatory| Description | 112| ----- | ------------------------------------ | ---- | -------------------------------------------------------- | 113| left | [Dimension](ts-types.md#dimension10) | No | Spacing between the text and the left icon. This parameter cannot be set in percentage.<br>Default value: **6vp**| 114| right | [Dimension](ts-types.md#dimension10) | No | Spacing between the text and the right icon. This parameter cannot be set in percentage.<br>Default value: **6vp**| 115 116 117## Example 118 119### Example 1 120 121```ts 122import { Chip, ChipSize } from '@ohos.arkui.advanced.Chip'; 123 124@Entry 125@Component 126struct Index { 127 build() { 128 Column({ space: 10 }) { 129 Chip({ 130 prefixIcon: { 131 src: $r('app.media.chips'), 132 size: { width: 16, height: 16 }, 133 fillColor: Color.Red, 134 }, 135 label: { 136 text: "Chip", 137 fontSize: 12, 138 fontColor: Color.Blue, 139 fontFamily: "HarmonyOS Sans", 140 labelMargin: { left: 20, right: 30 }, 141 }, 142 suffixIcon: { 143 src: $r('app.media.close'), 144 size: { width: 16, height: 16 }, 145 fillColor: Color.Red, 146 }, 147 size: ChipSize.NORMAL, 148 allowClose: false, 149 enabled: true, 150 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 151 borderRadius: $r('sys.float.ohos_id_corner_radius_button') 152 }) 153 } 154 } 155} 156``` 157 158 159 160 161### Example 2 162 163```ts 164import { Chip, ChipSize } from '@ohos.arkui.advanced.Chip'; 165 166@Entry 167@Component 168struct Index { 169 build() { 170 Column({ space: 10 }) { 171 Chip({ 172 prefixIcon: { 173 src: $r('app.media.chips'), 174 size: { width: 16, height: 16 }, 175 fillColor: Color.Blue, 176 }, 177 label: { 178 text: "Chip", 179 fontSize: 12, 180 fontColor: Color.Blue, 181 fontFamily: "HarmonyOS Sans", 182 labelMargin: { left: 20, right: 30 }, 183 }, 184 size: ChipSize.NORMAL, 185 allowClose: true, 186 enabled: true, 187 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 188 borderRadius: $r('sys.float.ohos_id_corner_radius_button') 189 }) 190 } 191 } 192} 193``` 194 195 196 197 198### Example 3 199 200```ts 201import { Chip, ChipSize } from '@ohos.arkui.advanced.Chip'; 202 203@Entry 204@Component 205struct Index { 206 build() { 207 Column({ space: 10 }) { 208 Chip({ 209 prefixIcon: { 210 src: $r('app.media.chips'), 211 size: { width: 16, height: 16 }, 212 fillColor: Color.Blue, 213 }, 214 label: { 215 text: "Chip", 216 fontSize: 12, 217 fontColor: Color.Blue, 218 fontFamily: "HarmonyOS Sans", 219 labelMargin: { left: 20, right: 30 }, 220 }, 221 size: ChipSize.SMALL, 222 allowClose: false, 223 enabled: true, 224 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 225 borderRadius: $r('sys.float.ohos_id_corner_radius_button'), 226 onClose:()=>{ 227 console.log("chip on close") 228 } 229 }) 230 } 231 } 232} 233``` 234 235 236 237
