Adds a Tabs Component into your layout.
Default Tab variant for mobile screens is fullWidth unless provided.
Properties
These are the setter and getter properties for the addTabs Component.
Example - Basic
class Main extends App
{
onStart()
{
this.main = ui.addLayout( "main", "Linear", "FillXY,VCenter")
this.main.backColor = "#e0e0e0"
var tabs = ["Tab 1", "Tab 2", "Tab 3"]
this.tabs = ui.addTabs(this.main, tabs, "", 0.8, 0.8)
this.tabs.setOnChange( this.onChange )
this.tab1 = this.tabs.getLayout(0)
this.tab1.options = "VCenter"
this.btn = ui.addButton(this.tab1, "Button", "Secondary", 0.5)
this.tab2 = this.tabs.getLayout(1)
this.tab2.options = "VCenter"
this.txt = ui.addText(this.tab2, "Lorem ipsum dolor set amit", "Center", 1)
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():
main = ui.addLayout( "main", "Linear", "FillXY,VCenter")
main.backColor = "#e0e0e0"
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)
div = ui.addDivider(main, 0.8)
ui.addText(main, text, "Justify", 0.8)
div = ui.addDivider(main, 0.8, "inset")
ui.addText(main, text, "Justify", 0.8)
Example - With Icon
class Main extends App
{
onStart()
{
this.main = ui.addLayout( "main", "Linear", "FillXY,VCenter")
this.main.backColor = "#e0e0e0"
var tabs = [
["favorite", "Favorites"],
["bluetooth", "Bluetooth"],
["wifi", "Connection"]
]
this.tabs = ui.addTabs(this.main, tabs, "Icon", 0.8, 0.8)
this.tabs.setOnChange( this.onChange )
this.tab1 = this.tabs.getLayout(0)
this.tab1.options = "VCenter"
this.btn = ui.addButton(this.tab1, "Button", "Secondary", 0.5)
this.tab2 = this.tabs.getLayout(1)
this.tab2.options = "VCenter"
this.txt = ui.addText(this.tab2, "Lorem ipsum dolor set amit", "Center", 1)
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():
main = ui.addLayout( "main", "Linear", "FillXY,VCenter")
main.backColor = "#e0e0e0"
tabs = [
["favorite", "Favorites"],
["bluetooth", "Bluetooth"],
["wifi", "Connection"]
]
tabs = ui.addTabs(main, tabs, "Icon", 0.8, 0.8)
tabs.setOnChange( onChange )
tab1 = tabs.getLayout(0)
tab1.options = "VCenter"
btn = ui.addButton(tab1, "Button", "Secondary", 0.5)
tab2 = tabs.getLayout(1)
tab2.options = "VCenter"
txt = ui.addText(tab2, "Lorem ipsum dolor set amit", "Center", 1)
tab3 = tabs.getLayout(2)
tab3.options = "VCenter"
ckb = ui.addCheckbox(tab3, "Check me", "Secondary")
def onChange(tab, index):
ui.showPopup( tab + " : Index " + str(index))
Example - Swipeable tabs
class Main extends App
{
onStart()
{
this.main = ui.addLayout( "main", "Linear", "FillXY,VCenter")
this.main.backColor = "#e0e0e0"
var tabs = ["Tab 1", "Tab 2", "Tab 3"]
this.tabs = ui.addTabs( this.main, tabs, "Swipeable", 0.8, 0.8)
this.tabs.setOnChange( this.onChange )
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)
this.tab2 = this.tabs.getLayout(1)
this.tab2.backColor = "green"
this.tab3 = this.tabs.getLayout(2)
this.tab3.backColor = "blue"
}
onChange(tab, index)
{
ui.showPopup( tab + " : Index " + index)
}
}
from hybrid import ui
def OnStart():
main = ui.addLayout( "main", "Linear", "FillXY,VCenter")
main.backColor = "#e0e0e0"
tabs = ["Tab 1", "Tab 2", "Tab 3"]
tabs = ui.addTabs( main, tabs, "Swipeable", 0.8, 0.8)
tabs.setOnChange( onChange )
tab1 = tabs.getLayout(0)
tab1.options = "VCenter"
tab1.backColor = "yellow"
txt = ui.addText(tab1, "<--- Swipe to the left", "Center", 1)
tab2 = tabs.getLayout(1)
tab2.backColor = "green"
tab3 = tabs.getLayout(2)
tab3.backColor = "blue"
def onChange(tab, index):
ui.showPopup( tab + " : Index " + str(index))
Example - Open tabs dynamically
class Main extends App
{
onStart()
{
ui.setThemeColor("#673ab7", "#ffc107")
this.main = ui.addLayout("main", "Linear", "FillXY,VCenter")
this.main.backColor = "#e0e0e0"
var tabs = [
["favorite", "Favorites"],
["bluetooth", "Bluetooth"],
["wifi", "Connection"]
]
this.tabs = ui.addTabs(this.main, tabs, "Icon,Center,Primary", 0.8, 0.8)
this.tabs.setOnChange( this.onChange )
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 )
})
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 )
})
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():
ui.setThemeColor("#673ab7", "#ffc107")
main = ui.addLayout("main", "Linear", "FillXY,VCenter")
main.backColor = "#e0e0e0"
tabs = [
["favorite", "Favorites"],
["bluetooth", "Bluetooth"],
["wifi", "Connection"]
]
tabs = ui.addTabs(main, tabs, "Icon,Center,Primary", 0.8, 0.8)
tabs.setOnChange( onChange )
tab1 = tabs.getLayout(0)
tab1.options = "VCenter"
btn1 = ui.addButton(tab1, "Open next")
btn1.setOnTouch(lambda event: tabs.showTabByIndex(1))
tab2 = tabs.getLayout(1)
tab2.options = "VCenter"
btn2 = ui.addButton(tab2, "Open next", "Primary")
btn2.setOnTouch(lambda event: tabs.showTabByIndex(2))
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))
Example - Icon only
class Main extends App
{
onStart()
{
ui.setTheme( "dark" )
this.main = ui.addLayout("main", "Linear", "FillXY,VCenter")
var tabs = ["favorite", "person", "wifi"];
this.tabs = ui.addTabs(this.main, tabs, "Icon", 1, 1)
this.tabs.tabHeight = 40;
this.tabs.setOnChange( this.onChange )
this.tab1 = this.tabs.getLayout(0)
this.tab1.options = "VCenter"
this.btn = ui.addButton(this.tab1, "Button", "Secondary", 0.5)
this.tab2 = this.tabs.getLayout(1)
this.tab2.options = "VCenter"
this.txt = ui.addText(this.tab2, "Lorem ipsum dolor set amit", "Center", 1)
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")
}
}
Example - Custom colors and sizes
class Main extends App
{
onStart()
{
this.main = ui.addLayout("main", "Linear", "FillXY,VCenter")
var tabs = [
["favorite", "Favorites"],
["bluetooth", "Bluetooth"],
["wifi", "Connection"]
]
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.indicatorColor = "#f4511e"
}
}
class Main extends App
onStart()
this.main = ui.addLayout("main", "Linear", "FillXY,VCenter")
tabs = [
["favorite", "Favorites"],
["bluetooth", "Bluetooth"],
["wifi", "Connection"]
]
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.indicatorColor = "#f4511e"
Methods
The following methods are available on the Tabs object:
Boolean: Values can be `true` or `false`.
Boolean: Sets or returns a boolean value whether the tabs are centered or not.
Boolean: Sets or returns the disabled state of the control.
Boolean: Returns whether the control is visible or not.
Number: Fraction of the screen width. [0-1]
Number: Fraction of the screen 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: 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. This works only on `fullWidth` tab.
Number: Thickness in pixels.
Number: The corner radius in pixels.
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: 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.
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 elevation of the tab bar. Make sure to pass a Paper option for this to work.
Number: Sets or returns the height of the control as a fraction of the parent control.
Number: Sets or returns the tab icon.
Number: Sets or returns the corner radius of the indicator bar in pixels.
Number: Sets or returns the thickness of the indicator bar in pixels.
Number: Sets or returns the width of the indicator bar as a fraction of the tab item width. Works only on FullWidth tab.
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 height of the tab in pixels.
Number: 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.
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: “Enable swipe: `Swipeable`
`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 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: “Hexadecimal color of the form `#rrggbb`.”
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: “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.”
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 tab bar. Values can be Default Primary or Secondary
String: Sets or returns the relative path to the font-family use.
String: Sets or returns the color ofthe tab icon.
String: Sets or returns the color of the indicator bar. You can pass theme color primary or secondary or in hexadecimal format #rrggbb.
String: Sets or returns the options of the control.
String: Sets or returns the scroll button mode when tab items overflow the width of its container. Values are auto desktop on and of.
String: Sets or returns the theme color for the tab bar titles 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 variant of the Tabs Component. Values can be Standard Scrollable or FullWidth
String: Sets or returns the visibility of the control.
Object: The parent layout where to add the Tabs Component.
Object: The layout to check.
Object: The pointer 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: An array of tab names.
List: The tab titles array. See examples for format.
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(
text,
index,
event
)
s.addTab
Add or insert a tab to the Tabs Component
s.animate
Animate the component
s.bringForward
Bring this component forward by a given z-index
s.destroy
Destroy the component
s.getEnabled
Get the enabled state of a tab
s.getEnabledByName
Get the enabled state of a tab by its name
s.getLayout
Returns the layout of the corresponding tab. You can then add components into the returned layout
s.getLayoutIndex
Get the index of the corresponding layout
s.getPosition
Returns the position of the component. The return object is of the form `{ left, top, right, bottom
s.gone
Destroy the component
s.hide
Hide the component
s.removeTabByIndex
Removes a tab item by its corresponding index
s.removeTabByName
Removes a tab item by its corresponding name
s.sendBackward
Bring this component backward by a given z-index
s.setBorder
Sets the border line for the component container
s.setCornerRadius
Sets the corner radius of the tab
s.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
s.setEnabledByName
Enable or disable a tab by its name
s.setIcon
Sets an icon to a corresponding tab title
s.setIndicatorStyle
Add a custom styling to the indicator color
s.setMargins
Sets the margin of the component
s.setOnChange
Sets a callback function when the value of the tab changes
s.setOnContextMenu
Adds a callback function on right click
s.setOnTouch
Add a callback function when a tab item i click
s.setPadding
Sets the padding component container
s.setPosition
Sets the position of the component relative to its parent dimensions
s.setScale
Sets the x and y scaling of the component
s.setSize
Sets the size of the component
s.setTabPadding
Sets the padding of the tab items
s.setTabs
Sets the tab titles array
s.setTitleText
Sets a new title for the corresponding tab
s.show
Show the component
s.showScrollButton
Determines the behavior of scroll buttons when tabs are set to `scrollable
s.showTab
Show a tab panel by its corresponding name. This will make the tab in active state
s.showTabByIndex
Show a tab panel by its corresponding name. This will make the tab in active state