Editor Doc
Return to top
UI widget- Checkbox
Edit

UI widget- Checkbox ​

It takes about 5 minutes to read this article

This article outlines the various property and instructions of the UI widget- Checkbox .

What is the Checkbox? ​

The Checkbox is a button that can switch states. You can click it to switch between selected and unchecked states. - For transformation/ align/general/rendering property , please refer to the basic property of UI widget

Checkbox property- style ​

Check status ​

  • Able to switch the display status of the Checkbox, which has three states: unchecked, checked, and unconfirmed;
  • Player can achieve states by click on the Checkbox :
    • Unchecked click to switch to checked
    • Checked click to switch to unchecked
    • Undetermined click to switch to unchecked

Checkbox style ​

  • You can configuration the style of the three states of unchecked, checked, and unconfirmed, namely the normal state, floating state, and pressed state, for a total of nine types.

How to use the Checkbox? ​

Example 1: Use a Checkbox to control whether to enable camera collision ​

  • Next, we achieve a case where a Checkbox is used to control whether camera collision is enabled. create a Checkbox widget and write a script.
ts
@UIBind('')
export default class DefaultUI extends UIScript {
    
    /** Only call once during experience time for non- TEMPLATE instances */
    protected  onStart() {
        // Find the Checkbox
        const checkBox = this.uiWidgetBase.findChildByPath('RootCanvas/Checkbox') as Checkbox
        // Trigger callback when the check status change
        checkBox.onCheckStateChanged.add((state: CheckBoxState)=>{      
            if (state==CheckBoxState.Checked) {
            //Switch the checkbox to checked, turn on camera collision
            console.log("Checked");
            Camera.currentCamera.springArm.collisionEnabled=true
            } else if (state==CheckBoxState.Unchecked) {
            //Switch the checkbox to unchecked to turn off camera collision
            console.log("Unchecked");
            Camera.currentCamera.springArm.collisionEnabled=false
            }
        })  
    }
}
@UIBind('')
export default class DefaultUI extends UIScript {
    
    /** Only call once during experience time for non- TEMPLATE instances */
    protected  onStart() {
        // Find the Checkbox
        const checkBox = this.uiWidgetBase.findChildByPath('RootCanvas/Checkbox') as Checkbox
        // Trigger callback when the check status change
        checkBox.onCheckStateChanged.add((state: CheckBoxState)=>{      
            if (state==CheckBoxState.Checked) {
            //Switch the checkbox to checked, turn on camera collision
            console.log("Checked");
            Camera.currentCamera.springArm.collisionEnabled=true
            } else if (state==CheckBoxState.Unchecked) {
            //Switch the checkbox to unchecked to turn off camera collision
            console.log("Unchecked");
            Camera.currentCamera.springArm.collisionEnabled=false
            }
        })  
    }
}
  • The following effects can be achieve: