Fab#

Download this notebook from GitHub (right-click to download).

import panel as pn
import panel_material_ui as pmui

pn.extension()

The Fab or floating-action button widget allows triggering events when the button is clicked. In addition to a value parameter, which will toggle from False to True while the click event is being processed an additional clicks parameter that can be watched to subscribe to click events.


Discover more on using widgets to add interactivity to your applications in the how-to guides on interactivity. Alternatively, learn how to set up callbacks and (JS-)links between parameters or how to use them as part of declarative UIs with Param.




Parameters:#


For details on other options for customizing the component see the customization guides.




Core#


    

  • clicks (int): Number of clicks (can be listened to)
    • 

  • disabled (boolean): Whether the widget is editable.
    • 

  • href (str): The link to navigate to when clicking the button.
    • 

  • value (boolean): Toggles from False to True while the event is being processed.
    • 







Display#


    

  • color (str): A button theme; should be one of 'default' (white), 'primary' (blue), 'success' (green), 'info' (yellow), 'light' (light), or 'danger' (red).
    • 

  • description (str | Bokeh Tooltip | pn.widgets.TooltipIcon): A description which is shown when the widget is hovered.
    • 

  • icon (str): An icon to render to the left of the button label. Either an SVG or an icon name which is loaded from Material UI Icons.
    • 

  • icon_size (str): Size of the icon as a string, e.g. 12px or 1em.
    • 

  • label (str): The title of the widget.
    • 

  • variant (str): The button style, either ‘circular’ or ‘extended’.
    • 







Styling#


    

  • sx (dict): Component level styling API.
    • 

  • theme_config (dict): Theming API.
    • 







Aliases#


For compatibility with Panel certain parameters are allowed as aliases:


    

  • button_style: Alias for variant
    • 

  • button_type: Alias for color
    • 

  • name: Alias for label
    • 





fab = pmui.Fab(color='primary', label='Click me')

fab







            
            
The clicks parameter will report the number of times the button has been pressed:


fab.clicks





0


You can bind to the Button to trigger actions when the Button is clicked.


indicator = pmui.LoadingSpinner(value=False, size=25)

def update_indicator(event):
    if not event:
        return
    indicator.value = not indicator.value

pn.bind(update_indicator, fab, watch=True)

pn.Column(fab, indicator)







            
            
You can also bind to the clicks parameter


def handle_click(clicks):
    return f'You have clicked me {clicks} times'

pn.Column(
    fab,
    pn.bind(handle_click, fab.param.clicks),
)







            
            
Alternatively you can use the on_click method to trigger a function when the button is clicked:


text = pmui.TextInput(value='Ready')

def b(event):
    text.value = 'Clicked {0} times'.format(button.clicks)
    
fab.on_click(b)
pn.Row(fab, text)







            
            






Positioning#


A floating action button generally should use ‘fixed’, ‘absolute’ or ‘sticky’ positioning. To achieve this you can set the styles attribute:


position = {
    "position": "absolute",
    "bottom": "0",
}

pn.Column(
    pmui.Fab(color='default', styles=dict(position='absolute')),
    pmui.Fab(color='primary', styles=dict(position='absolute', right="0")),
    pmui.Fab(color='secondary', styles=dict(position="absolute", bottom="0")),
    pmui.Fab(color='error', styles=dict(position="absolute", bottom="0", right="0")),
    height=200, sizing_mode='stretch_width'
)







            
            
To position it on a scrollable container use 'sticky':


sticky_fab = pmui.Fab(color='primary', styles={'position': 'sticky', 'left': '100%', 'bottom': '12px'})

pn.Column(
    *range(100),
    sticky_fab,
    scroll='y',
    width=200,
    height=300
)







            
            
and to absolutely position it on the page use 'fixed'.







Styles#


The color of the button can be set by selecting one of the available color values and the variant can be 'circular' or 'extended':


pn.Row(
    *(pn.Column(*(pmui.Fab(label=f'{color=}, {variant=}', color=color, variant=variant)
                  for color in pmui.Fab.param.color.objects))
    for variant in pmui.Fab.param.variant.objects)
)







            
            




Icons#


By default the circular variant will pnly display an icon, which can be defined as an icon loaded from Material Icons:


pn.Row(
    pmui.Fab(icon='warning', color='warning', label='WARNING'),
    pmui.Fab(icon='bug_report', color='error', label='ERROR')
)







            
            
or as an explicit SVG:


cash_icon = """
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cash" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <path d="M7 9m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" />
  <path d="M14 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
  <path d="M17 9v-2a2 2 0 0 0 -2 -2h-10a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h2" />
</svg>
"""

pmui.Fab(icon=cash_icon, color='success', label='Checkout', icon_size='2em', variant='extended')







            
            




Controls#


The Fab widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:


pn.Row(fab.controls(jslink=True), fab)







            
            


Download this notebook from GitHub (right-click to download).