Back

addFAB

JS Py
Hello World
Content:
- Properties
- Methods

Adds a floating action button on your layout.

fab = ui.addFAB( parent, icon, options, text ) → Object: FAB Component

FAB usually float at the bottom right of your screen by default.

If you want the fab to position relative to the layout and not on the bottom right corner, pass a Static option.

If fab is Extended pass a text argument.

Properties

These are the setter and getter properties for the addFAB Component.

absHeight
absLeft
absTop
absWidth
backColor
backImage
border
borderColor
borderStyle
color
cornerRadius
disabled
disabledRipple
fontFile
height
icon
iconSize
isVisible
left
margins
opacity
options
padding
parent
position
rotation
sizeVariant
text
textColor
textSize
top
type
variant
visibility
width

Example - Basic FAB

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

        // Add a floating action button to the main layout.
        // By default, FAB is positioned fix at the bottom right corner
        this.fab = ui.addFAB(this.main, "add")

        // Add a callback handler for `onTouch` event on the FAB
        this.fab.setOnTouch( this.onTouch )
    }

    onTouch()
    {
        ui.showPopup( "You click me!" )
    }
}
from hybrid import ui

def OnStart():
    # Create a fullscreen linear layout with objects vertically centered
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    # Add a floating action button to the main layout.
    # By default, FAB is positioned fix at the bottom right corner
    fab = ui.addFAB(main, "add")

    # Add a callback handler for `onTouch` event on the FAB
    fab.setOnTouch(onTouch)

def onTouch(event):
    ui.showPopup("You clicked me!")
Copy All       Run      

Example - Primary static FAB

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

        // Add a primary floating action button to the main layout.
        // Passing `Static` will ignore fixed positioning
        // and will follow the flow of the parent layout
        this.fab = ui.addFAB( this.main, "add", "Primary,Static" )

        // Add a callback handler for `onTouch` event on the FAB
        this.fab.setOnTouch( this.onTouch )
    }

    onTouch()
    {
        ui.showPopup( "You click me!" )
    }
}
from hybrid import ui

def OnStart():
    # Create a fullscreen linear layout with objects vertically centered
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    # Add a primary floating action button to the main layout.
    # Passing `Static` will ignore fixed positioning
    # and will follow the flow of the parent layout
    fab = ui.addFAB(main, "add", "Primary,Static")

    # Add a callback handler for `onTouch` event on the FAB
    fab.setOnTouch(onTouch)

def onTouch(event):
    ui.showPopup("You clicked me!")
Copy All       Run      

Example - Extended FAB

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

        // Add a secondary floating action button to the main layout.
        // Passing `Extended` enables to add more text on the FAB
        this.fab = ui.addFAB(this.main, "add", "Secondary,Extended", "New message")

        // Add a callback handler for `onTouch` event on the FAB
        this.fab.setOnTouch( this.onTouch )
    }

    onTouch()
    {
        ui.showPopup( "You click me!" )
    }
}
from hybrid import ui

def OnStart():
    # Create a fullscreen linear layout with objects vertically centered
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    # Add a secondary floating action button to the main layout.
    # Passing `Extended` enables to add more text on the FAB
    fab = ui.addFAB(main, "add", "Secondary,Extended", "New message")

    # Add a callback handler for `onTouch` event on the FAB
    fab.setOnTouch(onTouch)

def onTouch(event):
    ui.showPopup("You clicked me!")
Copy All       Run      

Example - Secondary,Extended,Left

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

        // Add a secondary floating action button to the main layout.
        // Passing `Left` option will position the FAB on the bottom left corner
        this.fab = ui.addFAB(this.main, "add", "Secondary,Extended,Left", "New message")

        // Add a callback handler for `onTouch` event on the FAB
        this.fab.setOnTouch( this.onTouch )
    }

    onTouch()
    {
        ui.showPopup( "You click me!" )
    }
}
from hybrid import ui

def OnStart():
    # Create a fullscreen linear layout with objects vertically centered
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    # Add a secondary floating action button to the main layout.
    # Passing `Left` option will position the FAB on the bottom left corner
    fab = ui.addFAB(main, "add", "Secondary,Extended,Left", "New message")

    # Add a callback handler for `onTouch` event on the FAB
    fab.setOnTouch(onTouch)

def onTouch(event):
    ui.showPopup("You clicked me!")
Copy All       Run      

Methods

The following methods are available on the FAB object:

animate( anim, duration )
bringForward( zIndex )
destroy()
getPosition( options ) → Object
gone()
hide()
sendBackward( zIndex )
setBorder( width, clr, style )
setCornerRadius( tl, tr, bl, br, mode )
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 )
show()
Boolean: Sets or returns the disabled state of the control.
Boolean: Sets or returns the disabled state of the ripple effect.
Boolean: Returns whether the control is visible or not.
Number: The time in milliseconds.
Number: The z-index. A negative value behaves like `sendBackward` method.
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: 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: 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: Fraction of the parent height. [0-1]
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: Sets or returns the size of the icon.
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 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: “The string icon of the FAB”
String: comma “,” separated: “`Fixed` `Static` `Rounded` `Extended` `Left` `Right`”
String: “Text to show for extended FABs.”
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: “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: “`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: 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 for the FAB. Values can be Default Primary or Secondary
String: Sets or returns the relative path to the font-family use.
String: Sets or returns the material icon font.
String: Sets or returns the options of the control.
String: Sets or returns the size variant of the FAB. Values can be Small Medium or Large
String: Sets or returns the text for extended FAB.
String: Sets or returns the color of the text.
String: Returns the type of the control.
String: Sets or returns the variant use for the FAB. Can be Extended or Rounded
String: Sets or returns the visibility of the control.
Object: The parent layout where to add the fab
Object: The pointer event object.
Object: The 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: 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( event )
function( event )
fab.animate
Animate the component
fab.bringForward
Bring this component forward by a given z-index
fab.destroy
Destroy the component
fab.getPosition
Returns the position of the component. The return object is of the form `{ left, top, right, bottom
fab.gone
Destroy the component
fab.hide
Hide the component
fab.sendBackward
Bring this component backward by a given z-index
fab.setBorder
Sets the border line for the component container
fab.setCornerRadius
Sets the corner radius of the button
fab.setMargins
Sets the margin of the component
fab.setOnContextMenu
Adds a callback function on right click
fab.setOnTouch
Adds a callback handler when the component is touch
fab.setPadding
Sets the padding component container
fab.setPosition
Sets the position of the component relative to its parent dimensions
fab.setScale
Sets the x and y scaling of the component
fab.setSize
Sets the size of the component
fab.show
Show the component