from awesome_panel_extensions.awesome_panel.notebook import Header
Header(folder="examples/reference/frameworks/material", notebook="MaterialSelect.ipynb")
The Material Select
widget allows selecting a value from a list or dictionary of options by selecting it from a dropdown menu.
Core
options
(list or dict): A list or dictionary of options to select fromoptions (list or dict):
value
(object): The current value; must be one of the option valuesDisplay
disabled
(boolean): Whether the widget is editable
name
(str): The title of the widget
outlined
(str):
The Material Select
has the same layout and styling parameters as most other widgets. For example width
and sizing_mode
.
Let's start by importing the dependencies
import param
import panel as pn
from awesome_panel_extensions.frameworks.material import Extension, Select, Stylesheet
pn.config.sizing_mode = "stretch_width"
pn.extension()
Let's explore the parameters of the material.Select
.
options = ["Data", "Models", "Analytics"]
select = Select(name="Select me", options=options, value="Analytics", icon="favorite", sizing_mode="fixed", width=200)
select_parameters = ["value", "options", "disabled", "name", "outlined", "icon"]
settings_pane = pn.WidgetBox(pn.Param(select, parameters=select_parameters, show_name=False))
extension = Extension() # Loads the MWC JS, Material Fonts and MDC style sheet
stylesheet = Stylesheet()
app=pn.Row(
extension, stylesheet, select, settings_pane
)
app
Let's verify that that Material Select
can be used as a widget by pn.Param
.
WIDGETS = {
"select_me": {
"type": Select, "sizing_mode": "fixed", "width": 200, "icon": "3d_rotation"
}
}
class ParameterizedApp(param.Parameterized):
select_me = param.ObjectSelector(default="Models", objects=["Data", "Models", "Analytics"])
view = param.Parameter()
def __init__(self, **params):
super().__init__(**params)
self.view = pn.WidgetBox(pn.Param(self, parameters=["select_me"], widgets=WIDGETS), height=300)
ParameterizedApp(name="Select App").view
The material.Stylesheet
ships with an interactive style editor. Lets try it out!
pn.Row(select, pn.Param(stylesheet, parameters=["primary_color"]), height=250)