#!/usr/bin/env python # coding: utf-8 # In[ ]: import panel as pn import numpy as np import holoviews as hv pn.extension(sizing_mode = 'stretch_width') # For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired: # # * **`header`**: The header area of the HTML page # * **`sidebar`**: A collapsible sidebar # * **`main`**: The main area of the application # * **`modal`**: A modal area which can be opened and closed from Python # # These four areas behave very similarly to other Panel layout components and have list-like semantics. This means we can easily append new components into these areas. Unlike other layout components however, the contents of the areas is fixed once rendered. If you need a dynamic layout you should therefore insert a regular Panel layout component (e.g. a `Column` or `Row`) and modify it in place once added to one of the content areas. # # Templates can allow for us to quickly and easily create web apps for displaying our data. Panel comes with a default Template, and includes multiple Templates that extend the default which add some customization for a better display. # # #### Parameters: # # In addition to the four different areas we can populate the default templates also provide a few additional parameters: # # * **`busy_indicator`** (BooleanIndicator): Visual indicator of application busy state. # * **`header_background`** (str): Optional header background color override. # * **`header_color`** (str): Optional header text color override. # * **`logo`** (str): URI of logo to add to the header (if local file, logo is base64 encoded as URI). # * **`site`** (str): Name of the site. Will be shown in the header. Default is '', i.e. not shown. # * **`site_url`** (str): Url of the site and logo. Default is "/". # * **`title`** (str): A title to show in the header. # * **`theme`** (Theme): A Theme class (available in `panel.template.theme`) # * **`sidebar_width`** (int): The width of the sidebar in pixels. Default is 370. # # ________ # In this case we are using the `MaterialTemplate`, built on [Material Components for the web](https://material.io/develop/web/), which is a CSS framework that provides a lot of built in stylings to create a smooth layout. Here is an example of how you can set up a display using this template: # In[ ]: material = pn.template.MaterialTemplate(title='Material 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) material.sidebar.append(freq) material.sidebar.append(phase) material.main.append( pn.Row( pn.Card(hv.DynamicMap(sine), title='Sine'), pn.Card(hv.DynamicMap(cosine), title='Cosine') ) ) material.servable(); #

MaterialTemplate with DefaultTheme

# #
#

MaterialTemplate with DarkTheme

# # The app can be displayed within the notebook by using `.servable()`, or rendered in another tab by replacing it with `.show()`. # # Themes can be added using the optional keyword argument `theme`. Each template comes with a DarkTheme and a DefaultTheme, which can be set `MaterialTemplate(theme=DarkTheme)`. If no theme is set, then DefaultTheme will be applied. # # It should be noted that Templates may not render correctly in a notebook, and for the best performance they should ideally be deployed to a server.