Toggle Component Reference

Click the Add Component button at the bottom of the Inspector panel and select UI/Toggle to add the Toggle component to the node.

To use , please refer to the Toggle API documentation and the scene of the test-cases-3d project.

For event structure you can refer to the Button documentation.

The Toggle event callback has two parameters, the first one is the Toggle itself and the second is the customEventData.

The generic node hierarchy of Toggle is as below:

Note: the checkMark node needs to be placed on the upper level of the background node in the Scene.

The event callback added by this method is the same as the event callback added by the editor, all added by code. First you need to construct a EventHandler object, and then set the corresponding target, component, handler and customEventData parameters.

Method two

Added by the way of toggle.node.on('toggle', ...).

import { _decorator, Component, ToggleComponent } from 'cc';
const { ccclass, property } = _decorator;
@ccclass("example")
export class example extends Component {
    @property(ToggleComponent)
       this.toggle.node.on('toggle', this.callback, this);
    }
    callback(toggle: ToggleComponnet){
        // The callback parameter is the Toggle component, note that events registered this way cannot pass customEventData.
    }