Back

addCheckbox

JS Py
Hello World
Content:
- Examples
- Properties
- Methods

A checkbox in UI development is a graphical control element that allows users to toggle between two states, typically checked or unchecked, to indicate a choice or selection.

ckb = ui.addCheckbox( parent, text, options?, width?, height? ) → ui object: Checkbox

Here are the methods available for Checkbox Component

Examples

Example - Basic

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter", 1, 1)

        // Add a checkbox control to the main layout
        this.ckb = ui.addCheckbox(this.main, "This is checkbox label")

        // Add a callback handler for `onTouch` event
        this.ckb.setOnTouch( this.onTouch )
    }

    onTouch( value )
    {
        ui.showPopup( `Value is ${ value }` )
    }
}
from hybrid import ui

def OnStart():
    # Creates a fullscreen layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "VCenter", 1, 1)

    # Add a checkbox control to the main layout
    ckb = ui.addCheckbox(main, "This is checkbox label")

    # Add a callback handler for `onTouch` event
    ckb.setOnTouch(onTouch)

def onTouch(value):
    ui.showPopup(f"Value is {value}")
Copy All       Run      

Example - Colors

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter", 1, 1)
        this.main.setChildMargins(0, 0.05, 0, 0.05)

        // Add a default checkbox control to the main layout
        this.ckb1 = ui.addCheckbox(this.main, "This is checkbox label")
        this.ckb1.setOnTouch( this.onTouch )

        // Add a primary checkbox control to the main layout
        this.ckb2 = ui.addCheckbox(this.main, "This is checkbox label", "Primary")
        this.ckb2.setOnTouch( this.onTouch )

        // Add a secondary checkbox control to the main layout
        // and set its value to `true`
        this.ckb3 = ui.addCheckbox(this.main, "This is checkbox label", "Secondary")
        this.ckb3.value = true
        this.ckb3.setOnTouch( this.onTouch )
    }

    onTouch( value )
    {
        ui.showPopup( `Value is ${ value }` )
    }
}
from hybrid import ui

def OnStart():
    global value
    # Creates a fullscreen layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "VCenter", 1, 1)
    main.setChildMargins(0, 0.05, 0, 0.05)

    # Add a default checkbox control to the main layout
    ckb1 = ui.addCheckbox(main, "This is checkbox label")
    ckb1.setOnTouch(onTouch)

    # Add a primary checkbox control to the main layout
    ckb2 = ui.addCheckbox(main, "This is checkbox label", "Primary")
    ckb2.setOnTouch(onTouch)

    # Add a secondary checkbox control to the main layout
    # and set its value to `True`
    ckb3 = ui.addCheckbox(main, "This is checkbox label", "Secondary")
    ckb3.value = True
    ckb3.setOnTouch(onTouch)

def onTouch(value):
    ui.showPopup(f"Value is {value}")
Copy All       Run      

Example - Text positions

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter", 1, 1)
        this.main.setChildMargins(0, 0.05, 0, 0.05)

        // Add a checkbox with label on the right.
        this.ckb1 = ui.addCheckbox(this.main, "Checkbox on the left", "Left")
        this.ckb1.setOnTouch( this.onTouch )

        // Add a checkbox with label on the bottom.
        this.ckb2 = ui.addCheckbox(this.main, "Checkbox on the top", "Primary,Top")
        this.ckb2.setOnTouch( this.onTouch )

        // Add a checkbox with label on the left.
        this.ckb3 = ui.addCheckbox(this.main, "Checkbox on the right", "Secondary,Right")
        this.ckb3.setOnTouch( this.onTouch )

        // Add a checkbox with label on top.
        this.ckb4 = ui.addCheckbox(this.main, "Checkbox on the bottom", "Secondary,Bottom")
        this.ckb4.setOnTouch( this.onTouch )
    }

    onTouch( value )
    {
        ui.showPopup( `Value is ${ value }` )
    }
}
from hybrid import ui

def OnStart():
    # Creates a fullscreen layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "VCenter", 1, 1)
    main.setChildMargins(0, 0.05, 0, 0.05)

    # Add a checkbox with label on the right.
    ckb1 = ui.addCheckbox(main, "Checkbox on the left", "Left")
    ckb1.setOnTouch(onTouch)

    # Add a checkbox with label on the bottom.
    ckb2 = ui.addCheckbox(main, "Checkbox on the top", "Primary,Top")
    ckb2.setOnTouch(onTouch)

    # Add a checkbox with label on the left.
    ckb3 = ui.addCheckbox(main, "Checkbox on the right", "Secondary,Right")
    ckb3.setOnTouch(onTouch)

    # Add a checkbox with label on top.
    ckb4 = ui.addCheckbox(main, "Checkbox on the bottom", "Secondary,Bottom")
    ckb4.setOnTouch(onTouch)

def onTouch(value):
    ui.showPopup(f"Value is {value}")
Copy All       Run      

Example - Adding custom checkbox icon

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter", 1, 1)

        // Adds checkbox control to the main layout
        this.ckb = ui.addCheckbox(this.main, "This is checkbox label", "Left,Secondary")

        // Set the checked icon to `favorite`
        // and uncheck icon to `person`
        this.ckb.setIcon("favorite", "person")

        // Add a callback handler for `onTouch` event
        this.ckb.setOnTouch( this.onTouch )
    }

    onTouch( value )
    {
        ui.showPopup( `Value is ${ value }` )
    }
}
from hybrid import ui

def OnStart():
    # Creates a fullscreen layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "VCenter", 1, 1)

    # Adds checkbox control to the main layout
    ckb = ui.addCheckbox(main, "This is checkbox label", "Left,Secondary")

    # Set the checked icon to `favorite`
    # and uncheck icon to `person`
    ckb.setIcon("favorite", "person")

    # Add a callback handler for `onTouch` event
    ckb.setOnTouch(onTouch)

def onTouch(value):
    ui.showPopup(f"Value is {value}")
Copy All       Run      

Properties

The following properties are available on the Checkbox object:

absHeight → Number
absLeft → Number
absTop → Number
absWidth → Number
backColor → String
backImage → String
border → Number
borderColor → String
borderStyle → String
checkIcon → String
color → String
cornerRadius → Number
disable → Boolean
disabled → Boolean
el → Object
elStyle → String
enabled → Boolean
fontFile → String
height → Number
iconColor → String
iconSize → Number
isVisible → Boolean
left → Number
margins → List
opacity → Number
options → String
padding → List
parent → Object
position → Object
rotation → Number
spaceBetween → Number
text → String
textColor → String
textPosition → String
textSize → Number
top → Number
type → String
uncheckIcon → String
value → Boolean
visibility → String
width → Number

Methods

The following methods are available on the Checkbox object:

animate( anim, duration )
bringForward( zIndex )
destroy()
getIcon() → Object
getPosition( options ) → Object
gone()
hide()
sendBackward( zIndex )
setBorder( left?, top?, right?, bottom?, clr?, style? )
setCornerRadius( tl?, tr?, br?, bl?, mode? )
setIcon( checked, unchecked )
setMargins( left?, top?, right?, bottom?, mode? )
setOnContextMenu( callback )
setOnTouch( callback )
setPadding( left?, top?, right?, bottom?, mode? )
setPosition( left, top, mode )
setScale( x, y )
setSize( width, height, mode )
show()
Number: Fraction of the parent width `[0-1]`.
Number: Fraction of the parent height `[0-1]`.
Number: The time in milliseconds.
Number: The z-index. A negative value behaves like `sendBackward` method.
Number: The z-index. A positve value behaves like `bringForward` method.
Number: Border-left thickness in pixels.
Number: Border-top thickness in pixels.
Number: Border-right thickness in pixels.
Number: Border-bottom thickness in pixels.
Number: Top-Left border radius.
Number: Top-Right border radius.
Number: Bottom-Right border radius.
Number: Bottom-Left border radius.
Number: Left margin. You can also pass string e.g. `12rem`
Number: Top margin. You can also pass string e.g. `12rem`
Number: Right margin. You can also pass string e.g. `12rem`
Number: Bottom margin. You can also pass string e.g. `12rem`
Number: Fraction of the component width.
Number: Fraction of the component height. [0-1]
Number: Fraction of the component width. [0-1]
Number: Fraction of the parent width. [0-1]
Number: Fraction of the parent height. [0-1]
Number: The x-scale of the component.Values less than `0` is smaller than the normal. While values greater than `1` is greater than the normal.
Number: The y-scale of the component. Values less than `1` is smaller than the normal. While vaues greater than `1` is greater than the normal.
String: “The label for the checkbox”
String: “A comma separated options.
Theme Colors: `Primary`”, “ `Secondary`
Sizes: `Medium`”, “ `Small`
Icon position: `Left`”, “ `Top`”, “ `Right`”, “ `Bottom`
Variant: `Indeterminate`”, “ `Determinate`”
String: “The type of animation. Here are the available values
`bounce`”, “ `flash`”, “ `pulse`”, “ `rubberBand`”, “ `shakeX`”, “ `shakeY`”, “ `headShake`”, “ `swing`”, “ `tada`”, “ `wobble`”, “ `jello`”, “ `heartBeat`”, “
Back Entrances: `backInDown`”, “ `backInLeft`”, “ `backInRight`”, “ `backInUp`
Back Exits: `backOutDown`”, “ `backOutLeft`”, “ `backOutRight`”, “ `backOutUp`
Bouncing Entrances: `bounceIn`”, “ `bounceInDown`”, “ `bounceInLeft`”, “ `bounceInRight`”, “ `bounceInUp`
Bouncing exits: `bounceOut`”, “ `bounceOutDown`”, “ `bounceOutLeft`”, “ `bounceOutRight`”, “ `bounceOutUp`
Fading entrances: `fadeIn`”, “ `fadeInDown`”, “ `fadeInDownBig`”, “ `fadeInLeft`”, “ `fadeInLeftBig`”, “ `fadeInRight`”, “ `fadeInRightBig`”, “ `fadeInUp`”, “ `fadeInUpBig`”, “ `fadeInTopLeft`”, “ `fadeInTopRight`”, “ `fadeInBottomLeft`”, “ `fadeInBottomRight`
Fading exits: `fadeOut`”, “ `fadeOutDown`”, “ `fadeOutDownBig`”, “ `fadeOutLeft`”, “ `fadeOutLeftBig`”, “ `fadeOutRight`”, “ `fadeOutRightBig`”, “ `fadeOutUp`”, “ `fadeOutUpBig`”, “ `fadeOutTopLeft`”, “ `fadeOutTopRight`”, “ `fadeOutBottomRight`”, “ `fadeOutBottomLeft`
Flippers: `flip`”, “ `flipInX`”, “ `flipInY`”, “ `flipOutX`”, “ `flipOutY`
Lightspeed: `lightSpeedInRight`”, “ `lightSpeedInLeft`”, “ `lightSpeedOutRight`”, “ `lightSpeedOutLeft`
Rotating Entrances: `rotateIn`”, “ `rotateInDownLeft`”, “ `rotateInDownRight`”, “ `rotateInUpLeft`”, “ `rotateInUpRight`
Rotating Exits: `rotateOut`”, “ `rotateOutDownLeft`”, “ `rotateOutDownRight`”, “ `rotateOutUpLeft`”, “ `rotateOutUpRight`
Specials: `hinge`”, “ `jackInTheBox`”, “ `rollIn`”, “ `rollOut`
Zooming Entrances: `zoomIn`”, “ `zoomInDown`”, “ `zoomInLeft`”, “ `zoomInRight`”, “ `zoomInUp`
Zooming Exits: `zoomOut`”, “ `zoomOutDown`”, “ `zoomOutLeft`”, “ `zoomOutRight`”, “ `zoomOutUp`
Sliding Entrances: `slideInDown`”, “ `slideInLeft`”, “ `slideInRight`”, “ `slideInUp`
Sliding Exits: `slideOutDown`”, “ `slideOutLeft`”, “ `slideOutRight`”, “ `slideOutUp`”
String: “The mode of the measurements. Values can be `px` or `%`”
String: “Border color in hexadecimal format `#rrggbb`.”
String: “Border-styles. Values can be `dotted`”, “ `dashed`”, “ `solid`”, “ `double`”, “ `groove`”, “ `ridge`”, “ `inset` and `outset`. Default is `solid`”
String: “Unit of measurement. Values are `px` `rem` or `%`.”
String: “Material icon for checked state”
String: “Material icon for unchecked state”
String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimension.
`v` relative to viewport dimension.”
String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimensions
`v` relative to viewport dimensions.”
String: “Unit of measurment. Can be "px"”, “ "rem"”, “ "%"”, “ "v" for viewport width/height or any css supported unit.”
Object: The layout where to add the checkbox
Object: The pointer event object.
Object: The position of the touch event.
function( event )
function( check , pos )
ckb.absHeight
Returns the absolute height of the control in pixels.
ckb.absLeft
Returns the absolute distance of the control from the left in pixels.
ckb.absTop
Returns the absolute distance of the control from the top in pixels.
ckb.absWidth
Returns the absolute width of the control in pixels.
ckb.animate
Animate the component.
ckb.backColor
A hexadecimal color of the form #rrggbb
ckb.backImage
The path to your image file.
ckb.border
Sets or returns the border thickness in pixels.
ckb.borderColor
Sets or returns the border color. Color is in hexadecimal form #rrggbb
ckb.borderStyle
Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.
ckb.bringForward
Bring this component forward by a given z-index.
ckb.checkIcon
Sets or returns the material icon font for check stated.
ckb.color
Sets or returns the theme color of the checkbox when checked. Values can be Default Primary or Secondary
ckb.cornerRadius
Sets or returns the corner radius in pixels.
ckb.destroy
Destroy the component.
ckb.disable
Enabled or disable the checkbox component.
ckb.disabled
Sets or returns the disabled state of the control.
ckb.el
Returns the html container element for the control.
ckb.elStyle
Sets the style of the html container element.
ckb.enabled
Returns whether the Checkbox is enabled or disabled.
ckb.fontFile
Sets or returns the relative path to the font-family use.
ckb.getIcon
Returns the icons of the form { checkIcon, uncheckedIcon }.
ckb.getPosition
Returns the position of the component. The return object is of the form {left, top, right, bottom}
ckb.gone
Destroy the component.
ckb.height
Sets or returns the height of the control as a fraction of the parent control.
ckb.hide
Hide the component.
ckb.iconColor
Sets or returns the color of the checkbox icon.
ckb.iconSize
Sets or returns the size of the icon.
ckb.isVisible
Returns whether the control is visible or not.
ckb.left
Returns the distance of the control from the left.
ckb.margins
Sets or returns the margin of the control. Works on controls with Linear parent only. You can also pass a number to set equal margins for all sides.
ckb.opacity
Sets or returns the opacity of the control.
ckb.options
Sets or returns the options of the control.
ckb.padding
Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.
ckb.parent
Returns the parent layout control.
ckb.position
Returns the position of the control. The returned object has left top right and bottom props.
ckb.rotation
Sets or returns the angle of rotation in degrees.
ckb.sendBackward
Bring this component backward by a given z-index.
ckb.setBorder
Sets the border line for the component container.
ckb.setCornerRadius
Sets the corner radius of the component.
ckb.setIcon
Sets a custom icon for the checkbox.
ckb.setMargins
Sets the margin of the component.
ckb.setOnContextMenu
Adds a callback function on right click.
ckb.setOnTouch
Adds an event handler when the checkbox is touch.
ckb.setPadding
Sets the padding of the component's container.
ckb.setPosition
Sets the position of the component relative to its parent dimensions.
ckb.setScale
Sets the x and y scaling of the component. This will ignore the positioning and flow of controls in the layout.
ckb.setSize
Sets the size of the component.
ckb.show
Show the component.
ckb.spaceBetween
Sets or returns the space between the checkbox icon and the label text.
ckb.text
Sets or returns the checkbox text.
ckb.textColor
Sets or returns the color of the text.
ckb.textPosition
Sets or returns the text position. Values can be left top right bottom
ckb.textSize
Sets or returns the size of the text within the control.
ckb.top
Returns the distance of the control from the top.
ckb.type
Returns the type of the control.
ckb.uncheckIcon
Sets or returns the material icon font for uncheck state.
ckb.value
Sets or returns the checked state of the checkbox.
ckb.visibility
Sets or returns the visibility of the control.
ckb.width
Sets or returns the width of the control as a fraction of the parent control.