Panel | Tutorial 11 Templates(Unfinished)

Using default templates

• header: The header area of the HTML page
• sidebar: A collapsible sidebar
• main: The main area of the application
• modal: A modal, i.e. a dialog box/popup window

Supported Templates

• MaterialTemplate: Built on Material Components for the web
• BootstrapTemplate: Built on Bootstrap v4
• VanillaTemplate: Built using pure CSS without relying on any specific framework
• FastListTemplate: Built on the Fast UI framework using a list-like API
• FastGridTemplate: Built on the Fast UI framework using grid-like API
• GoldenTemplate: Built on the Golden Layout framework

Using Templates

Two ways:

1. Explicitly construct the template
2. Change the global template

Explicit Constructor

instantiate them directly and adding components to the different parts of the template directly.

bootstrap = pn.template.BootstrapTemplate(title='Bootstrap Template')

xs = np.linspace(0, np.pi)
freq = pn.widgets.FloatSlider(name="Frequency", start=0, end=10, value=2)
phase = pn.widgets.FloatSlider(name="Phase", start=0, end=np.pi)

@pn.depends(freq=freq, phase=phase)
def sine(freq, phase):
    return hv.Curve((xs, np.sin(xs*freq+phase))).opts(
        responsive=True, min_height=400)

@pn.depends(freq=freq, phase=phase)
def cosine(freq, phase):
    return hv.Curve((xs, np.cos(xs*freq+phase))).opts(
        responsive=True, min_height=400)

bootstrap.sidebar.append(freq)
bootstrap.sidebar.append(phase)

bootstrap.main.append(
    pn.Row(
        pn.Card(hv.DynamicMap(sine), title='Sine'),
        pn.Card(hv.DynamicMap(cosine), title='Cosine')
    )
)

Global Template

Another simpler approach is to set the global template can be set via the pn.extension() call.

pn.extension(template='bootstrap')

freq = pn.widgets.FloatSlider(name="Frequency", start=0, end=10, value=2).servable(area='sidebar')
phase = pn.widgets.FloatSlider(name="Phase", start=0, end=np.pi).servable(area='sidebar')

@pn.depends(freq=freq, phase=phase)
def sine(freq, phase):
    return hv.Curve((xs, np.sin(xs*freq+phase))).opts(
        responsive=True, min_height=400)

@pn.depends(freq=freq, phase=phase)
def cosine(freq, phase):
    return hv.Curve((xs, np.cos(xs*freq+phase))).opts(
        responsive=True, min_height=400)

pn.Row(
    pn.Card(hv.DynamicMap(sine), title='Sine'),
    pn.Card(hv.DynamicMap(cosine), title='Cosine')
).servable(area='main') # Note 'main' is the default