Panels 1.0 - Stylesheets and Button icons example

Showcase
1

With Panel 1.0 its now possible to add

  • an icon to a Button
  • a stylesheet to any Panel component.

I would like to showcase how this makes it possible to add rotating icons to your button to catch attention or indicate activity.

If you like this example please like or share this tweet or this linkedin post. Thanks.

panel-1-stylesheets-icons

import panel as pn

pn.extension()

SPIN_CSS = """
.bk-btn {
    font-size: 50px;
}
@keyframes icon-rotation {
  from {transform: rotate(0deg);} to {transform: rotate(359deg);}
}
.bk-TablerIcon {animation: icon-rotation 2s infinite linear;}
"""

button = pn.widgets.Button(
    name="Loading",
    icon="progress",
    stylesheets=[SPIN_CSS],
    height=200,
    width=400,
    sizing_mode="fixed",
    button_style="outline",
    button_type="primary",
)

layout = pn.Column(
    pn.Row(button, button.clone(disabled=True)),
    pn.Row(
        button.clone(name="Generate", icon="robot"),
        button.clone(name="Generate", icon="robot", disabled=True),
    ),
)

pn.template.FastListTemplate(
    site="Panel",
    title="New in v1.0 - Stylesheets and Button icons",
    main=[layout],
    main_layout=None,
    accent="#F08080",
).servable()

Check out the Panel 1.0 Release Notes to discover all the new features.

5 Likes