Back

addButtonGroup

JS Py
Hello World
Content:
- Properties
- Methods

In mobile UI development, a button group refers to a collection of buttons presented together, often used for related actions.

btg = ui.addButtonGroup( parent, list?, options?, width?, height? ) → ui object: ButtonGroup

A toggleable buttongroup can accept additional Radio option to have atmost one toggled button item. If buttongroup is toggleable, please refer to the setOnTouch callback for the correct order of arguments.

Here are the methods available for ButtonGroup Component

Example - Basic ButtonGroup

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      

Properties

The following properties are available on the ButtonGroup object:

absHeight → Number
absLeft → Number
absTop → Number
absWidth → Number
activeItems → List
backColor → String
backImage → String
border → Number
borderColor → String
borderStyle → String
color → String
cornerRadius → Number
disabled → Boolean
el → Object
elStyle → String
fontFile → String
height → Number
isVisible → Boolean
left → Number
list → List
margins → List
opacity → Number
options → String
orientation → String
padding → List
parent → Object
position → Object
rotation → Number
sizeVariant → String
textColor → String
textSize → Number
toolTipPosition → String
toolTips → List
top → Number
type → String
variant → String
visibility → String
width → Number

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()
removeItemByIndex( index )
removeItemByName( name )
sendBackward( zIndex )
setBorder( left?, top?, right?, bottom?, clr?, style? )
setCornerRadius( tl?, tr?, br?, bl?, mode? )
setEnabled( index, value )
setEnabledByName( name, value )
setItemByIndex( item, index )
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 )
setToolTips( titles, pos='top' )
shiftItem()
show()
Boolean: Can be `true` or `false`
Boolean: Values can be `true` or `false`.
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: 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: The index of the button item.
Number: The index of the 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.
Variant: `Contained`”, “ `Outlined`”, “ `Text`”, “ `Default`
Theme Color: `Primary`”, “ `Secondary`”, “ `Default`
Sizes: `Small`”, “ `Medium`”, “ `Large`
Orientation: `Horizontal`”, “ `Vertical`
Toggleable: `Toggle`”, “ `Radio`
Utils: `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 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: “The new text”
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.”
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`”
Object: The parent layout where to add the ButtonGroup
Object: The position of the touch event.
List: The item to be displayed on the buttn group.
List: The titles for each item in the ButtonGroup.
function( text , index , pos )
function( text , index , active , pos )
btg.absHeight
Returns the absolute height of the control in pixels.
btg.absLeft
Returns the absolute distance of the control from the left in pixels.
btg.absTop
Returns the absolute distance of the control from the top in pixels.
btg.absWidth
Returns the absolute width of the control in pixels.
btg.activeItems
Sets or returns the indexes of the active button items.
btg.addItem
Adds an additional item in the button group.
btg.animate
Animate the component.
btg.backColor
A hexadecimal color of the form #rrggbb
btg.backImage
The path to your image file.
btg.border
Sets or returns the border thickness in pixels.
btg.borderColor
Sets or returns the border color. Color is in hexadecimal form #rrggbb
btg.borderStyle
Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.
btg.bringForward
Bring this component forward by a given z-index.
btg.color
Sets or returns the theme color of the button. Values can be Default Primary or Secondary
btg.cornerRadius
Sets or returns the corner radius in pixels.
btg.destroy
Destroy the component.
btg.disabled
Sets or returns the disabled state of the control.
btg.el
Returns the html container element for the control.
btg.elStyle
Sets the style of the html container element.
btg.enableElevation
Enable of disable the elevation of the button group.
btg.fontFile
Sets or returns the relative path to the font-family use.
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.height
Sets or returns the height of the control as a fraction of the parent control.
btg.hide
Hide the component.
btg.isVisible
Returns whether the control is visible or not.
btg.left
Returns the distance of the control from the left.
btg.list
Sets or returns the list items of the button group.
btg.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.
btg.opacity
Sets or returns the opacity of the control.
btg.options
Sets or returns the options of the control.
btg.orientation
Sets or returns the orientation of the button group. Can be horizontal or vertical
btg.padding
Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.
btg.parent
Returns the parent layout control.
btg.popItem
Removes the last item of the button group. This will return the item being removed.
btg.position
Returns the position of the control. The returned object has left top right and bottom props.
btg.removeItemByIndex
Removes an item in the button group by its index.
btg.removeItemByName
Removes an item in the button group by its name.
btg.rotation
Sets or returns the angle of rotation in degrees.
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.setMargins
Sets the margin of the component.
btg.setOnContextMenu
Adds a callback function on right click.
btg.setOnTouch
Adds a callback handler when a button item is touch. If the button is toggleable the arguments pass into the callback function is text, index, active, pos respectively, where active is the active state of the button item.
btg.setPadding
Sets the padding of the component's 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. This will ignore the positioning and flow of controls in the layout.
btg.setSize
Sets the size of the component.
btg.setToolTips
Adds a tooltips to the ButtonGroup items.
btg.shiftItem
Removes the first item in the button group. This will return the item being removed.
btg.show
Show the component.
btg.sizeVariant
Sets or returns the size variant. Values can be small medium or large
btg.textColor
Sets or returns the color of the text.
btg.textSize
Sets or returns the size of the text within the control.
btg.toolTipPosition
Sets or returns the position of the tooltip. Values can be left top right or bottom
btg.toolTips
Sets or returns the list of tooltip titles.
btg.top
Returns the distance of the control from the top.
btg.type
Returns the type of the control.
btg.variant
Sets or returns the variant. Values can be Contained Outlined or Text
btg.visibility
Sets or returns the visibility of the control.
btg.width
Sets or returns the width of the control as a fraction of the parent control.