SpeedDial#

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

import panel as pn
import panel_material_ui as pmui

pn.extension()

The SpeedDial component is part of the Menu family of components. Menu components provide a structured way for users to navigate or choose between a series of defined items. In the case of SpeedDial, these items represent a series of menu options.

Each item in the SpeedDial list is defined by a dictionary with several supported keys:

Item Structure#

Each item can include the following keys:

label (str, required): The text displayed for the breadcrumb item.
icon (str, optional): An icon to display next to the label.
avatar (str, optional): An avatar or image to show beside the label.
secondary (str, optional): The secondary text, e.g. for describing the item.
color (str, optional): The color of the list item

These dictionaries are passed to the component via the items parameter as a list. When one of the items is selected it will be available on the value parameter.

Since only the allowed keys are synced with the frontend, other information can be stored in the item dictionaries.

Parameters:#

Core#

active (int): The index of the selected item.
disabled (boolean): Whether the menu is disabled.
items (list): Menu items to select from.
value (dict): The currently selected item.

Display#

color (str): The color of the bar, one of ‘default’, ‘primary’, ‘secondary’, ‘success’, ‘info’, ‘warning’, ‘danger’, ‘light’ or ‘dark’.
direction (Literal["right", "left", "up", "down"]): The direction the menu opens in.
icon (str): The icon to display when the menu is closed.
open_icon (str): The icon to display when the menu is open.

Styling#

sx (dict): Component level styling API.
theme_config (dict): Theming API.

speed_dial = pmui.SpeedDial(items=[
    {'label': 'Camera', 'icon': 'camera'},
    {'label': 'Photos', 'icon': 'photo'},
    {'label': 'Documents', 'icon': 'article'},
], active=2, margin=(50, 20))

speed_dial

Clicking on a particular item will highlight it and set both active and value parameters:

speed_dial.value

{'label': 'Documents', 'icon': 'article'}

Display Options#

`color`#

pn.Row(*(
    speed_dial.clone(color=color)
    for color in pmui.SpeedDial.param.color.objects
))

`direction`#

pn.Row(*(
    speed_dial.clone(direction=direction)
    for direction in pmui.SpeedDial.param.direction.objects
))

`persistent_tooltips`#

pn.Column(speed_dial.clone(persistent_tooltips=True, direction='down', margin=(20, 180)), height=260)

Controls#

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

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