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 10## Attributes 11 12| Name | Type | Description | 13| ----------- | ------------------------------------------- | ------------------------------------------------------------ | 14| clickEffect | [ClickEffect](#clickeffect) \| null | 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.| 15 16## ClickEffect 17 18| Name | Type | Mandatory| Description | 19| ----- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 20| 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**.| 21| 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. | 22 23## Example 24 25```ts 26// xxx.ets 27@Entry 28@Component 29struct ToggleExample { 30 build() { 31 Column({ space: 10 }) { 32 Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%') 33 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 34 Toggle({ type: ToggleType.Switch, isOn: false }) 35 .clickEffect({level:ClickEffectLevel.LIGHT}) 36 .selectedColor('#007DFF') 37 .switchPointColor('#FFFFFF') 38 .onChange((isOn: boolean) => { 39 console.info('Component status:' + isOn) 40 }) 41 42 Toggle({ type: ToggleType.Switch, isOn: true }) 43 .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5}) 44 .selectedColor('#007DFF') 45 .switchPointColor('#FFFFFF') 46 .onChange((isOn: boolean) => { 47 console.info('Component status:' + isOn) 48 }) 49 } 50 51 Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%') 52 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 53 Toggle({ type: ToggleType.Checkbox, isOn: false }) 54 .clickEffect({level:ClickEffectLevel.MIDDLE}) 55 .size({ width: 20, height: 20 }) 56 .selectedColor('#007DFF') 57 .onChange((isOn: boolean) => { 58 console.info('Component status:' + isOn) 59 }) 60 61 Toggle({ type: ToggleType.Checkbox, isOn: true }) 62 .clickEffect({level:ClickEffectLevel.MIDDLE, scale: 0.5}) 63 .size({ width: 20, height: 20 }) 64 .selectedColor('#007DFF') 65 .onChange((isOn: boolean) => { 66 console.info('Component status:' + isOn) 67 }) 68 } 69 70 Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%') 71 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 72 Toggle({ type: ToggleType.Button, isOn: false }) { 73 Text('status button').fontColor('#182431').fontSize(12) 74 }.width(106) 75 .clickEffect({level:ClickEffectLevel.HEAVY}) 76 .selectedColor('rgba(0,125,255,0.20)') 77 .onChange((isOn: boolean) => { 78 console.info('Component status:' + isOn) 79 }) 80 81 Toggle({ type: ToggleType.Button, isOn: true }) { 82 Text('status button').fontColor('#182431').fontSize(12) 83 }.width(106) 84 .clickEffect({level:ClickEffectLevel.HEAVY, scale: 0.5}) 85 .selectedColor('rgba(0,125,255,0.20)') 86 .onChange((isOn: boolean) => { 87 console.info('Component status:' + isOn) 88 }) 89 } 90 }.width('100%').padding(24) 91 } 92} 93``` 94 95 96
