1# Click Effect 2 3You can set the click effect for a component to define how it behaves when clicked. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. 8 9## clickEffect 10 11clickEffect(value: ClickEffect | null) 12 13Click effect of the component. 14 15**Atomic service API**: This API can be used in atomic services since API version 11. 16 17**System capability**: SystemCapability.ArkUI.ArkUI.Full 18 19**Parameters** 20 21| Name| Type | Mandatory| Description | 22| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ | 23| value | [ClickEffect](#clickeffect) \| null | Yes | Click effect of the component.<br>**NOTE**<br>You can remove the click effect by setting this attribute to **undefined** or **null**.<br>Avoid using this attribute in scenarios where the component size dynamically changes.<br>This attribute is not supported when the component cannot trigger a universal event.| 24 25## clickEffect<sup>18+</sup> 26 27clickEffect(effect: Optional\<ClickEffect | null>) 28 29Click effect of the component. Compared to [clickEffect](#clickeffect), this API supports the **undefined** type for the **effect** parameter. 30 31**Atomic service API**: This API can be used in atomic services since API version 18. 32 33**System capability**: SystemCapability.ArkUI.ArkUI.Full 34 35**Parameters** 36 37| Name| Type | Mandatory| Description | 38| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 39| effect | Optional\<[ClickEffect](#clickeffect) \| null> | Yes | Click effect of the component.<br>**NOTE**<br>You can remove the click effect by setting this attribute to **undefined** or **null**.<br>Avoid using this attribute in scenarios where the component size dynamically changes.<br>This attribute is not supported when the component cannot trigger a universal event.| 40 41## ClickEffect 42 43**Atomic service API**: This API can be used in atomic services since API version 11. 44 45| Name | Type | Mandatory| Description | 46| ----- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 47| level | [ClickEffectLevel](ts-appendix-enums.md#clickeffectlevel10) | Yes | Click effect of the component.<br>**NOTE**<br>If **level** is set to **undefined** or **null**, the click effect corresponding to **ClickEffectLevel.LIGHT** will be used. For details about the zoom ratio, see the description of **scale**.| 48| scale | number | No | Zoom ratio. This parameter works based on the setting of **ClickEffectLevel**.<br>**NOTE**<br>The default value of this parameter varies by the value of **level**.<br>If **level** is set to **ClickEffectLevel.LIGHT**, the default value is **0.90**.<br>If **level** is set to **ClickEffectLevel.MIDDLE** or **ClickEffectLevel.HEAVY**, the default value is **0.95**.<br>If **level** is set to **undefined** or **null** (both of which evaluate to **ClickEffectLevel.LIGHT**), the default value is **0.90**.<br>If **scale** is set to **undefined** or **null**, the default zoom ratio for the set level will be used.<br>| 49 50## Example 51 52This example demonstrates the click effects on different types of components. 53 54```ts 55// xxx.ets 56@Entry 57@Component 58struct ToggleExample { 59 build() { 60 Column({ space: 10 }) { 61 Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%') 62 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 63 Toggle({ type: ToggleType.Switch, isOn: false }) 64 .clickEffect({level:ClickEffectLevel.LIGHT}) 65 .selectedColor('#007DFF') 66 .switchPointColor('#FFFFFF') 67 .onChange((isOn: boolean) => { 68 console.info('Component status:' + isOn) 69 }) 70 71 Toggle({ type: ToggleType.Switch, isOn: true }) 72 .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5}) 73 .selectedColor('#007DFF') 74 .switchPointColor('#FFFFFF') 75 .onChange((isOn: boolean) => { 76 console.info('Component status:' + isOn) 77 }) 78 } 79 80 Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%') 81 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 82 Toggle({ type: ToggleType.Checkbox, isOn: false }) 83 .clickEffect({level:ClickEffectLevel.MIDDLE}) 84 .size({ width: 20, height: 20 }) 85 .selectedColor('#007DFF') 86 .onChange((isOn: boolean) => { 87 console.info('Component status:' + isOn) 88 }) 89 90 Toggle({ type: ToggleType.Checkbox, isOn: true }) 91 .clickEffect({level:ClickEffectLevel.MIDDLE, scale: 0.5}) 92 .size({ width: 20, height: 20 }) 93 .selectedColor('#007DFF') 94 .onChange((isOn: boolean) => { 95 console.info('Component status:' + isOn) 96 }) 97 } 98 99 Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%') 100 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 101 Toggle({ type: ToggleType.Button, isOn: false }) { 102 Text('status button').fontColor('#182431').fontSize(12) 103 }.width(106) 104 .clickEffect({level:ClickEffectLevel.HEAVY}) 105 .selectedColor('rgba(0,125,255,0.20)') 106 .onChange((isOn: boolean) => { 107 console.info('Component status:' + isOn) 108 }) 109 110 Toggle({ type: ToggleType.Button, isOn: true }) { 111 Text('status button').fontColor('#182431').fontSize(12) 112 }.width(106) 113 .clickEffect({level:ClickEffectLevel.HEAVY, scale: 0.5}) 114 .selectedColor('rgba(0,125,255,0.20)') 115 .onChange((isOn: boolean) => { 116 console.info('Component status:' + isOn) 117 }) 118 } 119 }.width('100%').padding(24) 120 } 121} 122``` 123 124 125
