{ "cells": [ { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import panel as pn\n", "import numpy as np\n", "import holoviews as hv\n", "\n", "pn.extension(sizing_mode = 'stretch_width')" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "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 three main content areas on the page, which can be populated as desired:\n", "\n", "* **`header`**: The header area of the HTML page\n", "* **`sidebar`**: A collapsible sidebar\n", "* **`main`**: The main area of the application\n", "* **`modal`**: A modal area which can be opened and closed from Python\n", "\n", "These three 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. \n", "\n", "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.\n", "\n", "#### Parameters:\n", "\n", "In addition to the four different areas we can populate, the `FastListTemplate` also provide additional parameters:\n", "\n", "* **`title`** (str): A title to show in the header. Also added to the document head meta settings and as the browser tab title.\n", "* **`site`** (str): Name of the site. Will be shown in the header. Default is '', i.e. not shown.\n", "* **`site_url`** (str): Url of the site and logo. Default is \"/\".\n", "* **`theme`** (Theme): A Theme class (available in `panel.template`. One of `DefaultTheme` or `DarkTheme`). \n", " - For convenience you can provide \"default\" or \"dark\" string to the constructor.\n", " - If you add `?theme=default` or `?theme=dark` in the url this will set the theme unless explicitly declared\n", "* **`favicon`** (str): URI of favicon to add to the document head (if local file, favicon is base64 encoded as URI).\n", "* **`logo`** (str): URI of logo to add to the header (if local file, logo is base64 encoded as URI).\n", "* **`sidebar_footer`** (str): Can be used to insert additional HTML. For example a menu, some additional info, links etc.\n", "* **`enable_theme_toggle`** (boolean): If `True` a switch to toggle the Theme is shown. Default is `True`.\n", "* **`header_background`** (str): Optional header background color override.\n", "* **`header_color`** (str): Optional header text color override.\n", "* **`header_accent_base_color`** (str): Optional header accent base color override.\n", "* **`accent_base_color`** (str): Optional body accent base color override.\n", "* **`config`** (TemplateConfig): Contains configuration options similar to `pn.config` but applied to the current Template only. (Currently only `css_files` is supported)\n", "* **`main_max_width`** (str): The maximum width of the main area. For example '800px' or '80%'. If the string is '' (default) no max width is set.\n", "* **`busy_indicator`** (BooleanIndicator): Visual indicator of application busy state.\n", "\n", "* **`sidebar_width`** (int): The width of the sidebar in pixels. Default is 330.\n", "________" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "In this case we are using the `FastListTemplate`, built using the [Fast.design](https://www.fast.design/) framework. Here is an example of how you can set up a display using this template:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "template = pn.template.FastListTemplate(title='FastListTemplate')\n", "\n", "xs = np.linspace(0, np.pi)\n", "freq = pn.widgets.FloatSlider(name=\"Frequency\", start=0, end=10, value=2)\n", "phase = pn.widgets.FloatSlider(name=\"Phase\", start=0, end=np.pi)\n", "\n", "@pn.depends(freq=freq, phase=phase)\n", "def sine(freq, phase):\n", " return hv.Curve((xs, np.sin(xs*freq+phase))).opts(\n", " responsive=True, min_height=400, title=\"Sine\")\n", "\n", "@pn.depends(freq=freq, phase=phase)\n", "def cosine(freq, phase):\n", " return hv.Curve((xs, np.cos(xs*freq+phase))).opts(\n", " responsive=True, min_height=400, title=\"Cosine\")\n", "\n", "template.sidebar.append(pn.pane.Markdown(\"## Settings\"))\n", "template.sidebar.append(freq)\n", "template.sidebar.append(phase)\n", "\n", "template.main.append(hv.DynamicMap(sine),)\n", "template.main.append(hv.DynamicMap(cosine))\n", "template.servable();" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "

FastListTemplate with DefaultTheme

\n", "\n", "
\n", "

FastListTemplate with DarkTheme

\n", "" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The app can be displayed within the notebook by using `.servable()`, or rendered in another tab by replacing it with `.show()`. \n", "\n", "Themes can be added using the optional keyword argument `theme`. This template comes with a `DarkTheme` and a `DefaultTheme`, which can be set via `FastlistTemplate(theme=DarkTheme)`. If no theme is set, then `DefaultTheme` will be applied.\n", "\n", "It should be noted **this template currently does not render correctly in a notebook**, and for the best performance the should ideally be deployed to a server." ] } ], "metadata": { "kernelspec": { "display_name": "Python 3", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.8.4" } }, "nbformat": 4, "nbformat_minor": 4 }