Back

addSwitchGroup

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

In UI development, a SwitchGroup refers to a collection or grouping of individual switches.

swg = ui.addSwitchGroup( parent, list?, options?, width?, height? ) → ui object: SwitchGroup

Here the methods available for the SwitchGroup Component.

Examples

Example - Basic

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      

Properties

The following properties are available on the SwitchGroup object:

absHeightNumber
absLeftNumber
absTopNumber
absWidthNumber
backColorString
backImageString
borderNumber
borderColorString
borderStyleString
colorString
cornerRadiusNumber
disabledBoolean
edgeString
elObject
elevationNumber
elStyleString
fontFileString
heightNumber
iconColorString
iconSizeNumber
isVisibleBoolean
itemPaddingList
labelString
labelColorString
labelSizeNumber
leftNumber
listList
marginsList
opacityNumber
optionsString
outlinedBoolean
paddingList
parentObject
positionObject
rotationNumber
textColorString
textSizeNumber
topNumber
typeString
visibilityString
widthNumber

Methods

The following methods are available on the SwitchGroup object:

getEnabled( index ) → Boolean
getPosition( options ) → Object
getValueByIndex( index ) → Boolean
gone()
hide()
setScale( x, y )
show()
Boolean: The value of the item.
Boolean: Values can be `true` or `false`.
Boolean: A Values can be `true` or `false`
Number: Fraction of the parent width `[0-1]`.
Number: Fraction of the parent 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: Border-top thickness in pixels.
Number: Border-right thickness in pixels.
Number: Border-bottom 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: Left padding of the radio item.
Number: Top padding of the radio item.
Number: Right padding of the radio item.
Number: Bottom padding of the radio item.
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: “A comma separated options.
Icon: `Icon`
Color: `Primary`”
, “ `Secondary`
Container: `Elevated`”
, “ `Outlined`
Corner: `Square`
List divider: `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 format `#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: “Unit of measurement. Can be `rem`”, “ `px`”, “ `%`”, “ or `v` for viewport.”
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 parent layout where to add the SwitchGroup Component.
Object: The position of the touch event.
List: 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.
List: The list array or a comma separated list.
List: An array of indexes corresponding to the checked switch items.
List: An array of switchgroup items corresponding to the checked switch items.
function( indexes , items )
function( text , index , pos )
function( text , value , index , pos )
swg.absHeight
Returns the absolute height of the control in pixels.
swg.absLeft
Returns the absolute distance of the control from the left in pixels.
swg.absTop
Returns the absolute distance of the control from the top in pixels.
swg.absWidth
Returns the absolute width of the control in pixels.
swg.addItem
Adds or insert an item in the SwitchGroup list.
swg.animate
Animate the component.
swg.backColor
A hexadecimal color of the form #rrggbb
swg.backImage
The path to your image file.
swg.border
Sets or returns the border thickness in pixels.
swg.borderColor
Sets or returns the border color. Color is in hexadecimal form #rrggbb
swg.borderStyle
Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.
swg.bringForward
Bring this component forward by a given z-index.
swg.color
Sets or returns the theme color. Values can be Default Primary or Secondary
swg.cornerRadius
Sets or returns the corner radius in pixels.
swg.destroy
Destroy the component.
swg.disabled
Sets or returns the disabled state of the control.
swg.edge
Sets or returns the edge position of the toggle. Values can be Start End or False
swg.el
Returns the html container element for the control.
swg.elevation
Sets or returns the depth of the control container. Value ranges from 0 to 24.
swg.elStyle
Sets the style of the html container element.
swg.fontFile
Sets or returns the relative path to the font-family use.
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.height
Sets or returns the height of the control as a fraction of the parent control.
swg.hide
Hide the component.
swg.iconColor
Sets or returns the theme color Primary Secondary or Default. You can also pass a hexadecimal color of the form #rrggbb
swg.iconSize
Sets or returns the size of the icon.
swg.isVisible
Returns whether the control is visible or not.
swg.itemPadding
Sets or returns the padding of each switch item. See also setItemPadding method.
swg.label
Sets or returns the label text.
swg.labelColor
Sets or returns the color of the label text in hexadecimal format.
swg.labelSize
Sets or returns the size of the label text.
swg.left
Returns the distance of the control from the left.
swg.list
Sets or returns the list items. You can also pass a comma separated string of items.
swg.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.
swg.opacity
Sets or returns the opacity of the control.
swg.options
Sets or returns the options of the control.
swg.outlined
Sets or returns whether the container is outlined or elevated.
swg.padding
Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.
swg.parent
Returns the parent layout control.
swg.popItem
Removes the last item in the SwitchGroup list. This will return the item being removed.
swg.position
Returns the position of the control. The returned object has left top right and bottom props.
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.rotation
Sets or returns the angle of rotation in degrees.
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.setItemPadding
Sets the padding of the switch item. See itemPadding property for equivalent setter/getter property.
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 of the component's 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. This will ignore the positioning and flow of controls in the layout.
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. This will return the item being removed.
swg.show
Show the component.
swg.textColor
Sets or returns the color of the text.
swg.textSize
Sets or returns the size of the text within the control.
swg.top
Returns the distance of the control from the top.
swg.type
Returns the type of the control.
swg.visibility
Sets or returns the visibility of the control.
swg.width
Sets or returns the width of the control as a fraction of the parent control.