1# Chip 2 3操作块，用于搜索框历史记录或者邮件发送列表等场景。 4 5> **说明：** 6> 7> 该组件从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 导入模块 10 11```ts 12import { Chip, ChipOptions, ChipSize } from '@kit.ArkUI'; 13``` 14 15## 子组件 16 17无 18 19## Chip 20 21Chip({options:ChipOptions}): void 22 23**装饰器类型：**@Builder 24 25**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 26 27**系统能力：** SystemCapability.ArkUI.ArkUI.Full 28 29**参数**： 30 31| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 32| ------- | --------------------------- | ---- | ---------- | -------------------- | 33| options | [ChipOptions](#chipoptions) | 是 | @Builder | 定义chip组件的参数。 | 34 35## ChipOptions 36 37ChipOptions定义chip的样式及具体式样参数。 38 39**系统能力：** SystemCapability.ArkUI.ArkUI.Full 40 41| 名称 | 类型 | 必填 | 说明 | 42| --------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 43| size | [ChipSize](#chipsize) \| [SizeOptions](ts-types.md#sizeoptions) | 否 | 操作块尺寸。<br/>默认值：ChipSize：ChipSize.NORMAL，<br/> SizeOptions类型参数不支持百分比设置。<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 44| enabled | boolean | 否 | 操作块是否可选中。<br>默认值：true。<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 45| activated<sup>12+</sup> | boolean | 否 | 操作块是否为激活态。<br>默认值：false。<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 46| prefixIcon | [PrefixIconOptions](#prefixiconoptions) | 否 | 前缀图标属性。<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 47| prefixSymbol<sup>12+</sup> | [ChipSymbolGlyphOptions](#chipsymbolglyphoptions12) | 否 | 前缀图标属性，symbol类型。<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 48| label | [LabelOptions](#labeloptions) | 是 | 文本属性。<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 49| suffixIcon | [SuffixIconOptions](#suffixiconoptions) | 否 | 后缀图标属性。<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 50| suffixSymbol<sup>12+</sup> | [ChipSymbolGlyphOptions](#chipsymbolglyphoptions12) | 否 | 后缀图标属性，symbol类型。<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 51| suffixSymbolOptions<sup>14+</sup> | [ChipSuffixSymbolGlyphOptions](#chipsuffixsymbolglyphoptions14) | 否 | symbol类型后缀图标属性的无障碍朗读功能属性。<br>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 52| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 操作块背景颜色。<br/>默认值：$r('sys.color.ohos_id_color_button_normal')。<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 53| activatedBackgroundColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 操作块激活时的背景颜色。<br/>默认值：$r('sys.color.ohos_id_color_emphasize')。<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 54| borderRadius | [Dimension](ts-types.md#dimension10) | 否 | 操作块背景圆角半径大小，不支持百分比。<br/>默认值：$r('sys.float.ohos_id_corner_radius_button')。<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 55| allowClose | boolean | 否 | 删除图标是否显示。<br/>默认值：true。<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 56| onClose | ()=>void | 否 | 默认删除图标点击事件。<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 57| onClicked<sup>12+</sup> | Callback\<void> | 否 | 操作块点击事件。<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 58| direction<sup>12+</sup> | [Direction](ts-appendix-enums.md#direction) | 否 | 布局方向。<br/>默认值：Direction.Auto。<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 59| closeOptions<sup>14+</sup> | [CloseOptions](#closeoptions14) | 否 | 默认删除图标的无障碍朗读功能属性。<br>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 | 60| accessibilityDescription<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | Chip组件的无障碍描述。此描述用于向用户详细解释当前组件，开发人员应为组件的这一属性提供较为详尽的文本说明，以协助用户理解即将执行的操作及其可能产生的后果。特别是当这些后果无法仅从组件的属性和无障碍文本中直接获知时。如果组件同时具备文本属性和无障碍说明属性，当组件被选中时，系统将首先播报组件的文本属性，随后播报无障碍说明属性的内容。<br>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 61| accessibilityLevel<sup>14+</sup> | string | 否 | Chip组件无障碍重要性。用于控制后缀图标是否可被无障碍辅助服务所识别。<br>支持的值为:<br>"auto"：当前组件会转化为“yes”。<br>"yes"：当前组件可被无障碍辅助服务所识别。<br>"no"：当前组件不可被无障碍辅助服务所识别。<br>"no-hide-descendants"：当前组件及其所有子组件不可被无障碍辅助服务所识别。<br>默认值："auto"。<br>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 | 62| accessibilitySelectedType<sup>14+</sup> | [AccessibilitySelectedType](#accessibilityselectedtype14) | 否 | Chip组件选中态类型。<br>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 63 64> **说明：** 65> 66> 1.suffixSymbol有传入参数时，suffixIcon和allowClose不生效；suffixSymbol没有传入参数、suffixIcon有传入参数时，allowClose不生效；suffixSymbol和suffixIcon都没有传入参数时，allowClose决定是否显示删除图标。 67> 68> 2.backgroundColor和activatedBackgroundColor赋值undefined时，显示默认背景颜色，赋值非法值时，背景色透明。 69> 70> 3.prefixSymbol/suffixSymbol的fontColor默认值，normalFontColor: `[$r('sys.color.ohos_id_color_primary')]`、activatedFontColor: `[$r('sys.color.ohos_id_color_text_primary_contrary')]`。fontColor默认值为16。 71> 72> 4.prefixIcon的fillColor默认值：`$r('sys.color.ohos_id_color_secondary')`，suffixIcon的fillColor默认值：`$r('sys.color.ohos_id_color_primary')`。fillColor对颜色的解析与Image组件保持一致。 73> 74> 5.prefixIcon的activatedFillColor默认值：`$r('sys.color.ohos_id_color_text_primary_contrary')`，suffixIcon的activatedFillColor默认值：`$r('sys.color.ohos_id_color_text_primary_contrary')`。activatedFillColor对颜色的解析与Image组件保持一致。 75 76## ChipSize 77 78ChipSize是chip可指定的尺寸类型，如普通型Chip。 79 80**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 81 82**系统能力：** SystemCapability.ArkUI.ArkUI.Full 83 84| 名称 | 值 | 说明 | 85| ------ | -------- | ------------------ | 86| NORMAL | "NORMAL" | normal尺寸操作块。 | 87| SMALL | "SMALL" | small尺寸操作块。 | 88 89## AccessibilitySelectedType<sup>14+</sup> 90 91AccessibilitySelectedType是Chip可指定的选中态类型，如默认类型为AccessibilitySelectedType.CLICKED。 92 93**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 94 95**系统能力：** SystemCapability.ArkUI.ArkUI.Full 96 97| 名称 | 值 | 说明 | 98| ---- | -- | ---- | 99| CLICKED | 0 | Chip组件选中态默认类型。| 100| CHECKED | 1 | Chip组件选中态复选类型。| 101| SELECTED | 2 | Chip组件选中态单选类型。| 102 103## IconCommonOptions 104 105IconCommonOptions定义图标的共通属性。 106 107**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 108 109**系统能力：** SystemCapability.ArkUI.ArkUI.Full 110 111| 名称 | 类型 | 必填 | 说明 | 112| --------- | ------------------------------------------ | ---- | ------------------------------------------------------------ | 113| src | [ResourceStr](ts-types.md#resourcestr) | 是 | 图标图片或图片地址引用。 | 114| size | [SizeOptions](ts-types.md#sizeoptions) | 否 | 图标大小，不支持百分比。<br/>默认值：{width: 16,height: 16} | 115| fillColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 图标填充颜色。 | 116| activatedFillColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 操作块激活时图标填充颜色。 | 117 118> **说明：** 119> 120> 仅在图片格式为svg时，fillColor和activatedFillColor生效。 121> 122 123## PrefixIconOptions 124 125PrefixIconOptions定义前缀图标的属性。 126 127继承于[IconCommonOptions](#iconcommonoptions)。 128 129**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 130 131**系统能力：** SystemCapability.ArkUI.ArkUI.Full 132 133## SuffixIconOptions 134 135SuffixIconOptions定义后缀图标的属性。 136 137继承于[IconCommonOptions](#iconcommonoptions)。 138 139**系统能力：** SystemCapability.ArkUI.ArkUI.Full 140 141| 名称 | 类型 | 必填 | 说明 | 142| ------ | ---------- | ---- | ------------------ | 143| action | () => void | 否 | 后缀图标设定事件。<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 144| accessibilityText<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 后缀图标无障碍文本属性。当后缀图标不包含文本属性时，屏幕朗读选中后缀图标时不播报，使用者无法清楚地知道当前是否选中了后缀图标。为了解决此场景，开发人员可为不包含文字信息的后缀图标设置无障碍文本，当屏幕朗读选中后缀图标时播报无障碍文本的内容，帮助屏幕朗读的使用者清楚地知道自己是否选中了后缀图标。<br>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 145| accessibilityDescription<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 后缀图标无障碍描述。的无障碍描述。此描述用于向用户详细解释后缀图标，开发人员应为后缀图标的这一属性提供较为详尽的文本说明，以协助用户理解即将执行的操作及其可能产生的后果。特别是当这些后果无法仅从后缀图标的属性和无障碍文本中直接获知时。如果后缀图标同时具备文本属性和无障碍说明属性，当后缀图标被选中时，系统将首先播报后缀图标的文本属性，随后播报无障碍说明属性的内容。<br>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 146| accessibilityLevel<sup>14+</sup> | string | 否 | 后缀图标无障碍重要性。用于控制后缀图标是否可被无障碍辅助服务所识别。<br>支持的值为:<br>"auto"：当前组件存在action时转化为“yes”，不存在action时，转化为“no”。<br>"yes"：当前组件可被无障碍辅助服务所识别。<br>"no"：当前组件不可被无障碍辅助服务所识别。<br>"no-hide-descendants"：当前组件及其所有子组件不可被无障碍辅助服务所识别。<br>默认值："auto"。<br>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 147 148## AccessibilityOptions<sup>14+</sup> 149 150后缀图标的无障碍朗读功能属性。 151 152**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 153 154**系统能力：** SystemCapability.ArkUI.ArkUI.Full 155 156| 名称 | 类型 | 必填 | 说明 | 157| ------ | ---------- | ---- | ------------------ | 158| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | 否 | 无障碍文本属性。当组件不包含文本属性时，屏幕朗读选中此组件时不播报，使用者无法清楚地知道当前选中了什么组件。为了解决此场景，开发人员可为不包含文字信息的组件设置无障碍文本，当屏幕朗读选中此组件时播报无障碍文本的内容，帮助屏幕朗读的使用者清楚地知道自己选中了什么组件。| 159| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | 否 | 无障碍描述。此描述用于向用户详细解释当前组件，开发人员应为组件的这一属性提供较为详尽的文本说明，以协助用户理解即将执行的操作及其可能产生的后果。特别是当这些后果无法仅从组件的属性和无障碍文本中直接获知时。如果组件同时具备文本属性和无障碍说明属性，当组件被选中时，系统将首先播报组件的文本属性，随后播报无障碍说明属性的内容。| 160| accessibilityLevel | string | 否 | 无障碍重要性。用于控制某个组件是否可被无障碍辅助服务所识别。<br>支持的值为:<br>"auto"：当前组件会转换为“yes”。<br>"yes"：当前组件可被无障碍辅助服务所识别。<br>"no"：当前组件不可被无障碍辅助服务所识别。<br>"no-hide-descendants"：当前组件及其所有子组件不可被无障碍辅助服务所识别。<br>默认值："auto"。| 161 162## ChipSuffixSymbolGlyphOptions<sup>14+</sup> 163 164symbol类型后缀图标属性的无障碍朗读功能属性类型。 165 166**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 167 168**系统能力：** SystemCapability.ArkUI.ArkUI.Full 169 170| 名称 | 类型 | 必填 | 说明 | 171| ---- | ---- | --- | ---- | 172| action | [VoidCallback](ts-types.md#voidcallback12) | 否 | 后缀图标响应事件。| 173| normalAccessibility | [AccessibilityOptions](#accessibilityoptions14) | 否 | 非激活态无障碍朗读功能属性。| 174| activatedAccessibility | [AccessibilityOptions](#accessibilityoptions14) | 否 | 激活态无障碍朗读功能属性。| 175 176## ChipSymbolGlyphOptions<sup>12+</sup> 177 178ChipSymbolGlyphOptions定义前缀图标和后缀图标的属性。 179 180**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 181 182**系统能力：** SystemCapability.ArkUI.ArkUI.Full 183 184| 名称 | 类型 | 必填 | 说明 | 185| ------ | ---------- | ---- | ------------------ | 186| normal | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 图标设定事件。 | 187| activated | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 激活时图标设定事件。 | 188 189> **说明：** 190> 191> 不支持通过symbolEffect修改动效类型和effectStrategy设置动效。 192> 193 194## LabelOptions 195 196LabelOptions定义文本的属性。 197 198**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 199 200**系统能力：** SystemCapability.ArkUI.ArkUI.Full 201 202| 名称 | 类型 | 必填 | 说明 | 203| ----------- | ------------------------------------------ | ---- | ------------------------------------------------------------ | 204| text | string | 是 | 文本文字内容。 | 205| fontSize | [Dimension](ts-types.md#dimension10) | 否 | 文字字号，不支持百分比。<br/>默认值：$r('sys.float.ohos_id_text_size_button2') | 206| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 文字颜色。<br/>默认值：$r('sys.color.ohos_id_color_text_primary') | 207| activatedFontColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 操作块激活时的文字颜色。<br/>默认值：$r('sys.color.ohos_id_color_text_primary_contrary') | 208| fontFamily | string | 否 | 文字字体。<br/>默认值："HarmonyOS Sans" | 209| labelMargin | [LabelMarginOptions](#labelmarginoptions) | 否 | 文本与左右侧图标之间间距。 | 210| localizedLabelMargin<sup>12+</sup> | [LocalizedLabelMarginOptions](#localizedlabelmarginoptions12) | 否 | 本地化文本与左右侧图标之间间距。<br/>默认值：{<br/>start: LengthMetrics.vp(6), end: LengthMetrics.vp(6)<br/>} | 211 212## CloseOptions<sup>14+</sup> 213 214默认关闭图标的无障碍朗读功能属性，accessibilityText默认为"删除"。 215 216继承于[AccessibilityOptions](#accessibilityoptions14)。 217 218**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 219 220**系统能力：** SystemCapability.ArkUI.ArkUI.Full 221 222## LabelMarginOptions 223 224LabelMarginOptions定义文本与左右侧图标之间间距。 225 226**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 227 228**系统能力：** SystemCapability.ArkUI.ArkUI.Full 229 230| 名称 | 类型 | 必填 | 说明 | 231| ----- | ------------------------------------ | ---- | -------------------------------------- | 232| left | [Dimension](ts-types.md#dimension10) | 否 | 文本与左侧图标之间间距，不支持百分比。 | 233| right | [Dimension](ts-types.md#dimension10) | 否 | 文本与右侧图标之间间距，不支持百分比。 | 234 235## LocalizedLabelMarginOptions<sup>12+</sup> 236 237LocalizedLabelMarginOptions定义本地化文本与左右侧图标之间间距。 238 239**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 240 241**系统能力：** SystemCapability.ArkUI.ArkUI.Full 242 243| 名称 | 类型 | 必填 | 说明 | 244| ----- | ------------------------------------------------------------ | ---- | -------------------------------------- | 245| start | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 文本与左侧图标之间间距，不支持百分比。 | 246| end | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 文本与右侧图标之间间距，不支持百分比。 | 247 248## 示例 249 250### 示例1（自定义后缀图标） 251 252该示例通过配置suffixIcon实现自定义操作块的后缀图标。 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: "操作块", 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### 示例2（设置默认后缀图标） 295 296该示例通过配置allowClose为true显示后缀删除图标。 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: "操作块", 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### 示例3（不显示后缀图标） 334 335该示例通过配置allowClose为false不显示后缀删除图标。 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: "操作块", 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### 示例4（激活态操作块） 376 377该示例通过配置activated实现激活态操作块。 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: "操作块", 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('改变激活状态').onClick(()=>{ 420 this.isActivated = !this.isActivated 421 }) 422 } 423 } 424} 425``` 426 427 428 429 430### 示例5（设置symbol类型图标） 431 432Chip组件的前缀、后缀图标使用symbol类型资源展示。 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: "操作块", 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('改变激活状态').onClick(()=>{ 479 this.isActivated = !this.isActivated 480 }) 481 } 482 } 483} 484``` 485 486 487 488### 示例6（设置镜像效果） 489 490该示例通过配置direction实现Chip布局镜像化展示。 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: "操作块", 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### 示例7（Image类型无障碍朗读） 538 539该示例代码实现了Chip组件Image类型后缀图标的无障碍朗读功能。 540 541```ts 542// xxx.ets 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: '后缀图标播报' }) { 602 SectionItem({ title: '自定义播报' }) { 603 Chip({ 604 label: { text: '操作块' }, 605 suffixIcon: { 606 src: $r('sys.media.ohos_ic_public_cut'), 607 accessibilityText: '图标', 608 accessibilityDescription: '新手提醒', 609 action: () => { 610 this.getUIContext().getPromptAction().showToast({ 611 message: '后缀图标被点击！' 612 }); 613 } 614 }, 615 onClicked: () => { 616 this.getUIContext().getPromptAction().showToast({ 617 message: '操作块被点击！' 618 }); 619 } 620 }) 621 } 622 } 623 } 624 } 625 } 626} 627``` 628 629### 示例8（symbol类型无障碍朗读） 630 631该示例代码实现了Chip组件symbol类型后缀图标的无障碍朗读功能。 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: '后缀Symbol播报' }) { 694 SectionItem({ title: 'activatedAccessibility' }) { 695 Chip({ 696 label: { text: '操作块' }, 697 activated: true, 698 suffixSymbol: { 699 activated: new SymbolGlyphModifier($r('sys.symbol.media_sound')) 700 .fontSize(72), 701 }, 702 suffixSymbolOptions: { 703 activatedAccessibility: { 704 accessibilityText: '音乐', 705 accessibilityDescription: '新手提醒' 706 }, 707 action: () => { 708 this.getUIContext().getPromptAction().showToast({ 709 message: '后缀Symbol被点击！' 710 }); 711 } 712 }, 713 onClicked: () => { 714 this.getUIContext().getPromptAction().showToast({ 715 message: '操作块被点击！' 716 }); 717 } 718 }) 719 } 720 SectionItem({ title: 'normalAccessibility' }) { 721 Chip({ 722 label: { text: '操作块' }, 723 suffixSymbol: { 724 normal: new SymbolGlyphModifier($r('sys.symbol.media_sound')) 725 .fontSize(72), 726 }, 727 suffixSymbolOptions: { 728 normalAccessibility: { 729 accessibilityText: '音乐', 730 accessibilityDescription: '新手提醒' 731 }, 732 action: () => { 733 this.getUIContext().getPromptAction().showToast({ 734 message: '后缀Symbol被点击！' 735 }); 736 } 737 }, 738 onClicked: () => { 739 this.getUIContext().getPromptAction().showToast({ 740 message: '操作块被点击！' 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```
