Back

addTabs

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

Tabs in user interfaces facilitate seamless navigation between app sections.

tab = ui.addTabs( parent, list?, options?, width?, height? ) → ui object: Tabs

Default Tab variant for mobile screens is fullWidth unless provided.

Here are the available methods of the Tabs Component.

Examples

Example - Basic

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

        // Initialize tab names array
        var tabs = ["Tab 1", "Tab 2", "Tab 3"]

        // Adds a tab component to the main layout.
        this.tabs = ui.addTabs(this.main, tabs, "", 0.8, 0.8)

        // Handle tab changes
        this.tabs.setOnChange( this.onChange )

        // get the first tab and add a button control
        this.tab1 = this.tabs.getLayout(0)
        this.tab1.options = "VCenter"
        this.btn = ui.addButton(this.tab1, "Button", "Secondary", 0.5)

        // get the second tab and add a text control.
        this.tab2 = this.tabs.getLayout(1)
        this.tab2.options = "VCenter"
        this.txt = ui.addText(this.tab2, "Lorem ipsum dolor set amit", "Center", 1)

        // get the third tab and add a checkbox control
        this.tab3 = this.tabs.getLayout(2)
        this.tab3.options = "VCenter"
        this.ckb = ui.addCheckbox(this.tab3, "Check me", "Secondary")
    }

    onChange(tab, index)
    {
        ui.showPopup( tab + " : Index " + index)
    }
}
from hybrid import ui

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

    # Add text control to the main layout
    text = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores voluptatibus deleniti, eum nulla rerum dignissimos nihil, quidem facere repellendus necessitatibus incidunt non quasi doloremque delectus repellat pariatur dolorum. Omnis, vero."
    ui.addText(main, text, "Justify", 0.8)

    # Add divider control to the main layout
    div = ui.addDivider(main, 0.8)

    # Add more text control to the main layout
    ui.addText(main, text, "Justify", 0.8)

    # Add an inset divider to the main layout
    div = ui.addDivider(main, 0.8, "inset")

    ui.addText(main, text, "Justify", 0.8)
Copy All       Run      

Example - With Icon

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

        // Initialize tabs array with leading icons
        var tabs = [
            ["favorite", "Favorites"],
            ["bluetooth", "Bluetooth"],
            ["wifi", "Connection"]
        ]

        // Adds a tab component to the main layout and passing the `icon` option
        this.tabs = ui.addTabs(this.main, tabs, "Icon", 0.8, 0.8)

        // Handle tab changes
        this.tabs.setOnChange( this.onChange )

        // get the first tab and add a button control
        this.tab1 = this.tabs.getLayout(0)
        this.tab1.options = "VCenter"
        this.btn = ui.addButton(this.tab1, "Button", "Secondary", 0.5)

        // get the second tab and add a text control.
        this.tab2 = this.tabs.getLayout(1)
        this.tab2.options = "VCenter"
        this.txt = ui.addText(this.tab2, "Lorem ipsum dolor set amit", "Center", 1)

        // get the third tab and add a checkbox control
        this.tab3 = this.tabs.getLayout(2)
        this.tab3.options = "VCenter"
        this.ckb = ui.addCheckbox(this.tab3, "Check me", "Secondary")
    }

    onChange(tab, index)
    {
        ui.showPopup( tab + " : Index " + index)
    }
}
from hybrid import ui

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

    # Initialize tabs array with leading icons
    tabs = [
        ["favorite", "Favorites"],
        ["bluetooth", "Bluetooth"],
        ["wifi", "Connection"]
    ]

    # Adds a tab component to the main layout and passing the `icon` option
    tabs = ui.addTabs(main, tabs, "Icon", 0.8, 0.8)

    # Handle tab changes
    tabs.setOnChange( onChange )

    # get the first tab and add a button control
    tab1 = tabs.getLayout(0)
    tab1.options = "VCenter"
    btn = ui.addButton(tab1, "Button", "Secondary", 0.5)

    # get the second tab and add a text control.
    tab2 = tabs.getLayout(1)
    tab2.options = "VCenter"
    txt = ui.addText(tab2, "Lorem ipsum dolor set amit", "Center", 1)

    # get the third tab and add a checkbox control
    tab3 = tabs.getLayout(2)
    tab3.options = "VCenter"
    ckb = ui.addCheckbox(tab3, "Check me", "Secondary")

def onChange(tab, index):
    ui.showPopup( tab + " : Index " + str(index))
Copy All       Run      

Example - Swipeable tabs

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

        // Initialize tabs names array
        var tabs = ["Tab 1", "Tab 2", "Tab 3"]

        // Adds a tab component to the main layout and passing the `swipeable` option
        // to enable swiping gesture
        this.tabs = ui.addTabs( this.main, tabs, "Swipeable", 0.8, 0.8)

        // Handle tab changes
        this.tabs.setOnChange( this.onChange )

        // get the first tab and add a text control
        this.tab1 = this.tabs.getLayout(0)
        this.tab1.options = "VCenter"
        this.tab1.backColor = "yellow"
        this.txt = ui.addText(this.tab1, "<--- Swipe to the left", "Center", 1)

        // get the second tab and add a button control.
        this.tab2 = this.tabs.getLayout(1)
        this.tab2.backColor = "green"

        // get the third tab and add a checkbox control
        this.tab3 = this.tabs.getLayout(2)
        this.tab3.backColor = "blue"
    }

    onChange(tab, index)
    {
        ui.showPopup( tab + " : Index " + index)
    }
}
from hybrid import ui

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

    # Initialize tabs names array
    tabs = ["Tab 1", "Tab 2", "Tab 3"]

    # Adds a tab component to the main layout and passing the `swipeable` option
    # to enable swiping gesture
    tabs = ui.addTabs( main, tabs, "Swipeable", 0.8, 0.8)

    # Handle tab changes
    tabs.setOnChange( onChange )

    # get the first tab and add a text control
    tab1 = tabs.getLayout(0)
    tab1.options = "VCenter"
    tab1.backColor = "yellow"
    txt = ui.addText(tab1, "<--- Swipe to the left", "Center", 1)

    # get the second tab and add a button control.
    tab2 = tabs.getLayout(1)
    tab2.backColor = "green"

    # get the third tab and add a checkbox control
    tab3 = tabs.getLayout(2)
    tab3.backColor = "blue"

def onChange(tab, index):
    ui.showPopup( tab + " : Index " + str(index))
Copy All       Run      

Example - Open tabs dynamically

class Main extends App
{
    onStart()
    {
        // Set the primary and secondary theme colors
        ui.setThemeColor("#673ab7", "#ffc107")

        // Creates a layout with objects verticaly centered
        this.main = ui.addLayout("main", "Linear", "FillXY,VCenter")
        this.main.backColor = "#e0e0e0"

        // Initialize tabs names array with leading icons
        var tabs = [
            ["favorite", "Favorites"],
            ["bluetooth", "Bluetooth"],
            ["wifi", "Connection"]
        ]

        // Adds a tab component to the main layout
        this.tabs = ui.addTabs(this.main, tabs, "Icon,Center,Primary", 0.8, 0.8)

        // Handle tab changes
        this.tabs.setOnChange( this.onChange )

        // get the first tab and add a button control
        // to open the second tab by its index
        this.tab1 = this.tabs.getLayout(0)
        this.tab1.options = "VCenter"
        this.btn1 = ui.addButton(this.tab1, "Open next")
        this.btn1.setOnTouch(() => {
            this.tabs.showTabByIndex( 1 )
        })

        // get the second tab and add a button control
        // to open the last tab by its index
        this.tab2 = this.tabs.getLayout(1)
        this.tab2.options = "VCenter"
        this.btn2 = ui.addButton(this.tab2, "Open next", "Primary")
        this.btn2.setOnTouch(() => {
            this.tabs.showTabByIndex( 2 )
        })

        // get the third tab and add a button control
        // to open the first tab by its tab name
        this.tab3 = this.tabs.getLayout(2)
        this.tab3.options = "VCenter"
        this.btn3 = ui.addButton(this.tab3, "Open previous", "Secondary")
        this.btn3.setOnTouch(() => {
            this.tabs.showTab( "Favorites" )
        })
    }

    onChange(tab, index)
    {
        ui.showPopup( tab + " : Index " + index)
    }
}
from hybrid import ui

def OnStart():
    # Set the primary and secondary theme colors
    ui.setThemeColor("#673ab7", "#ffc107")

    # Creates a layout with objects vertically centered
    main = ui.addLayout("main", "Linear", "FillXY,VCenter")
    main.backColor = "#e0e0e0"

    # Initialize tabs names array with leading icons
    tabs = [
        ["favorite", "Favorites"],
        ["bluetooth", "Bluetooth"],
        ["wifi", "Connection"]
    ]

    # Adds a tab component to the main layout
    tabs = ui.addTabs(main, tabs, "Icon,Center,Primary", 0.8, 0.8)

    # Handle tab changes
    tabs.setOnChange( onChange )

    # get the first tab and add a button control
    # to open the second tab by its index
    tab1 = tabs.getLayout(0)
    tab1.options = "VCenter"
    btn1 = ui.addButton(tab1, "Open next")
    btn1.setOnTouch(lambda event: tabs.showTabByIndex(1))

    # get the second tab and add a button control
    # to open the last tab by its index
    tab2 = tabs.getLayout(1)
    tab2.options = "VCenter"
    btn2 = ui.addButton(tab2, "Open next", "Primary")
    btn2.setOnTouch(lambda event: tabs.showTabByIndex(2))

    # get the third tab and add a button control
    # to open the first tab by its tab name
    tab3 = tabs.getLayout(2)
    tab3.options = "VCenter"
    btn3 = ui.addButton(tab3, "Open previous", "Secondary")
    btn3.setOnTouch(lambda event: tabs.showTab("Favorites"))

def onChange(tab, index):
    ui.showPopup( tab + " : Index " + str(index))
Copy All       Run      

Example - Icon only

class Main extends App
{
    onStart()
    {
        // Set the primary and secondary theme colors
        ui.setTheme( "dark" )

        // Creates a layout with objects verticaly centered
        this.main = ui.addLayout("main", "Linear", "FillXY,VCenter")

        // Initialize tabs array with icons only
        var tabs = ["favorite", "person", "wifi"];

        // Adds a tab component to the main layout
        this.tabs = ui.addTabs(this.main, tabs, "Icon", 1, 1)

        // Set the tab height to 40px
        this.tabs.tabHeight = 40;

        // Handle tab changes
        this.tabs.setOnChange( this.onChange )

        // get the first tab and add a button control
        this.tab1 = this.tabs.getLayout(0)
        this.tab1.options = "VCenter"
        this.btn = ui.addButton(this.tab1, "Button", "Secondary", 0.5)

        // get the second tab and add a text control.
        this.tab2 = this.tabs.getLayout(1)
        this.tab2.options = "VCenter"
        this.txt = ui.addText(this.tab2, "Lorem ipsum dolor set amit", "Center", 1)

        // get the third tab and add a checkbox control
        this.tab3 = this.tabs.getLayout(2)
        this.tab3.options = "VCenter"
        this.ckb = ui.addCheckbox(this.tab3, "Check me", "Secondary")
    }

    onChange(tab, index)
    {
        ui.showPopup(tab + " : Index " + index, "Bottom")
    }
}
Copy All       Run      

Example - Custom colors and sizes

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

        // Initialize tabs array with leading icons
        var tabs = [
            ["favorite", "Favorites"],
            ["bluetooth", "Bluetooth"],
            ["wifi", "Connection"]
        ]

        // Adds a tab component to the main layout
        // add some styling to the backColor, textColor, iconColor, iconSize and indicator
        this.tabs = ui.addTabs(this.main, tabs, "Icon", 0.8, 0.8)
        this.tabs.backColor = "#ffccbc"
        this.tabs.textColor = "#f4511e"
        this.tabs.iconColor = "#f4511e"
        this.tabs.iconSize = "1.5rem"
        this.tabs.setIndicatorStyle(0.25, 4, "#f4511e", 4)
    }
}
class Main extends App
    onStart()
        # Creates a layout with objects verticaly centered
        this.main = ui.addLayout("main", "Linear", "FillXY,VCenter")

        # Initialize tabs array with leading icons
        tabs = [
            ["favorite", "Favorites"],
            ["bluetooth", "Bluetooth"],
            ["wifi", "Connection"]
        ]

        # Adds a tab component to the main layout
        # add some styling to the backColor, textColor, iconColor, iconSize and indicator
        this.tabs = ui.addTabs(this.main, tabs, "Icon", 0.8, 0.8)
        this.tabs.backColor = "#ffccbc"
        this.tabs.textColor = "#f4511e"
        this.tabs.iconColor = "#f4511e"
        this.tabs.iconSize = "1.5rem"
        this.tabs.setIndicatorStyle(0.25, 4, "#f4511e", 4)
Copy All       Run      

Properties

The following properties are available on the Tabs object:

absHeight → Number
absLeft → Number
absTop → Number
absWidth → Number
backColor → String
backImage → String
border → Number
borderColor → String
borderStyle → String
centered → Boolean
color → String
cornerRadius → Number
disabled → Boolean
el → Object
elevation → Number
elStyle → String
fontFile → String
height → Number
iconColor → String
iconSize → Number
indicatorColor → String
indicatorRadius → Number
indicatorThickness → Number
indicatorWidth → Number
isVisible → Boolean
left → Number
margins → List
opacity → Number
options → String
padding → List
parent → Object
position → Object
rotation → Number
scrollButtonMode → String
tabHeight → Number
tabPadding → Number
textColor → String
textSize → Number
top → Number
type → String
variant → String
visibility → String
width → Number

Methods

The following methods are available on the Tabs object:

addTab( name, icon, index )
animate( anim, duration )
bringForward( zIndex )
destroy()
getEnabled( index ) → Boolean
getEnabledByName( name ) → Boolean
getIndicatorStyle() → Object
getLayout( name ) → Object
getLayoutIndex( layout ) → Number
getPosition( options ) → Object
gone()
hide()
popItem() → Object
removeTabByIndex( index )
removeTabByName( name )
sendBackward( zIndex )
setBorder( left?, top?, right?, bottom?, clr?, style? )
setCornerRadius( tl?, tr?, bl?, br?, mode='px' )
setEnabled( index, value )
setEnabledByName( name, value )
setIcon( index, icon )
setIndicatorStyle( width, thickness, color, radius )
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, mode )
setTabPadding( left?, top?, right?, bottom?, mode='px' )
setTabs( tabs )
setTitleText( index, title )
shiftItem() → Object
show()
showScrollButton( mode )
showTab( name )
showTabByIndex( index )
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 index in which to insert the tab.
Number: The time in milliseconds.
Number: The z-index. A negative value behaves like `sendBackward` method.
Number: The index of the corresponding tab.
Number: The index of the corresponding tab 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 tab. Pass `Boolean` if you want to disable the entire Tabs component.
Number: The index of the tab.
Number: Fraction of the tab item width (horizontal tabs) or height (vertical tabs)
Number: Thickness in pixels
Number: The corner radius in pixels
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.
Number: The tab-item left padding.
Number: The tab-item top padding.
Number: The tab-item right padding.
Number: The tab-item bottom padding.
Number: Index of the tab.
Number: The index of the tab to be shown.
String: “A comma separated options.
Swipe: `Swipeable`
Theme Colors: `Primary`”, “ `Secondary`”, “ `Inherit`”, “ `Transparent`”, “ `Default`
Variant: `Standard`”, “ `Scrollable`”, “ `FullWidth`
Layout: `Linear`”, “ `Absolute`
Utils: `Icon`”, “ `Center`”, “ `Paper`”
String: “The name of the tab.”
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 name of the tab. You can also pass the index of the tab.”
String: “The mode of the measurements. Values can be `px` or `%`”
String: “The name of the corresponding tab to 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. Values are `px` `rem` or `%`.”
String: “Hexadecimal color of the form `#rrggbb`”
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: “Unit of measurement. Default is `px`. You can pass `%` `rem` `vw`.”
String: “The new title.”
String: “Values can be
`auto` : will only present them when not all the items are visible
`desktop` : will only present them on medium and larger viewports
`on` : will always present them
`off` : will never present them.”
String: “The name of the tab to be shown.”
Object: The parent layout where to add the Tabs Component.
Object: The layout to check.
Object: The position of the touch event.
Object: The event position object.
List: An array of tab names.
List: The tab titles array. See examples for format.
function( name , index )
function( text , index , pos )
function( name , index , pos )
tab.absHeight
Returns the absolute height of the control in pixels.
tab.absLeft
Returns the absolute distance of the control from the left in pixels.
tab.absTop
Returns the absolute distance of the control from the top in pixels.
tab.absWidth
Returns the absolute width of the control in pixels.
tab.addTab
Add or insert a tab to the Tabs Component.
tab.animate
Animate the component.
tab.backColor
A hexadecimal color of the form #rrggbb
tab.backImage
The path to your image file.
tab.border
Sets or returns the border thickness in pixels.
tab.borderColor
Sets or returns the border color. Color is in hexadecimal form #rrggbb
tab.borderStyle
Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.
tab.bringForward
Bring this component forward by a given z-index.
tab.centered
Sets or returns a boolean value whether the tabs are centered or not.
tab.color
Sets or returns the theme color of the tab bar. Values can be Default Primary or Secondary
tab.cornerRadius
Sets or returns the corner radius in pixels.
tab.destroy
Destroy the component.
tab.disabled
Sets or returns the disabled state of the control.
tab.el
Returns the html container element for the control.
tab.elevation
Sets or returns the elevation of the tab bar. Make sure to pass a Paper option for this to work.
tab.elStyle
Sets the style of the html container element.
tab.fontFile
Sets or returns the relative path to the font-family use.
tab.getEnabled
Get the enabled state of a tab.
tab.getEnabledByName
Get the enabled state of a tab by its name.
tab.getIndicatorStyle
Returns the indicator style as an object. Props are width, thickness, color, radius and fw which is the actual width or height.
tab.getLayout
Returns the layout of the corresponding tab. You can then add components into the returned layout.
tab.getLayoutIndex
Get the index of the corresponding layout.
tab.getPosition
Returns the position of the component. The return object is of the form {left, top, right, bottom}
tab.gone
Destroy the component.
tab.height
Sets or returns the height of the control as a fraction of the parent control.
tab.hide
Hide the component.
tab.iconColor
Sets or returns the color ofthe tab icon.
tab.iconSize
Sets or returns the tab icon.
tab.indicatorColor
Sets or returns the color of the indicator bar. You can pass theme color primary or secondary or in hexadecimal format #rrggbb.
tab.indicatorRadius
Sets or returns the corner radius of the indicator bar in pixels.
tab.indicatorThickness
Sets or returns the thickness of the indicator bar in pixels.
tab.indicatorWidth
Sets or returns the width of the indicator bar as a fraction of the tab item width. Works only on FullWidth tab.
tab.isVisible
Returns whether the control is visible or not.
tab.left
Returns the distance of the control from the left.
tab.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.
tab.opacity
Sets or returns the opacity of the control.
tab.options
Sets or returns the options of the control.
tab.padding
Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.
tab.parent
Returns the parent layout control.
tab.popItem
Removes the last item in the tabs list. This will return the item being removed.
tab.position
Returns the position of the control. The returned object has left top right and bottom props.
tab.removeTabByIndex
Removes a tab item by its corresponding index.
tab.removeTabByName
Removes a tab item by its corresponding name.
tab.rotation
Sets or returns the angle of rotation in degrees.
tab.scrollButtonMode
Sets or returns the scroll button mode when tab items overflow the width of its container. Values are auto desktop on and of.
tab.sendBackward
Bring this component backward by a given z-index.
tab.setBorder
Sets the border line for the component container.
tab.setCornerRadius
Sets the corner radius of the tab.
tab.setEnabled
Enable or disable a tab item. Pass index as number if you want the corresponding tab index to be enabled or disabled.
Pass index as Boolean, if you want to disable the entire Tabs component.
tab.setEnabledByName
Enable or disable a tab by its name.
tab.setIcon
Sets an icon to a corresponding tab title.
tab.setIndicatorStyle
Add a custom styling to the indicator. Note: This behaves differently when the viewport is resize.
tab.setMargins
Sets the margin of the component.
tab.setOnChange
Sets a callback function when the value of the tab changes.
tab.setOnContextMenu
Adds a callback function on right click.
tab.setOnTouch
Add a callback function when a tab item i click.
tab.setPadding
Sets the padding of the component's container.
tab.setPosition
Sets the position of the component relative to its parent dimensions.
tab.setScale
Sets the x and y scaling of the component. This will ignore the positioning and flow of controls in the layout.
tab.setSize
Sets the size of the component.
tab.setTabPadding
Sets the padding of the tab items.
tab.setTabs
Sets the tab titles array.
tab.setTitleText
Sets a new title for the corresponding tab.
tab.shiftItem
Removes the first item in the tabs list. This will return the item being removed.
tab.show
Show the component.
tab.showScrollButton
Determines the behavior of scroll buttons when tabs are set to scrollable.
tab.showTab
Show a tab panel by its corresponding name. This will make the tab in active state.
tab.showTabByIndex
Show a tab panel by its corresponding name. This will make the tab in active state.
tab.tabHeight
Sets or returns the height of the tab in pixels.
tab.tabPadding
Sets or returns the padding of the tab items. The return objects has the following props: left, top, right and bottom. You can pass an object to set paddings on all side or see setTabPadding method.
tab.textColor
Sets or returns the color of the text.
tab.textSize
Sets or returns the size of the text within the control.
tab.top
Returns the distance of the control from the top.
tab.type
Returns the type of the control.
tab.variant
Sets or returns the variant of the Tabs Component. Values can be Standard Scrollable or FullWidth
tab.visibility
Sets or returns the visibility of the control.
tab.width
Sets or returns the width of the control as a fraction of the parent control.