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

        // Initialize button items
        var buttons = ["Button 1", "Button 2", "Button 3"]

        // Add a ButtonGroup control to the main layout
        this.btg = ui.addButtonGroup(this.main, buttons, "", 0.9)

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

    onTouch(text, index)
    {
        // Display the touched button text
        ui.showPopup( text )
    }
}

from hybrid import ui

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

    # Initialize button items
    buttons = ["Button 1", "Button 2", "Button 3"]

    # Add a ButtonGroup control to the main layout
    btg = ui.addButtonGroup(main, buttons, "", 0.9)

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

def onTouch(text, index, event):
    # Display the touched button text
    ui.showPopup(text)

Copy All Run

Example - ButtonGroup variants

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

        var buttons = ["Button 1", "Button 2", "Button 3"]

        // Add a contained ButtonGroup to the main layout
        this.btg1 = ui.addButtonGroup(this.main, buttons, "Contained,Primary", 0.9)
        this.btg1.setOnTouch( this.onTouch )

        // Add an outlined ButtonGroup to the main layout
        this.btg2 = ui.addButtonGroup(this.main, buttons, "Outlined,Primary", 0.9)
        this.btg2.setOnTouch( this.onTouch )

        // Add a text ButtonGroup to the main layout
        this.btg3 = ui.addButtonGroup(this.main, buttons, "Text,Primary", 0.9)
        this.btg3.setOnTouch( this.onTouch )
    }

    onTouch(text, index)
    {
        // Display the touched button text
        ui.showPopup( text )
    }
}

from hybrid import ui

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

    buttons = ["Button 1", "Button 2", "Button 3"]

    # Add a contained ButtonGroup to the main layout
    btg1 = ui.addButtonGroup(main, buttons, "Contained,Primary", 0.9)
    btg1.setOnTouch(onTouch)

    # Add an outlined ButtonGroup to the main layout
    btg2 = ui.addButtonGroup(main, buttons, "Outlined,Primary", 0.9)
    btg2.setOnTouch(onTouch)

    # Add a text ButtonGroup to the main layout
    btg3 = ui.addButtonGroup(main, buttons, "Text,Primary", 0.9)
    btg3.setOnTouch(onTouch)

def onTouch(text, index, event):
    # Display the touched button text
    ui.showPopup(text)

Copy All Run

Example - ButtonGroup colors

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

        // Initialize button items
        var buttons = ["Button 1", "Button 2", "Button 3"]

        // Add defualt ButtonGroup to the main layout
        this.btg1 = ui.addButtonGroup(this.main, buttons, "Default", 0.9)
        this.btg1.setOnTouch( this.onTouch )

        // Add primary ButtonGroup to the main layout
        this.btg2 = ui.addButtonGroup(this.main, buttons, "Primary", 0.9)
        this.btg2.setOnTouch( this.onTouch )

        // Add secondary ButtonGroup to the main layout
        this.btg3 = ui.addButtonGroup(this.main, buttons, "Secondary", 0.9)
        this.btg3.setOnTouch( this.onTouch )
    }

    onTouch(text, index)
    {
        // Display the touched button text
        ui.showPopup( text )
    }
}

from hybrid import ui

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

    # Initialize button items
    buttons = ["Button 1", "Button 2", "Button 3"]

    # Add defualt ButtonGroup to the main layout
    btg1 = ui.addButtonGroup(main, buttons, "Default", 0.9)
    btg1.setOnTouch(onTouch)

    # Add primary ButtonGroup to the main layout
    btg2 = ui.addButtonGroup(main, buttons, "Primary", 0.9)
    btg2.setOnTouch(onTouch)

    # Add secondary ButtonGroup to the main layout
    btg3 = ui.addButtonGroup(main, buttons, "Secondary", 0.9)
    btg3.setOnTouch(onTouch)

def onTouch(text, index, event):
    # Display the touched button text
    ui.showPopup(text)

Copy All Run

Example - ButtonGroup sizes

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

        // Initialize button items
        var buttons = ["Button 1", "Button 2", "Button 3"]

        // Add small size ButtonGroup to the main layout
        this.btg1 = ui.addButtonGroup(this.main, buttons, "Contained,Primary,Small", 0.9)
        this.btg1.setOnTouch( this.onTouch )

        // Add medium/default size ButtonGroup to the main layout
        this.btg2 = ui.addButtonGroup(this.main, buttons, "Contained,Primary,Medium", 0.9)
        this.btg2.setOnTouch( this.onTouch )

        // Add large size ButtonGroup to the main layout
        this.btg3 = ui.addButtonGroup(this.main, buttons, "Contained,Primary,Large", 0.9)
        this.btg3.setOnTouch( this.onTouch )
    }

    onTouch(text, index)
    {
        // Display the touched button text
        ui.showPopup( text )
    }
}

from hybrid import ui

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

    # Initialize button items
    buttons = ["Button 1", "Button 2", "Button 3"]

    # Add small size ButtonGroup to the main layout
    btg1 = ui.addButtonGroup(main, buttons, "Contained,Primary,Small", 0.9)
    btg1.setOnTouch(onTouch)

    # Add medium/default size ButtonGroup to the main layout
    btg2 = ui.addButtonGroup(main, buttons, "Contained,Primary,Medium", 0.9)
    btg2.setOnTouch(onTouch)

    # Add large size ButtonGroup to the main layout
    btg3 = ui.addButtonGroup(main, buttons, "Contained,Primary,Large", 0.9)
    btg3.setOnTouch(onTouch)

def onTouch(text, index, event):
    # Display the touched button text
    ui.showPopup(text)

Copy All Run

Example - ButtonGroup icons

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

        // Initialize button items
        var buttons = ["delete", "shopping_cart", "dashboard"]

        // Add small and primary contained ButtonGroup icons to the main layout
        this.btg1 = ui.addButtonGroup(this.main, buttons, "Contained,Primary,Small,Icon")
        this.btg1.setOnTouch( this.onTouch )

        // Add a medium and secondary outlined ButtonGroup icons to the main layout
        this.btg2 = ui.addButtonGroup(this.main, buttons, "Outlined,Secondary,Medium,Icon")
        this.btg2.setOnTouch( this.onTouch )

        // Add a large and default text ButtonGroup icons to the main layout
        this.btg3 = ui.addButtonGroup(this.main, buttons, "Text,Large,Icon")
        this.btg3.setOnTouch( this.onTouch )
    }

    onTouch(text, index)
    {
        // Display the touched button text
        ui.showPopup( text )
    }
}

from hybrid import ui

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

    # Initialize button items
    buttons = ["delete", "shopping_cart", "dashboard"]

    # Add small and primary contained ButtonGroup icons to the main layout
    btg1 = ui.addButtonGroup(main, buttons, "Contained,Primary,Small,Icon")
    btg1.setOnTouch(onTouch)

    # Add a medium and secondary outlined ButtonGroup icons to the main layout
    btg2 = ui.addButtonGroup(main, buttons, "Outlined,Secondary,Medium,Icon")
    btg2.setOnTouch(onTouch)

    # Add a large and default text ButtonGroup icons to the main layout
    btg3 = ui.addButtonGroup(main, buttons, "Text,Large,Icon")
    btg3.setOnTouch(onTouch)

def onTouch(text, index, event):
    # Display the touched button text
    ui.showPopup(text)

Copy All Run

Methods

The following methods are available on the ButtonGroup object:

addItem( item )

animate( anim, duration )

bringForward( zIndex )

destroy()

enableElevation( enable )

getEnabled( index ) → Boolean

getEnabledByName( name ) → Boolean

getPosition( options ) → Object

gone()

hide()

popItem()

removeItemByName( name )

removeItemIndex( index )

sendBackward( zIndex )

setBorder( width, clr, style )

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

setEnabled( index, value )

setEnabledByName( name, value )

setItemByIndex( item, index )

setList( items )

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 )

setToolTip( titles, pos )

shiftItem()

show()

Boolean: `true` or `false`

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

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 index of the button item in the button group.

Number: The index of the item to be remove.

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

Number: Border-left thickness in pixels.

Number: Top-Left border radius in pixels.

Number: Top-Right border radius in pixels.

Number: Bottom-Left border radius in pixels.

Number: Bottom-Right border radius in pixels.

Number: The index of the button item.

Number: The index of the item.

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

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 height of the control as a fraction of the parent control.

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 font size of the button text.

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: “one or a combination of the following:
Variant: `Contained` `Outlined` `Text` `Default`
`Color`: `Primary` `Secondary` `Default`
`Size`: `Small` `Medium` `Large`
`Orientation`: `Horizontal` `Vertical`
`Util`: `Icon` `NoElevation`”

String: “The additional item.”

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 button text.”

String: “The mode of the measurements. Values can be `px` or `%`”

String: “The name of the item to be remove.”

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: “The new text”

String: “A comma separated list or an array”

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: “The positio of the tooltip.
Can be `top` `left` `right` `bottom` `bottom-end` `bottom-start` `left-end` `left-start` `right-end` `right-start` `top-end` `top-start`”

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 of the button. Values can be Default Primary or Secondary

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

String: Sets or returns the options of the control.

String: Sets or returns the orientation of the button group. Can be horizontal or vertical

String: Sets or returns the size variant. Values can be small medium or large

String: Sets or returns the color of the button text.

String: Sets or returns the position of the tooltip. Values can be left top right or bottom

String: Returns the type of the control.

String: Sets or returns the variant. Values can be Contained Outlined or Text

String: Sets or returns the visibility of the control.

Object: The parent layout where to add the ButtonGroup

Object: The pointer event object.

Object: The pointer click event object.

Object: Returns the parent layout control.

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

List: The item to be displayed on the buttn group.

List: The titles for each item in the ButtonGroup.

List: Sets or returns the list items of the button group.

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.

List: Sets or returns the list of tooltip titles.

function( text, index, event )

btg.addItem
Adds an additional item in the button group

btg.animate
Animate the component

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

btg.destroy
Destroy the component

btg.enableElevation
Enable of disable the elevation of the button group

btg.getEnabled
Get the enabled state of the button item in the button group

btg.getEnabledByName
Get the enabled state of button item in the button group

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

btg.gone
Destroy the component

btg.hide
Hide the component

btg.popItem
Removes the last item of the button group

btg.removeItemByName
Removes an item in the button group by its name

btg.removeItemIndex
Removes an item in the button group by its index

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

btg.setBorder
Sets the border line for the component container

btg.setCornerRadius
Sets the corner radius of the component

btg.setEnabled
Enable or disable a button item in the button group

btg.setEnabledByName
Enable or disable a button item by its name

btg.setItemByIndex
Sets a new text for the item in the button group

btg.setList
Sets the new list of the button group

btg.setMargins
Sets the margin of the component

btg.setOnContextMenu
Adds a callback function on right click

btg.setOnTouch
Adds a callback handler when the button is touch

btg.setPadding
Sets the padding component container

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

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

btg.setSize
Sets the size of the component

btg.setToolTip
Adds a tooltip to the ButtonGroup items

btg.shiftItem
Removes the first item in the button group

btg.show
Show the component