1# Click Feedback Effect 2 3You can set the click feedback effect for a component to define its visual response when it is 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): T 12 13Sets the click feedback 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 feedback effect of the component.<br>**NOTE**<br>Use **null** to disable the click feedback effect.<br>Avoid using this feature in scenarios where the component size dynamically changes.<br>This attribute is not supported when the component cannot trigger universal events.<br>After the click feedback effect triggers scaling, the touch point may fall outside the control, making the component unresponsive to gesture events.| 24 25**Return value** 26 27| Type | Description | 28| ------ | ------------------------ | 29| T | Current component.| 30 31## clickEffect<sup>18+</sup> 32 33clickEffect(effect: Optional\<ClickEffect | null>): T 34 35Sets the click feedback effect of the component. Compared with [clickEffect](#clickeffect), this API supports the **undefined** type for the **effect** parameter. 36 37**Atomic service API**: This API can be used in atomic services since API version 18. 38 39**System capability**: SystemCapability.ArkUI.ArkUI.Full 40 41**Parameters** 42 43| Name| Type | Mandatory| Description | 44| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 45| effect | Optional\<[ClickEffect](#clickeffect) \| null> | Yes | Click feedback effect of the component.<br>**NOTE**<br>Use **undefined** or **null** to disable the click feedback effect.<br>Avoid using this feature in scenarios where the component size dynamically changes.<br>This attribute is not supported when the component cannot trigger universal events.<br>After the click feedback effect triggers scaling, the touch point may fall outside the control, making the component unresponsive to gesture events.| 46 47**Return value** 48 49| Type | Description | 50| ------ | ------------------------ | 51| T | Current component.| 52 53## ClickEffect 54 55**Atomic service API**: This API can be used in atomic services since API version 11. 56 57| Name | Type | Mandatory| Description | 58| ----- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 59| level | [ClickEffectLevel](ts-appendix-enums.md#clickeffectlevel10) | Yes | Click feedback effect of the component.<br>**NOTE**<br>When **level** is **undefined** or **null**, **ClickEffect** uses the effect corresponding to **ClickEffectLevel.LIGHT** with a scaling ratio as described below.| 60| scale | number | No | Custom scaling ratio for fine-tuning the click feedback effect.<br>**NOTE**<br>The default value varies depending on the value of **level**:<br>**ClickEffectLevel.LIGHT**: **0.90**.<br>**ClickEffectLevel.MIDDLE** or **ClickEffectLevel.HEAVY**: **0.95**.<br>**undefined** or **null** (treated as **ClickEffectLevel.LIGHT**): **0.90**.<br>When **scale** is set to **undefined** or **null**, the default scaling ratio for the current **level** is used.| 61 62## Example 63 64This example demonstrates the click feedback effects on different types of components. 65 66```ts 67// xxx.ets 68@Entry 69@Component 70struct ToggleExample { 71 build() { 72 Column({ space: 10 }) { 73 Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%') 74 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 75 Toggle({ type: ToggleType.Switch, isOn: false }) 76 .clickEffect({level:ClickEffectLevel.LIGHT}) 77 .selectedColor('#007DFF') 78 .switchPointColor('#FFFFFF') 79 .onChange((isOn: boolean) => { 80 console.info('Component status:' + isOn); 81 }) 82 83 Toggle({ type: ToggleType.Switch, isOn: true }) 84 .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5}) 85 .selectedColor('#007DFF') 86 .switchPointColor('#FFFFFF') 87 .onChange((isOn: boolean) => { 88 console.info('Component status:' + isOn); 89 }) 90 } 91 92 Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%') 93 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 94 Toggle({ type: ToggleType.Checkbox, isOn: false }) 95 .clickEffect({level:ClickEffectLevel.MIDDLE}) 96 .size({ width: 20, height: 20 }) 97 .selectedColor('#007DFF') 98 .onChange((isOn: boolean) => { 99 console.info('Component status:' + isOn); 100 }) 101 102 Toggle({ type: ToggleType.Checkbox, isOn: true }) 103 .clickEffect({level:ClickEffectLevel.MIDDLE, scale: 0.5}) 104 .size({ width: 20, height: 20 }) 105 .selectedColor('#007DFF') 106 .onChange((isOn: boolean) => { 107 console.info('Component status:' + isOn); 108 }) 109 } 110 111 Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%') 112 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 113 Toggle({ type: ToggleType.Button, isOn: false }) { 114 Text('status button').fontColor('#182431').fontSize(12) 115 }.width(106) 116 .clickEffect({level:ClickEffectLevel.HEAVY}) 117 .selectedColor('rgba(0,125,255,0.20)') 118 .onChange((isOn: boolean) => { 119 console.info('Component status:' + isOn); 120 }) 121 122 Toggle({ type: ToggleType.Button, isOn: true }) { 123 Text('status button').fontColor('#182431').fontSize(12) 124 }.width(106) 125 .clickEffect({level:ClickEffectLevel.HEAVY, scale: 0.5}) 126 .selectedColor('rgba(0,125,255,0.20)') 127 .onChange((isOn: boolean) => { 128 console.info('Component status:' + isOn); 129 }) 130 } 131 }.width('100%').padding(24) 132 } 133} 134``` 135 136 137
