from awesome_panel_extensions.awesome_panel.notebook import Header
Header(folder="examples/reference/frameworks/material", notebook="MaterialButton.ipynb")
The Material Button
widget
name
(str): The label of the Buttonbutton_type
(str): A button theme. One of 'default', 'primary', 'success', 'info'or 'danger'.icon
(str): The name of a Material icon. You can see the full list here.trailing_icon
(bool): If True the icon (if any) comes after the text. Defaults to False
.unelevated
(bool): Whether or not the button is unelevated. Defaults to False
.raised
(bool): Whether or not the button is raised. Defaults to False
.clicks
(int): The number of times the Button has been clickedThe Material Button
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, Button, Stylesheet
pn.config.sizing_mode = "stretch_width"
pn.extension()
Let's explore the parameters of the material.Button
.
button = Button(name="Click me", icon="favorite", sizing_mode="fixed", width=200)
button_parameters = ["name", "button_type", "disabled", "unelevated", "raised", "icon", "trailing_icon", "clicks", "width", "sizing_mode"]
settings_pane = pn.WidgetBox(pn.Param(button, parameters=button_parameters, show_name=False))
extension = Extension() # Loads the MWC JS, Material Fonts and MDC style sheet
stylesheet = Stylesheet()
app=pn.Row(
extension, stylesheet, button, settings_pane
)
app
Let's verify that that Material Button
can be used as a widget by pn.Param
.
WIDGETS = {
"click_me": {
"type": Button, "raised": True, "unelevated": False, "sizing_mode": "fixed", "width": 200, "icon": "3d_rotation"
}
}
class ParameterizedApp(param.Parameterized):
click_me = param.Action()
clicks = param.Integer(default=0)
view = param.Parameter()
def __init__(self, **params):
super().__init__(**params)
self.view = pn.WidgetBox(pn.Param(self, parameters=["click_me", "clicks"], widgets=WIDGETS))
self.click_me = self._click_me
def _click_me(self,*events):
self.clicks+=1
ParameterizedApp().view
The material.Stylesheet
ships with an interactive style editor. Lets try it out!
Note the correspondance between button_type
and colors
button_type | color |
---|---|
default, primary | primary_color |
success | secondary_color |
warning, danger | error_color |
new_button = Button(name="Hello World")
pn.Row(button, pn.Column(pn.WidgetBox(button.param.button_type), stylesheet.editor))
The MWC Button on which the MaterialButton
is built is work in progress. Some of the known issues are