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

        var items = ["This is item 1", "This is item 2", "This is item 3"]

        // Add a switchgroup control to the main layout.
        this.swg = ui.addSwitchGroup(this.main, items, "Secondary", 0.9)

        // Add a callback handler when the switchgroup item is touch
        this.swg.setOnTouch( this.onTouch )
    }

    onTouch(item, value)
    {
        ui.showPopup(item + " : " + value)
    }
}

from hybrid import ui

def OnStart():
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    items = ["This is item 1", "This is item 2", "This is item 3"]

    swg = ui.addSwitchGroup(main, items, "Secondary", 0.9)
    swg.setOnTouch(onTouch)

def onTouch(item, value, index, event):
    ui.showPopup(item + " : " + value)

Copy All Run

Example - SwitchGroup with leading icons

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

        // Initialize switchgroup items with leading icon
        var items = [
            ["music_note", "Enable Sound"],
            ["bluetooth", "Enable Bluetooth"],
            ["wifi", "Enable Wifi"]
        ]

        // Add a switchgroup control to the main layout.
        this.swg = ui.addSwitchGroup(this.main, items, "Secondary,Icon", 0.9)

        // Set the label text of the switchgroup control
        this.swg.label = "Settings"

        // Add a callback handler when the switchgroup item is touch
        this.swg.setOnTouch( this.onTouch )
    }

    onTouch(item, value)
    {
        ui.showPopup(item + " : " + value)
    }
}

from hybrid import ui

def OnStart():
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    items = [
        ["music_note", "Enable Sound"],
        ["bluetooth", "Enable Bluetooth"],
        ["wifi", "Enable Wifi"]
    ]

    swg = ui.addSwitchGroup(main, items, "Secondary,Icon", 0.9)
    swg.label = "Settings"
    swg.setOnTouch(onTouch)

def onTouch(item, value, index, event):
    ui.showPopup(item + " : " + value)

Copy All Run

Example - With custom styles

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

        // Initialize switchgroup items with leading icon
        var items = [
            ["music_note", "Enable Sound"],
            ["bluetooth", "Enable Bluetooth"],
            ["wifi", "Enable Wifi"]
        ]

        // Adds a switchgroup control to the main layout
        this.swg = ui.addSwitchGroup(this.main, items, "Secondary,Icon", 0.9)
        this.swg.setOnTouch( this.onTouch )

        // Set the text color to deep-purple
        this.swg.textColor = "#673ab7"

        // Set the icon color to teal
        this.swg.iconColor = "#009688"

        // Set the corner radius
        this.swg.cornerRadius = 4

        // Set the background color using rgba
        this.swg.backColor = "rgba(255, 255, 100, 255)"
    }

    onTouch( item, value )
    {
        ui.showPopup( item + " : " + value )
    }
}

from hybrid import ui

def OnStart():
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    items = [
        ["music_note", "Enable Sound"],
        ["bluetooth", "Enable Bluetooth"],
        ["wifi", "Enable Wifi"]
    ]

    swg = ui.addSwitchGroup(main, items, "Secondary,Icon", 0.9)
    swg.setOnTouch(onTouch)

    swg.textColor = "#673ab7"
    swg.iconColor = "#009688"
    swg.cornerRadius = 4
    swg.backColor = "rgba(255, 255, 100, 255)"

def onTouch(item, value, index, event):
    ui.showPopup(item + " : " + value)

Copy All Run

Example - Elevated switchgroup with onChange callback

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

        // Initialize switchgroup items to be displayed
        var items = ["This is item 1", "This is item 2", "This is item 3"]

        // Adds a switchgroup control to the main layout
        this.swg = ui.addSwitchGroup( this.main, items, "Secondary,Elevated", 0.9 )
        this.swg.label = "My label"
        this.swg.elevation = 4

        // Add a callback handler when the value of switchgroup changes
        this.swg.setOnChange( this.onChange )
    }

    onChange(items, indexes)
    {
        ui.showPopup( items.join(", ") )
    }
}

from hybrid import ui

def OnStart():
    global items
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    items = ["This is item 1", "This is item 2", "This is item 3"]

    swg = ui.addSwitchGroup(main, items, "Secondary,Elevated", 0.9)
    swg.label = "My label"
    swg.elevation = 4

    swg.setOnChange(onChange)

def onChange(items):
    ui.showPopup(", ".join(items))

Copy All Run

Example - Outlined switchgroup

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

        // Initialize switchgroup items to be displayed
        var items = ["This is item 1", "This is item 2", "This is item 3"]

        // Adds a switchgroup control to the main layout
        this.swg = ui.addSwitchGroup( this.main, items, "Primary,Outlined", 0.9)
        this.swg.label = "My label"
        this.swg.cornerRadius = 8

        // Add a callback handler when the value of switchgroup changes
        this.swg.setOnChange( this.onChange )
    }

    onChange(items, indexes)
    {
        ui.showPopup( items.join(", ") )
    }
}

from hybrid import ui

def OnStart():
    global items
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    items = ["This is item 1", "This is item 2", "This is item 3"]

    swg = ui.addSwitchGroup(main, items, "Primary,Outlined", 0.9)
    swg.label = "My label"
    swg.cornerRadius = 8

    swg.setOnChange(onChange)

def onChange(items):
    ui.showPopup(", ".join(items))

Copy All Run

Methods

The following methods are available on the SwitchGroup object:

addItem( title, icon, value, index )

animate( anim, duration )

bringForward( zIndex )

destroy()

getEnabled( index ) → Boolean

getPosition( options ) → Object

getValueByIndex( index ) → Boolean

gone()

hide()

popItem()

removeItemByIndex( index )

removeItemByName( title )

sendBackward( zIndex )

setBorder( width, clr, style )

setCornerRadius( tl, tr, bl, br, mode )

setEnabled( index, value )

setList( lst )

setMargins( left, top, right, bottom, mode )

setOnChange( callback )

setOnContextMenu( callback )

setOnTouch( callback )

setPadding( left, top, right, bottom, mode )

setPosition( left, top, mode )

setScale( x, y )

setSize( width, height )

setValueByIndex( index, val )

shiftItem()

show()

Boolean: The value of the item.

Boolean: Values can be `true` or `false`.

Boolean: A Values can be `true` or `false`

Boolean: Sets or returns the disabled state of the control.

Boolean: Returns whether the control is visible or not.

Boolean: Sets or returns whether the container is outlined or elevated.

Number: Fraction of the screen width. [0-1]

Number: Fraction of the screen height. [0-1]

Number: The index in which to insert the item. Default is at the bottom of the list.

Number: The time in milliseconds.

Number: The z-index. A negative value behaves like `sendBackward` method.

Number: The index of the corresponding item in the switch group.

Number: The index of the corresponding item.

Number: The index of the corresponding item to remove.

Number: The z-index. A positve value behaves like `bringForward` method.

Number: Border-left thickness in pixels.

Number: Top-left corner radius.

Number: Top-right corner radius.

Number: Bottom-left corner radius.

Number: Bottom-right corner radius.

Number: The index of the corresponding item in the list. You can also pass `Boolean` to enable or disable the switchgroup component.

Number: Fraction of the parent width.

Number: Fraction of the parent height.

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: 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.

Number: Fraction of the parent height. [0-1]

Number: Returns the absolute height of the control in pixels.

Number: Returns the absolute distance of the control from the left in pixels.

Number: Returns the absolute distance of the control from the top in pixels.

Number: Returns the absolute width of the control in pixels.

Number: Sets or returns the border thickness in pixels.

Number: Sets or returns the corner radius in pixels.

Number: Sets or returns the depth of the control container. Value ranges from 0 to 24.

Number: Sets or returns the height of the control as a fraction of the parent control.

Number: Sets or returns the size of the icon.

Number: Sets or returns the size of the label text.

Number: Returns the distance of the control from the left.

Number: Sets or returns the opacity of the control.

Number: Sets or returns the angle of rotation in degrees.

Number: Sets or returns the size of the text within the control.

Number: Returns the distance of the control from the top.

Number: Sets or returns the width of the control as a fraction of the parent control.

String: comma “,” separated: “Icon: `Icon`
`Color`: `Primary` or `Secondary`
`Container`: `Elevated` or `Outlined`
`Corner`: `Square`
`Divider`”

String: “The title text.”

String: “Material icon font.”

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: “The title text of the SwitchGroup item.”

String: “Border color in hexadecimal form `#rrggbb`”

String: “Border-styles. Values can be `dotted` `dashed` `solid` `double` `groove` `ridge` `inset` and `outset`. Default is `solid`”

String: “Unit. Values are `px` `rem` or `%`.”

String: “`px` or `%`”

String: “The size thickness mode. Can be `px`”

String: “Unit of measurement. Can be `px` or `%` or any css unit of measurement.”

String: A hexadecimal color of the form #rrggbb

String: The path to your image file.

String: Sets or returns the border color. Color is in hexadecimal form #rrggbb

String: Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.

String: Sets or returns the theme color. Values can be Default Primary or Secondary

String: Sets or returns the edge position of the toggle. Values can be Start End or False

String: Sets or returns the relative path to the font-family use.

String: Sets or returns the theme color Primary Secondary or Default. You can also pass a hexadecimal color of the form #rrggbb

String: Sets or returns the label text.

String: Sets or returns the color of the label text in hexadecimal format.

String: Sets or returns the options of the control.

String: Sets or returns the theme color primary or secondary. You can also pass a hexadecimal color of the form #rrggbb

String: Returns the type of the control.

String: Sets or returns the visibility of the control.

Object: The parent layout where to add the SwitchGroup Component.

Object: The list items array whose elements can be `String` if items is text only, or `Array` of the form `[ "icon", "label" ]` if items is icon and text.

Object: The list array or a comma separated list.

Object: The pointer event object.

Object: The click event.

Object: Returns the parent layout control.

Object: Returns the position of the control. The returned object has left top right and bottom props.

List: An array of indexes corresponding to the checked switch items.

List: Sets or returns the padding of each switch item. See also setItemPadding method.

List: 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.

List: Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.

function( values )

function( text, index, event )

function( value, text, index, event )

swg.addItem
Adds or insert an item in the SwitchGroup list

swg.animate
Animate the component

swg.bringForward
Bring this component forward by a given z-index

swg.destroy
Destroy the component

swg.getEnabled
Get the enabled state of an item in the switch group

swg.getPosition
Returns the position of the component. The return object is of the form `{ left, top, right, bottom

swg.getValueByIndex
Returns whether an item is check or unchecked

swg.gone
Destroy the component

swg.hide
Hide the component

swg.popItem
Removes the last item in the SwitchGroup list

swg.removeItemByIndex
Removes an item in the SwitchGroup by its index

swg.removeItemByName
Removes an item in the SwitchGroup component by its title name

swg.sendBackward
Bring this component backward by a given z-index

swg.setBorder
Sets the border line for the component container

swg.setCornerRadius
Sets the corner radius of the switchgroup container

swg.setEnabled
Enable or disable an item in the switchgroup component

swg.setList
Updates the list on the switchgroup component

swg.setMargins
Sets the margin of the component

swg.setOnChange
Adds a callback function to be called whent there is a change of value

swg.setOnContextMenu
Adds a callback function on right click

swg.setOnTouch
Sets a callback function when the switch item is touch

swg.setPadding
Sets the padding component container

swg.setPosition
Sets the position of the component relative to its parent dimensions

swg.setScale
Sets the x and y scaling of the component

swg.setSize
Sets the size of the component

swg.setValueByIndex
Sets the value of the corresponding item in the list

swg.shiftItem
Removes the first item in SwitchGroup list

swg.show
Show the component

array:'Sets or returns the list items. You can also pass a comma separated string of items.'